🚀 Next.js 14장: next/image & next/font — Core Web Vitals를 지키는 최적화 무기

📋 개요

next/image와 next/font로 Core Web Vitals를 개선하는 이미지·폰트 최적화 기법을 알아봅니다.

📋 목차

📌 이 문서를 읽기 전에
🤔 왜 알아야 하는가
🏗️ 비유로 먼저 이해하기
🖼️ next/image — 이미지 최적화 자동화 기계 🟢
🔤 next/font — 폰트 깜빡임(FOIT/FOUT) 박멸 🟡
⚡ 핵심 성능 지표: LCP를 잡아라 🟡
🎛️ 고급 이미지 패턴: fill, sizes, blurDataURL 🔴
💥 에러 해결 카탈로그
🏁 이번에 배운 내용 총정리
📝 마무리 퀴즈
🔗 더 알아보기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 13분 (전체) / 핵심 파트만: 6분

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

영철(신입): "Lighthouse 돌려봤더니 Performance 점수가 47점이에요. LCP가 5초가 넘고 CLS도 빨간불이에요. 이미지 최적화를 어디서부터 시작해야 할지 모르겠어요. <img> 태그를 <Image>로 바꾸면 자동으로 다 해결되나요?"
영호(리드): "영철 님, <img> → <Image> 교체는 시작점이지 끝이 아니에요. priority, sizes, fill 속성을 제대로 써야 LCP가 잡혀요. 그리고 Google Fonts를 <link> 태그로 연결하면 외부 네트워크 왕복이 발생해서 폰트 깜빡임(FOUT)이 생겨요. next/font로 바꾸면 완전히 사라지는데, 이게 Lighthouse 점수를 10점 이상 올려주는 꿀팁이에요."

🗺️ 이 문서의 흐름
<img> 태그의 문제 → next/image 기본 → LCP 최적화 속성 → next/font로 폰트 깜빡임 제거 → 고급 패턴

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

next/image의 priority, sizes, fill 속성을 언제 어떻게 써야 하는지 판단할 수 있다
next/font로 Google Fonts를 연결해 FOIT/FOUT을 완전히 제거할 수 있다
Lighthouse LCP 점수가 낮을 때 체크할 포인트를 알고 있다

🤔 왜 알아야 하는가

일반 <img> 태그를 그대로 쓰면 어떤 일이 생기는지 알아?

원본 이미지 그대로 전송 — 5MB 4K 사진을 모바일 300px 화면에 그대로 내려보내
Layout Shift — 이미지 크기를 모르니 로드되면서 아래 내용이 쑥 밀려 (CLS 악화)
지연 로드 안 됨 — 스크롤하면 보일 이미지도 즉시 다운로드 시작 (LCP 악화)
WebP 변환 없음 — JPEG 그대로 전송, 최신 형식보다 40% 용량 낭비

구글의 Core Web Vitals 연구에 따르면 히어로 이미지 하나를 최적화하지 않으면 LCP가 2~5초 악화되고, 이게 이탈률 35% 증가로 이어진다고 해.

next/image는 이 모든 걸 자동으로 해결해줘. 문제는 "그냥 쓴다"는 게 아니라 "제대로 써야 한다"는 거야.

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면?
음식 배달을 시켰는데 항상 가장 큰 포장 박스로만 배달해주는 가게가 있어. 컵라면 하나를 시켜도 이삿짐 박스에 넣어서 와. 낭비잖아?

next/image는 "영리한 포장기"야. 큰 화면엔 큰 이미지, 작은 화면엔 작은 이미지를 딱 맞게 잘라서 보내줘. 그리고 WebP라는 더 가벼운 포장 방식으로 자동 변환해줘.

next/font의 비유:

음식점 메뉴판이 처음엔 빈 종이였다가, 잠시 후에 글씨가 펜으로 쓰여지는 걸 상상해봐. 그 순간 손님들이 화들짝 놀라지? 이게 FOUT(폰트 깜빡임)이야.

next/font는 메뉴판을 가져올 때부터 이미 글씨가 적혀있게 해줘. 폰트가 로드되기 전까지 시스템 폰트를 정확한 크기로 예약해두는 거야.

🖼️ next/image — 이미지 최적화 자동화 기계 🟢

🎯 이 섹션을 읽고 나면:

next/image의 <Image> 컴포넌트를 기본 사용할 수 있다

width, height 또는 fill 속성이 왜 필수인지 이해한다

// ❌ 영철이의 순진한 코드 — 일반 img 태그
<img src="/hero.jpg" alt="스터디 모집 배너" />
// 문제: 원본 크기 그대로 전송, CLS 발생, WebP 변환 없음
 
// ✅ 영호가 고쳐준 코드 — next/image
import Image from 'next/image'
 
// 이미지 크기를 알 때 (정적 이미지, 알려진 크기)
<Image
  src="/hero.jpg"
  alt="스터디 모집 배너"
  width={1200}    // 반드시 필요 — CLS 방지를 위해 미리 공간 확보
  height={630}
/>

next/image가 자동으로 해주는 것:

기능	설명
WebP/AVIF 자동 변환	브라우저가 지원하면 더 가벼운 형식으로 자동 변환
반응형 크기 조절	요청한 크기에 맞게 서버에서 리사이징
Lazy Loading	뷰포트에 들어올 때 로드 (기본값)
CLS 방지	width/height로 레이아웃 공간 미리 확보
캐싱	CDN 또는 Next.js 서버에서 최적화된 이미지 캐싱

⚠️ 주의: <Image>는 alt 속성이 필수야. 웹 접근성(Accessibility) 때문이기도 하지만, 이미지가 로드 안 됐을 때 대체 텍스트로 표시돼. 빈 문자열 alt=""은 "장식용 이미지"라는 의미야.

💡 한 줄로 기억하기
next/image에서 width/height는 "실제 크기"가 아니라 "비율 힌트"야. 실제 표시 크기는 CSS로 제어하고, 여기선 CLS 방지를 위한 예약된 공간 비율만 선언하는 거야.

🔤 next/font — 폰트 깜빡임(FOIT/FOUT) 박멸 🟡

🎯 이 섹션을 읽고 나면:

Google Fonts를 next/font/google로 연결해 FOIT/FOUT을 완전히 제거할 수 있다

폰트를 CSS 변수로 등록해 전역에서 사용하는 패턴을 구현할 수 있다

📖 용어: FOIT/FOUT

FOIT (Flash Of Invisible Text) — 폰트 로드 전 텍스트가 안 보이다가 갑자기 나타남

FOUT (Flash Of Unstyled Text) — 폰트 로드 전 기본 폰트로 표시되다가 갑자기 바뀜

// ❌ 영철이의 순진한 방법 — HTML에 Google Fonts 링크 태그
// app/layout.tsx
<head>
  {/* 이건 외부 서버 왕복 발생 → 느리고, FOUT 생김 */}
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR" />
</head>
 
// ✅ 영호가 권장하는 방법 — next/font/google
// app/layout.tsx
import { Noto_Sans_KR, Inter } from 'next/font/google'
 
const notoSansKR = Noto_Sans_KR({
  subsets: ['latin'],          // 라틴 문자 서브셋 (한글은 자동 포함)
  weight: ['400', '700'],      // 사용할 굵기 지정 (불필요한 굵기 로드 방지)
  variable: '--font-noto',     // CSS 변수명으로 등록
  display: 'swap',             // FOIT 대신 FOUT 허용 (기본값, 권장)
})
 
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    // className으로 폰트 CSS 변수를 <html> 태그에 등록
    <html lang="ko" className={`${notoSansKR.variable} ${inter.variable}`}>
      <body>{children}</body>
    </html>
  )
}

/* globals.css — CSS 변수로 폰트 사용 */
body {
  font-family: var(--font-noto), var(--font-inter), sans-serif;
}

next/font의 장점:

기존 방식 (link 태그)	next/font
외부 서버 왕복 발생	폰트 파일 로컬 다운로드 후 자체 서빙
FOUT 발생	`size-adjust`로 레이아웃 이동 방지
개인정보 (IP) Google에 전송	프라이버시 보호 (외부 요청 없음)
매 페이지 렌더마다 blocking	폰트 preload로 빠른 표시

💡 한 줄로 기억하기
next/font는 Google Fonts를 우리 서버에서 직접 서빙하는 자체 CDN을 만드는 것과 같아. 외부 요청 없고, 깜빡임 없고, 빠르고.

⚡ 핵심 성능 지표: LCP를 잡아라 🟡

🎯 이 섹션을 읽고 나면:

priority 속성으로 LCP 이미지를 선언해 preload 처리할 수 있다

sizes 속성으로 반응형 이미지 크기를 브라우저에 알려줄 수 있다

LCP(Largest Contentful Paint) — 뷰포트에서 가장 큰 요소가 렌더링되는 시간. 대부분 히어로 이미지가 LCP 요소야.

🤔 잠깐, 먼저 생각해봐
기본적으로 <Image>는 lazy loading이야. 그런데 페이지 최상단의 히어로 이미지도 lazy loading으로 처리하면 어떻게 될까?

// ❌ 히어로 이미지에 lazy loading이 적용된 상태 (기본값)
<Image
  src="/hero.jpg"
  alt="히어로 배너"
  width={1200}
  height={630}
  // priority 없으면 lazy loading → LCP 이미지인데 늦게 로드됨!
/>
 
// ✅ 히어로 이미지엔 priority 추가
<Image
  src="/hero.jpg"
  alt="히어로 배너"
  width={1200}
  height={630}
  priority        // → preload 처리, 즉시 다운로드 시작
  // ← LCP 이미지에만 쓸 것. 모든 이미지에 쓰면 오히려 역효과
/>

sizes 속성 — 반응형 이미지의 핵심:

// ❌ sizes 없는 경우
// 브라우저가 이미지 크기를 모르니 항상 뷰포트 100% 크기의 이미지를 요청
// 모바일(375px)인데 데스크톱용 1200px 이미지를 받아오는 낭비 발생!
<Image src="/card.jpg" alt="스터디 카드" width={400} height={300} />
 
// ✅ sizes 속성으로 반응형 힌트 제공
<Image
  src="/card.jpg"
  alt="스터디 카드"
  width={400}
  height={300}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 400px"
  // 설명: 모바일(768px 이하)에선 화면 전체, 태블릿(1200px 이하)에선 절반, 그 외엔 400px
/>

🎛️ 고급 이미지 패턴: fill, sizes, blurDataURL 🔴

📐 `fill` 모드 — 부모 컨테이너를 꽉 채우기

이미지 크기를 미리 알 수 없거나, 컨테이너에 맞춰 꽉 채워야 할 때 써.

// 카드 썸네일, 배경 이미지 등에 활용
<div style={{ position: 'relative', width: '100%', height: '200px' }}>
  {/* fill 사용 시 부모는 반드시 position: relative */}
  <Image
    src={post.thumbnail}
    alt={post.title}
    fill
    style={{ objectFit: 'cover' }}   // 비율 유지하며 채우기
    sizes="(max-width: 768px) 100vw, 50vw"
  />
</div>

🌫️ `blurDataURL` — 이미지 로드 전 블러 플레이스홀더

// 외부 이미지에 블러 효과 플레이스홀더
<Image
  src={post.thumbnail}
  alt={post.title}
  width={400}
  height={300}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD..."
  // base64 인코딩된 초저해상도 이미지 (1x1픽셀 정도면 충분)
/>

🌐 외부 이미지 도메인 허용 (next.config.ts)

외부 URL 이미지를 next/image로 최적화하려면 도메인을 허용해야 해.

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.youngsu.community',   // 우리 CDN
        pathname: '/uploads/**',
      },
      {
        protocol: 'https',
        hostname: '**.githubusercontent.com',  // GitHub 아바타
      },
    ],
  },
}

💥 에러 해결 카탈로그

❌ `Invalid src prop` — 허용되지 않은 외부 도메인

언제 나오는가?

Error: Invalid src prop on `next/image`, hostname "example.com" is not configured under `images` in your `next.config.js`

해결책:

// next.config.ts에 해당 도메인 추가
images: {
  remotePatterns: [{ protocol: 'https', hostname: 'example.com' }],
}

❌ `Image with src ... missing required width/height`

원인: <Image>에 width, height 또는 fill 없이 사용.

해결책: 크기를 알면 width/height 추가. 컨테이너를 채워야 하면 fill 사용.

❌ 폰트가 매 배포마다 다른 URL 생성 → 캐시 무효화

원인: next/font는 빌드마다 폰트 URL에 해시를 추가해.

해결책: 실제로는 문제가 아니야. Next.js가 자동으로 적절한 캐시 헤더를 설정해줘. 브라우저도 새 URL로 새로 받아가지만, CDN 캐싱으로 빠르게 처리돼.

🏁 이번에 배운 내용 총정리

📋 상황별 이미지 패턴

상황	속성 조합
히어로 이미지 (LCP)	`width` + `height` + `priority` + `sizes`
카드 썸네일 (크기 유동)	`fill` + `objectFit: cover` + `sizes`
정적 이미지 (크기 고정)	`width` + `height`
블러 플레이스홀더	`placeholder="blur"` + `blurDataURL`

⚠️ 절대 하지 말 것

상황	❌ 나쁜 예	✅ 좋은 예
모든 이미지에 priority	모두 즉시 로드 → 초기 로드 느려짐	히어로(LCP) 이미지에만
sizes 없이 fill 사용	뷰포트 100% 이미지 항상 요청	`sizes` 반드시 같이
Google Fonts link 태그	외부 왕복 발생, FOUT	`next/font/google` 사용

📝 마무리 퀴즈

Q1. 다음 중 priority 속성을 반드시 추가해야 하는 상황은?

A) 페이지 하단의 관련 게시글 썸네일 이미지
B) 뷰포트 최상단에 노출되는 히어로 배너 이미지
C) 스크롤해야 보이는 사용자 아바타 이미지
D) 클릭하면 열리는 모달 안의 이미지

✅ 정답: B

해설: priority는 preload 처리라 즉시 다운로드가 시작돼. LCP 요소인 히어로 이미지에만 써야 효과가 있고, 나머지에 남용하면 초기 로드 성능이 오히려 나빠져.

📌 핵심 기억법: "뷰포트에 처음부터 보이는 이미지 중 제일 큰 것 하나에만 priority."

Q2. Google Fonts를 next/font로 마이그레이션할 때의 가장 큰 이점이 아닌 것은?

A) 외부 서버 왕복이 사라져 폰트 로드가 빨라진다
B) FOUT/FOIT이 제거된다
C) 사용자 IP가 Google에 전송되지 않아 프라이버시가 보호된다
D) 폰트 파일 용량이 자동으로 50% 감소한다

✅ 정답: D

해설: 폰트 파일 자체의 용량은 next/font가 줄여주지 않아. 다만 subsets와 weight 옵션으로 필요한 것만 로드할 수 있어.

📌 핵심 기억법: A, B, C는 진짜 이점. D는 오해. "용량 감소"가 아니라 "불필요한 서브셋 제외"가 정확한 표현이야.

Q3. 친구에게 설명한다면?

sizes 속성 없이 fill을 쓰면 왜 문제가 생기는지 비유로 설명해봐.

예시 답변:

"택배 박스 크기를 말 안 하면 배달 기사가 제일 큰 박스로 보내버려. sizes 없이 fill을 쓰면 브라우저가 '얼마나 큰 이미지가 필요한지 모르니까 제일 큰 걸로 주세요'라고 요청해. 모바일 375px 화면인데 1920px 이미지를 받아오는 낭비가 생기는 거야."

🐣 영철이의 퇴근 일기

오늘은 우리 서비스의 '성능과 미학'을 동시에 잡은 날이야! 그동안 고화질 이미지를 올릴 때마다 사이트가 버벅거려서 고민이 많았는데, 영호 리드 님이 알려주신 'next/image' 덕분에 5MB 사진도 100KB대로 가볍게 서빙할 수 있게 됐어.

💡 오늘의 교훈: "이미지는 next/image로 가볍게, 폰트는 next/font로 흔들림 없이! 성능이 곧 사용자 경험이다."

특히 폰트가 깜빡거리는 문제(FOUT)를 next/font로 해결했을 때, 사이트가 훨씬 고급스러워진 걸 느끼면서 정말 뿌듯했어. 성능 최적화가 단순히 숫자를 낮추는 게 아니라, 사용자에게 신뢰를 주는 과정이라는 걸 깨달았어. 오늘 뿌듯한 마음으로 퇴근해서 보고 싶었던 넷플릭스 정주행이나 해야지. 내일은 더 '감각적인' 개발자가 되는 거야! 🐣