자동 크기 조정 이미지로 인해 발생하는 레이아웃 이동(Layout Shift) 해결

자동 크기 조정 이미지로 인해 발생하는 레이아웃 이동(Layout Shift) 해결

단 한 줄의 코드로 Cumulative Layout Shift 점수를 망치는 흔한 CSS 패턴이 있습니다. 수십 개의 사이트에서 이를 목격했으며, 이미지에 width와 height를 명시적으로 설정한 경우에도 레이아웃 이동(layout shift)을 유발합니다. 심지어 aspect-ratio CSS 속성을 설정해도 이 문제는 해결되지 않습니다.

이 문서는 width: auto CSS 문제에 중점을 둡니다. 모든 이미지 및 미디어의 레이아웃 이동 원인(비디오, iframe, 아트 디렉션, 반응형 이미지, 지연 로딩, 자리 표시자)에 대한 완전한 가이드는 이미지 및 미디어가 레이아웃 이동을 일으키는 방법을 참조하세요.

최종 검토자: Arjen Karel, 2026년 3월

문제점

문제를 일으키는 CSS는 다음과 같습니다. 반응형 이미지에 흔히 사용됩니다.

<style>
img {
    width: auto;
    height: auto;
    max-width: 100%;
}
</style>

width: auto 선언이 문제입니다. 이 속성은 브라우저가 HTML width 및 height 속성에서 계산한 너비를 덮어쓰기 때문에, 브라우저가 이미지가 로드되기 전에 더 이상 공간을 예약할 수 없게 됩니다. 이미지는 파일이 다운로드되고 디코딩될 때까지 0x0 픽셀로 렌더링된 후 전체 크기로 맞춰집니다. 이것이 바로 레이아웃 이동입니다.

발생 원인

2019년부터 최신 브라우저는 HTML width 및 height 속성을 내부 aspect-ratio 표현 힌트(presentational hint)에 매핑합니다. 이 힌트는 CSS 명시도(specificity)가 0입니다. 작성자의 어떠한 CSS 규칙도 이를 이길 수 있으며, 심지어 단순한 img { width: auto; }도 마찬가지입니다. CSS에서 width: auto를 설정하면 브라우저는 종횡비에서 예약된 높이를 계산하는 데 필요한 정보를 잃게 됩니다. 이미지가 로드될 때까지 두 차원 모두 알 수 없게 됩니다.

이것이 CSS에 aspect-ratio를 설정해도 문제가 해결되지 않는 이유입니다. width: auto를 사용하면 브라우저는 로드되지 않은 이미지의 너비를 0으로 확인합니다. 0의 너비에서 계산된 종횡비는 여전히 0의 높이를 생성합니다. 공간 예약은 브라우저가 작업할 수 있는 알려진 차원이 하나 이상 있을 때만 작동합니다.

또한 처음 방문하는 사용자에게만 레이아웃 이동을 일으키기 때문에 파악하기 어렵습니다. 이미 브라우저 캐시에 이미지가 있는 경우, 고유 차원을 즉시 사용할 수 있으며 이동이 발생하지 않습니다. 개발자인 당신은 이 현상을 보지 못할 가능성이 높습니다.

발견 방법

Lighthouse는 캐시가 채워진 상태의 빠른 컴퓨터에서 실행되기 때문에 실험실 테스트에서 이러한 문제를 포착하는 것은 거의 불가능합니다. 이를 감지하는 방법은 Real User Monitoring을 이용하는 것입니다. RUM은 실제 기기에서 실제 방문자의 Core Web Vitals를 추적하고, 느린 연결을 통해 처음 방문할 때만 발생하는 이동을 포함하여 실제 CLS 점수를 보고합니다.

2025 Web Almanac에 따르면 모바일 페이지의 62%가 여전히 크기가 지정되지 않은 이미지를 하나 이상 포함하고 있습니다. 그 중 상당수는 개발자가 HTML에서 width와 height를 설정했지만, 전역 CSS 규칙이 auto로 이를 덮어쓰는 동일한 CSS 패턴으로 인해 발생합니다.

해결책

width: auto를 제거하세요. height: auto와 max-width: 100%는 유지합니다. 다음은 레이아웃 이동을 일으키지 않는 반응형 이미지를 위해 web.dev에서 권장하는 패턴입니다.

<style>
img {
    height: auto;
    max-width: 100%;
}
</style>

이 CSS를 사용하면 브라우저는 HTML width 속성을 사용하여 이미지의 너비를 결정하고(max-width에 의해 컨테이너의 100%로 제한됨), height: auto는 종횡비에서 올바른 높이를 계산합니다. 이미지가 로드되기 전에 공간이 예약됩니다. 레이아웃 이동이 없습니다.

<img> 태그에 width와 height 속성이 모두 포함되어 있는지 확인하세요.

<img src="hero.jpg" width="800" height="450" alt="Description">

사이트의 아무 이미지나 마우스 오른쪽 버튼으로 클릭하고 "요소 검사(Inspect Element)"를 선택한 다음 width: auto에 대한 계산된 스타일(computed styles)을 확인해보세요. 만약 이 속성이 보인다면 이제 무엇을 해야 할지 알 것입니다.

팁: 더 많은 이미지 최적화 기술에 대해서는 Core Web Vitals를 위한 이미지 최적화 방법과 느린 히어로 이미지 수정 방법을 참조하세요.