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

10_Wiki/Topics/AI_and_ML/CSS Animations.md

@@ -1,10 +1,26 @@
+---
+id: wiki-2026-0508-css-animations
+title: CSS Animations
+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)
+---
+
 # [[CSS Animations|CSS Animations]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 CSS 애니메이션은 UI/UX에서 사용자와 시스템 간의 상호작용을 강화하고 시각적 피드백을 제공하며, 시스템 상태나 계층 구조를 명확히 하는 데 사용되는 기술이다 [1, 2]. 단순한 시각적 장식이 아닌 인지 부하를 줄이고 사용성을 높이는 기능적 목적을 가지며 [2-4], 실무적으로는 브라우저의 리플로우(Reflow)와 리페인트(Repaint)를 최소화하여 60FPS의 렌더링 성능을 유지하고 유지보수가 용이하도록 설계되어야 한다 [5, 6].
 
-## 📖 Core Content
-
+## 📖 구조화된 지식 (Synthesized Content)
 *   **애니메이션의 기능적 역할 및 UX 원칙**
     애니메이션은 단순히 화면을 꾸미는 것이 아니라, 사용자에게 즉각적인 피드백을 주고 주의를 유도하며 원인과 결과의 관계를 설명하는 기능적 도구이다 [1, 2, 4]. 호버(Hover) 효과, 버튼 클릭 시의 마이크로 인터랙션, 로딩 상태 진행 표시, 부드러운 화면 상태 전환 등에 주로 활용된다 [7-10]. 애니메이션의 지속 시간은 사용자 대기 시간을 줄이기 위해 200ms에서 500ms 사이로 짧게 유지하는 것이 좋으며, 기계적인 선형 움직임 대신 `ease-in-out`과 같은 이징(Easing) 함수를 활용해 물리 법칙에 기반한 자연스러운 움직임을 설계해야 한다 [11-14].
 
@@ -18,10 +34,41 @@ CSS 애니메이션은 UI/UX에서 사용자와 시스템 간의 상호작용을
 *   **접근성과 실무 환경에서의 제어**
     보이지 않는 요소의 무한 루프 애니메이션은 시스템 리소스를 고갈시키므로, `animation-play-[[State|State]]`를 사용해 화면 이탈 시 애니메이션을 일시 정지시키는 제어가 필요하다 [5, 20]. 아울러, 과도한 모션은 일부 사용자에게 어지러움을 유발할 수 있으므로 웹 콘텐츠 접근성 지침(WCAG)에 따라 `prefers-reduced-motion` 미디어 쿼리를 활용해 애니메이션을 선택적으로 줄이거나 제거할 수 있는 접근성 장치를 반드시 마련해야 한다 [11, 29, 30].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[Reflow and Repaint|Reflow and Repaint]], Hardware Acceleration (GPU), Micro-interactions, [[Accessibility|Accessibility]] (prefers-reduced-motion)
 - **Projects/Contexts:** [[Large Frontend Projects|Large Frontend Projects]], [[Performance Optimization|Performance Optimization]]
 - **Contradictions/Notes:** 무한 루프 애니메이션과 화려한 모션은 인터페이스에 활력을 줄 수 있지만 시스템 리소스를 크게 소모하며, 전정기관 장애가 있는 사용자에게 위험할 수 있습니다 [11, 20]. 따라서 실무 환경에서는 애니메이션 적용을 필수적인 기능과 마이크로 인터랙션으로 제한하고, 화면에서 벗어났을 때 정지시키거나(`animation-play-state`) 사용자의 환경 설정에 따라 모션을 줄이는(`prefers-reduced-motion`) 방어적 설계가 동반되어야 합니다 [20, 29, 30].
 
 ---
-*Last updated: 2026-04-26*
+*Last updated: 2026-04-26*
+
+## 🤖 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 |