9단계: 이미지 최적화와 next/image 사용법

이미지 최적화와 next/image 사용법

Next.js는 내장된 next/image 컴포넌트를 통해 이미지 최적화 기능을 제공합니다.
성능 개선, SEO 향상, 자동 포맷 변경(WebP), lazy loading 등 다양한 기능이 포함되어 있습니다.

9-1. 왜 next/image를 써야 하나?

9-2. 기본 사용법

import Image from 'next/image';
import sampleImg from '../public/sample.jpg';

export default function ProfileImage() {
  return (
    <Image
      src={sampleImg}
      alt="프로필 이미지"
      width={300}
      height={300}
    />
  );
}

• src: 경로 또는 import된 이미지
• alt: 접근성 텍스트
• width, height: 고정 레이아웃 필요 시 명시 필수

9-3. 퍼블릭 폴더 이미지 사용

<Image
  src="/logo.png"
  alt="로고"
  width={100}
  height={50}
/>

• /public/logo.png는 /logo.png로 접근 가능

9-4. 외부 이미지 사용

// next.config.js
module.exports = {
  images: {
    domains: ['images.unsplash.com', 'cdn.example.com'],
  },
};

<Image
  src="https://images.unsplash.com/photo-xxx"
  alt="외부 이미지"
  width={500}
  height={300}
/>

• 외부 이미지 URL은 domains 설정 후 사용 가능

9-5. layout="fill" 사용법

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/banner.jpg"
    alt="배너"
    fill
    style={{ objectFit: 'cover' }}
  />
</div>

• fill은 부모 요소가 position: relative일 때만 가능
• objectFit="cover"로 꽉 채우는 배경 이미지 구성

9-6. priority와 placeholder 속성

<Image
  src="/main.jpg"
  alt="메인 이미지"
  width={600}
  height={400}
  priority
  placeholder="blur"
/>

• priority: 초기 로딩 이미지 우선 렌더링
• placeholder="blur": 흐릿한 썸네일로 미리보기 제공

요약

• next/image는 성능, SEO, 접근성 최적화된 이미지 처리 도구입니다.
• 정적 이미지, 퍼블릭 이미지, 외부 이미지 모두 대응합니다.
• layout="fill"과 objectFit 조합으로 반응형 배너도 구현 가능
• 첫 화면 이미지에는 priority, 미리보기에 placeholder="blur"를 사용

심화학습

Q1. next/image에서 width, height를 지정하지 않으면 어떤 문제가 발생할까?

A: 브라우저가 이미지 크기를 계산하지 못해 CLS(Layout Shift)가 발생할 수 있습니다. 이미지 로딩 중 위치가 바뀌는 문제가 생깁니다.

Q2. 외부 이미지를 많이 사용하는 프로젝트에서 이미지 로딩 성능을 개선하려면 어떤 전략을 쓸 수 있을까?

A: 이미지 CDN을 활용하거나, Next.js 자체 이미지 최적화 서버를 구성하거나, preload 또는 priority 설정을 통해 퍼포먼스를 개선할 수 있습니다.

Q3. layout="fill"과 objectFit="cover" 조합은 언제 유용할까? 어떤 문제가 생길 수 있을까?

A: 반응형 배너나 배경 이미지처럼 비율을 유지한 채 영역을 채울 때 유용하지만, 부모 요소 크기가 명확하지 않으면 이미지가 깨지거나 비율이 이상해질 수 있습니다.