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

2026년 4월 30일 수정됨

📋 개요

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. next/image에서 width와 height 또는 fill/sizes를 신경 써야 하는 이유는?

✅ 정답: 브라우저가 이미지 공간과 필요한 리소스 크기를 미리 판단하게 하기 위해서다.

💡 상세 해설: 크기 정보가 없으면 레이아웃이 늦게 밀리고 CLS가 나빠진다. sizes가 부정확하면 필요 이상으로 큰 이미지를 받을 수 있다.

Q2. next/font가 성능에 도움 되는 지점은?

✅ 정답: 폰트를 로컬 자산처럼 제공해 외부 요청과 폰트 로딩으로 인한 흔들림을 줄인다.

💡 상세 해설: 폰트는 텍스트 렌더링과 레이아웃에 직접 영향을 준다. preload와 fallback 전략까지 함께 보면 첫 화면 안정성이 좋아진다.

Q3. 영철이의 테스트 타임: 히어로 이미지가 LCP인데 늦게 뜬다. 무엇을 먼저 점검할까?

✅ 정답: Image 사용 여부, 실제 표시 크기에 맞는 sizes, 우선 로딩 힌트, 원본 이미지 용량을 확인한다.

💡 상세 해설: 단순히 CDN만 붙인다고 해결되지 않는다. 브라우저가 빨리 발견하고 올바른 크기를 받도록 코드와 자산을 같이 조정해야 한다.

🐣 영철이의 퇴근 일기

오늘은 이미지를 보이는 자산이 아니라 성능 지표를 좌우하는 입력으로 보게 됐다.

💡 "시각 자산 최적화는 예쁜 화면 이전에 빠르고 흔들리지 않는 첫 화면의 조건이다."

다음 디자인 적용 때는 이미지 크기와 폰트 로딩 전략을 QA 체크리스트에 넣겠다.