[Next.js] 이미지 최적화, <Image/> 사용 방법

---

Next.js Image 태그란? 장점과 모든 속성 정리

웹사이트를 개발할 때 이미지는 중요한 요소입니다. Next.js는 이러한 이미지를 효율적으로 관리하기 위해 <Image /> 컴포넌트를 제공합니다. 이 컴포넌트는 이미지 최적화, 반응형 디자인, 성능 향상을 자동으로 처리하여 개발자와 사용자 모두에게 이점을 제공합니다. 이번 포스팅에서는 Next.js의 <Image /> 태그란 무엇인지, 장점, 그리고 사용 가능한 모든 속성과 속성값을 정리해 보겠습니다.

---

1. Image 태그란?

Next.js의 <Image /> 컴포넌트는 이미지를 서버와 클라이언트에서 최적화하여 빠르고 효율적으로 렌더링할 수 있게 돕는 컴포넌트입니다. 일반 HTML의 <img> 태그를 확장한 것으로, 다음과 같은 기능을 제공합니다:

• 자동 이미지 최적화: 이미지를 사용자가 보이는 크기로 자동으로 조정하고, 포맷(WebP 등)을 최적화합니다.
• 반응형 디자인 지원: 다양한 화면 크기에 맞춰 이미지를 자동으로 조정합니다.
• 레이아웃 관리: 레이아웃 옵션(intrinsic, responsive, fill 등)을 통해 다양한 배치 방식으로 이미지를 사용할 수 있습니다.

---

2. Image 태그의 장점

1. 이미지 최적화 자동화
   • Next.js는 이미지 크기를 자동으로 조정하고 최적화합니다.
   • WebP 포맷과 같은 효율적인 파일 형식을 활용하여 로딩 시간을 단축합니다.
2. 반응형 이미지 제공
   • 다양한 디바이스(모바일, 태블릿, 데스크톱)에서 최적의 해상도로 이미지를 제공합니다.
   • layout 속성을 활용하여 유연한 레이아웃을 구현할 수 있습니다.
3. Lazy Loading 기본 지원
   • 화면에 나타나기 전까지 이미지를 로드하지 않아 성능과 사용자 경험을 개선합니다.
4. SEO 및 접근성 향상
   • alt 속성을 사용해 검색엔진 최적화(SEO)를 돕고, 스크린 리더 사용자를 위한 접근성을 제공합니다.
5. 외부 및 정적 이미지 지원
   • 외부 이미지(CDN 등)나 프로젝트의 public 디렉토리에서 이미지를 손쉽게 사용할 수 있습니다.

---

3. Image 태그의 모든 속성과 속성값

다음은 Next.js의 <Image /> 컴포넌트에서 사용할 수 있는 모든 속성과 설명입니다.

1. 필수 속성

• src: 이미지 URL 또는 경로를 지정합니다. (필수)
• alt: 이미지의 대체 텍스트로, 접근성을 위해 반드시 포함해야 합니다. (필수)

1. 크기 및 레이아웃 관련 속성

• width, height: 이미지의 너비와 높이를 픽셀 단위로 지정합니다.
• layout: 이미지 레이아웃 방식을 설정합니다. intrinsic, responsive, fill, fixed 중 선택할 수 있습니다.
• objectFit: layout="fill"일 때, 이미지를 컨테이너 안에서 어떻게 맞출지를 설정합니다. (cover, contain, fill, none, scale-down)
• objectPosition: 이미지 배치 위치를 지정합니다. 예: center, top, left.

1. 최적화 관련 속성

• priority: 중요한 이미지로 설정하여 페이지 로드 시 우선 로드합니다.
• unoptimized: Next.js의 이미지 최적화를 비활성화합니다.
• quality: 이미지 품질을 설정합니다. (1~100, 기본값: 75)
• placeholder: 이미지 로딩 중 플레이스홀더를 설정합니다. (blur 또는 empty)
• blurDataURL: placeholder="blur"일 때 흐릿한 이미지를 표시하기 위한 데이터 URL입니다.

1. 로딩 전략 및 반응형 속성

• loading: 로딩 전략을 설정합니다. (lazy 또는 eager)
• sizes: 반응형 이미지를 위한 힌트를 브라우저에 제공하여 적절한 크기를 선택하도록 합니다.

---

4. 사용 예시

정적 이미지
프로젝트 내 public 디렉토리에 저장된 이미지를 사용:

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

외부 이미지
외부 URL을 사용하는 경우:

<Image
  src="https://example.com/image.jpg"
  alt="External image"
  width={500}
  height={500}
  unoptimized
/>

반응형 배너 이미지
레이아웃을 responsive로 설정해 화면 크기에 맞게 자동 조정:

<Image
  src="/banner.jpg"
  alt="Banner"
  layout="responsive"
  width={1600}
  height={900}
/>

fill 이미지

<Image
  src="/banner.jpg"
  alt="Banner"
  fill
/>