Cumulative Layout Shift (CLS)란 무엇이며 어떻게 해결하는가

Cumulative Layout Shift (CLS)란 무엇인가?

Cumulative Layout Shift (CLS)는 Core Web Vitals의 "시각적 안정성" 부분을 나타냅니다. Cumulative Layout Shift (CLS)는 콘텐츠가 렌더링되거나 새 콘텐츠가 페이지에 표시될 때 페이지의 움직임을 측정합니다. 페이지의 얼마나 많은 부분이 예상치 못하게 이동하고 얼마나 멀리 이동하는지에 따라 점수를 계산합니다. 이러한 콘텐츠 이동은 매우 짜증나는 일이며, 읽기 시작한 기사의 위치를 잃어버리게 하거나 더 나쁜 경우에는 잘못된 버튼을 클릭하게 만듭니다!

좋은 Cumulative Layout Shift (CLS) 점수란 무엇인가?

좋은 CLS 점수는 0에서 0.1 사이입니다. CLS 점수가 0.1에서 0.25 사이이면 개선이 필요합니다. 0.25를 초과하는 CLS 점수는 불량으로 간주됩니다. Cumulative Layout Shift에 대한 Core Web Vitals를 통과하려면 방문자의 75% 이상이 "좋음" CLS 점수를 받아야 합니다.

웹 성능 및 UX에서 CLS의 중요성

Cumulative Layout Shift (CLS)는 로드되는 동안 웹페이지가 얼마나 안정적이고 예측 가능하게 느껴지는지에 직접적인 영향을 미치기 때문에 웹 성능 및 UX 모두와 관련이 있습니다. 중요한 이유는 다음과 같습니다.

• UX, 참여 및 브랜드 인식: 예상치 못한 레이아웃 변경은 사용자 흐름을 방해하여 정보를 찾고, 버튼을 클릭하고, 의도한 대로 페이지와 상호 작용하기 어렵게 만듭니다. 이러한 좌절감은 사용자가 웹사이트를 완전히 이탈하는 열악한 경험으로 이어질 수 있습니다. 웹사이트의 UX는 그 이면의 브랜드를 반영합니다. 빈번한 레이아웃 변경은 웹사이트가 제대로 설계되지 않거나 유지 관리되지 않는다는 인상을 주고, 사용자 참여를 방해하며, 상호 작용을 감소시키고 잠재적으로 더 높은 이탈률을 초래할 수 있습니다.
• 접근성: 레이아웃 변경은 보조 기술이나 화면 판독기에 의존하는 장애가 있는 사용자에게 특히 방해가 될 수 있습니다. 안정적인 레이아웃은 모든 사람이 웹사이트를 효과적으로 탐색하고 상호 작용할 수 있도록 보장합니다.
• SEO 및 검색 순위: Core Web Vitals는 Google에서 작지만 의미 있는 순위 요소입니다. Google 및 기타 검색 엔진은 훌륭한 UX를 제공하는 웹사이트를 우선시합니다. CLS는 Google이 웹사이트 순위를 매길 때 고려하는 Core Web Vitals 지표 중 하나입니다. CLS를 최적화하면 검색 결과에서 웹사이트의 경쟁 우위를 확보할 수 있습니다.

CLS는 어떻게 측정되는가?

페이지의 CLS는 Layout Instability API로 측정할 수 있습니다. 다음은 이 API의 간단한 사용법입니다.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

CLS 계산

CLS는 간단하지만 우아한 공식을 사용하여 계산됩니다.

CLS = sum(impact-fraction * distance-fraction)

영향분율은 페이지의 보이는 콘텐츠가 얼마나 많이 이동했는지를 측정합니다. 거리분율은 콘텐츠가 얼마나 멀리 이동했는지를 측정합니다. 예를 들어 페이지의 50%(얼마나 많이)가 페이지 뷰포트의 25%(얼마나 멀리)만큼 이동한 경우 CLS 점수 = 0.50 * 0.25 = 0.125입니다.

예상된 레이아웃 변경 vs. 예상치 못한 레이아웃 변경

모든 레이아웃 변경이 나쁜 것은 아니며 예상치 못한 변경만 문제가 됩니다. 예를 들어 "항목 더 보기" 링크를 클릭하면 페이지에 더 많은 항목이 나타나고 페이지 콘텐츠가 이동할 것으로 예상할 것입니다.

그렇기 때문에 예상치 못한 레이아웃 변경만 CLS에 반영됩니다. 예를 들어 사용자가 버튼을 클릭하고 그에 대한 반응으로 페이지에 새 콘텐츠(예: 메뉴 드롭다운)가 추가되는 경우 해당 레이아웃 변경은 CLS에서 제외됩니다. 정확히 말하자면 사용자 입력 후 500밀리초 이내에 발생하는 레이아웃 변경은 계산에서 제외됩니다.

레이아웃 변경 세션

CLS가 처음 도입되었을 때 일부 사이트는 나쁜 CLS 점수로 부당한 불이익을 받았습니다. 예를 들어 무한 스크롤을 구현하는 페이지는 각각의 새로운 스크롤에 대해 새로 추가된 콘텐츠의 영향이 총 CLS 점수에 추가되었을 것입니다. 그렇기 때문에 이제 CLS는 세션 단위로 계산됩니다. 각 세션의 최대 지속 시간은 5초이며 레이아웃 변경 사이에는 1초의 간격이 있습니다. 가장 높은 CLS 점수를 기록한 세션이 최종 CLS 점수가 됩니다.

예를 들어 첫 번째 세션 동안 CLS 점수가 0.095이고, 다음 세션에서 CLS가 0.15이며, 마지막 세션의 CLS 점수가 0인 경우, 최종 CLS 점수는 셋 중 가장 높은 0.15가 됩니다.

CLS 및 Core Web Vitals

Cumulative Layout Shift (CLS)는 시각적 안정성을 측정하는 중요하고 사용자 중심적인 지표입니다. Cumulative Layout Shift (CLS)는 Largest Contentful Paint (LCP) 및 Interaction to Next Paint (INP)와 함께 Core Web Vitals의 일부입니다. 이 세 가지 지표는 로딩 성능, 상호 작용성 및 시각적 안정성을 함께 측정합니다.

일반적인 CLS 원인

모든 레이아웃 변경의 기원은 기본적으로 동일합니다. 어느 시점에서 다른 요소 위에 배치된 요소가 이전보다 더 많거나 적은 공간을 차지하게 됩니다. 이는 일반적으로 다음 중 하나 이상의 원인 때문입니다.

크기가 지정되지 않은 이미지, 비디오 및 iframe

크기가 지정되지 않은 미디어는 웹에서 CLS의 가장 큰 원인입니다. 2025 Web Almanac에 따르면 모바일 페이지의 62%에는 명시적인 크기가 없는 이미지가 하나 이상 포함되어 있습니다. 크기가 지정되지 않은 이미지, 비디오, iframe, width: auto CSS 함정, 아트 디렉션, 반응형 이미지 불일치, 지연 로딩 및 자리 표시자 이미지에 대한 전체 가이드는 How Images and Media Cause Layout Shift를 참조하세요.

웹 폰트 교체

페이지가 fallback 폰트로 렌더링되는 동안 웹 폰트가 인터넷에서 다운로드됩니다. 웹 폰트가 도착하면 fallback 폰트와 최종 폰트 간의 크기 차이로 인해 레이아웃 변경이 발생합니다. 페이지의 11%만이 웹 폰트를 미리 로드하므로 웹의 대다수는 폰트 교체 CLS에 취약합니다.

해결 방법에는 두 가지 기술이 포함됩니다. @font-face 측정항목 재정의(size-adjust, ascent-override)를 사용하여 fallback 폰트를 웹 폰트와 일치시키고, 자체 호스팅(self-hosting) 및 중요한 폰트를 미리 로드하여 폰트 전송 속도를 높이는 것입니다. 코드 예제는 수정 및 식별 가이드를 참조하세요.

CSS 애니메이션 및 전환

top, left, width, height와 같이 레이아웃을 트리거하는 속성을 사용하는 CSS 애니메이션은 브라우저가 모든 프레임에서 레이아웃을 다시 계산하게 하여 CLS를 유발합니다. Web Almanac에 따르면 모바일 페이지의 39%가 CLS에 기여하는 합성되지 않은(non-composited) 애니메이션을 가지고 있습니다. 해결책은 대신 GPU 컴포지터에서 실행되고 레이아웃을 트리거하지 않는 transform 및 opacity를 사용하는 것입니다. 전체 설명은 CSS 전환으로 인한 레이아웃 변경을 참조하세요.

광고, 임베드 및 동적으로 주입된 콘텐츠

광고는 늦게 로드되어 콘텐츠를 아래로 밀어냅니다. 쿠키 동의 배너가 나타나며 페이지를 이동시킵니다. AJAX 요청은 공간을 예약하지 않고 새 콘텐츠를 주입합니다. 이들은 모두 동일한 문제입니다. 렌더링 시점에 브라우저가 알지 못했던 항목이 페이지에 나타나는 것입니다. 해결책은 항상 min-height로 공간을 확보하고 contain: layout style로 컨테이너를 격리하는 것입니다. YouTube 및 Google Maps와 같은 타사 임베드의 경우 파사드(facade) 패턴을 통해 CLS를 완전히 제거할 수 있습니다.

스크롤로 트리거되는 레이아웃 변경

이것은 Lighthouse가 절대 포착하지 못하는 CLS 원인입니다. 스크롤할 때 숨겨지는 헤더, 시차(parallax) 효과 및 축소되는 탐색 모음은 종종 top 또는 height를 애니메이션으로 처리하며, Layout Instability 사양에서 스크롤은 제외되는 입력이 아닙니다. 스크롤에 의해 트리거되는 모든 레이아웃 변경은 CLS 점수에 반영됩니다. 해결 방법: 스크롤로 트리거되는 모든 애니메이션에 transform: translateY()를 사용하세요. 전체 설명은 스크롤로 트리거되는 애니메이션이 CLS를 유발하는 방법을 참조하세요.

CLS 문제 찾기 및 수정

CLS 진단은 다른 Core Web Vitals와 동일한 현장 데이터 우선(field-data-first) 방법론을 따릅니다. Google Search Console 또는 CoreDash와 같은 RUM 도구로 시작하여 영향을 받는 페이지와 이동하는 요소를 확인하세요. 그런 다음 Chrome DevTools 또는 Core Web Vitals Visualizer 확장 프로그램을 사용하여 문제를 로컬에서 재현하고 근본 원인을 파악하세요.

모든 원인에 대한 단계별 진단 프로세스, 도구 설명, 코드 수정 및 빠른 수정 체크리스트에 대한 전체 내용은 전용 가이드인 Find and Fix Cumulative Layout Shift (CLS) Issues를 참조하세요.

사례 연구: Rakuten 24와 CLS의 비즈니스 영향

일본의 주요 이커머스 플랫폼인 Rakuten 24는 Cumulative Layout Shift가 비즈니스 지표에 미치는 영향에 대해 자세한 연구를 수행했습니다. 제품 및 카테고리 페이지에서 CLS를 줄임으로써 Rakuten 24는 놀라운 결과를 달성했습니다.

• CLS가 높은 사용자에 비해 CLS가 낮은 경험을 한 사용자의 방문자당 수익 53.37% 증가.
• 동일하게 개선된 CLS 집단에 대한 전환율 33.13% 증가.
• 안정적인 페이지 경험을 한 방문자 사이에서 이탈률 15.20% 감소.

이러한 수치는 CLS가 단순한 기술적 지표가 아님을 보여줍니다. 시각적 불안정성은 브라우징 및 구매 여정 중에 사용자에게 불만을 초래하여 기업의 수익 손실과 직결됩니다. 요소가 예상치 못하게 이동하면 사용자는 신뢰를 잃고 오클릭을 하며 세션을 포기합니다. Rakuten 24 연구는 모든 상호 작용이 중요한 이커머스 사이트에서 CLS 최적화에 대한 투자가 측정 가능한 투자 수익률을 가져온다는 것을 확인시켜 줍니다.

실제 CLS 데이터가 보여주는 것

CoreDash 데이터에 따르면 CLS는 성능이 가장 좋은 Core Web Vitals이며, corewebvitals.io 페이지 로드의 92.8%가 "좋음" 점수를 달성하고 모바일과 데스크톱 간의 기기 격차가 사실상 없습니다. 데스크톱(92.8% 좋음)과 모바일(92.7% 좋음) 모두 양쪽 기기 유형에서 p75가 0인 거의 완벽한 CLS 점수를 달성합니다.

이는 모바일 성능이 데스크톱보다 현저히 나쁜 LCP 및 INP와 같은 지표와 대조됩니다. 광범위한 웹에서 CLS는 모바일에서 데스크톱보다 유독 우수하며, 이는 다른 모든 Core Web Vitals와 반대되는 현상입니다.

전 세계적으로 2025 Web Almanac에 따르면 상황은 덜 낙관적입니다.

• 전체적으로 웹사이트의 72%가 좋은 CLS 점수를 얻은 반면 11%는 CLS가 불량합니다.
• 모바일 페이지의 62%는 크기가 지정되지 않은 이미지가 하나 이상 있습니다(2024년 66%에서 감소했지만 여전히 주요 CLS 기여 요소입니다).
• 모바일 페이지의 39%는 CLS에 기여하는 합성되지 않은 애니메이션을 가지고 있습니다.
• 페이지의 11%만이 웹 폰트를 미리 로드하므로 대다수의 사이트는 폰트 교체 레이아웃 변경에 취약합니다.

CLS는 전 세계적으로 전년 대비 꾸준한 개선을 보여주었지만, 데이터에 따르면 크기가 지정되지 않은 이미지와 합성되지 않은 애니메이션이 여전히 가장 일반적인 두 가지 원인입니다. 이 두 가지 문제만 해결해도 웹의 상당 부분에서 레이아웃 변경이 제거됩니다.

관련 가이드

이 허브 페이지는 Cumulative Layout Shift를 포괄적으로 다룹니다. CLS 문제를 찾고 수정하는 방법에 대한 상세하고 실용적인 지침은 다음의 전용 가이드를 살펴보세요.

• Find and Fix CLS Issues: 도구 설명, 모든 원인에 대한 코드 수정 및 빠른 수정 체크리스트가 포함된 완벽한 단계별 진단 가이드.
• How Images and Media Cause Layout Shift: 크기가 지정되지 않은 이미지, 비디오, iframe, 아트 디렉션, 반응형 이미지, 지연 로딩 및 자리 표시자로 인해 발생하는 CLS에 대한 결정적인 가이드.
• Fix layout shift caused by auto sizing images: 이미지 및 반응형 컨테이너에 적절한 크기를 추가하기 위한 전체 설명.
• Fix layout shift caused by CSS transitions: 레이아웃을 트리거하는 CSS 애니메이션을 식별하고 합성된 대안으로 교체.
• Scroll-triggered animations and CLS: Lighthouse가 포착할 수 없는 CLS 원인 및 해결 방법.
• Self-host Google Fonts: 적절한 font-display 및 사전 로드 전략을 사용하여 폰트를 자체 호스팅함으로써 폰트 로딩 CLS 감소.
• Ensure text remains visible during web font load: font-display 및 폰트 측정항목 재정의를 구성하여 폰트 교체 레이아웃 변경 제거.
• Build a chat widget with perfect Core Web Vitals: CLS, INP 또는 LCP 회귀를 유발하지 않고 타사 위젯을 구현한 사례 연구.

모든 Core Web Vitals 지표 및 최적화 전략에 대한 전체적인 개요는 Core Web Vitals overview를 방문하거나 사이트를 검사하려면 Ultimate Core Web Vitals Checklist를 사용하세요.