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

10_Wiki/Topics/Architecture/Cumulative-Layout-Shift-CLS.md

@@ -1,20 +1,33 @@
 ---
-category: Unified
+id: wiki-2026-0508-cumulative-layout-shift-cls
+title: Cumulative Layout Shift CLS
+category: 10_Wiki/Topics
+status: needs_review
+canonical_id: self
+aliases: []
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.92
 tags: [auto-consolidated, technical-documentation]
-title: [[Cumulative-Layout-Shift-CLS|Cumulative Layout Shift (CLS]]
-last_updated: 2026-05-02
+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
 ---
 
 # [[Cumulative-Layout-Shift-CLS|Cumulative Layout Shift (CLS]]
 
-## 📌 Brief Summary
+## 📌 한 줄 통찰 (The Karpathy Summary)
 > Cumulative Layout Shift (CLS)는 웹 페이지가 로드되는 동안 레이아웃과 콘텐츠가 얼마나 예기치 않게 이동하는지를 측정하는 시각적 안정성(Visual Stability) 지표입니다 [1, 2]. 구글의 코어 웹 바이탈([[Core Web Vitals|Core Web Vitals]])을 구성하는 핵심 지표 중 하나로, 나중에 렌더링된 콘텐츠가 중요한 콘텐츠를 밀어내면서 발생하는 사용자 경험의 저하를 방지하기 위해 사용됩니다 [1, 2]. CLS 점수는 0.1 미만을 유지하는 것이 권장됩니다 [3].
 
 ---
 
 > "사용자가 읽거나 클릭하려는 순간 콘텐츠가 춤추듯 이동하는 '시각적 불안정성'을 제거하고, 0.08초 이내의 고정된 안정감을 제공하여 인지적 마찰을 차단하라" — 페이지의 전체 수명 동안 발생하는 예기치 않은 레이아웃 이동을 측정하는 [[Core Web Vitals|Core Web Vitals]]의 핵심 사용자 경험 지표.
 
-## 📖 Core Content
+## 📖 구조화된 지식 (Synthesized Content)
 * **측정 기준 및 중요성:** 
   CLS는 시각적 안정성을 측정하는 지표로, 페이지 로드 중 요소들의 위치가 변경되는 레이아웃 이동 현상을 수치화합니다 [1, 2]. 이상적이고 쾌적한 사용자 경험을 위해 CLS 점수는 0.1 미만이어야 하며, 0.25를 초과할 경우 상태가 매우 나쁜 것으로 간주되어 성능 개선이 필요합니다 [3]. LCP, INP와 함께 최적화되어야 하는 코어 웹 바이탈의 중요 요소입니다 [4].
 
@@ -43,7 +56,7 @@ last_updated: 2026-05-02
     - **Font Display:** `font-display: swap` 설정을 통해 텍스트 구조 변동 최소화.
 - **의의:** 시각적 안정성을 확보함으로써 오클릭(Misclick)을 방지하고, 검색 엔진 랭킹 점수를 높이며 사용자의 신뢰도를 향상시킴.
 
-## ⚖️ Trade-offs & Caveats
+## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
 - **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
 - **정책 변화:** Programming & Language 분야의 자동 자산화 수행.
 
@@ -52,7 +65,7 @@ last_updated: 2026-05-02
 - **과거 데이터와의 충돌:** 과거에는 CLS 우수 기준이 0.1이었으나, 2025년 Google 정책 업데이트를 기점으로 0.08 미만(25% 강화)으로 더욱 엄격해짐.
 - **정책 변화:** Antigravity 프로젝트는 모든 UI 컴포넌트에 대해 'Zero Layout Shift' 정책을 강제하며, 빌드 타임에 이미지 크기 미지정 요소를 자동 검출하여 오류를 발생시키는 정책을 시행함.
 
-## 🔗 Knowledge Connections
+## 🔗 지식 연결 (Graph)
 - **Related Topics:** [[Core Web Vitals|Core Web Vitals]], Largest Contentful Paint (LCP), [[Interaction to Next Paint (INP)|Interaction to Next Paint (INP]]
 - **Projects/Contexts:** [[Chrome DevTools|Chrome DevTools]], [[Interop 2026|Interop 2026]]
 - **Contradictions/Notes:** CLS 수치는 기기의 해상도에 크게 의존하기 때문에 실제 방문자 데이터를 나타내는 현장(Field) 데이터와 개발자의 로컬(Local) 데이터 간에 차이가 발생하기 쉽습니다. 이러한 이유로 코어 웹 바이탈 지표 중에서도 에뮬레이션하여 측정하기 가장 까다로운 지표로 평가받습니다 [8].
@@ -66,3 +79,52 @@ last_updated: 2026-05-02
 
 - [[Core-Web-Vitals|Core-Web-Vitals]], LCP-Largest-Contentful-Paint, INP-Interaction-to-Next-Paint, Web-Performance-Optimization, SEO-Foundations
 - **Raw Source:** 00_Raw/CLS (Cumulative Layout Shift).md
+
+## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
+
+**언제 이 지식을 쓰는가:**
+- *(TODO)*
+
+**언제 쓰면 안 되는가:**
+- *(TODO)*
+
+## 🧪 검증 상태 (Validation)
+
+- **정보 상태:** needs_review
+- **출처 신뢰도:** A
+- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
+
+## 🧬 중복 검사 (Duplicate Check)
+
+- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
+- **처리 방식:** UPDATE (자동 정규화)
+- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
+
+## 🕓 변경 이력 (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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*