애니메이션원칙 (Animation Principles)
쉽게 풀면
애니메이션을 더 자연스럽고 생동감 있게 만들기 위한 기본 규칙들이다. 만화영화를 자연스럽게 보이게 만들던 오래된 원칙들이, 오늘날 앱 화면이 움직이는 방식을 설계할 때도 그대로 참고된다.
왜 중요한가
애니메이션 원리는 움직임이 자연스럽고 의미 있게 읽히도록 하는 규칙 모음으로, UI 모션 디자인에서 화면 전환이 어디서 와서 어디로 가는지를 사용자가 이해하게 만드는 근거입니다. 요소가 갑자기 나타나는 대신 가속·감속을 거치면 상태 변화를 추적하기 쉬워, 방향 감각 상실을 줄인다는 결과가 인터페이스 연구에서 확인됩니다.
논문에서는 이렇게 쓰입니다
고전 애니메이션 원칙을 디지털 인터페이스에 적용한 모션디자인 연구 사례이다.
물체가 눌리고 늘어나는 표현을 더하면 딱딱한 움직임도 훨씬 생동감 있게 느껴진다는 뜻이다.
조금 더 깊게 보면
가장 널리 인용되는 12가지 원리는 디즈니 애니메이터 Frank Thomas와 Ollie Johnston이 1981년 책에서 정리한 것으로, 원래 캐릭터 애니메이션용이라 UI에는 스쿼시·스트레치보다 이징, 예비 동작, 후속 동작 정도가 선택적으로 적용됩니다. 화려한 움직임이 곧 좋은 UX라는 오해가 흔한데, 300ms를 넘는 전환은 반복 사용 시 지연으로 느껴지고 전정기관에 민감한 사용자에게는 움직임 줄이기 옵션을 제공해야 합니다. 디즈니 애니메이터 프랭크 토머스와 올리 존스턴이 정리한 12가지 애니메이션 원칙(스쿼시와 스트레치, 선행 동작 등) 가운데 여러 항목이 오늘날 인터페이스 모션 설계에도 그대로 차용되어, 버튼을 누를 때 살짝 눌리는 스쿼시 효과나 등장 전 미세한 준비 동작 등으로 응용된다. 12원칙 중 후속 동작(follow-through)은 주요 움직임이 끝난 뒤에도 부차적 요소가 관성으로 조금 더 움직이다 멈추는 것을 가리키며, 버튼을 놓았을 때 살짝 튕기듯 멈추는 인터페이스 애니메이션에 그대로 응용된다.
주의할 점
애니메이션원칙은 본래 캐릭터 애니메이션을 위해 정립되었으나 UI 모션디자인에 선택적으로 응용되고 있다.
디즈니의 원칙은 원래 손으로 그린 셀 애니메이션을 위해 만들어졌으므로, 인터페이스에 적용할 때는 과장된 표현을 절제해 실용적 수준으로 조정해야 한다.