useReducedMotion

prefers-reduced-motion 미디어 쿼리 감지 — 접근성 지원

현재 설정모션 허용됨

접근성

시스템 설정

실시간 업데이트

설치

bash

npm install @hua-labs/hua

Import

tsx

import { useReducedMotion } from "@hua-labs/ui";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

기본 사용법

const prefersReducedMotion = useReducedMotion();

// Conditionally apply animations
const animationClass = prefersReducedMotion
  ? "transition-opacity"
  : "transition-all duration-500 ease-out";

// Or skip animations entirely
if (prefersReducedMotion) {
  setVisible(true); // instant
} else {
  animateIn(); // with animation
}

데모

시스템 설정에 따라 애니메이션이 변경됩니다

애니메이션이 활성화되었습니다

테스트 방법

macOS

System Preferences → Accessibility → Display → Reduce motion

Windows

Settings → Ease of Access → Display → Show animations in Windows

DevTools

Chrome: Rendering → Emulate CSS media feature prefers-reduced-motion

API 레퍼런스

반환값

타입	설명
boolean	prefers-reduced-motion 설정이 활성화된 경우 true

모범 사례

해야 할 것

• 모션 없이도 정보를 전달하세요
• 단순한 페이드 효과는 유지하세요
• 자동 재생 콘텐츠를 비활성화하세요

하지 말아야 할 것

• 모든 시각적 피드백을 제거하지 마세요
• 사용자 설정을 무시하지 마세요
• 깜빡이는 효과를 사용하지 마세요

사용 사례

페이지 전환

접근성을 고려한 페이지 전환 애니메이션

로딩 상태

대체 정적 로딩 인디케이터

패럴랙스 효과

전정 장애를 가진 사용자를 위한 패럴랙스 비활성화

히어로 애니메이션

히어로 섹션의 모션 감소 대안

useWindowSize useMotionState