웹사이트 모션 줄이기: prefers-reduced-motion 적용과 테스트

웹사이트에 전환 효과나 스크롤 애니메이션을 넣었다면, 방문자의 기기에서 ‘동작 줄이기’ 설정을 켰을 때도 같은 방식으로 움직이는지 확인해야 합니다. CSS의 prefers-reduced-motion은 그 설정을 읽는 출발점입니다. 다만 이 미디어 쿼리 한 줄을 추가하는 것만으로 모든 애니메이션과 자바스크립트 동작이 자동 처리되지는 않습니다.

이 글은 불필요한 움직임을 줄이면서 선택 상태, 메뉴 열림, 장바구니 결과처럼 기능에 필요한 정보는 그대로 남기는 구현 순서를 정리합니다. 2026년 10월 19일 W3C와 MDN 공식 문서를 확인했습니다.

먼저 기준을 구분하기

WCAG 2.2의 성공 기준 2.3.3 ‘인터랙션으로 인한 애니메이션’은 사용자의 조작으로 시작되는 비필수 모션을 끌 수 있게 하는 기준입니다. 등급은 AAA입니다. W3C는 CSS 미디어 쿼리 등을 해결 방법의 예로 설명하며, 문서에 든 기법은 기준 자체와 동일한 규범 요구사항이 아니라 충족 가능한 기술 예시라고 구분합니다.

자동 재생처럼 사용자의 조작 없이 시작되는 움직임은 다른 기준인 2.2.2 ‘일시정지, 정지, 숨김’과 관련될 수 있습니다. 따라서 모든 모션을 하나의 체크박스로 묶기 전에, 무엇이 사용자 입력으로 시작되는지, 무엇이 자동으로 반복되는지 나눠 보세요.

1. CSS에서 비필수 모션부터 줄이기

운영체제 설정을 감지해 부드러운 스크롤, 전환, 반복 애니메이션을 줄이는 기본 규칙입니다. 프로젝트의 모션 종류를 살펴보고 선택적으로 적용하세요.

/* 기본 상태: 일반 사용자에게 필요한 짧은 전환 */
.card {
  transition: transform 240ms ease, opacity 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

이 규칙은 넓은 안전망이지만, 프로젝트 전체를 대신 점검해 주지는 않습니다. 핵심 정보가 애니메이션 중에만 나타나거나, CSS 규칙 밖에서 자바스크립트가 위치·크기를 계속 바꾸면 별도 처리가 필요합니다. 움직임을 줄인 뒤에도 포커스, 선택됨 표시, 메뉴의 열림/닫힘, 오류 메시지와 완료 결과가 즉시 전달되는지 확인하세요.

2. 자바스크립트 애니메이션도 따로 다루기

CSS 미디어 쿼리는 CSS에 선언된 효과를 제어하는 데 적합합니다. React·애니메이션 라이브러리의 variants, 스프링, 스크롤 기반 변환처럼 JS가 값을 직접 계산한다면 해당 도구의 reduced-motion 지원을 설정하거나, 모션이 발생하는 지점에서 사용자 선호를 확인해야 합니다. CSS만으로 모든 JS 변환이 사라진다고 가정하지 마세요.

서버 렌더링을 사용하는 페이지라면 window.matchMedia()를 서버에서 읽을 수 없다는 점도 고려해야 합니다. 서버가 만든 첫 화면과 브라우저의 첫 렌더 결과가 달라지지 않게 하고, 선호 설정을 반영할 때 화면 내용이 깜빡이거나 기능 상태가 바뀌지 않는지 확인합니다.

3. 움직임은 줄여도 기능 상태는 보존하기

좋은 reduced-motion 동작은 단순히 효과를 지우는 것이 아니라 같은 정보를 더 빠르고 안정적인 방법으로 보여주는 것입니다.

• 카드가 날아와야 내용을 읽을 수 있다면, 모션을 끄고도 내용이 처음부터 읽히도록 합니다.
• 상품 옵션을 바꾸면 가격·선택 표시가 즉시 갱신되도록 유지하고, 확대·회전 같은 비필수 전환만 줄입니다.
• 페이지 이동 시 스크롤 애니메이션을 끄더라도 새 제목과 주요 정보에 도달할 수 있게 합니다.
• 자동 반복 장식은 정지하거나 대체하고, 기능 설명을 전달하는 데 필수적인 시각 변화는 대안을 함께 제공합니다.

4. 배포 전에 확인할 테스트

1. macOS, iOS, Windows, Android 등 지원 대상 기기에서 동작 줄이기를 켭니다.
2. 페이지 최초 진입, 메뉴 열기, 탭 전환, 필터 변경, 문의 폼 오류·완료, 페이지 내 이동을 다시 실행합니다.
3. 모션이 줄었을 때도 선택·오류·완료 상태가 읽히는지 키보드와 화면 크기별로 확인합니다.
4. Playwright 등 자동화에서는 reduced motion 환경을 지정해 회귀 확인을 추가하고, 일반 설정도 별도로 점검합니다.
5. 사용자가 설정을 바꿨을 때 새로고침 없이 반영되는지 확인할 필요가 있다면 미디어쿼리 변경 이벤트와 UI 상태 동기화도 살펴봅니다.

RUTTO 웹사이트에서도 운영체제의 reduced-motion 선호, CSS 전환, 자바스크립트 모션을 각각 다루고 있습니다. 하나의 전역 규칙만 두는 대신 모션이 실제로 발생하는 위치를 찾아 확인하는 이유입니다. 사이트 인터랙션과 모바일 흐름은 작업 사례에서 볼 수 있습니다.

공식 참고 자료

• W3C: Understanding SC 2.3.3 Animation from Interactions — 기준의 의도와 자동 시작 모션과의 구분.
• W3C: Technique C39 — prefers-reduced-motion 사용 예시. 문서 설명처럼 기술 기법은 규범 기준 그 자체가 아닙니다.
• MDN: prefers-reduced-motion — 미디어 특성의 사용법과 지원 맥락.

기준은 접근성 판단의 한 부분입니다. 실제 서비스의 적합성은 전체 화면·콘텐츠·동작을 검토해야 하며, 이 예제만으로 WCAG 준수를 보장하지 않습니다.

인터랙션 구현 상담

브랜드 웹사이트에서 모션이 필요한 화면과 줄여야 할 화면을 함께 정리하고 싶다면, 현재 사용자의 행동 흐름과 목표를 RUTTO 문의 페이지에 남겨주세요. 실제 범위와 필요한 구현을 확인한 뒤 이야기할 수 있습니다.

#웹접근성 #prefersreducedmotion #CSS #인터랙티브웹 #웹개발