<Figma>Prototype 기능으로 자연스럽게 넘어가는 화면

프로토타이핑은 일차원적인 목적을 가지고 만들게 된다. 오직 상대방에게 나의 생각을 효과적으로 전달하기 위해서이다. 그래서 Figma로 발표하게 될 때 사용하거나 구현하게 될 때 어떻게 보일지 미리 볼 수 있으며 화면 전환이 매끄러운지를 확인 할 수 있다.

 오늘은 그중에서도 가장 간단한 화면 전환 애니메이션에 대해 알아볼 예정이다.

---

프로토타입 기능으로 화면 전환 애니메이션 만들기

우리가 배워야 할 내용은 크게 두 가지이다. 하나는 '어떤 행위를 했을 때 넘어가는가?' 이고 나머지 하나는 '어떤 동작으로 넘어가는가?' 이다.

 

1. 화면 전환 트리거

화면을 전환시키는 트리거로 클릭이나 드래그, 호버링 등이 있을 수 있다. 여러가지가 있지만 우리는 클릭, 드래그, 호버링,  이 세 가지만 짚고 넘어가겠다.

 

1. 클릭 (On Tap)

가장 단순한 개념이며 가장 많이 사용되고 있는 트리거이다. 우리가 원하는 버튼에 마우스를 올려두고서 버튼을 누르는 행위 그 자체이다. 참고로 Figma에서는 모든 트리거가 '~하는 중에' 작동한다는 가정이어서 진행중인 동사로 나와있다. 그래서 클릭도 'On tap' 이라고 나와있다.  

 

2. 드래그 (On drag)

드래그는 큰 화면으로 보고 싶지만 하나 하나 클릭해서 보기 힘들 때 사용된다. 예를 들면 카카오톡의 '친구 프로필 보기'가 있다. 프로필을 보고 뒤로가서 다른 사람을 보기에는 답답할 수 있기에 드래그로 바로 다음 사람을 볼 수 있는 것이다. 혹은 카드형태의 화면을 넘겨 화면 밖의 있는 것들을 끌고 오는 형태의 애니메이션도 만들 수 있다.

 

3. 호버링 (While hovering)

호버링은 공중에 떠있는 상태를 의미하는데 헬리콥터나 벌새와 같은 이미지를 떠올리면 된다. 마우스가 객체 위에 떠있는 것이다. 이것은 우리가 마우스를 올리고 있을 때 '클릭할 수 있음'을 강조하거나 미리보기와 같은 기능을 제공할 수 있다. 

 

 

2. 애니메이션의 종류

애니메이션의 종류는 많지만 그중에서 Instant 와 Smart animation을 알아볼 것이다.

 

1. Instant (Animation)

Instant는 '즉각적인'이라는 뜻으로 클릭하는 즉시 화면이 전환되는 것을 의미한다.

 

2. Smart animation 

스마트 애니메이션은 다음 화면으로 아주 부드럽게 넘겨주는 역할을 한다. 그래프의 상승, 색깔의 부드러운 전환, 로딩화면 등을 만들 수 있다. 

---

여기서 잠깐 나오는 애니메이션 설정창을 살펴보겠다.

 

맨위에 있는 버튼은 트리거를 설정할 수 있는 창이고 클릭했을 때 오른쪽의 사진과 같이 여러가지 트리거 종류가 나오게 된다.

 

 

바로 아래에 있는 버튼은 어떤 화면 전환을 할 지를 선택하는 것이고 'Navigate to' 외엔 많이 안 쓰니 일단 이것만 사용하도록 하겠다.

 

 

그보다 밑에 있는 버튼은 화면전환 방법이며 아까 말한 Instant와 Samrt animation을 여기서 볼 수 있다.

 

---

3. 직접 만들어보기

1. 클릭에 의한 화면 전환

왼쪽 사진처럼 본인이 보여주고 싶은 화면(Fame)을 두 개 만든다. 그리고 Prototype을 클릭하면

Prototype 모드에서 화면끼리 연결하는 모습

Frame에 마우스를 Hovering 했을 때 + 버튼이 뜨게 되는데 이 버튼을 원하는 화면까지 드래그하면 애니메이션을 설정할 수 있는 창이 나온다.

 

1. Instant 화면 전환

클릭하면 바로 화면이 넘어간다.

본인이 만든 Frame을 클릭하고 위족 사진에 보이는 플레이 버튼을 클릭하면 아래쪽 영상과 같이 클릭하며 애니메이션을 살펴볼 수 있다.

 

이때 화면이 아닌 버튼을 클릭하여 넘어가고 싶다면 아래 자료처럼 시작점을 버튼으로 만들면 된다.

 

2. Samrt animation  화면 전환

 

Smart animation을 이용해 클릭했을 때 사진이 커지는 애니메이션을 만들어 보겠다. 

 

위쪽 사진과 같이 설정하고 애니메이션을 보면 아래쪽과 같은 결과물을 만들 수 있다.

---

2. 호버링에 의한 화면 전환 (전부 Smart animation)

내가 사진 위에 마우스를 호버링할 때 사진이 확대되게 보이게 하고 싶다면 호버링에 Smart animation을 사용하여 부드럽게 확대되게 만들면 된다. 

 

위쪽 사진과 같은 옵션으로 Prototyping을 하면 아래쪽과 같은 결과물이 나온다.

 

---

3. 드래그에 의한 화면 전환 (전부 Samrt animation)

 

위쪽 그림과 같은 옵션으로 애니메이션을 만들게 되면 아래쪽 영상과 같이 드래그하여 화면을 전환할 수 있다. 본래 위치해 있던 카드가 드래그함에 따라 같이 왼쪽으로 빠지면 더욱 자연스럽겠지만 그것은 복잡하므로 다음에 자세한 내용으로 다뤄보도록 하겠다.

 

 

 

---

마무리글

오늘도 Figma 기능 중에서 Prototype에 대한 기초적인 것들을 배워봤다. 생각보다 간단하고 금방 익힐 수 있다. 초보 기준에서 작성한 글이기 때문에 사진과 영상을 최대한 활용했고 글도 구체적으로 쓰다보니 읽기에 난잡해 보일 수도 있을 것 같다. 

-끝-