prefers-reduced-motion을 적용한 접근 가능한 애니메이션
모션에 민감한 사용자를 위해 애니메이션을 비활성화하거나 줄여 접근성 요구 사항을 존중합니다.
prefers-reduced-motion을 적용한 접근 가능한 애니메이션은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
동작을 줄이는 이유
일부 사용자에게는 전정 장애, 뇌전증 또는 애니메이션을 유해하게 만들 수 있는 다른 질환이 있습니다. CSS는 prefers-reduced-motion 미디어 쿼리를 통해 이러한 사용자의 시스템 설정을 감지하고 존중할 수 있습니다.
prefers-reduced-motion 쿼리
쿼리 값은 다음과 같습니다.
no-preference— 사용자가 선호 사항을 지정하지 않음reduce— 사용자가 OS 설정에서 동작 줄이기를 활성화함
<div class="box"></div>
극단적인 방법(권장하지 않음)
모든 애니메이션을 중단하는 흔하지만 거친 구현입니다. 이 방법은 유용하고 방향 감각을 흐리지 않는 동작 신호까지 제거합니다.
<div class="box"></div>
더 나은 방법: 동작 선택 적용
더 안전한 패턴은 동작 선호를 표시하지 않은 사용자에게만 애니메이션을 정의하고 기본 상태에서는 동작이 없도록 두는 것입니다.
<button class="btn">Button</button>
<div class="card">Card</div>
애니메이션 유형 바꾸기
동작 줄이기를 선호하는 사용자에게는 방향 감각을 흐리게 하는 동작(translate, scale, rotate)을 접근 가능한 대안(opacity, color)으로 바꾸세요.
<div class="card demo-hover">Hover me</div>
무한 애니메이션
무한 애니메이션(회전 표시기, 맥동 효과)은 특히 문제가 될 수 있습니다. 정적인 대체 상태를 제공하세요.
<div class="spinner"></div>
시차 효과
시차 스크롤은 심한 멀미를 일으킬 수 있습니다. 동작 줄이기를 선호하는 사용자에게는 항상 비활성화하세요.
<div class="parallax">Parallax section</div>
JavaScript 접근
웹 애니메이션 API나 스크롤 라이브러리를 사용할 때는 JavaScript에서 선호 설정을 확인하세요.
<div class="spinner" id="rm-spinner"></div>
<p id="rm-status">Checking preference…</p>
<script>
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
const el = document.getElementById('rm-spinner');
const status = document.getElementById('rm-status');
if (!reducedMotion.matches) {
el.classList.add('spin');
status.textContent = 'Motion allowed — spinning';
} else {
status.textContent = 'Reduced motion — animation skipped';
}
</script>
WCAG와 동작
WCAG 2.3.3 (AAA)은 상호 작용으로 실행되는 애니메이션을 비활성화할 수 있어야 한다고 요구합니다. prefers-reduced-motion을 사용하는 것이 이 기준을 충족하는 권장 CSS 방법입니다.
동작 줄이기 테스트
Chrome DevTools → Rendering 탭에서 "CSS prefers-reduced-motion: reduce 에뮬레이션"을 활성화하면 OS 설정을 변경하지 않고 테스트할 수 있습니다. macOS에서는 시스템 설정 → 손쉬운 사용 → 동작 줄이기를 선택하세요.
의도 문서화하기
애니메이션이 기능적인지 아니면 단순히 장식적인지 설명하는 주석을 작성하세요. 기능적 애니메이션(프로세스나 진행 상태를 나타내는 애니메이션)에는 접근 가능한 대안이 있어야 하며, 장식용 애니메이션은 간단히 제거할 수 있습니다.
빠른 확인
카드에 마우스를 올렸을 때 살짝 올라오는 효과를 prefers-reduced-motion에 맞게 처리하는 가장 좋은 방법은 무엇인가요?
복습
prefers-reduced-motion: reduce를 사용해 동작 민감도를 감지하세요. 모든 애니메이션을 중단하는 대신 동작이 없는 기본 상태를 제공하고 no-preference 쿼리 안에서만 동작을 선택적으로 적용하세요. 동작 줄이기를 선호하는 사용자에게는 방향 감각을 흐리게 하는 변환 애니메이션을 불투명도나 색상 전환으로 바꾸세요. DevTools 에뮬레이션으로 테스트하세요.
자주 묻는 질문
“prefers-reduced-motion을 적용한 접근 가능한 애니메이션” 강의는 무료인가요?
네 — “prefers-reduced-motion을 적용한 접근 가능한 애니메이션” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“prefers-reduced-motion을 적용한 접근 가능한 애니메이션”에서 뭘 배우나요?
모션에 민감한 사용자를 위해 애니메이션을 비활성화하거나 줄여 접근성 요구 사항을 존중합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“prefers-reduced-motion을 적용한 접근 가능한 애니메이션” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- @keyframes 구문과 애니메이션 속성
- 애니메이션 방향, 채우기 모드 및 반복
- 애니메이션 연결 및 순차 실행
- prefers-reduced-motion을 적용한 접근 가능한 애니메이션