화면 전환 애니메이션 때문에 어지럽다는 제보를 받고 배운 것

문제 발생

카드가 확대되며 나타나는 전환 효과를 넣었더니 "화면이 움직여서 어지럽다"는 제보가 들어왔습니다. 전부 없애자니 나머지 사용자에게는 화면이 밋밋해졌습니다.

.card { animation: pop 300ms ease-out; }
@keyframes pop { from { transform: scale(0.9); } to { transform: scale(1); } }

원인 분석

확대·축소, 화면 이동, 회전 같은 움직임은 전정기관 장애가 있는 사용자에게 실제로 불편(어지럼, 메스꺼움)을 유발할 수 있습니다. 취향 문제가 아니라 접근성 문제입니다.

그래서 주요 OS에는 이를 줄이는 설정이 있고, 브라우저는 그 값을 CSS에 노출합니다. prefers-reduced-motion은 no-preference(기본)와 reduce 두 값을 가지며, 2020년 1월부터 Baseline입니다.

해결 방안

1. 없애기보다 순하게 바꿉니다. MDN이 권하는 방향입니다 — 확대·이동처럼 전정기관을 자극하는 움직임을 투명도나 색 변화처럼 순한 것으로 교체합니다.

.card { animation: pop 300ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .card { animation: fade 200ms linear; }
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

2. 전역 안전망을 둡니다. 개별 컴포넌트를 모두 챙기기 어렵다면 최소한의 바닥선을 깔아 둡니다. 이 저장소도 base.css에서 같은 방식으로 처리합니다.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

3. scroll-behavior: smooth도 포함시킵니다. 앵커 이동의 부드러운 스크롤은 화면 전체가 흐르는 움직임이라 특히 영향이 큽니다.
4. JavaScript 애니메이션도 같은 값을 읽습니다. CSS만 처리하면 라이브러리로 만든 움직임이 남습니다.

const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!reduce) startParallax();

5. 의미를 전달하는 움직임은 남깁니다. 로딩 스피너처럼 "지금 처리 중"을 알리는 움직임까지 없애면 상태를 알 수 없게 됩니다. 줄여야 할 것은 장식적인 움직임입니다.

공식 문서

• MDN: prefers-reduced-motion
• MDN: matchMedia()
• WCAG 2.1: 애니메이션 제어 (2.3.3)