Reduced motion, 2014 Apple iOS 7 후속, 멀미 완화

한 줄로

iOS 7의 화려한 시차 효과(parallax)에 멀미 호소가 쏟아졌습니다. Apple이 응답한 것이 "동작 줄이기" 설정이었습니다.

어디서 왔나

2013년 iOS 7 출시. Jony Ive의 플랫 디자인과 함께 도입된 새로운 시각 효과 parallax입니다. 사용자가 폰을 기울이면 아이콘이 배경보다 살짝 다른 속도로 움직였습니다. 깊이감 연출이었습니다.

문제가 발생했습니다. 일부 사용자가 메스꺼움, 어지러움, 두통을 호소했습니다. 의학적으로 이는 전정 장애(vestibular disorder) 사용자들에게 흔한 증상입니다. 멀미와 비슷한 메커니즘입니다. 눈은 움직임을 보는데 몸은 가만히 있을 때 뇌가 혼란을 겪습니다.

Apple은 2014년 iOS 8에서 Reduced Motion 설정을 도입했습니다. 설정 → 접근성 → 동작 → 동작 줄이기. 켜면 parallax가 꺼지고, 페이지 전환도 fade로 단순해집니다.

이후 모든 OS와 웹 표준이 이 개념을 따라갔습니다.

CSS에서

2017년 CSS Media Queries Level 5가 prefers-reduced-motion 미디어 쿼리를 표준화했습니다.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

사용자가 OS 설정에서 동작 줄이기를 켰다면, 모든 애니메이션을 거의 0초로 단축합니다. 부드러운 페이드 외 화면 흔들기, 시차, 확대 같은 강한 효과는 제거합니다.

누가 영향받나

• 전정 장애 환자: 약 1%.
• 편두통 환자: 자주 영향받음.
• 뇌진탕 회복 중: 일시적으로.
• 단순 선호: 일부 사용자는 그냥 부드러운 게 싫음.

총합하면 사용자의 10% 이상이 reduced motion을 켤 가능성이 있다는 추정도 있습니다.

바이브 메이커가 챙길 한 가지

본인 사이트에 큰 애니메이션(시차, 자동 회전, 빠른 트랜지션)이 있다면, prefers-reduced-motion 쿼리로 옵션을 제공해야 합니다. CSS 5줄이면 끝나는 작업인데, 사용자의 10%를 보호합니다. 접근성의 가장 쉬운 영역 중 하나입니다.

관련

a11y · Disney 12 principles · Easing curves