# [[CLS (Cumulative Layout Shift)]]

## 📌 Brief Summary
CLS(Cumulative Layout Shift)는 웹페이지가 로드되는 동안 발생하는 예기치 않은 레이아웃 이동의 총량을 측정하여 페이지의 시각적 안정성을 평가하는 Core Web Vitals의 핵심 지표입니다. 이 지표는 텍스트나 버튼이 갑자기 움직여 사용자가 잘못된 클릭을 하거나 방해받는 경험을 방지하는 데 중점을 둡니다. 2025년 기준, CLS는 사용자 경험(UX)과 검색 엔진 순위(SEO)를 결정짓는 중요한 요소로 평가되며, 우수한 웹 성능을 위해 필수적으로 최적화해야 합니다.

## 📖 기Core Content
**CLS의 중요성 및 비즈니스 영향**
* CLS는 사용자의 화면 시각적 안정성을 평가하며, 웹 사용자 중 70%가 시각적 안정성을 브랜드 신뢰 구축의 핵심 요소로 꼽습니다 [1].
* 페이지가 불안정하여 발생하는 예기치 못한 레이아웃 이동은 사용자의 불만을 야기하고 이탈률을 15%까지 증가시킬 수 있습니다 [2-5].
* CLS 점수를 0.25에서 0.05 수준으로 개선하면 전환율이 평균 8% 상승하고, 이탈률은 10% 감소하며, 수익이 6% 증가하는 실질적인 비즈니스 효과를 기대할 수 있습니다 [6]. 

**2025년 기준 CLS 임계값**
* 기존의 '우수(Good)' 기준은 0.1 미만이었으나, 2025년 Google의 Core Web Vitals 업데이트에 따라 0.08 미만으로 25% 더 엄격해졌습니다 [7, 8]. 
* 시각적 안정성을 위해 모든 최적화 작업 후 최종 CLS 수치를 0.08 미만으로 유지하는 것이 2025년의 필수 표준입니다 [9].

**CLS를 악화시키는 주요 원인**
* **크기가 지정되지 않은 미디어:** 이미지나 비디오에 명시적인 크기가 없으면 브라우저가 공간을 확보하지 못해 로딩 시 콘텐츠가 밀려납니다 [4, 5, 10].
* **동적 콘텐츠 삽입:** 배너, 광고, 알림 등 기존 콘텐츠의 위쪽에 사용자의 상호작용 없이 동적으로 삽입되는 요소가 레이아웃을 밀어냅니다 [4, 5, 10].
* **웹 폰트의 지연 로딩:** 폰트가 늦게 로드되면서 발생하는 FOIT(Flash of Invisible Text)나 FOUT(Flash of Unstyled Text) 현상이 텍스트 크기와 줄바꿈을 변경시켜 레이아웃을 뒤틀리게 합니다 [4, 5, 10].
* **잘못된 애니메이션 속성 사용:** `transform`이 아닌 `top`, `left`, `width`, `height` 같은 레이아웃 속성을 변경하는 애니메이션은 렌더링 트리의 재계산을 유발하여 화면을 흔들리게 합니다 [10, 11].

**효과적인 CLS 최적화 및 개선 전략**
* **명시적 크기 및 비율 지정:** 모든 이미지, 비디오 요소에 `width`, `height` 속성을 부여하거나 CSS의 `aspect-ratio`를 설정하여 브라우저가 렌더링 전 공간을 할당하도록 합니다 [4, 8, 9, 12, 13].
* **동적 요소의 공간 예약(Placeholder):** 광고 슬롯, 임베드 콘텐츠, 동적 댓글/리뷰 영역에는 `min-height`를 활용한 플레이스홀더를 적용하여 콘텐츠 로딩 전후의 레이아웃 변경을 방지합니다 [9, 12-14].
* **CSS `transform` 활용:** 애니메이션을 구현할 때는 레이아웃 변경에 영향을 주지 않고 GPU 가속을 활용하는 CSS `transform`(예: `translateX`)을 사용해야 합니다 [8, 11, 15].
* **폰트 로딩 최적화:** 웹 폰트 사용 시 CSS에 `font-display: swap` 또는 `font-display: optional`을 설정하여 텍스트의 구조적 변동을 최소화합니다 [4, 8, 9, 13, 15].
* **레이아웃 격리(CSS Containment):** CSS의 `contain: layout style paint` 속성을 사용하여 특정 동적 위젯이나 카드의 레이아웃 변경이 부모나 형제 요소에 파급되지 않도록 차단합니다 [14].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[SEO (Search Engine Optimization)]], [[LCP (Largest Contentful Paint)]], [[INP (Interaction to Next Paint)]], [[Web Performance Optimization]]
- **Projects/Contexts:** [[Google Page Experience 2025 Update]], [[Frontend Performance Checklist]]
- **Contradictions/Notes:** 많은 소스에서 여전히 일반적인 CLS의 우수(Good) 임계값을 0.1 미만으로 언급하고 있으나 [3, 4, 16, 17], 2025년 Google 업데이트를 세밀하게 다루는 최신 문서에서는 새로운 임계값이 0.08 미만으로 하향 조정(25% 더 엄격해짐)되었다고 명확히 강조합니다 [7, 8].

---
*Last updated: 2026-04-26*