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

10_Wiki/Topics/AI_and_ML/성능 중심의 웹 애니메이션 및 인터랙션 구현.md

@@ -1,9 +1,26 @@
+---
+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)
+---
+
 # [[성능 중심의 웹 애니메이션 및 인터랙션 구현|성능 중심의 웹 애니메이션 및 인터랙션 구현]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 웹 애니메이션과 인터랙션은 사용자 경험을 향상시키고 인지된 성능(Perceived Performance)을 높이는 강력한 도구이지만, 잘못 구현될 경우 브라우저 렌더링 성능을 심각하게 저하시킬 수 있습니다. 성능 중심의 구현을 위해서는 리플로우(Reflow)와 리페인트(Repaint)를 유발하는 속성의 사용을 피하고, GPU 가속을 활용할 수 있는 `transform`이나 `opacity` 위주로 애니메이션을 작성해야 합니다. 또한, 애니메이션의 지속 시간과 실행 조건을 제어하여 시스템 리소스 소모를 최소화하고 유지보수 가능한 CSS 구조를 만드는 것이 실무적인 핵심입니다.
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 *   **리플로우(Reflow)와 리페인트(Repaint) 최소화**
     *   `width`, `height`, `margin`, `padding`, `top`, `left` 등 요소의 레이아웃이나 기하학적 형태를 변경하는 속성을 애니메이션하면, 브라우저가 페이지 전체의 구조를 다시 계산하는 리플로우가 발생하여 성능이 크게 저하됩니다 [1-3].
     *   `box-shadow`, `filter`, `border-radius`와 같은 속성도 브라우저의 렌더링 및 블렌딩 작업에 많은 자원을 요구하여 애니메이션을 느려지게 할 수 있으므로 남용을 피해야 합니다 [1, 4].
@@ -22,10 +39,41 @@
     *   애니메이션 코드를 작성한 후에는 반드시 [[Chrome DevTools|Chrome DevTools]]의 [[Performance Panel|Performance Panel]], Layer Profiler 등을 활용해 병목 현상을 파악하고, 저사양 기기에서도 원활히 동작하는지 테스트해야 합니다 [14, 15].
     *   전정기관 장애가 있는 사용자는 과도한 움직임에 어지러움을 느낄 수 있으므로, `prefers-reduced-motion` 미디어 쿼리를 활용해 애니메이션을 최소화하거나 끌 수 있는 방안을 마련해야 합니다 [14, 16, 17].
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** 애니메이션 (transition / keyframes), [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]], [[반응형 디자인|반응형 디자인]]
 - **Projects/Contexts:** [[실무에서 CSS 관리하는 방법|실무에서 CSS 관리하는 방법]] 관점에서 볼 때, 애니메이션은 "예쁘게" 만드는 것을 넘어 브라우저 렌더링 파이프라인(Layout -> Paint -> Composite)을 이해하고, 저사양 모바일 기기와 시각적 접근성(WCAG 기준)까지 만족시키는 공학적 구현이 동반되어야 합니다.
 - **Contradictions/Notes:** `will-change` 속성은 브라우저가 다가올 애니메이션을 대비하도록 하여 성능을 높일 수 있지만, 무분별하게 적용할 경우 과도한 메모리 사용과 최적화 오버헤드로 인해 오히려 렌더링 성능을 악화시킨다는 모순적 특징이 있어 주의가 필요합니다 [9, 10].
 
 ---
-*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 |