Week 6 · 완성도 다지기와 배포 Day 36 / 42

이미지 최적화 — 최신 포맷과 레이아웃 밀림 방지

Week 6 시작: 기능은 완성됐으니, 이제 완성도를 다집니다

Week 6은 마감 공사와 입주 단계입니다 — 골조와 배관은 다 됐으니, 이제 다듬고 세상에 내보낼 차례입니다.

10초 핵심 요약

이미지에 width/height를 항상 지정하면 레이아웃 밀림(CLS)을 막을 수 있습니다.
화면 밖 이미지는 loading="lazy"로 나중에 불러오게 해 초기 로딩을 가볍게 만듭니다.
Astro의 <Image /> 컴포넌트를 쓰면 이 최적화를 대부분 자동으로 처리해줍니다.

이미지가 늦게 떠서 화면이 밀리는 이유

이미지가 아직 다운로드되기 전, 브라우저는 그 자리를 얼마나 비워둘지 모릅니다. 그래서 다른 콘텐츠를 먼저 배치했다가, 이미지가 도착하면 크기만큼 갑자기 밀어냅니다. 책을 읽다가 갑자기 페이지 사이에 광고 전단이 끼워지는 것과 비슷한 불편함입니다. 이 현상을 CLS(Cumulative Layout Shift, 레이아웃 밀림)라고 부릅니다.

    // 나쁜 예 — 크기 정보가 없어 이미지 도착 전까지 공간이 0

    <img src="thumb.jpg" alt="...">

    // 좋은 예 — 미리 공간을 확보해둠

    <img src="thumb.jpg" width="400" height="240" alt="...">

width/height를 지정해두면, 실제 픽셀 크기와 다르더라도 브라우저가 비율만큼 미리 공간을 예약해서 이미지가 늦게 와도 주변 레이아웃이 밀리지 않습니다.

화면 밖 이미지는 나중에 — lazy loading

페이지 맨 아래에 있는 이미지까지 처음부터 전부 다운로드하면 초기 로딩이 느려집니다. loading="lazy"를 붙이면 사용자가 스크롤해서 그 근처에 다다를 때만 다운로드합니다.

예외 — 화면에 처음부터 바로 보이는 이미지(히어로 배너 등)에는 lazy를 붙이지 마세요. 오히려 로딩을 한 박자 늦춰서 사용자가 첫 화면을 더 늦게 보게 됩니다.

Astro의 Image 컴포넌트 맛보기

지금까지는 <img> 태그를 직접 다뤘지만, Astro는 astro:assets 모듈의 <Image /> 컴포넌트를 제공해서 최신 포맷 변환(WebP 등)과 크기 계산을 자동으로 처리해줍니다.

    ---

    import { Image } from 'astro:assets';

    import thumb from '../images/thumb.jpg';

    ---

    <Image src={thumb} width={400} alt="..." />

Day 8에서 배운 props 구조와 비슷하게, import로 가져온 이미지 정보를 컴포넌트에 넘기는 방식입니다. 빌드 시점(Day 30에서 배운 그 빌드 타임)에 자동으로 최적화된 버전이 만들어집니다.

오늘의 실습 + AI 프롬프트

1Day 9의 포스트 카드 썸네일에 width/height를 추가해 F12 → Lighthouse에서 CLS 점수 변화를 확인합니다.

2목록 페이지 하단 카드들에 loading="lazy"를 붙여 Network 탭에서 실제로 늦게 로드되는지 확인합니다.

AI에게 이렇게 지시해 보세요: "이 페이지의 모든 img 태그에 적절한 width/height를 추가하고, 첫 화면에 보이지 않는 이미지에만 loading='lazy'를 붙여줘."

Day 36 완료 체크리스트

CLS(레이아웃 밀림)가 왜 생기고, width/height가 왜 이를 막는지 설명할 수 있다.

loading="lazy"를 화면 밖 이미지에만 적용해야 하는 이유를 이해했다.

Astro Image 컴포넌트의 기본 사용법을 확인했다.

스스로 설명해보기 — 이미지에 width/height를 지정하면 레이아웃 밀림(CLS)이 줄어드는 이유를 설명할 수 있나요?

오늘의 용어

CLS

콘텐츠가 늦게 로드되며 레이아웃이 갑자기 움직이는 정도를 측정하는 지표

loading="lazy"

화면에 가까워질 때만 이미지를 다운로드하도록 지연시키는 속성

astro:assets

이미지 최적화를 자동화해주는 Astro 내장 이미지 모듈