[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -1,65 +1,224 @@
|
||||
---
|
||||
id: wiki-2026-0508-웹-접근성-및-prefers-reduced-motion
|
||||
title: 웹 접근성 및 prefers reduced motion
|
||||
title: 웹 접근성 및 prefers-reduced-motion
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Web Accessibility, prefers-reduced-motion, A11y, Motion Sensitivity]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [accessibility, a11y, css, animation, web]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: css
|
||||
framework: web-platform
|
||||
---
|
||||
|
||||
# [[웹 접근성 및 prefers-reduced-motion|웹 접근성 및 prefers-reduced-motion]]
|
||||
# 웹 접근성 및 prefers-reduced-motion
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
웹 접근성은 장애나 환경적 제약에 관계없이 모든 사용자가 디지털 인터페이스를 차별 없이 사용할 수 있도록 보장하는 설계 원칙이며, `prefers-reduced-motion`은 이를 시각적·동적 측면에서 지원하는 핵심적인 CSS 미디어 쿼리입니다. 과도한 애니메이션은 일부 사용자에게 멀미나 인지적 불편함을 유발할 수 있으므로, 사용자의 운영체제 설정에 맞춰 애니메이션을 줄이거나 비활성화하는 데 사용됩니다 [1, 2]. 이를 통해 전정 감각 장애를 가진 사용자와 저사양 기기 사용자 모두를 포용하는 안정적이고 유지보수 가능한 웹 경험을 제공할 수 있습니다 [3].
|
||||
## 매 한 줄
|
||||
> **"매 motion 은 default-on 이 아닌 opt-in 으로 design 되어야 한다"**. WCAG 2.2 / WAI-ARIA / EN 301 549 의 누적된 standard 와 함께, `prefers-reduced-motion` media query 는 매 vestibular disorder, migraine, attention disorder 사용자 의 web 접근성 lifeline 이다. 2026 의 production app 은 motion 을 system preference 에 따라 dynamic 하게 swap 한다.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **과도한 애니메이션의 부작용 및 접근성 문제:** 모션은 UX를 향상시키는 강력한 도구이지만, 너무 많은 애니메이션이 동시에 실행되거나 과도하게 사용될 경우 인지 과부하, 주의 산만 및 멀미(motion sickness)를 유발할 수 있습니다 [4]. WebAIM 이니셔티브와 WCAG(웹 콘텐츠 접근성 가이드라인) 2.2에 따르면, 특정 모션은 전정 감각 장애(vestibular disorders)가 있는 사용자에게 발작이나 불편함을 유발할 수 있으므로, 모션은 미묘(subtle)해야 하며 접근성을 위해 애니메이션을 비활성화할 수 있는 방법을 제공해야 합니다 [2, 5].
|
||||
- **`prefers-reduced-motion`을 활용한 포용적 설계:** CSS의 `prefers-reduced-motion` 미디어 쿼리는 사용자의 OS(운영체제) 수준 애니메이션 선호도에 따라 애니메이션 스타일을 선택적으로 렌더링하거나 배제할 수 있도록 돕습니다 [1]. 이 미디어 쿼리를 존중하는 것은 접근성 설계에 있어 필수적인데, 이를 통해 애니메이션에 민감한 사용자나 저전력 기기를 사용하는 사용자가 불필요한 애니메이션에서 벗어나(opt out) 안전하게 애플리케이션을 사용할 수 있게 됩니다 [3].
|
||||
- **책임 있는 모션 디자인(Animating Responsibly):** 실무에서 유지보수 가능하고 접근성 높은 CSS를 설계하려면 위험한 모션 요소를 사전에 감지하고 일시 정지(pause) 제어 기능을 추가해야 합니다 [6]. 더 나아가 시각적인 모션뿐만 아니라 스크린 리더와의 상호작용(Animation and Screen Readers)까지 고려하여 포괄적인 접근성 가이드라인을 적용하는 것이 중요합니다 [6, 7].
|
||||
## 매 핵심
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** UX 애니메이션(UX Animation), [[미디어 쿼리 (Media Queries)|미디어 쿼리(Media Queries]], 웹 콘텐츠 접근성 가이드라인(WCAG)
|
||||
- **Projects/Contexts:** 포용적인 CSS 아키텍처 및 모션 디자인 실무
|
||||
- **Contradictions/Notes:** 소스 간의 모순된 정보는 없습니다. 다만, 애니메이션이 전환 및 상태를 명확히 하여 UX를 개선할 수 있다는 긍정적 효과를 인정하면서도 [5], 동시에 적절한 통제 장치(`prefers-reduced-motion`)가 동반되지 않으면 도리어 사용자 경험을 해칠 수 있다는 점을 상호 보완적으로 강조하고 있습니다 [2, 3].
|
||||
### 매 a11y 의 기둥 (WCAG 2.2)
|
||||
- **Perceivable**: text alt, color contrast 4.5:1, captions.
|
||||
- **Operable**: keyboard nav, focus visible, no seizure trigger.
|
||||
- **Understandable**: clear label, predictable nav, error help.
|
||||
- **Robust**: valid markup, ARIA correctly used.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
### 매 motion 의 위험
|
||||
- **Vestibular**: parallax, large translate → nausea.
|
||||
- **Photosensitive**: flashing > 3Hz → seizure (WCAG 2.3.1).
|
||||
- **Cognitive**: auto-play loop → distraction.
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 매 응용
|
||||
1. Hero 의 fade-in 만, no parallax for reduced.
|
||||
2. Transition 의 fade swap (no slide).
|
||||
3. Loading spinner 의 static fallback.
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
## 💻 패턴
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
### CSS media query
|
||||
```css
|
||||
/* default: full motion */
|
||||
.card {
|
||||
transition: transform 300ms cubic-bezier(.2,.8,.2,1),
|
||||
opacity 200ms ease;
|
||||
}
|
||||
.card:hover { transform: translateY(-4px) scale(1.02); }
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
/* reduced: minimize */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card,
|
||||
.card * {
|
||||
transition-duration: 0.01ms !important;
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
.card:hover { transform: none; }
|
||||
}
|
||||
```
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
### Tailwind v4
|
||||
```html
|
||||
<div class="transition motion-reduce:transition-none
|
||||
hover:scale-105 motion-reduce:hover:scale-100
|
||||
motion-safe:animate-bounce">
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
### JS detection (matchMedia)
|
||||
```ts
|
||||
const reduceMotionMQ = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
function shouldAnimate(): boolean { return !reduceMotionMQ.matches; }
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
reduceMotionMQ.addEventListener("change", e => {
|
||||
document.documentElement.dataset.motion = e.matches ? "reduce" : "full";
|
||||
});
|
||||
```
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
### React hook
|
||||
```tsx
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
export function usePrefersReducedMotion() {
|
||||
const [reduced, setReduced] = useState(
|
||||
() => typeof window !== "undefined" &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches
|
||||
);
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const onChange = (e: MediaQueryListEvent) => setReduced(e.matches);
|
||||
mq.addEventListener("change", onChange);
|
||||
return () => mq.removeEventListener("change", onChange);
|
||||
}, []);
|
||||
return reduced;
|
||||
}
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
// usage
|
||||
function Hero() {
|
||||
const reduce = usePrefersReducedMotion();
|
||||
return reduce
|
||||
? <StaticHero />
|
||||
: <ParallaxHero />;
|
||||
}
|
||||
```
|
||||
|
||||
### Framer Motion
|
||||
```tsx
|
||||
import { motion, useReducedMotion } from "framer-motion";
|
||||
|
||||
function Card() {
|
||||
const reduce = useReducedMotion();
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: reduce ? 0 : 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: reduce ? 0 : 0.4 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### GSAP
|
||||
```ts
|
||||
import gsap from "gsap";
|
||||
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
if (!reduce) {
|
||||
gsap.from(".hero", { y: 60, opacity: 0, duration: 0.8 });
|
||||
} else {
|
||||
gsap.set(".hero", { opacity: 1, y: 0 });
|
||||
}
|
||||
```
|
||||
|
||||
### Focus visible (keyboard a11y)
|
||||
```css
|
||||
:focus { outline: none; }
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
### Skip-to-content link
|
||||
```html
|
||||
<a href="#main" class="skip-link">Skip to main content</a>
|
||||
|
||||
<style>
|
||||
.skip-link {
|
||||
position: absolute; left: -9999px;
|
||||
}
|
||||
.skip-link:focus {
|
||||
position: fixed; top: 1rem; left: 1rem;
|
||||
padding: .5rem 1rem; background: black; color: white;
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### ARIA + visible-text-only icon button
|
||||
```html
|
||||
<button aria-label="Close dialog" type="button">
|
||||
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||
<path d="M6 6l12 12M6 18L18 6" stroke="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
```
|
||||
|
||||
### Color contrast check (CI)
|
||||
```js
|
||||
// tests/contrast.test.ts
|
||||
import { hex } from "wcag-contrast";
|
||||
import tokens from "../tokens.json";
|
||||
|
||||
test("text on bg meets AA", () => {
|
||||
expect(hex(tokens.color.text, tokens.color.bg)).toBeGreaterThanOrEqual(4.5);
|
||||
});
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| decorative parallax | disable on reduce |
|
||||
| critical feedback motion | keep, but shorten |
|
||||
| auto-playing carousel | pause, user-controlled |
|
||||
| keyboard-only user | focus-visible + skip-link |
|
||||
| screen reader | ARIA label + semantic HTML |
|
||||
| color signal only | add icon/text alternative |
|
||||
|
||||
**기본값**: motion-safe wrapper + ARIA + WCAG AA contrast + axe CI.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Web Accessibility]] · [[CSS Animations]]
|
||||
- 변형: [[WCAG Guidelines]] · [[ARIA Patterns]]
|
||||
- 응용: [[Inclusive Design]] · [[Animation UX]]
|
||||
- Adjacent: [[CSS Animations Optimization]] · [[Focus Management]] · [[Color Contrast]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: ARIA label suggestion, alt text drafting, animation reduce variant proposal, axe failure interpretation.
|
||||
**언제 X**: real screen-reader testing — NVDA/JAWS/VoiceOver 의 manual run 필수.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **`outline: none` no focus-visible**: keyboard user 의 invisible nav.
|
||||
- **Auto-play 무한 motion**: ignores reduced-motion entirely.
|
||||
- **ARIA without semantic**: `<div role="button">` 대신 `<button>` 사용.
|
||||
- **Color-only meaning**: red/green 만으로 status — colorblind 차단.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (WCAG 2.2 W3C 2023, MDN prefers-reduced-motion, axe-core rules).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — a11y + prefers-reduced-motion patterns. |
|
||||
|
||||
Reference in New Issue
Block a user