인터랙티브 애니메이션 종류 및 속도

이미지 출처: 피그마

� 인터랙티브 애니메이션이란? (Interactive animation)

e.g. 카톡에서 대화방 하나 터치 -> 대화방 화면이 우측으로부터 좌측으로 스스륵 슬라이딩 되면서 환면 전환 됨. 이렇게 화면 또는 어떤 요소가 전환되는 효과, 동작들을 인터랙션 애니메이션이라고 함.

* 유의어. 유사어. 트랜지션 (Transition). Motion

* 관련어: Duration. Easing.

사용자가 이것 저것 클릭했을 때 그 클릭한 대상이 뭔가 반응을 (색이 변한다거나 뭔가 움찔움찔하는 작은 움직임 등) 해주어야, '아, 내가 이것을 바로 클릭한게 맞구나..'하는걸 알 수 있기 때문에 클릭 가능한 요소들에는 그런 뭔가 변하는걸 넣어주는게 좋다. 전문용어로는 feedback 이라고 한다.

� 인터랙티브 애니메이션 종류

크고 작은 애니메이션들이 넘 많기 때문에, 디자인 작업시 일단은 다음 두가지 정도만 고려해도 충분할 듯 하다.

● 클릭 가능한 요소 element 에 넣어주어야 할 애니메이션:

버튼에 마우스 오버 시 효과, 클릭 시 효과 등등을 넣어주어야 함.

● 화면 전환 시 넣어주어야 할 애니메이션:

좌우 슬라이드로 화면 전환하게 해 줄 것인지, 위아래 슬라이드로 할 것인지. Fade in 할 것인지 등. '화면 전환'이라는 단어에는 '팝업'으로 인한 화면 전환도 포함됨.

---

� Duration 이란?

애니메이션 지속 시간. 그 해당 애니메이션이 몇 초동아 지속되는가 하는 것. 그 '몇 초'를 의미함. 지속시간에 따라 속도가 바뀌므로 개념 이해를 할 때는 '속도'라고 해석해도 큰 무리 없을 듯.

� Duration 종류

사용자가 보고 있는 디스플레이 화면의 크기에 따라, 컨텐츠 복잡한 정도 따라, 시작 또는 종료의 경우에 따라, 시선이나 마우스 커서의 이동 거리에 따라.. 등등 경우에 다르게 적용하는게 좋음.

* 필수로 알고 있어야 하는 내용

→ 1 ms (밀리초) = 0,001 s (초)

→ 100 ms = 0.1 s

● 모바일

- 일반적: 300ms 정도 (=0.3s. 초)

- 좀 더 크거나, 복잡하걸 때: 375ms 정도

- 뭔가 요소를(element) 클릭해서 화면 전환 시작할 때: 225ms

- 뭔가 요소를(element) 클릭해서 전환됐던 화면 닫을 때: 195ms

- 기타 1: 애니메이션 duration이 400ms 이상이 걸릴 경우는 느리다고 느껴질 수 있음.

- 기타 2: 시선, 마우스 커서 등의 이동 거리가 길수록 살짝 좀 더 느리게 설정해도 된다. .

● 노트북, PC

모바일보다 더 빠르고 단순해야 한다.

- 일반적: 150ms ~ 200ms

● 태블릿

모바일에서보다 30% 정도 더 느리게 설정할 것.

e.g. 300ms (모바일에서의 duration) → 390ms (태블릿에서의 duration)

● 스마트 워치

모바일에서보다 30% 정도 더 빠르게 설정할 것.

e.g. 300ms (모바일에서의 duration) → 210ms (태블릿에서의 duration)

★ Duration 정할 때, '모바일'을 기준으로 삼으면 좋을 듯.