Antigravity Agent
34 lines
2.7 KiB
Markdown
34 lines
2.7 KiB
Markdown
---
|
|
id: PERF-CWV-CLS-001
|
|
category: "10_Wiki/💡 Topics/AI"
|
|
confidence_score: 1.0
|
|
tags: [core-web-vitals, cls, performance, ux, visual-stability, frontend-optimization, seo]
|
|
last_reinforced: 2026-04-26
|
|
---
|
|
|
|
# Cumulative Layout Shift: CLS (누적 레이아웃 이동)
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> "사용자가 읽거나 클릭하려는 순간 콘텐츠가 춤추듯 이동하는 '시각적 불안정성'을 제거하고, 0.08초 이내의 고정된 안정감을 제공하여 인지적 마찰을 차단하라" — 페이지의 전체 수명 동안 발생하는 예기치 않은 레이아웃 이동을 측정하는 Core Web Vitals의 핵심 사용자 경험 지표.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
- **추출된 패턴:** "Predictive Space Allocation and Visual Isolation" — 콘텐츠가 로드되기 전에 브라우저가 필요한 공간을 미리 예약하여, 데이터 로딩 전후의 시각적 불일치를 제로로 만드는 패턴.
|
|
- **CLS 발생의 주요 원인:**
|
|
- **Sizeless Images/Ads:** 크기가 지정되지 않은 이미지나 동적 광고가 로드되면서 주변 콘텐츠를 밀어냄.
|
|
- **Dynamic Content Injection:** 배너나 툴팁이 기존 콘텐츠 위쪽에 갑자기 삽입됨.
|
|
- **FOIT/FOUT:** 웹 폰트 로딩 지연으로 인한 텍스트 크기 및 줄바꿈 변경.
|
|
- **CLS 최적화 전략:**
|
|
- **Explicit Dimensions:** 모든 미디어 요소에 `width`, `height` 또는 `aspect-ratio` 명시.
|
|
- **Placeholder Reservation:** 광고 및 동적 요소 슬롯에 `min-height`를 활용한 공간 확보.
|
|
- **CSS Transform:** 위치 이동 애니메이션 시 레이아웃 재계산을 유발하지 않는 `transform` 속성 사용.
|
|
- **Font Display:** `font-display: swap` 설정을 통해 텍스트 구조 변동 최소화.
|
|
- **의의:** 시각적 안정성을 확보함으로써 오클릭(Misclick)을 방지하고, 검색 엔진 랭킹 점수를 높이며 사용자의 신뢰도를 향상시킴.
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌:** 과거에는 CLS 우수 기준이 0.1이었으나, 2025년 Google 정책 업데이트를 기점으로 0.08 미만(25% 강화)으로 더욱 엄격해짐.
|
|
- **정책 변화:** Antigravity 프로젝트는 모든 UI 컴포넌트에 대해 'Zero Layout Shift' 정책을 강제하며, 빌드 타임에 이미지 크기 미지정 요소를 자동 검출하여 오류를 발생시키는 정책을 시행함.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- [[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
|