UI 애니메이션은 절제할 때 소통이 된다

Nielsen Norman Group의 Page Laubheimer는 UI 모션을 장식이 아니라 소통 수단으로 다룬다. 주변시는 움직임에 민감해서 작은 애니메이션도 쉽게 시선을 빼앗고, 그래서 짧고 은은하며 방해되지 않게 쓰는 것이 기본 원칙이다.

"Motion and animation can be helpful and communicative, if used with restraint."Nielsen Norman Group, The Role of Animation and Motion in UX

왜 중요한가

글은 모션의 쓸모를 네 가지로 나눈다. 마이크로인터랙션에 대한 피드백, 상태 변화 전달, 화면 이동의 공간 은유, 그리고 클릭할 수 있다는 단서(시그니파이어)다. 정적인 피드백은 변화맹(change blindness) 때문에 놓치기 쉬워서 짧은 움직임이 이를 보완하지만, 목적 없는 애니메이션은 주의를 가로채는 다크 패턴이 될 수도 있다.

실무 적용

모션을 넣기 전에 "이 움직임이 사용자에게 무엇을 알려주는가"를 한 문장으로 답할 수 있어야 한다. 답이 "멋있어서"라면 빼는 편이 낫다. 모션 토큰(길이·이징)을 디자인 시스템에 정의해 두면 팀 전체가 같은 절제 기준을 쓸 수 있다.

교차 참고

• NN/g: Animation for Attention and Comprehension — 애니메이션이 주의와 이해를 돕는 조건을 다룬다.
• NN/g: Scroll-Triggered Text Animations Delay Users — 스크롤에 반응하는 텍스트 애니메이션이 읽기를 늦춘다는 점을 지적한다.

Wemeet의 관점

Wemeet은 마케팅 사이트일수록 모션 욕심이 커진다고 본다. 첫 화면의 인상보다 사용자가 다음 행동을 이해하는 속도가 전환에 더 직접적이라, 우리는 모션 하나마다 역할을 적어 두고 역할이 없으면 지운다. 2020년에 나온 글이지만 원칙은 지금도 유효하다.