이미지가 늦게 뜰 때 글이 밀리는 이유와 공간을 미리 잡는 방법

파일을 아직 받지 못해도 필요한 공간은 정할 수 있습니다

사진을 늦게 불러오는 페이지에서 먼저 볼 것은 네트워크 속도만이 아닙니다. 브라우저가 이미지의 가로세로 비율을 알고 있는지 확인합니다. 크기를 모르면 처음에는 작은 영역으로 배치했다가 실제 파일을 읽은 뒤 높이를 늘릴 수 있습니다. 그 아래에 있던 설명과 버튼이 함께 이동하면 사용자는 같은 화면에서 갑자기 다른 위치를 보게 됩니다.

web.dev의 CLS 개선 안내는 크기 없는 이미지, 광고·삽입 콘텐츠, 늦게 추가되는 요소와 웹 글꼴을 흔한 이동 원인으로 설명합니다. 이미지에는 실제 비율과 맞는 width·height를 제공하거나 적절한 공간을 미리 확보하는 방법을 제시합니다. 이 글은 그중 이미지 영역 한 개를 대상으로 원리를 살펴봅니다.참고: web.dev · Optimize Cumulative Layout Shift

아래 예제는 외부 이미지를 다운로드하지 않습니다. 색 상자가 나중에 들어오는 이미지를 대신하며, 그 뒤 문장의 위치를 비교합니다. 네트워크가 느린 것처럼 시간을 꾸미거나 사이트의 실제 성능 점수로 표시하지 않습니다. 공간 예약 유무만 바꿨을 때 같은 크기의 요소가 주변에 미치는 차이를 볼 수 있도록 입력을 단순하게 고정했습니다.

width와 height는 반응형을 포기하라는 뜻이 아닙니다

HTML에 width=1200, height=800을 적었다고 모바일에서 반드시 1200px로 보여야 하는 것은 아닙니다. 이미지의 비율을 알려 주고 CSS로 사용 가능한 폭에 맞추는 방식이 가능합니다. 실제 파일이 1200×800이라면 비율은 3:2입니다. 표시 폭이 300px인 구간에서는 같은 비율의 높이가 200px이 됩니다.참고: MDN Web Docs · The Image Embed element

<img src="tray.jpg" width="1200" height="800" alt="테두리가 있는 트레이">
img { max-width: 100%; height: auto; }

반대로 3:2 이미지에 1:1 속성을 적으면 처음 예약한 공간과 최종 이미지의 비율이 다를 수 있습니다. 잘못된 숫자를 아무 값이나 넣는 것으로 문제가 해결되는 것은 아닙니다. 크롭한 썸네일과 본문 원본이 다른 비율이라면 각각을 구분하고, 교체한 파일의 크기와 코드의 비율도 함께 갱신해야 합니다.

같은 크기의 상자를 예약할 때와 하지 않을 때를 비교합니다

이 예제의 이미지 상자는 높이 160px입니다. 공간을 예약하지 않은 상태에서는 이미지가 없는 동안 그 영역의 높이가 0이고, 상자를 표시하면 아래 문장이 이동합니다. 예약한 상태에서는 상자가 없을 때도 160px 영역을 남기므로 표시 자체가 아래 문장의 시작 위치를 바꾸지 않습니다. 이동량은 예제 내부의 문장 위치 차이로 계산합니다.

여기서 보여 주는 픽셀 값은 CLS 점수가 아닙니다. CLS는 화면에서 이동한 영역과 이동 거리 등을 조합하는 별도 지표이며, 사용자가 직접 일으킨 변화에 관한 조건도 있습니다. 버튼을 눌러 상자를 넣는 이 예제는 시각적 원리를 비교하기 위한 것입니다. 값이 0이라고 해서 실제 사이트의 모든 이미지·광고·글꼴 이동이 사라졌다고 해석하지 않습니다.참고: web.dev · Cumulative Layout Shift (CLS)

지연 로딩과 잘라 보여 주는 방식도 따로 확인합니다

loading=lazy는 이미지를 언제 불러올지에 관한 힌트이지 이미지가 들어갈 공간을 자동으로 설계하는 방법은 아닙니다. 지연 로딩 이미지도 적절한 비율을 제공해야 합니다. 반대로 첫 화면에서 바로 필요한 대표 이미지를 늦게 요청하면 사용자가 핵심 화면을 기다리는 문제가 생길 수 있으므로 모든 이미지에 같은 로딩 방식을 일괄 적용하지 않습니다.참고: MDN Web Docs · The Image Embed element

카드를 일정한 높이로 맞추면서 object-fit:cover로 이미지를 자르면 레이아웃은 안정적이어도 중요한 부분이 잘릴 수 있습니다. 상품의 손잡이, 치수선, 구성품 끝부분이 사라지는지 따로 봐야 합니다. 공간을 확보했다는 기술 상태와 정보를 온전히 보여 준다는 편집 상태가 모두 맞아야 합니다. 도식이나 가격표가 들어 있는 이미지에는 잘라내는 썸네일 방식을 특히 조심해서 적용합니다.

이미지를 고쳤는데도 밀린다면 위쪽 요소를 봅니다

이동한 문장이 원인인 것은 아닐 수 있습니다. 그 위에 새 공지 배너가 들어오거나 광고 영역이 커지면 문장 자체의 CSS가 그대로여도 위치가 바뀝니다. 개발 도구에서 이동한 요소를 찾았더라도 주변에서 크기가 달라진 요소를 함께 봐야 합니다. 원인을 찾지 않고 문장의 위쪽 여백을 줄이면 다른 상태에서 간격이 다시 어긋날 수 있습니다.

광고나 외부 위젯은 실제 높이가 항상 같지 않을 수 있어 공간 예약에 절충이 필요합니다. 요청이 실패했을 때 확보한 공간을 갑자기 없애는 동작도 다른 이동을 만듭니다. 글꼴 교체로 제목 줄 수가 달라지는 경우에는 이미지 예약만으로 해결되지 않습니다. 처음 로드할 때뿐 아니라 스크롤 뒤·메뉴 열기 뒤·느린 연결 상태를 구분해 기록합니다.참고: web.dev · Optimize Cumulative Layout Shift

고정 배너를 본문 위에 겹쳐 놓으면 문서 흐름이 움직이지 않을 수 있지만 글자나 버튼을 가리는 문제가 생길 수 있습니다. 이동 점수를 낮추기 위해 콘텐츠를 덮는 방식은 좋은 해결이 아닙니다. 실제 읽을 수 있는 영역과 키보드 초점이 가려지는지도 확인하고, 배너가 꼭 필요한 시점과 닫을 수 있는 방법을 함께 검토합니다.

측정할 때는 주소와 로딩 상태를 같이 적습니다

검사 기록에는 URL, 화면 폭, 연결 조건, 캐시 사용 여부, 글꼴 상태와 바뀐 요소를 적습니다. 처음 방문과 재방문은 리소스가 준비된 정도가 다를 수 있습니다. 한 번의 개발 도구 결과를 모든 방문자의 평균 경험으로 말하지 않고, 실제 사용자 데이터가 있다면 별도 자료로 구분합니다.

1. 크기가 늦게 결정되는 이미지·광고·삽입 요소를 찾습니다.
2. 실제 파일 비율과 HTML 속성 또는 예약 CSS를 대조합니다.
3. 내용을 표시하기 전후의 주변 위치와 잘림을 확인합니다.
4. 초기 로드와 나중에 추가되는 콘텐츠의 변화를 따로 기록합니다.
5. 예제의 픽셀 이동과 실제 사이트의 CLS 관측값을 혼동하지 않습니다.

이 글은 이미지가 들어올 자리를 먼저 정하는 설계 원리를 설명합니다. 본문이 덜 움직이는 상태를 만드는 데 도움이 되는 검사이지만, 특정 사이트의 성능 등급이나 검색 노출이 개선됐다는 결과를 주장하지 않습니다. 실제 서비스에서는 배포 후 데이터와 화면을 다시 확인해야 합니다.

이미지 로딩 전 공간 예약을 확인한 순서

1. 공간을 예약하지 않은 상태에서 이미지 상자를 표시하고 아래 문장 위치를 봅니다. 이는 실제 CLS 점수가 아닙니다.
2. 초기화한 뒤 160px 예약을 선택해 같은 상자를 표시합니다. 이전과 같은 문장의 시작 위치를 비교합니다.
3. 이미지를 교체할 때는 원본 비율과 예약한 비율을 대조합니다. 상자가 맞아도 필요한 그림 정보가 잘리면 재검수합니다.

이미지 로딩 전 공간 예약 판단에서 제외한 범위

• 실제 네트워크 이미지 로딩 대신 같은 크기의 상자를 표시합니다.
• 사용자 버튼 조작으로 만든 픽셀 이동이며 CLS 점수를 계산하지 않습니다.
• 글꼴·광고·외부 위젯과 전체 페이지의 실제 성능은 별도 검사해야 합니다.

이미지 로딩 전 공간 예약에 사용한 원문

원문별 확인일과 참고 범위를 아래에 표시했습니다. 예제 입력값은 설명을 위한 설정이며 원문 기관의 제품 평가를 뜻하지 않습니다.

1. Optimize Cumulative Layout Shiftweb.dev · 확인 2026-09-03

   이미지·광고·글꼴의 이동 원인과 공간 예약 원칙을 참고했습니다.

2. The Image Embed elementMDN Web Docs · 확인 2026-09-03

   width·height와 로딩 속성의 역할을 참고했습니다.

3. Cumulative Layout Shift (CLS)web.dev · 확인 2026-09-03

   CLS 지표와 사용자 동작으로 발생한 변화의 구분을 참고했습니다.