이미지 로딩 화면 밀림(CLS), 원인과 방지법
이미지가 나중에 로드되면서 화면 아래 콘텐츠가 갑자기 훅 밀리는 경험을 해본 적이 있을 것입니다. 이 현상에는 CLS(Cumulative Layout Shift)라는 이름이 붙어 있고, 원인도 명확합니다. 브라우저가 이미지를 다운로드하기 전까지 그 크기를 모르기 때문입니다.
요약 ① 이미지에 가로·세로 크기가 지정돼 있지 않으면 브라우저는 다운로드가 끝나야 실제 크기를 알게 되고, 그 순간 레이아웃이 밀립니다(CLS). ② HTML의 width·height 속성이나 CSS aspect-ratio로 크기를 미리 알려주면 브라우저가 로드 전부터 자리를 확보해 둡니다. ③ 최종 이미지가 아직 없다면, 같은 픽셀 크기의 플레이스홀더 이미지를 자리에 먼저 넣어 두는 방법으로 화면 밀림을 확인·방지할 수 있습니다.
이미지 로딩 후 화면이 밀리는 이유
브라우저는 페이지를 그릴 때 각 요소가 차지할 자리를 위에서 아래로 순서대로 계산합니다. <img> 태그에 크기 정보가 없으면 브라우저는 일단 그 자리를 거의 0에 가깝게 잡아두고, 이미지 파일을 다 내려받은 뒤에야 실제 가로·세로 픽셀 값을 알게 됩니다.
그 순간 브라우저는 이미지가 차지할 공간만큼 레이아웃을 다시 계산합니다. 이미지 아래에 있던 글자나 버튼이 그 크기만큼 아래로 밀려나는데, 이 밀림의 크기를 측정한 지표가 구글이 발표한 코어 웹 바이탈 중 하나인 CLS입니다.
모바일처럼 이미지 로딩이 느린 환경에서는 이 현상이 더 두드러집니다. 읽던 문단이 밀리면서 엉뚱한 버튼을 누르게 되는 것도 CLS가 큰 페이지에서 흔히 겪는 일입니다.
화면 밀림을 막는 방법 — 직접 확인해 보기
가장 확실한 해결책은 이미지 태그에 실제 크기를 미리 적어 두는 것입니다. width="1200" height="630"처럼 가로·세로 픽셀 값을 지정하면, 브라우저는 파일을 다 받기 전에도 그 비율만큼 자리를 미리 확보해 둡니다. CSS의 aspect-ratio 속성도 같은 역할을 합니다.
문제는 최종 이미지가 아직 준비되지 않은 경우입니다. 디자인 시안이나 개발 중인 화면에 실제 사진 대신 자리만 잡아 둘 이미지가 필요한데, 크기가 다르면 나중에 진짜 이미지로 바꿔 끼우는 순간 다시 레이아웃이 밀립니다.
이때는 최종 이미지와 동일한 가로·세로 픽셀 크기를 가진 임시 이미지를 만들어 그 자리에 먼저 넣어 두면 됩니다. 이미지 편집 프로그램에서 원하는 크기의 캔버스를 새로 만들고 배경색만 채워 저장해도 같은 효과를 낼 수 있습니다.
저희 도구로 확인하기. 매번 편집 프로그램을 열어 캔버스를 새로 만드는 대신, 가로·세로 값만 입력하면 그 크기 그대로의 이미지를 바로 만들어 다운로드할 수 있습니다.
무료 · 가입 불필요 · 브라우저에서만 처리(서버 전송 없음)
화면에 나온 크기 값과 라벨은 이미지 자체에 그려진 픽셀이므로, 이 파일을 실제 자리에 넣어 두면 진짜 이미지로 교체하기 전까지 그 자리의 가로·세로 크기가 정확히 유지됩니다.
자주 막히는 지점
| 상황 | 실제로 일어나는 일 |
|---|---|
<img>에 width·height를 아예 안 씀 | 브라우저가 크기를 모른 채 그리다가, 로드 완료 시점에 레이아웃이 밀립니다 |
| 플레이스홀더 크기가 최종 이미지와 다름 | 나중에 진짜 이미지로 바꿔 끼우는 순간 그 차이만큼 다시 밀립니다 |
| width·height는 지정했지만 실제 비율과 다름 | 이미지가 늘어나거나 찌그러져 보일 수 있습니다 |
| CSS aspect-ratio만 쓰고 width·height는 생략 | 최신 브라우저는 자리를 확보하지만, 구버전 대응이 필요하면 속성도 함께 씁니다 |
정리
이미지 로딩 후 화면이 갑자기 밀리는 CLS 현상은 브라우저가 이미지 크기를 미리 모른다는 단순한 이유에서 생깁니다. <img> 태그에 가로·세로 픽셀 값을 적어 두거나 CSS aspect-ratio를 지정하면 대부분 해결됩니다.
최종 이미지가 아직 없는 개발·디자인 단계에서는, 같은 크기의 플레이스홀더 이미지를 자리에 먼저 넣어 두는 것만으로도 화면 밀림 없이 작업을 이어갈 수 있습니다.
무료 · 가입 불필요 · 브라우저에서만 처리(서버 전송 없음)
자주 묻는 질문
width·height를 지정해도 실제 이미지 비율이 다르면 어떻게 되나요?
브라우저는 지정된 가로·세로 값을 기준으로 자리를 미리 확보하지만, 실제 이미지의 원본 비율이 다르면 CSS 설정에 따라 이미지가 늘어나거나 찌그러져 보일 수 있습니다. 자리 확보와 별개로, 최종 이미지와 같은 비율로 크기를 지정해야 화면이 밀리지도 이미지가 찌그러지지도 않습니다.
CSS aspect-ratio만 쓰면 width·height 속성은 안 써도 되나요?
최신 브라우저에서는 aspect-ratio 속성만으로도 이미지가 로드되기 전에 자리를 확보합니다. 다만 일부 구버전 브라우저는 이 속성을 지원하지 않으므로, 폭넓은 호환성이 필요하다면 width·height 속성도 함께 적어 두는 편이 안전합니다.
플레이스홀더에 적은 크기·라벨 문구가 다운로드한 파일에도 그대로 남나요?
네. 화면에 보이는 문구는 캔버스에 그려진 뒤 그대로 PNG·JPG·WebP 파일로 저장되므로, 다운로드한 파일을 열어도 같은 문구가 이미지 안에 박혀 있습니다. 실제 서비스에 쓰기 전에는 이 문구가 남지 않은 진짜 이미지로 교체해야 합니다.
화면이 얼마나 밀리는지는 어떻게 확인하나요?
크롬 개발자 도구의 Lighthouse 패널이나 구글 PageSpeed Insights에 페이지 주소를 넣으면 CLS 수치와 함께 어떤 요소가 밀림을 일으켰는지 알려줍니다. 이미지에 크기를 지정하기 전후로 이 점수를 비교해 보면 효과를 바로 확인할 수 있습니다.