애니메이션 UX와 Reduced Motion

먼저 던질 질문

움직임은 언제 이해를 돕고 언제 불편함을 만드는가

핵심 관점

애니메이션은 장식이 아니라 상태 변화의 방향과 원인을 설명할 때 가장 유용하다. 설명하지 못하는 움직임은 대부분 소음이 된다.

다양한 환경에서도 통하는 장면

Drawer가 오른쪽에서 열리며 공간 관계를 보여준다. 사용자는 현재 상태를 이해하고, 다음에 무엇을 할 수 있는지 알며, 행동의 결과를 어느 정도 예측할 수 있다.

항목 삭제 시 부드럽게 사라져 목록 변화가 이해된다.

배제나 혼란이 생기는 장면

페이지 전환마다 큰 확대와 회전 효과를 넣어 집중을 방해한다.

Reduced Motion 설정을 무시한다.

접근성 사례와 근거

애니메이션은 방향과 원인을 설명할 때 유용하다

좋은 애니메이션은 화면을 화려하게 만드는 장식이 아니라 상태 변화의 원인을 설명한다. 패널이 어디에서 열렸는지, 항목이 어디로 이동했는지, 로딩이 진행 중인지 보여줄 때 사용자는 변화의 의미를 더 쉽게 이해한다.

Material Design의 Motion 가이드는 모션을 사용자 이해와 전환의 연속성에 연결한다. 하지만 너무 빠르거나 반복적인 애니메이션은 피로와 멀미를 유발할 수 있다.

실무 해석

사용자가 운영체제에서 Reduce Motion을 켰다면 제품은 큰 이동, 자동 재생, 반복 효과를 줄이는 대체 표현을 제공해야 한다. 애니메이션을 줄여도 상태 변화는 텍스트와 즉각적인 전환으로 이해 가능해야 한다.

접근성 판단 기준

• 움직임이 어떤 상태 변화를 설명하는지 확인한다
• 거리, 속도, 반복 횟수를 줄인다
• Reduced Motion 대안을 제공한다

자주 빠지는 함정

모션이 세련돼 보인다는 이유만으로 넣으면 사용자는 정보보다 움직임을 먼저 처리해야 한다. 특히 반복 모션은 피로를 만든다.

추가로 비교할 접근성 사례

• Drawer 전환, 삭제 애니메이션, 페이지 전환 모션 사례를 비교한다
• 과한 모션으로 불편한 사례를 찾는다
• prefers-reduced-motion 적용 사례를 모은다

포용성 설계 질문

• 모션이 필요한 이유와 줄여야 하는 이유를 모두 다뤘는가
• Reduced Motion 구현 방식을 포함했는가

출처

• Material Design 3, Motion: https://m3.material.io/styles/motion/overview
• W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
• web.dev, Web Vitals: https://web.dev/articles/vitals
• Apple Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/