Antigravity Agent
69 lines
6.0 KiB
Markdown
69 lines
6.0 KiB
Markdown
---
|
|
category: Unified
|
|
tags: [auto-consolidated, technical-documentation]
|
|
title: [[Cumulative-Layout-Shift-CLS|Cumulative Layout Shift (CLS]]
|
|
last_updated: 2026-05-02
|
|
---
|
|
|
|
# [[Cumulative-Layout-Shift-CLS|Cumulative Layout Shift (CLS]]
|
|
|
|
## 📌 Brief 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
|
|
* **측정 기준 및 중요성:**
|
|
CLS는 시각적 안정성을 측정하는 지표로, 페이지 로드 중 요소들의 위치가 변경되는 레이아웃 이동 현상을 수치화합니다 [1, 2]. 이상적이고 쾌적한 사용자 경험을 위해 CLS 점수는 0.1 미만이어야 하며, 0.25를 초과할 경우 상태가 매우 나쁜 것으로 간주되어 성능 개선이 필요합니다 [3]. LCP, INP와 함께 최적화되어야 하는 코어 웹 바이탈의 중요 요소입니다 [4].
|
|
|
|
* **주요 발생 원인 및 최적화 방법:**
|
|
주로 앱 배너, 이미지, 광고, 임베드 요소 등이 화면에 나타나면서 기존에 렌더링된 콘텐츠를 아래로 밀어낼 때 발생합니다 [2, 5, 6]. 이를 방지하기 위해서는 이미지나 광고, 임베드 요소가 로드될 공간을 미리 확보(reserve space)해 두어야 하며, 기존에 있는 콘텐츠 위로 새로운 콘텐츠를 동적으로 삽입하는 것을 피해야 합니다 [6].
|
|
|
|
* **분석 및 디버깅:**
|
|
[[Chrome DevTools|Chrome DevTools]]의 성능(Performance) 패널을 사용해 CLS의 원인을 파악하고 디버깅할 수 있습니다 [7].
|
|
* 'Layout shifts' 트랙에서 레이아웃 이동은 보라색 다이아몬드로 표시되며, 시간상 근접성에 따라 클러스터 형태(보라색 선)로 그룹화됩니다 [7].
|
|
* 이 다이아몬드나 'Worst cluster 1 shift' 항목을 클릭하면 어떤 DOM 요소가 이동에 영향을 받았는지 식별할 수 있으며, 마우스를 올리면 뷰포트 내에서 해당 요소가 하이라이트됩니다 [7, 8].
|
|
|
|
* **브라우저 지원 동향:**
|
|
현재 구글을 중심으로 측정되고 있으나, 파이어폭스(Firefox)와 사파리(Safari)의 브라우저 호환성을 위한 [[Interop 2025|Interop 2025]] 프로젝트에는 CLS 지원이 계획되어 있지 않습니다 [9]. 다만, 차기 프로젝트인 [[Interop 2026|Interop 2026]]에 CLS를 포함하려는 제안이 존재합니다 [9].
|
|
|
|
---
|
|
|
|
- **추출된 패턴:** "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)을 방지하고, 검색 엔진 랭킹 점수를 높이며 사용자의 신뢰도를 향상시킴.
|
|
|
|
## ⚖️ Trade-offs & Caveats
|
|
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
|
- **정책 변화:** Programming & Language 분야의 자동 자산화 수행.
|
|
|
|
---
|
|
|
|
- **과거 데이터와의 충돌:** 과거에는 CLS 우수 기준이 0.1이었으나, 2025년 Google 정책 업데이트를 기점으로 0.08 미만(25% 강화)으로 더욱 엄격해짐.
|
|
- **정책 변화:** Antigravity 프로젝트는 모든 UI 컴포넌트에 대해 'Zero Layout Shift' 정책을 강제하며, 빌드 타임에 이미지 크기 미지정 요소를 자동 검출하여 오류를 발생시키는 정책을 시행함.
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **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].
|
|
|
|
---
|
|
*Last updated: 2026-04-19*
|
|
|
|
---
|
|
|
|
---
|
|
|
|
- [[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
|