← Deallo

안정성 · 호환성

Windows에서 로딩 스피너가 안 돌던 문제 — motion-safe의 함정

PDF 업로드 스피너가 Windows 일부 환경에서만 회전하지 않고 멈췄다. "처리 중인지 멈춘 건지" 헷갈리는 UX 버그였는데, 원인은 접근성 미디어 쿼리와 Tailwind variant의 충돌이었다.

증상

  • PDF 스캐닝 단계의 로딩 스피너 SVG가 회전하지 않고 정지
  • macOS / Linux는 정상, Windows 특정 환경에서만 재현

원인 — motion-safe가 reduced-motion에서 꺼진다

Tailwind의 motion-safe:animate-spin은 @media (prefers-reduced-motion: no-preference)로 컴파일된다. 그런데 Windows의 "Show animations" 설정이 off면 OS가 prefers-reduced-motion: reduce를 broadcast한다.

Windows 애니메이션 효과 off
  → 브라우저가 prefers-reduced-motion: reduce 응답
  → motion-safe: 미디어 쿼리 비활성
  → animate-spin 클래스 미적용
  → 스피너 정지

macOS는 "Reduce motion"이 기본 off라 재현되지 않았다. Windows 사용자 중 접근성 설정을 켰거나 IT 정책으로 꺼둔 환경에서만 터진 것.

해결 — 로딩 스피너는 "필수 모션"이다

motion-safe:를 떼고 animate-spin을 직접 썼다.

- className="motion-safe:animate-spin"
+ className="animate-spin"

로딩 스피너·진행 표시는 의미 전달의 핵심(essential) 모션이다. 정지하면 "진행 중"이라는 정보가 통째로 죽는다. WCAG 2.3.3도 essential animation을 reduced-motion 예외로 둔다.

배운 점

  • motion-safe:는 데코레이션 모션(hover scale 등)에만. 로딩·진행·단계 전환처럼 없으면 의미가 깨지는 모션엔 쓰면 안 된다
  • "macOS에선 되는데 Windows에서만" 같은 OS별 버그는 접근성 시스템 설정 + 미디어 쿼리를 의심한다