피그마 프로토타입 (3) 애니메이션 설정하기

지난 포스팅에서 피그마 프로그램으로 웹 프로토타입 만드는 방법에 대해서 소개했었다.

2023.02.16 - [디자인/Figma] - 피그마 프로토타입 (1) 기본 화면 살펴보기

2023.02.17 - [디자인/Figma] - 피그마 프로토타입 (2) 인터렉션 트리거, 액션 설정하기

오늘은 인터렉션 트리거, 액션 설정에 이어 애니메이션을 설정하는 방법에 대해서 알아보려고 한다. 피그마에서 제공하는 프로토타입 기능을 제대로 배워두면, 별도 프로토타입 제작 프로그램을 사용하지 않아도 충분히 멋진 ui 프로토타입을 만들 수 있다고 생각한다.

---

애니메이션은 아래와 같이 액션이 None 상태일때는 설정할 수 없다. (당연하잖아?)

 

피그마 프로토타입 인터렉션 설정

 

어떻게 움직이게 할 것인지 선택을 해야 하단에 애니메이션 항목이 보여진다. 나는 액션을 Navigate to 상태로 두고 애니메이션 옵션들을 살펴 보았다.

 

피그마 프로토타입 애니메이션 설정

 

구성을 보면 바로 아래에는 미리보기 화면이 있고, 이어서 레이어의 움직임과 방향을 설정하는 버튼이 있다. 그리고 가속도 옵션(+지속 시간)도 설정이 가능하다. 먼저 선택할 수 있는 레이어 움직임 종류를 살펴 보았다.

 

피그마 프로토타입 애니메이션 레이어 움직임 설정

 

• Instant : 애니메이션 없음(바로 넘어감)
• Dissolve : 앞에 있는 프레임이 투명(투명도 0%)해지며 두번째 프레임으로 넘어감
• Smart animate : 같은 이름의 레이어가 자연스럽게 변경, 주로 사이즈가 달라지거나 색상이 바뀌는 효과를 보여줄 때 사용함
• Move in : A, B 프레임이 있으면 B 프레임이 슬라이드처럼 들어옴(프레임이 연결되어 있어야 함)
• Move out : A,B 프레임이 있으면 B 프레임이 슬라이드처럼 나감
• Push : A, B 프레임이 있으면 B 프레임이 A 프레임을 밀고 들어옴
• Slide in : A 프레임이 투명(투명도 0%)해지면서 B 프레임이 들어옴(Move in과 비슷)
• Slide out : B 프레임이 투명도 0 -> 100%로 변하면서 A 프레임이 나감

 

레이어 움직임을 선택한 후에 우측에 있는 방향키를 이용해서, 다음에 이어질 프레임이 어느 방향에서 들어오게 할 것인지 설정할 수 있다.

 

피그마 프로토타입 애니메이션 방향 설정

 

바로 이어서 Smart animate matching layers 라고 적힌 체크박스 옵션이 있는데 이 옵션을 선택하면 화면이 전환될 때 이름이 같은 레이어들은 바뀌지 않고 화면에 고정적으로 보여진다. smart animate의 경우, 활용도가 매우 높은 기능인 것 같다. 나중에 기회가 있으면 예제를 통해 더 자세히 다루어 보도록 하겠다.

 

Smart animate matching layers

 

레이어가 어떻게 움직일지 효과와 방향을 선택했다면 이번에는 이징 커브를 선택할 차례이다.

 

피그마 프로토타입 애니메이션 이징 커브

 

이 항목은 시작 프레임과 다음 프레임 사이의 전환 가속도를 결정한다. 이것을 키프레임이라고도 하는데, 키프레임은 화면 전환 같이 상호작용하는 두 개의 프레임일 수도 있고, 물채의 색상이 변하는 것과 같이 단일 프레임의 시작과 끝 상태일 수도 있다.

 

• Linear : 기본 가속도, 일정한 속도로 움직임
• Ease in : 천천히 시작하여 속도가 점점 빨라짐
• Ease out : 빠르게 시작되어 속도가 점점 느려짐
• Ease in and out : 천천히 시작하여 중간에는 빨라지고 다시 느려짐
• Ease in back : 애니메이션이 초기 키프레임의 값을 지나서 끝 부분에 도달할 때 가속함
• Ease out back : 애니메이션이 빠르게 시작되어 느려지다가 종료 키프레임의 값을 지나감
• Ease in and out back : 천천히 시작하여 초기 키프레임의 값을 지나면 빨라짐, 다시 느려지며 종료 키프레임 값을 지나감
• Custom bezier : 목록에서 커스텀 옵션을 선택하여 수동으로 설정하고 조정함
• Gentle : 부드럽게 지나감
• Quick : 빠르게 지나감
• Bouncy : 바운스되어 튕기는 효과
• Slow : 느리게 지나감
• Custom Spring : 사용자가 수동으로 스프링 애니메이션 곡선 설정 가능

 

Custom bezier 를 선택하면 아래과 같은 그래프가 나오는데, 그래프 끝의 동그란 부분을 드래그 해서 여러 곡선 타입을 미리보기로 확인해보면 움직임을 좀 더 잘 이해할 수 있을 것이다.

 

피그마 프로토타입 애니메이션 Custom bezier

 

이징 커브 우측에 있는 숫자는 지속시간을 나타내는데 300ms 는 0.3s라는 의미이고, 대부분 0.3s를 기본으로 한다. 

 

피그마 프로토타입 애니메이션 지속 시간

 

여기까지 Prototype 탭 화면의 Interactions 설정 옵션을 모두 살펴보았다. 나에게도 프로토타입의 애니메이션 설정에 대해서 알 수 있었던 유익한 시간이었다. 다만 이 정도 설명으로는 충분하지 않다고 생각되는 부분들이 있어서, 이것저것 예제를 만들어보며 공부를 조금 더 해야겠다는 생각이 들었다.

 

다음 포스팅에서는 Overflow scrolling 옵션과 프로토타입 재생 화면에서 제공하는 몇 가지 기능들에 대해서 소개할 예정이다. 오늘 공부 끝!