# [[Cumulative Layout Shift (CLS)]]

## 📌 Brief Summary
Cumulative Layout Shift(CLS)는 웹페이지가 로드되는 동안 발생하는 예기치 않은 레이아웃의 이동(Layout Shift)을 추적하여 시각적 안정성(Visual Stability)을 측정하는 핵심 웹 바이탈(Core Web Vitals) 지표입니다 [1-3]. 이 지표는 텍스트나 버튼 등이 갑자기 움직여 사용자가 원치 않는 상호작용을 하게 되는 정도를 수치화하며, 우수한 사용자 경험과 SEO 순위 확보를 위해 필수적으로 관리되어야 합니다 [4, 5]. 2025년 구글 업데이트 기준으로 우수한(Good) CLS 점수는 0.1 이하에서 0.08 미만으로 더욱 엄격해지는 추세입니다 [6-8].

## 📖 Core Content
**CLS의 중요성 및 비즈니스 영향**
*   CLS는 페이지의 시각적 불안정성을 수치화한 것으로, 불안정한 레이아웃은 사용자의 신뢰도를 잃게 하고 이탈률을 높이는 주요 원인으로 작용합니다 [3, 5, 9].
*   실제 성능 데이터에 따르면, CLS 점수를 0.25에서 0.05로 개선했을 때 평균적으로 전환율이 8% 증가하고, 이탈률은 10% 감소하며, 수익이 6% 증가하는 비즈니스 성과를 보였습니다 [10].
*   특히 모바일 환경이나 이커머스의 결제 흐름(checkout flow)에서 레이아웃의 이동은 치명적인 사용자 불만을 초래하여 전환 포기를 야기할 수 있습니다 [11].

**CLS 점수를 저하시키는 주요 원인**
*   가로(width)와 세로(height) 크기가 지정되지 않은 채 로드되는 이미지 및 비디오 [3, 12].
*   기존 콘텐츠의 상단에 동적으로 주입되거나 뒤늦게 로드되는 광고, 배너 및 알림 [3, 5].
*   로드 속도가 느려 FOIT(Flash of Invisible Text)나 FOUT(Flash of Unstyled Text)를 유발하는 웹 폰트 [3, 5].
*   레이아웃 변화를 일으키는 잘못된 CSS 속성(`top`, `left`, `width`, `height`)을 사용한 애니메이션 [3, 13].

**CLS 최적화 및 해결 전략**
*   **명시적 크기 지정:** 모든 이미지와 비디오 태그에 `width` 및 `height` 속성을 명시하여 브라우저가 렌더링 전 필요한 공간을 미리 확보하게 해야 합니다 [7, 12, 14].
*   **동적 콘텐츠 공간 예약:** 광고 슬롯이나 임베드 요소가 들어갈 자리에 `min-height`나 종횡비 비율(aspect-ratio)을 활용한 박스를 만들어 공간을 미리 예약합니다 [7, 12, 14, 15].
*   **웹 폰트 최적화:** CSS에 `font-display: swap` 또는 `font-display: optional` 속성을 적용하여 폰트 로드 시 발생하는 시각적 이동 및 텍스트 숨김 현상을 방지합니다 [7, 11-13].
*   **안전한 애니메이션 사용:** 요소의 위치나 크기를 변경할 때 레이아웃 계산을 트리거하는 속성 대신, `transform` (예: `transform: translateX()`) 속성을 사용하여 GPU 가속을 활용하고 레이아웃 변화를 방지합니다 [7, 13].
*   **의도치 않은 콘텐츠 삽입 금지:** 사용자 상호작용 없이 기존에 렌더링 된 콘텐츠의 상단(above existing content)에 새로운 콘텐츠를 끼워 넣지 않도록 주의해야 합니다 [7, 16].
*   **렌더링 격리:** CSS의 `contain` 속성(`contain: layout style paint`)을 사용하여 특정 위젯이나 카드의 스타일 재계산이 페이지 전체의 레이아웃에 영향을 미치지 않도록 격리합니다 [17].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[Largest Contentful Paint (LCP)]], [[Interaction to Next Paint (INP)]], [[Search Engine Optimization (SEO)]], [[User Experience (UX)]]
- **Projects/Contexts:** [[Google Page Experience 2025 Update]], [[eCommerce Web Performance Optimization]]
- **Contradictions/Notes:** 2025년 기준 CLS의 이상적인 목표치(Threshold)에 대해 소스 간 약간의 차이가 존재합니다. 다수의 소스는 기존 기준인 "0.1 이하"를 여전히 권장 기준(Good)으로 언급하고 있으나 [2, 8, 18], 다른 자료에서는 2025년 업데이트를 통해 임계값이 기존 0.1에서 "0.08 미만"으로 더욱 엄격하게 변경되었다고 명시하고 있습니다 [6, 7].

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