2026-07-13 · 웹 성능
CLS(Cumulative Layout Shift)는 페이지가 로드되는 동안 요소가 갑자기 움직여 사용자를 당황하게 만드는 정도를 수치화한 코어 웹 바이탈 지표입니다. 0.1 이하를 권장하며, 값이 클수록 검색 순위와 사용자 경험에 불리합니다.
CLS의 가장 흔한 원인은 크기가 지정되지 않은 이미지입니다. Next.js의 next/image는 width와 height를 요구해 로드 전에 공간을 예약하므로 이동이 발생하지 않습니다. 반응형이라면 fill과 부모의 position:relative, aspect-ratio를 조합해 비율을 고정하세요.
웹폰트가 늦게 로드되면 글자 크기가 바뀌며 레이아웃이 흔들립니다. next/font를 사용하면 폰트가 빌드 시 최적화되고 font-display: optional·사이즈 조정 메타데이터가 자동 적용되어 폰트 교체로 인한 이동을 크게 줄일 수 있습니다.
광고, 배너, 비동기로 불러오는 컴포넌트는 자리를 미리 잡아 두어야 합니다. 컨테이너에 min-height를 지정하거나 스켈레톤 UI를 넣어, 콘텐츠가 도착해도 주변 요소가 밀리지 않게 합니다. 기존 콘텐츠 위에 요소를 삽입하는 패턴은 피하세요.
이미지 크기 명시, 폰트 최적화, 동적 영역 예약 — 이 세 가지가 CLS 개선의 핵심입니다. Next.js가 제공하는 next/image와 next/font를 적극 활용하면 적은 노력으로 안정적인 레이아웃을 얻을 수 있습니다.