🖼️ 06. 이미지 & 미디어 최적화: 영수 님, 로딩이 왜 이렇게 느려요?

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 18분 / 핵심 파트만: 10분

🗺️ 이 문서의 흐름

[img의 필수 속성] → [srcset/sizes 반응형 이미지] → [picture 아트 디렉션] → [lazy loading] → [Next.js Image]

🎯 이 문서를 다 읽으면 할 수 있는 것

• alt 속성의 상황별 올바른 작성 방법을 설명할 수 있다.
• srcset + sizes 로 해상도별 최적 이미지를 제공할 수 있다.
• <picture> 로 아트 디렉션 (모바일/데스크탑 다른 이미지) 을 구현할 수 있다.
• Next.js <Image> 가 <img> 와 어떻게 다른지 설명할 수 있다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "영호 님, 모바일에서 썸네일이 엄청 느리게 로드돼요. 보니까 데스크탑용 4000px 이미지를 그대로 모바일에도 쓰고 있어서 그런 거 같아요. 어떻게 해야 해요?"
• 🦁 영호 ( 리드 ): "이미지가 웹 성능의 30~40%를 좌우하는 경우가 많아요. 지금 모바일에서 4000px짜리 5MB 이미지를 150px로 축소해서 보여주는 건 5MB 데이터를 쓰레기통에 버리는 거예요. srcset 으로 기기에 맞는 이미지를 주고, loading='lazy' 로 뷰포트 밖 이미지 로드를 미뤄야 해요."

🖼️ 1. img 필수 속성

<!-- ✅ 5년 차의 img 기본 구조 -->
<img
  src="/images/profile.jpg"         <!-- 폴백 URL (srcset 미지원 브라우저용) -->
  alt="영철 님의 프로필 사진"           <!-- 접근성 + SEO 핵심 -->
  width="400"                        <!-- 명시 필수: Layout Shift 방지 -->
  height="400"                       <!-- 명시 필수: Layout Shift 방지 -->
  loading="lazy"                     <!-- 뷰포트 밖 이미지 지연 로드 -->
/>

alt 속성 작성 규칙:

width + height 를 명시하면 브라우저가 이미지 로드 전 공간을 미리 확보해 Cumulative Layout Shift(CLS) 를 방지해. LCP/CLS는 Core Web Vitals 지표이자 SEO 랭킹 요소야.

📐 2. srcset + sizes — 해상도 전환 문제 해결

모바일 기기에 4000px 이미지를 보내는 건 5MB를 버리는 것과 같아. srcset 으로 브라우저에게 여러 해상도 이미지를 제공하고 알아서 선택하게 해.

<!-- srcset + sizes: 뷰포트 너비에 따라 적절한 이미지 선택 -->
<img
  srcset="
    images/hero-480w.jpg  480w,
    images/hero-800w.jpg  800w,
    images/hero-1200w.jpg 1200w
  "
  sizes="
    (max-width: 600px) 480px,
    (max-width: 1024px) 800px,
    1200px
  "
  src="images/hero-1200w.jpg"
  alt="영수네 커뮤니티 히어로 이미지"
  width="1200"
  height="600"
/>

브라우저의 이미지 선택 과정:

1. 현재 뷰포트 너비 확인 (예: 480px)
2. sizes 에서 일치하는 조건 찾기 → 480px 슬롯
3. srcset 에서 480w 이미지 선택 → hero-480w.jpg 로드

🎨 3. picture 요소 — 아트 디렉션 문제 해결

모바일에서는 세로 비율의 클로즈업, 데스크탑에서는 와이드 풍경 사진처럼 다른 구도의 이미지가 필요할 때 <picture> 를 써.

<!-- picture: 미디어 조건에 따라 완전히 다른 이미지 제공 -->
<picture>
  <!-- 모바일: 세로형, 인물 클로즈업 -->
  <source
    media="(max-width: 599px)"
    srcset="images/team-portrait-480w.jpg"
  />
  <!-- 태블릿: 중간 크기 -->
  <source
    media="(max-width: 1023px)"
    srcset="images/team-medium-800w.jpg"
  />
  <!-- 데스크탑: 가로형, 팀 전체 사진 -->
  <!-- 폴백: srcset/picture 미지원 시 이 img 표시 -->
  <img
    src="images/team-wide-1200w.jpg"
    alt="영수네 커뮤니티 팀 사진"
    width="1200"
    height="500"
  />
</picture>

WebP 포맷 지원 + 폴백 패턴:

<picture>
  <!-- WebP 지원 브라우저는 WebP 사용 (크기 30~50% 절약) -->
  <source type="image/webp" srcset="image.webp" />
  <!-- WebP 미지원 브라우저 폴백 -->
  <img src="image.jpg" alt="이미지 설명" width="800" height="600" />
</picture>

⏳ 4. lazy loading — 뷰포트 밖 이미지 지연 로드

<!-- loading="lazy": 뷰포트에 가까워질 때 로드 시작 -->
<img src="thumbnail.jpg" alt="게시글 썸네일" loading="lazy" width="300" height="200" />
 
<!-- loading="eager" (기본값): 즉시 로드 — LCP 이미지에 사용 -->
<img src="hero.jpg" alt="히어로 이미지" loading="eager" />

언제 lazy 쓰고, 언제 eager 쓰는가?

⚛️ 5. Next.js Image 컴포넌트

🐣 영철: "Next.js 쓰면 <Image> 쓰라는데, 일반 <img> 랑 뭐가 다른 거예요?"

import Image from "next/image";
 
// ✅ Next.js Image: 자동 최적화 적용
<Image
  src="/images/profile.jpg"
  alt="영철 님의 프로필 사진"
  width={400}
  height={400}
  // priority: 히어로 이미지 등 LCP 대상에 사용 (lazy=false와 동일)
  priority={false}
/>
 
// 외부 이미지 URL (next.config.js에 도메인 허용 필요)
<Image
  src="https://cdn.example.com/image.jpg"
  alt="외부 이미지"
  fill  // 부모 컨테이너를 꽉 채움
  style={{ objectFit: "cover" }}
/>

Next.js <Image> 가 자동으로 해주는 것:

📝 마무리 퀴즈

Q1. 다음 중 초기 페이지 로드 성능을 위해 히어로 이미지에 적용해야 할 올바른 img 속성 조합은?

• A) loading="lazy" + decoding="async"
• B) loading="eager" + width + height 명시
• 가) loading="lazy" + srcset 만 사용
• 라) alt="" + loading="lazy"

✅ 정답: B

💡 상세 해설:

• 원리 설명: 히어로 이미지는 첫 화면에 바로 보여야 하는 LCP 대상 이미지예요. loading="lazy" 를 쓰면 오히려 로드를 미뤄 LCP 점수가 나빠져요. loading="eager" (또는 생략) 로 즉시 로드하고, width/height 를 명시해 레이아웃 시프트(CLS)를 방지해야 해요.
• 📌 핵심 기억법: "히어로 이미지 = eager (또는 생략) + width/height 명시, 스크롤 아래 이미지 = lazy"

Q2. Next.js에서 외부 CDN의 이미지를 <Image> 컴포넌트로 사용하려면 어떤 설정이 필요한가?

✅ 정답: next.config.js 의 images.remotePatterns (또는 images.domains) 에 허용할 도메인을 등록

💡 상세 해설:

• 원리 설명: Next.js <Image> 의 최적화 기능이 외부 이미지에도 적용되려면 보안을 위해 허용 도메인을 명시해야 해요. 등록하지 않으면 빌드/런타임 에러가 발생합니다.
• 📌 핵심 기억법: "외부 이미지 = next.config.js 도메인 허용 필수"

Q3. 영철이의 테스트 타임

영수네 커뮤니티 메인 페이지에 팀 소개 섹션이 있다.
데스크탑에서는 팀 전체를 담은 와이드 사진, 모바일에서는 대표 얼굴 클로즈업으로 보여줘야 한다.
어떤 HTML 요소를 쓰면 이걸 구현할 수 있는가?

✅ 정답: <picture> 요소 + <source media="..."> 조합

💡 상세 해설:

• 원리 설명: "뷰포트 크기에 따라 완전히 다른 구도/구성의 이미지를 보여준다" 는 게 아트 디렉션 문제예요. <picture> 는 media 속성으로 조건을 걸어 각기 다른 이미지를 제공할 수 있어요. srcset + sizes 는 같은 이미지의 다른 해상도만 선택하므로 이 경우엔 <picture> 가 맞아요.
• 📌 핵심 기억법: "이미지 구도가 다름 = <picture> 아트 디렉션, 같은 이미지 다른 크기 = srcset + sizes"

🐣 영철이의 퇴근 일기

오늘 Lighthouse 돌렸더니 "Properly size images" 경고가 50개 넘게 나왔다. 이미지를 그냥 때려박아왔는데 이게 얼마나 낭비인지 이제야 실감한다. srcset 적용하고 나서 모바일 Lighthouse 점수가 42점에서 76점으로 올랐다. 34점이 이미지 최적화 하나로 올라간 거다.

💡 "이미지는 웹 성능의 가장 큰 변수다. srcset 으로 해상도 전환, picture 로 아트 디렉션, loading='lazy' 로 초기 로드 최소화 — 이 세 가지가 이미지 최적화의 핵심이다."

Next.js <Image> 가 이 모든 걸 자동으로 해준다는 게 진짜 처음에는 "그냥 img 쓰면 되지 왜 Image를 써야 해?" 했는데, 이 문서 쓰고 나서 이제 이해됐다. 앞으로 <img> 직접 쓸 땐 이 체크리스트 한 번씩 돌려봐야겠다.

🔗 더 알아보기

• MDN: 반응형 이미지 가이드
• Next.js 공식 문서: Image Optimization
• web.dev: Core Web Vitals - CLS