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

10_Wiki/Topics/AI_and_ML/CSS 애니메이션 최적화(CSS Animations Optimization).md

@@ -1,9 +1,26 @@
+---
+id: wiki-2026-0508-css-애니메이션-최적화-css-animations-opt
+title: CSS 애니메이션 최적화(CSS Animations Optimization)
+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 애니메이션 최적화(CSS Animations Optimization)|CSS 애니메이션 최적화(CSS Animations Optimization]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 CSS 애니메이션 최적화는 웹 인터페이스의 애니메이션이 브라우저 성능을 저하시키거나 사용자 경험을 해치지 않도록 구현하는 기법입니다. 불필요한 레이아웃 재계산(Reflow)과 화면 다시 그리기(Repaint)를 유발하는 속성 사용을 피하고, GPU 가속 및 브라우저 최적화 힌트를 활용하여 화면의 버벅거림(Jank) 현상을 방지합니다. 이를 통해 모바일 및 저사양 기기에서도 부드럽고 응답성 높은 인터페이스를 유지보수 가능하게 설계할 수 있습니다.
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 **리플로우(Reflow)와 리페인트(Repaint) 최소화**
 * 웹 브라우저에서 성능을 가장 크게 저하시키는 주요 원인은 리플로우(레이아웃 재계산)와 리페인트(시각적 요소 재렌더링)입니다 [1-3]. 
 * 애니메이션을 적용할 때 `width`, `height`, `margin`, `padding`, `top`, `bottom`, `left`, `right` 등 요소의 기하학적 크기나 위치를 변경하는 속성은 리플로우를 유발하므로 애니메이션에 사용하는 것을 피해야 합니다 [4-6].
@@ -22,10 +39,41 @@ CSS 애니메이션 최적화는 웹 인터페이스의 애니메이션이 브
 **접근성([[Accessibility|Accessibility]]) 고려**
 * 과도한 움직임은 전정기관 장애가 있는 사용자 등에게 불편함이나 멀미를 유발할 수 있습니다 [20, 21]. 이를 방지하기 위해 `prefers-reduced-motion` 미디어 쿼리를 사용하여 사용자의 OS 설정에 따라 애니메이션을 줄이거나 끄도록 제어해야 합니다 [20-22].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[Reflow와 Repaint(리플로우와 리페인트)|Reflow와 Repaint(리플로우와 리페인트]], GPU 가속 및 Compositing, [[웹 접근성 및 prefers-reduced-motion|웹 접근성 및 prefers-reduced-motion]]
 - **Projects/Contexts:** [[실무에서의 프론트엔드 성능 최적화|실무에서의 프론트엔드 성능 최적화]], [[유지보수 가능하고 확장 가능한 CSS 아키텍처 설계|유지보수 가능하고 확장 가능한 CSS 아키텍처 설계]]
 - **Contradictions/Notes:** 브라우저의 성능을 끌어올리기 위해 `will-change` 속성을 사용할 수 있지만, 이 속성 자체도 자원을 소모하므로 불필요하게 많은 요소에 남용할 경우 오히려 브라우저를 과부하에 빠뜨려 성능 저하를 유발할 수 있습니다. 따라서 기존의 성능 문제를 해결하기 위한 '최후의 수단'으로만 엄격히 제한하여 사용해야 합니다 [10, 12, 18]. 또한 애니메이션을 부드럽게 하기 위해 1px 단위로 조작하는 것이 보기에는 좋을 수 있으나, 저사양 기기에서는 CPU를 과도하게 사용하게 되므로 차라리 3px 단위로 조작하여 매끄러움을 약간 타협하고 렌더링 속도를 확보하는 것이 실무적으로 좋은 해결책이 될 수 있습니다 [17].
 
 ---
-*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 |