nextjs
CHAPTER 10 / 34
읽기 약 2분
SYNTAX
Image 컴포넌트 해부: 이미지 최적화
핵심 개념
next/image의 Image 컴포넌트는 자동 최적화, 지연 로딩, WebP 변환을 제공합니다. width, height, priority 속성으로 성능을 제어합니다.
코드 분석
<div style='font-family:monospace;padding:16px;background:#0d1117;color:#e8e8e8;'>
<div style='color:#10b981;margin-bottom:12px;font-size:9px;letter-spacing:0.2em;'>NEXT/IMAGE</div>
<div style='padding:8px;background:#0a0a0a;font-size:10px;color:#888;line-height:1.8;'>
<span style='color:#3b82f6;'>import</span> Image <span style='color:#3b82f6;'>from</span> <span style='color:#22c55e;'>'next/image'</span><br><br>
<span style='color:#555;'>// ✅ 최적화된 이미지</span><br>
<span style='color:#10b981;'><Image</span><br>
src=<span style='color:#22c55e;'>"/t800.png"</span><br>
alt=<span style='color:#22c55e;'>"T-800"</span><br>
width={<span style='color:#f59e0b;'>400</span>}<br>
height={<span style='color:#f59e0b;'>300</span>}<br>
priority <span style='color:#555;'>← LCP 이미지</span><br>
<span style='color:#10b981;'>/></span><br><br>
<span style='color:#555;'>// ✅ fill 모드</span><br>
<span style='color:#10b981;'><div</span> style={{position:<span style='color:#22c55e;'>'relative'</span>,height:<span style='color:#22c55e;'>'200px'</span>}}<span style='color:#10b981;'>></span><br>
<span style='color:#10b981;'><Image</span> src=<span style='color:#22c55e;'>"/bg.png"</span> alt=<span style='color:#22c55e;'>""</span> fill <span style='color:#10b981;'>/></span><br>
<span style='color:#10b981;'></div></span>
</div>
</div>AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Image 컴포넌트' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Image 컴포넌트'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Image 컴포넌트' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Image 컴포넌트' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Image 컴포넌트 해부: 이미지 최적화는 이 3가지만 확실히 잡으세요
1.img 태그로 원본 이미지를 그대로 로딩하면 모바일에서 10MB 이미지가 다운로드돼서 페이지 로딩이 느려집니다
2.next/image는 자동으로 WebP 변환, 리사이즈, lazy loading을 적용하며, width·height로 레이아웃 시프트를 방지합니다
3.다음 챕터에서 페이지 간 이동을 최적화하는 Link 컴포넌트를 배웁니다
공유하기
진행도 10 / 34