feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

10_Wiki/Topics/AI_and_ML/웹 접근성 및 성능 최적화.md

@@ -1,9 +1,29 @@
+---
+id: wiki-2026-0508-웹-접근성-및-성능-최적화
+title: 웹 접근성 및 성능 최적화
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
+tags: [uncategorized]
+raw_sources: []
+last_reinforced: 2026-05-08
+github_commit: pending
+inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
+tech_stack:
+  language: unspecified
+  framework: unspecified
+---
+
 # [[웹 접근성 및 성능 최적화|웹 접근성 및 성능 최적화]]
 
 ## 📌Brief 시
 웹 접근성 및 성능 최적화는 모든 사용자 환경과 기기에서 디지털 제품이 빠르고 일관되며 장벽 없이 작동하도록 만드는 핵심 웹 설계 실무입니다 [1, 2]. 성능 측면에서는 CSS 렌더링 차단을 방지하고 리플로우(Reflow)와 리페인트(Repaint)를 줄임으로써 코어 웹 바이탈([[Core Web Vitals|Core Web Vitals]]) 지표를 높이는 데 집중합니다 [3-6]. 동시에 접근성 측면에서는 시각적 명확성을 확보하고, 사용자의 화면 확대나 애니메이션 축소 설정을 존중하여 포용력 있는 사용자 경험(UX)을 구축하는 것을 목표로 합니다 [2, 7, 8].
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 **성능 최적화 (Performance [[Optimization|Optimization]])**
 * **CSS 로딩 및 렌더링 최적화:** 브라우저는 CSS를 모두 파싱하기 전까지 페이지 렌더링을 차단합니다 [4]. 이를 최소화하기 위해 사용하지 않는 CSS를 제거하고 파일을 축소 및 압축해야 하며, 미디어 쿼리를 사용해 화면 조건에 맞는 CSS 파일만 렌더링을 차단하도록 분리할 수 있습니다 [4, 9, 10]. 또한, `rel="preload"`를 사용해 중요한 폰트, CSS, 이미지 등의 핵심 자원을 우선적으로 다운로드하도록 브라우저에 지시해야 합니다 [11, 12].
 * **레이아웃 연산 격리 및 최적화:** CSS Containment 모듈의 `contain` 및 `content-visibility` 속성을 사용하면 페이지의 특정 부분을 격리하여 브라우저가 뷰포트 내에 필요할 때만 렌더링을 수행하게 함으로써 렌더링 성능을 크게 향상시킬 수 있습니다 [13, 14].
@@ -15,10 +35,68 @@
 * **안전하고 제어 가능한 애니메이션:** 화려하거나 과도한 움직임은 전정기관 장애가 있는 사용자에게 메스꺼움이나 주의 산만을 유발할 수 있습니다 [27, 28]. `prefers-reduced-motion` 미디어 쿼리를 사용하여 운영체제에서 애니메이션 축소를 설정한 사용자에게는 움직임을 제거하거나 최소화한 스타일을 제공해야 하며, 긴 텍스트 블록에 대한 애니메이션 적용은 피해야 합니다 [27, 29, 30].
 * **모바일 및 보조 기기 호환성 확보:** 터치 인터페이스에서는 오작동을 막기 위해 최소 44x44px ~ 48x48px 크기의 클릭 가능한 영역(패딩 활용)을 제공해야 합니다 [31-33]. 또한, 화면 판독기(Screen Reader)와 키보드 사용자를 위해 명확한 포커스(Focus) 상태 제공, 시맨틱 HTML 태그 사용, 적절한 색상 대비 유지, 의미 있는 대체 텍스트(alt) 속성이 반드시 포함되어야 합니다 [2, 34].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[CSS 구조 설계 방식|CSS 구조 설계 방식]], 반응형 디자인, 애니메이션 (transition / keyframes), Core Web Vitals, [[리플로우 및 리페인트 (Reflow & Repaint)|리플로우 및 리페인트(Reflow & Repaint]]
 - **Projects/Contexts:** 디자인 시스템 기반의 확장 가능한 프론트엔드 아키텍처 구축
 - **Contradictions/Notes:** 소스 자료들은 애니메이션 성능 최적화를 위해 브라우저에 변경을 미리 알리는 `will-change` 속성의 사용을 제안하지만, 동시에 이를 남용하면 너무 많은 요소에 브라우저 자원을 미리 할당하여 오히려 성능 저하를 초래할 수 있으므로 '최후의 수단'으로 신중히 사용해야 한다고 경고하고 있습니다 [35, 36].
 
 ---
-*Last updated: 2026-04-26*
+*Last updated: 2026-04-26*
+
+## 📌 한 줄 통찰 (The Karpathy Summary)
+
+> *(TODO: 한 문장으로 핵심 통찰을 작성. "X는 Y 조건에서 Z 효과를 낸다" 구조 권장.)*
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
+
+- **과거 데이터와의 충돌:** 없음
+- **정책 변화:** 없음
+
+## 🕓 변경 이력 (Changelog)
+
+| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
+|------|-----------|-----------|--------|
+| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
+
+## 💻 코드 패턴 (Code Patterns)
+
+**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
+
+```text
+# TODO
+```
+
+## 🤔 의사결정 기준 (Decision Criteria)
+
+**선택 A를 써야 할 때:**
+- *(TODO)*
+
+**선택 B를 써야 할 때:**
+- *(TODO)*
+
+**기본값:**
+> *(TODO)*
+
+## ❌ 안티패턴 (Anti-Patterns)
+
+- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*