CLS(누적 레이아웃 이동)
Cumulative Layout Shift · 누적 레이아웃 이동
CLS는 페이지가 열려 있는 동안 발생한 예상 밖 레이아웃 이동을 세션 묶음으로 계산해 가장 큰 누적 점수를 나타내고 실제 사용자가 겪은 시각적 불안정을 대표하는 Core Web Vital입니다. 초·밀리초 같은 시간 단위가 아니라 화면 영향 범위와 이동 거리에서 계산한 점수입니다.
AI 보조 조사·작성 후 원문과 대조한 설명입니다. 사례·계산은 별도 출처 표기가 없는 한 이해를 위한 가상 예시이며 실제 고객 성과가 아닙니다.
CLS 숫자는 어떻게 만들어지나요?
web.dev CLS 문서는 보이는 요소가 두 프레임 사이에서 예상 밖으로 움직인 정도를 영향 범위와 이동 거리로 계산하고 가장 큰 세션 묶음 점수를 CLS로 설명합니다. Web Vitals 문서는 권장 CLS를 0.1 이하로 제시하며 실제 사용자 페이지 로드의 75번째 백분위수를 사용합니다. 숫자 뒤에 초나 밀리초 단위를 붙이지 않습니다.
가상 페이지에서 어떤 이동을 찾나요?
가상 기사 상단의 광고가 늦게 나타나 제목을 아래로 밀었다고 가정합니다. 광고·이미지 영역의 크기를 미리 확보하고 웹폰트와 동적 배너가 기존 콘텐츠 위치를 바꾸는지 확인합니다. 새 버튼이 아래에 추가돼 다른 요소를 밀지 않으면 그 버튼 자체보다 밀려난 기존 요소가 불안정 요소로 계산될 수 있습니다.
원인 후보
- width와 height가 없는 이미지·동영상
- 공간을 예약하지 않은 광고·임베드
- 대체 글꼴과 실제 글꼴의 크기 차이
- 기존 콘텐츠 위에 삽입되는 비동기 메시지
사용자 입력 뒤 움직임도 모두 나쁜가요?
사용자가 버튼을 누른 직후 예상한 영역이 열리는 이동은 최근 입력과 가까우면 계산에서 제외될 수 있습니다. 반대로 네트워크 응답이 늦어 한참 뒤 콘텐츠가 끼어들면 예상하기 어려운 이동이 됩니다. 애니메이션도 transform을 쓰는지 레이아웃 속성을 바꾸는지에 따라 시각 경험과 계산이 달라질 수 있습니다.
CLS 0.1을 모든 세션에서 보장할 수 있나요?
보장할 수 없습니다. 개인화 광고, 캐시, 글꼴, 뷰포트와 iframe 내용이 사용자마다 달라 필드 분포가 바뀌며 개발 환경에서 재현되지 않는 이동도 있습니다. 이동 요소와 발생 시각과 사용자 입력 여부와 환경을 함께 기록해야 실험실의 짧은 로드에서 0이 나온 결과를 전체 방문의 시각 안정성으로 확대하지 않을 수 있습니다. 광고나 개인화 영역을 제거한 실험실 페이지와 실제 운영 페이지의 구성 차이도 함께 적어야 재현 환경에서 보이지 않는 이동을 측정 오류라고 잘못 제외하지 않을 수 있습니다.
자주 묻는 질문
- CLS는 몇 초를 뜻하나요?
- 시간 단위가 아닙니다. 예상 밖 레이아웃 이동의 영향 범위와 이동 거리를 바탕으로 계산한 점수입니다.
- 버튼을 누른 뒤 영역이 펼쳐지면 무조건 CLS인가요?
- 사용자 입력과 가까운 예상된 이동은 제외될 수 있습니다. 지연된 삽입과 주변 요소 이동을 실제 측정에서 확인해야 합니다.
출처와 확인 범위
- Cumulative Layout Shift (CLS) · web.dev · 확인 2026-10-27
CLS는 예상하지 못한 레이아웃 이동의 가장 큰 세션 묶음 점수이며 초 단위 시간이 아니라 영향 범위와 이동 거리에서 계산한 무차원 점수입니다.
확인 범위: 표시한 절의 정의·프로토콜·측정 조건·한계만 사용했습니다. 크롤링·렌더링·색인·검색 노출·속도·순위·처리 기간 보장은 근거로 사용하지 않았습니다.
- Web Vitals · web.dev · 확인 2026-10-27
Core Web Vitals는 로딩·반응성·시각 안정성을 나타내는 LCP·INP·CLS이며 권장 기준은 모바일·데스크톱별 75번째 백분위수로 평가합니다.
확인 범위: 표시한 절의 정의·프로토콜·측정 조건·한계만 사용했습니다. 크롤링·렌더링·색인·검색 노출·속도·순위·처리 기간 보장은 근거로 사용하지 않았습니다.