🚀 Next.js 심화 8장: Performance Deep Dive — Core Web Vitals 실전 튜닝

📋 목차

• 📌 이 문서를 읽기 전에
• 🤔 왜 알아야 하는가
• 🏗️ 비유로 먼저 이해하기
• 📊 Core Web Vitals — 세 가지 점수판 🟢
• ⚡ LCP 튜닝 — 가장 큰 요소를 가장 빠르게 🟡
• 🖱️ INP 튜닝 — 클릭 반응을 50ms 이내로 🟡
• 📐 CLS 튜닝 — 레이아웃 이동 0으로 만들기 🟡
• 📦 번들 최적화 — 필요한 것만 내려보내기 🔴
• 💥 에러 해결 카탈로그
• 🏁 이번에 배운 내용 총정리
• 📝 마무리 퀴즈
• 🔗 더 알아보기

📌 이 문서를 읽기 전에

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

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

• 영철(신입): "Lighthouse 점수가 47이에요. 기술 PM인 영수 씨가 'Performance 점수 90 이상 올려야 한다'고 했는데, 뭘 어떻게 건드려야 하는지 모르겠어요. 일단 이미지 압축하면 되나요?"
• 영호(리드): "이미지 압축은 시작이에요. Core Web Vitals 세 가지(LCP, INP, CLS)를 각각 진단하고, 원인에 맞는 최적화를 해야 해요. Lighthouse가 각 지표의 점수를 알려주니까 낮은 것부터 순서대로 공략해봐요."

🗺️ 이 문서의 흐름
Core Web Vitals 개념 → LCP 최적화 → INP 최적화 → CLS 최적화 → 번들 최적화

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

• Lighthouse 결과에서 LCP, INP, CLS 점수를 보고 각각의 원인을 파악할 수 있다
• 각 지표별 최적화 기법을 실제 코드로 적용할 수 있다
• next/dynamic으로 코드 스플리팅을 적용해 초기 번들 크기를 줄일 수 있다

🤔 왜 알아야 하는가

성능은 측정 가능한 비즈니스 지표야. 감이 아니야:

구글은 Core Web Vitals를 검색 랭킹 신호로 사용해. 느린 사이트는 검색 결과에서 밀린다는 뜻이야.

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면?
음식점 서비스 품질을 세 가지로 평가해봐:

• LCP (첫 음식이 나오는 속도): 주문하고 첫 음식까지 2.5초 이내
• INP (종업원 반응 속도): 손 들면 200ms 이내 눈맞춤
• CLS (상차림 안정성): 음식 가져다 놓을 때 다른 그릇이 밀려나지 않음

세 가지 다 좋아야 "좋은 음식점"이야. 음식이 맛있어도(기능) 서비스가 나쁘면 손님이 안 와(이탈률 증가).

📊 Core Web Vitals — 세 가지 점수판 🟢

🎯 이 섹션을 읽고 나면:

• LCP, INP, CLS가 각각 무엇을 측정하는지 설명할 수 있다
• 각 지표의 Good/Needs Improvement/Poor 기준값을 안다

진단 도구:

• Lighthouse (Chrome DevTools) — 로컬 시뮬레이션
• Chrome DevTools Performance 탭 — 실제 렌더링 타임라인
• Vercel Speed Insights — 실제 사용자 데이터(RUM)

💡 한 줄로 기억하기
LCP는 "첫인상", INP는 "반응성", CLS는 "안정감". 세 가지 모두 사용자 체감에 직결돼.

⚡ LCP 튜닝 — 가장 큰 요소를 가장 빠르게 🟡

🎯 이 섹션을 읽고 나면:

• LCP 요소를 식별하고 priority, preload로 우선 로드할 수 있다
• 렌더링 전략으로 LCP를 개선하는 방법을 안다

LCP를 느리게 만드는 주범:

1. 히어로 이미지에 priority 없음 → Lazy Loading으로 늦게 로드
2. TTFB(서버 응답) 느림 → Dynamic Rendering인데 DB 쿼리가 느림
3. 폰트 로드 지연 → Google Fonts 외부 요청

// ✅ LCP 이미지 최적화 체크리스트
 
// 1. priority 추가 (preload 처리)
<Image
  src="/hero.jpg"
  alt="히어로 배너"
  width={1200}
  height={630}
  priority              // ← 절대 빠뜨리면 안 됨
  sizes="(max-width: 768px) 100vw, 1200px"
/>
 
// 2. fetchPriority="high" (Next.js 16+)
<Image
  src="/hero.jpg"
  fetchPriority="high"  // 브라우저에 명시적으로 우선순위 힌트
  // ...
/>

서버 응답(TTFB) 개선:

// ✅ DB 쿼리가 LCP를 늦추는 경우 — ISR 또는 PPR로 전환
 
// Dynamic Rendering → ISR로 바꿔 TTFB 개선
export const revalidate = 60  // 60초마다 재생성
 
// 또는 PPR로 정적 셸을 먼저 보내고 DB 데이터는 스트리밍
export const experimental_ppr = true
// Suspense로 DB 조회하는 부분만 감싸기

🖱️ INP 튜닝 — 클릭 반응을 50ms 이내로 🟡

🎯 이 섹션을 읽고 나면:

• INP가 나쁜 원인을 파악하고 Long Task를 분할하는 방법을 안다
• next/dynamic으로 클라이언트 JS를 지연 로드해 하이드레이션 비용을 줄일 수 있다

INP는 메인 스레드가 블로킹되면 나빠져. JS가 실행 중이면 클릭에 반응을 못하거든.

INP를 나쁘게 만드는 주범:

1. 큰 JS 번들 → Hydration에 오래 걸림
2. Long Task (50ms 이상 실행되는 JS)
3. 이벤트 핸들러에서 무거운 동기 연산

// ✅ 1. next/dynamic으로 코드 스플리팅 — 초기 번들에서 제외
import dynamic from 'next/dynamic'
 
// 에디터, 차트 같은 무거운 컴포넌트는 지연 로드
const RichTextEditor = dynamic(
  () => import('@/components/features/posts/RichTextEditor'),
  {
    loading: () => <div>에디터 로딩 중...</div>,
    ssr: false,   // SSR 제외 (브라우저 API 의존 컴포넌트)
  }
)
 
// ✅ 2. 서버 컴포넌트로 전환 — 클라이언트 번들에서 로직 제거
// 클라이언트에서 데이터 가공하는 로직을 서버 컴포넌트로 이동
// → Hydration 비용 ↓ → INP ↑
 
// ✅ 3. scheduler.yield()로 Long Task 분할
async function processLargeList(items: string[]) {
  for (const item of items) {
    await processItem(item)
 
    // 메인 스레드에 잠시 양보 → 클릭 이벤트가 끼어들 수 있게 함
    if (typeof scheduler !== 'undefined') {
      await scheduler.yield()
    }
  }
}

📐 CLS 튜닝 — 레이아웃 이동 0으로 만들기 🟡

🎯 이 섹션을 읽고 나면:

• CLS가 발생하는 원인 3가지를 알고 각각의 해결책을 적용할 수 있다

CLS 발생 원인과 해결책:

원인 1: 이미지/영상 크기 미지정

// ❌ 크기 없는 이미지 → 로드 전 공간 없음 → 로드 후 레이아웃 이동
<img src="/photo.jpg" alt="..." />
 
// ✅ next/image로 미리 공간 예약
<Image src="/photo.jpg" alt="..." width={800} height={400} />

원인 2: 동적으로 삽입되는 콘텐츠 (광고, 배너)

// ❌ 배너가 나중에 삽입되어 아래 콘텐츠가 밀림
<div>  {/* 나중에 배너 삽입 */}  </div>
<main>게시글 목록</main>
 
// ✅ 배너 영역 높이를 미리 예약
<div style={{ minHeight: '90px' }}>  {/* 광고 들어올 공간 예약 */}  </div>
<main>게시글 목록</main>

원인 3: 폰트 교체(FOUT) — 폰트 로드 전후 글자 크기 차이

// ✅ next/font로 FOUT 방지 + size-adjust로 크기 맞춤
import { Inter } from 'next/font/google'
 
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',   // FOUT 허용하지만 layout shift 최소화
  adjustFontFallback: true,  // 시스템 폰트와 크기 자동 맞춤 → CLS 감소
})

📦 번들 최적화 — 필요한 것만 내려보내기 🔴

🎯 이 섹션을 읽고 나면:

• @next/bundle-analyzer로 번들 구성을 시각화할 수 있다
• Tree shaking이 안 되는 패키지를 올바르게 import하는 방법을 안다

# 번들 분석기 설치
npm install @next/bundle-analyzer

// next.config.ts
import withBundleAnalyzer from '@next/bundle-analyzer'
 
const bundleAnalyzer = withBundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
})
 
export default bundleAnalyzer({
  // ...next config
})

# 번들 분석 실행 → 브라우저에서 treemap 시각화
ANALYZE=true npm run build

흔한 번들 최적화 패턴:

// ❌ lodash 전체 import → 번들에 다 들어감 (70kb+)
import _ from 'lodash'
const result = _.merge(obj1, obj2)
 
// ✅ 필요한 함수만 import → Tree shaking
import merge from 'lodash/merge'
const result = merge(obj1, obj2)
 
// ✅ 또는 ES 모듈 버전 사용
import { merge } from 'lodash-es'

// ❌ moment.js — locale 파일까지 다 들어감 (300kb+)
import moment from 'moment'
 
// ✅ date-fns 또는 dayjs — Tree shaking 완벽 지원
import { format } from 'date-fns/format'
import { ko } from 'date-fns/locale/ko'

next/dynamic으로 클라이언트 번들 분리:

// 무거운 라이브러리를 지연 로드 → 초기 번들 크기 감소
const ChartComponent = dynamic(() => import('@/components/features/Chart'), {
  ssr: false,           // 서버에서 렌더 안 함
  loading: () => <ChartSkeleton />,
})

💥 에러 해결 카탈로그

❌ Lighthouse LCP가 이미지인데 점수가 낮음

체크리스트:

1. <Image> 컴포넌트 사용 중인가?
2. LCP 이미지에 priority 속성 있는가?
3. sizes 속성이 정확한가?
4. 이미지가 CDN에 있는가 (응답 속도)?

❌ window is not defined — SSR 오류

원인: 클라이언트 전용 라이브러리를 SSR에서 실행.

해결책:

const HeavyLibrary = dynamic(() => import('@/components/HeavyLibrary'), {
  ssr: false,  // SSR 비활성화
})

🏁 이번에 배운 내용 총정리

📋 지표별 최적화 요약

⚠️ 절대 하지 말 것

📝 마무리 퀴즈

Q1. INP(Interaction to Next Paint) 점수를 개선하기 위한 가장 효과적인 방법은?

• A) 히어로 이미지에 priority 속성 추가
• B) 이미지에 width/height 속성 추가
• C) 무거운 클라이언트 컴포넌트를 next/dynamic으로 지연 로드
• D) 폰트를 next/font로 교체

✅ 정답: C

해설: INP는 클릭 후 JS 응답이 느린 문제야. 초기 번들을 줄이면 Hydration이 빨리 끝나고 클릭 응답이 빨라져. A, B는 LCP/CLS 관련, D는 CLS 관련.

📌 핵심 기억법: INP = JS 문제 = 번들 줄이기.

Q2. 아래 중 CLS를 발생시키는 원인이 아닌 것은?

• A) <img> 태그에 width/height 없음
• B) 페이지 로드 후 광고 배너가 동적으로 삽입됨
• C) next/font 대신 Google Fonts <link> 태그 사용
• D) <Image> 컴포넌트에 priority 속성 없음

✅ 정답: D

해설: priority 없으면 LCP가 나빠지지만, CLS와는 무관해. CLS는 레이아웃이 예상치 않게 이동하는 거야.

📌 핵심 기억법: CLS = "뭔가가 갑자기 튀어나와서 내용이 밀리는 것."

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

Core Web Vitals의 세 지표를 음식점 서비스에 빗대어 설명해봐.

예시 답변:

"LCP는 주문 후 첫 음식이 나오는 속도야. 2.5초 이내면 Good. INP는 손 들었을 때 종업원이 눈맞춤하는 속도야. 200ms 이내면 Good. CLS는 음식 가져다 놓을 때 다른 그릇이 밀리냐 안 밀리냐야. 그릇이 갑자기 이동하면 0.25점 이상이라 Poor. 세 개 다 좋아야 '별점 5점짜리 식당'이야."

🐣 영철이의 퇴근 일기

오늘은 정말 넥스트의 성능을 극한으로 끌어올리는 'Performance Deep Dive' 를 배우면서 짜릿한 쾌감을 느낀 날이야! 그동안 단순히 "내 컴퓨터에선 빨라요" 라고만 생각했는데, Lighthouse 지표를 보면서 LCP, INP, CLS를 하나하나 개선해 나가는 과정이 마치 게임 퀘스트를 깨는 것 같았어.

💡 오늘의 교훈: "성능 최적화는 감이 아니라 지표로 말해야 한다. next/image 로 용량을 줄이고, next/dynamic 으로 번들을 쪼개며, scheduler.yield() 로 사용자 응답성을 끝까지 사수하자!"

영호 리드 님이 음식점 서비스 비유를 들어 설명해 주실 때, 대기 시간(LCP) 뿐만 아니라 종업원의 응답 속도(INP)와 그릇의 안정성(CLS)까지 챙겨야 진정한 명품 식당이라는 걸 깨달았어. 오늘 너무 몰입해서 최적화했더니 머리가 팽팽 돌아가네. 퇴근길에 내가 좋아하는 단골 식당에 들러서 '성능 좋은' 맛있는 저녁 한 끼 해야지! 내일은 더 '빛보다 빠른' 서비스를 만드는 개발자가 될 거야! 🐣

🔗 더 알아보기

• Next.js 공식 문서 — Optimizing
• web.dev — Core Web Vitals
• Chrome DevTools — Performance 패널