Reduced Motion 애니메이션 검사기

Reduced Motion 애니메이션 검사기 사용 가이드

확대·회전·패럴랙스 같은 화면 움직임은 전정 장애나 편두통이 있는 사람에게 어지러움을 일으킬 수 있습니다. 운영체제의 '동작 줄이기' 설정을 켠 사용자에게는 움직임을 줄여 주는 것이 좋으며, CSS에서는 @media (prefers-reduced-motion: reduce)로 대응합니다. 이 검사기는 붙여 넣은 CSS에서 그런 대응이 있는지 확인합니다.

animation·transition 선언, @keyframes, scroll-behavior: smooth, background-attachment: fixed(패럴랙스), 무한 반복(infinite) 애니메이션을 셉니다. reduce 블록은 중첩된 중괄호까지 정확히 짝을 맞춰 찾고, 그 안에서 애니메이션을 끄는지, transition을 줄이는지, 스크롤을 auto로 되돌리는지 확인합니다.

움직임은 있는데 대응이 없으면 ✕, reduce 블록이 있지만 애니메이션을 끄지 않거나 무한 반복 애니메이션이 있으면 △로 표시합니다. 움직임을 no-preference 블록 안에서만 켜는 방식은 안전하다고 인정합니다. 문제가 있으면 바로 붙여 넣을 수 있는 기본 규칙도 함께 보여 줍니다.

사용 방법

1. 1'검사할 CSS' 칸에 사이트의 CSS를 붙여 넣습니다.
2. 2'실행'을 누르면 움직임 선언 수와 prefers-reduced-motion 블록 수가 나옵니다.
3. 3✕·△ 안내를 보고 reduce 블록에 애니메이션을 끄는 규칙을 넣습니다.
4. 4필요하면 결과에 나온 기본 규칙을 CSS 끝에 붙여 넣고 다시 검사합니다.

.card { transition: transform .3s ease; }
.spinner { animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }

움직임 선언: animation 1 · transition 1 · @keyframes 0 · smooth 스크롤 0 · 패럴랙스 0
prefers-reduced-motion 블록: reduce 1개 · no-preference 0개

△ reduce 블록이 있지만 animation을 끄거나(none) 아주 짧게 줄이는 규칙이 보이지 않습니다.
△ 무한 반복 애니메이션 1곳 — 5초 넘게 움직이는 요소는 멈출 방법을 제공해야 합니다(WCAG 2.2.2).

이럴 때 쓰면 좋아요

• 애니메이션이 많은 랜딩 페이지를 배포하기 전에 점검할 때
• 패럴랙스·부드러운 스크롤을 쓴 사이트를 손볼 때
• 디자인 시스템에 동작 줄이기 기본 규칙을 넣을 때
• 웹 접근성 움직임 관련 항목을 자가 진단할 때

문제가 생겼을 때

활용 팁

• 움직임을 @media (prefers-reduced-motion: no-preference) 안에서만 켜면 기본값이 '움직임 없음'이 되어 가장 안전합니다.
• 자바스크립트 애니메이션은 matchMedia('(prefers-reduced-motion: reduce)')로 같은 설정을 확인할 수 있습니다.
• 외부 CSS 파일이 여러 개면 모두 합쳐 붙여 넣어야 정확합니다.

자주 묻는 질문