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

10_Wiki/Topics/Visual_Effects/애니메이션 (transition - keyframes).md

@@ -1,10 +1,26 @@
+---
+id: wiki-2026-0508-애니메이션-transition-keyframes
+title: 애니메이션 (transition   keyframes)
+category: 10_Wiki/Topics_Art
+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)
+---
+
 # [[애니메이션 (transition / keyframes)]]
 
 ## 📌 Brief 실전 Summary
 CSS 애니메이션(transition 및 keyframes)은 사용자 경험(UX)을 향상시키고 인터페이스의 상태 변화를 명확하게 전달하는 핵심 요소입니다. 하지만 단순히 "예쁘게" 만드는 것을 넘어 "유지보수 가능하고 성능이 최적화된" 방식으로 설계되어야 하며, 이를 위해서는 리플로우(Reflow)나 리페인트(Repaint)를 유발하는 속성 사용을 피하고 GPU 가속을 활용할 수 있는 속성을 전략적으로 선택하는 것이 실무 CSS 관리의 핵심입니다.
 
-## 📖 Core Content
-
+## 📖 구조화된 지식 (Synthesized Content)
 *   **UX/UI 관점에서의 애니메이션 역할 및 기본 원칙**
     CSS 트랜지션과 애니메이션은 상태 변화(모달 열기, 탭 전환), 마이크로 인터랙션(버튼 호버 효과 등), 로딩 상태 등을 시각적으로 전달하여 사용자의 인지 부하를 줄이고 직관적인 피드백을 제공합니다 [1-3]. 부자연스러운 선형(Linear) 효과보다는 `ease-in-out`과 같은 이징(Easing) 함수를 사용하여 자연스러운 움직임을 구현해야 하며, 애니메이션 지속 시간은 200ms에서 500ms 사이를 유지하는 것이 권장됩니다 [4].
 *   **레이아웃(Reflow) 및 고비용 속성 애니메이션 지양**
@@ -16,10 +32,45 @@ CSS 애니메이션(transition 및 keyframes)은 사용자 경험(UX)을 향상
     *   **will-change 속성 활용:** 브라우저가 요소의 변화를 미리 예측하고 최적화할 수 있도록 힌트를 주는 `will-change` 속성을 적용할 수 있습니다 [15, 16]. 단, 이 속성 자체도 과도하게 사용하면 리소스를 차지하므로 성능 문제가 발생하는 곳에만 최후의 수단으로 사용하는 것이 좋습니다 [15, 16].
     *   **절대 위치 지정 활용:** 애니메이션을 적용해야 하는 요소를 `position: fixed`나 `position: absolute`로 배치하면, 해당 요소가 움직일 때 문서 내 다른 요소의 레이아웃에 영향을 미치지 않기 때문에 전체 페이지 리플로우를 방지하고 리페인트만 발생시켜 비용을 줄일 수 있습니다 [17, 18]. 
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[Reflow 및 Repaint 최적화]], [[CSS 성능 최적화(Performance)]], [[UX/UI 마이크로 인터랙션]]
 - **Projects/Contexts:** [[실무에서의 CSS 유지보수 전략]], [[디자인 시스템의 모션 가이드라인(Design Tokens)]]
 - **Contradictions/Notes:** 애니메이션은 사용자 경험 향상에 매우 유용하지만, 무분별하고 과도한 모션은 사용자의 인지 부하를 높이거나 전정계 질환(vestibular disorders)이 있는 사용자에게 해로울 수 있습니다. 따라서 반드시 모션을 최소화하거나 끌 수 있도록 `prefers-reduced-motion` 미디어 쿼리를 함께 사용하여 접근성을 고려해야 한다고 소스는 강조하고 있습니다 [4, 19-21].
 
 ---
-*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 |