CLS란? 홈페이지 로딩 중 화면이 갑자기 움직이는 현상을 쉽게 이해하기

누르려던 버튼이 갑자기 밀리면

결제 버튼을 누르려는 순간 위 광고·이미지가 나타나 버튼이 아래로 밀리면 잘못된 클릭이 날 수 있습니다. CLS(Cumulative Layout Shift)는 이용 중 예상하지 못한 화면 배치 이동을 누적해 평가합니다. 책 읽다 위쪽에 종이가 끼워져 문장이 내려가는 것과 비슷합니다. Layout Shift = 요소가 갑자기 자리를 바꾸는 현상입니다. 「더보기」로 펼치는 것처럼 사용자가 유발한 변화와, 아무 행동 없이 광고가 밀어내는 이동은 구분합니다.

Core Web Vitals에서의 위치

LCP = 보이는 속도, INP = 반응하는 속도, CLS = 화면 안정성입니다. 히어로가 빨라도(LCP 좋음) 공간 없이 본문을 밀면 CLS는 나쁠 수 있고, 버튼 반응은 빨라도(INP 좋음) 위치가 움직이면 여전히 불편합니다. CLS는 초 단위가 아니라 단위 없는 점수입니다(「0.2초」라고 말하면 잘못된 표현).

문제: 표시 → 공간 없는 이미지/광고 로딩 → 본문·버튼 밀림 → Layout Shift
개선: 공간·비율 미리 확보 → 제목·버튼 위치 유지 → 이미지/광고가 그 자리에 채워짐
TTFB·LCP·INP·CLS는 서로 다른 축 — 하나를 고친다고 나머지가 자동 해결되지 않음

이미지 · 비율 · Skeleton

가장 흔한 원인은 크기 없는 이미지입니다. width/height나 CSS aspect-ratio로 공간을 미리 잡으면 로딩 후에도 아래 콘텐츠가 덜 밀립니다. 반응형 width:100%여도 원본 비율 힌트는 유용합니다. Skeleton은 실제 높이와 비슷해야 효과가 있고, 작은 스피너만 두다 거대한 카드가 나타나면 오히려 Shift가 큽니다. 슬라이드 높이·비율이 장마다 다르면 아래 섹션이 위아래로 뛸 수 있어 컨테이너를 맞추고 object-fit을 검토합니다. iframe·유튜브도 16:9 등 비율 확보가 중요합니다.

광고 · 배너 · 폰트 · JS 삽입

광고·쿠키 배너·추천 영역·관리자 툴바가 표시 후 위쪽에 끼면 전체가 밀립니다 — 예상 크기·최소 높이를 확보하거나 겹쳐 표시하는 방식을 검토합니다(지나치게 큰 빈 공간도 UX를 해칩니다). 웹폰트 교체로 줄바꿈·높이가 바뀌면 Shift가 납니다 — 필요 굵기만, 대체 글꼴과의 차이를 줄이고 font-display 전략을 균형 있게. JS가 Viewport 위쪽에 콘텐츠를 끼우면 위험하고, 아래쪽 확장이 상대적으로 안전합니다. SPA·Hydration·A/B·마케팅 위젯도 SSR/SSG만으로 해결되지 않습니다. 채팅·알림처럼 실시간 추가 시 현재 읽던 위치를 유지하는 설계가 중요합니다.

측정 · 점검 순서

RUM은 실제 광고·모바일 줄바꿈을 반영하고, Lighthouse·개발자 도구는 어떤 요소가 움직였는지 찾기에 좋습니다. Lab에는 광고가 없고 Field에만 나타날 수 있습니다(합성과 함께). 순서: 움직이는 요소 → 이미지 비율 → 광고/위젯 공간 → 웹폰트 → JS 위쪽 삽입 → 모바일 별도. 배포 후 급증하면 배너·폰트 변경을 CI/CD·버전과 대조합니다. SEO 전용 점수가 아니라 읽기·클릭 안정성 지표이며, TTFB와도 별개입니다.

자주 묻는 질문

정리

CLS는 예상하지 못한 화면 이동 정도를 평가하는 지표입니다. LCP = 보이는 속도, INP = 반응하는 속도, CLS = 안정성. 핵심은 나중에 나타날 요소의 공간을 미리 확보하는 것입니다 — 이미지·광고·iframe·폰트·갑작스러운 삽입을 점검하세요. TTFB·LCP·INP·CLS는 서로 다른 관점입니다. 실제 도구에서 또 자주 보이는 지표는 「콘텐츠가 처음으로 하나라도 나타나기까지」인 FCP(First Contentful Paint)입니다.