CSS와 JS에서 prefers-reduced-motion 사용하기

운영 체제에서는 사용자가 움직임을 줄이도록 설정할 수 있습니다. prefers-reduced-motion 미디어 기능은 이 선택을 사이트에 그대로 전달합니다. 🎚️

사용자는 macOS, iOS, Windows, Android의 OS 설정에서 움직임 줄이기를 켭니다. 여러분이 할 일은 이 선택을 의심하는 것이 아니라 반영하는 것입니다.

이 기능은 두 상태 중 하나를 보고합니다. 애니메이션을 차분하게 줄이라는 뜻의 reduce이거나, 그 외 모든 사용자를 위한 no-preference입니다.

차분한 스타일을 미디어 쿼리로 감싸세요. 사용자가 움직임을 reduce하도록 요청하면 전환 효과를 거의 없앨 수 있습니다.

움직임을 차분하게 만든다고 해서 페이지를 정지시킬 필요는 없습니다. 큰 슬라이드 효과를 부드러운 페이드로 바꾸면 인터페이스의 생동감은 유지하면서도 갑작스럽게 움직이지 않게 할 수 있습니다.

일반적인 애니메이션 스타일을 만든 다음 쿼리를 추가해 효과를 줄이세요. 이 점진적 접근 방식은 기본 경험을 풍부하게 유지합니다.

스크립트로 애니메이션을 실행할 때는 브라우저에 직접 물어보세요. matchMedia는 사용자가 현재 움직임 감소를 선호하는지 알려 줍니다.

사용자는 세션 중간에도 설정을 바꿀 수 있습니다. 변경 사항을 감지해 JavaScript 애니메이션이 새 설정을 새로 고침 없이 반영하게 하세요.

부드러운 스크롤도 움직임에 해당합니다. 쿼리 안에서 scroll-behavior를 auto로 설정하면, 요청한 사용자에게는 이동이 즉시 이루어집니다.

이 기능은 있으면 좋은 선택 사항이 아닙니다. 일부 사용자에게는 큰 움직임이 실제로 메스꺼움이나 어지럼증을 일으킬 수 있으므로 요청을 존중해야 합니다.

확신이 서지 않을 때는 가장 안전한 방식을 기본값으로 삼으세요. 차분한 움직임을 우선해도 누구에게도 해가 없으며 모든 사용자가 편안하게 페이지를 이용할 수 있습니다.

CSS에서 또는 matchMedia를 사용해 prefers-reduced-motion을 읽고, 페이지의 애니메이션을 없애기보다는 차분하게 줄이세요. 설정이 실시간으로 바뀌는 경우도 반영해야 합니다. ✅