왜 필요한가
확대되며 날아오는 전환, 배경이 다른 속도로 움직이는 패럴랙스는 어떤 사람에게 어지러움과 메스꺼움을 일으켜요. 보스와 동료들(2008)은 눈이 본 움직임과 몸이 느낀 움직임이 어긋날 때 멀미가 생긴다고 설명해요. 그래서 iOS와 안드로이드에는 동작 줄이기 설정이 있고, WCAG 2.2(W3C, 2023)의 2.3.3은 상호작용으로 생기는 움직임을 끌 수 있게 하라고 권해요. 다크 모드처럼 사용자의 시스템 설정을 따르는 것이 핵심이에요.
웹과 앱 구현
웹에서는 prefers-reduced-motion 미디어 쿼리로 설정을 읽어요(MDN, n.d.). W3C 기법 C39처럼 'reduce'일 때 움직임을 끄거나, 기본을 정적으로 두고 'no-preference'일 때만 움직임을 더하는 방식이 안전해요. iOS는 동작 줄이기 값을, 안드로이드는 애니메이션 배율을 확인해요(Apple, n.d.). 자동 재생 영상과 반복 애니메이션은 멈추고, 스크롤에 묶인 패럴랙스는 꺼요.
없애기보다 바꾸기
움직임을 전부 없애면 무엇이 바뀌었는지 놓칠 수 있어요. 창과 웅가(1993)는 애니메이션이 변화의 연속성을 알려준다고 했어요. 그래서 큰 이동·확대는 짧은 페이드나 색 변화로 바꾸고, 마이크로인터랙션의 상태 변화는 남겨요(web.dev, n.d.). 진행 표시처럼 의미 있는 움직임은 유지하되 속도를 늦춰요. 설정을 켠 채 주요 화면을 직접 넘겨보며 테스트해요.
자주 묻는 질문
- 모션 감소면 애니메이션을 다 꺼야 하나요?
- 아니요. 큰 이동·확대·패럴랙스는 줄이고, 의미를 전하는 변화는 페이드처럼 부드럽게 바꿔요.
- 어떻게 테스트하나요?
- 기기 설정이나 브라우저 개발자 도구에서 동작 줄이기를 켜고 주요 화면을 넘겨봐요.
출처 검토일: 2026-10-27
참고문헌
- MDN Web Docs. (n.d.). prefers-reduced-motion. 운영체제의 '동작 줄이기' 설정을 CSS에서 읽는 미디어 쿼리 문서라, 웹 애니메이션을 끄거나 줄일 때 참고하면 도움이 돼요.
- Apple. (n.d.). Motion. Human Interface Guidelines. 목적 있는 움직임과 동작 줄이기 대응을 다뤄, iOS 전환 효과를 바꿀 때 참고하면 도움이 돼요.
- web.dev. (n.d.). prefers-reduced-motion: Sometimes less movement is more. 줄인 모드에서 무엇을 남기고 뺄지 예시가 많아, 대체 전환을 고를 때 참고하면 도움이 돼요.
- W3C. (n.d.). C39: Using the CSS prefers-reduced-motion query to prevent motion. WCAG Techniques. 미디어 쿼리로 기준을 충족하는 공식 기법이라, 구현이 기준에 맞는지 확인할 때 참고하면 도움이 돼요.
- Bos, J. E., Bles, W., & Groen, E. L. (2008). A theory on visually induced motion sickness. Displays, 29(2), 47–57. https://doi.org/10.1016/j.displa.2007.09.002 화면 움직임이 멀미를 일으키는 원리를 설명해, 큰 패럴랙스·확대 전환이 왜 문제인지 이해할 때 참고하면 도움이 돼요.
- Chang, B.-W., & Ungar, D. (1993). Animation: From cartoons to the user interface. In Proceedings of UIST '93 (pp. 45–55). ACM. https://doi.org/10.1145/168642.168647 애니메이션이 변화의 연속성을 알려준다는 고전 논문이라, 움직임을 없애는 대신 페이드로 바꾸는 근거로 참고하면 도움이 돼요.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 상호작용으로 생긴 움직임을 끌 수 있게 하라는 2.3.3 기준이 있어, 범위를 정할 때 참고하면 도움이 돼요.