이미지 최적화

Next.js의 Image 컴포넌트는 웹 애플리케이션의 성능을 크게 향상시킬 수 있는 강력한 도구입니다.

이 절에서는 Image 컴포넌트를 사용한 이미지 최적화 방법, 자동 최적화 기능, 그리고 그 성능 향상 효과에 대해 알아보겠습니다.

Image 컴포넌트 기본 사용법

Next.js의 Image 컴포넌트는 next/image에서 import하여 사용할 수 있습니다.

import Image from 'next/image'
 
export default function MyComponent() {
  return (
    <Image
      src="/example.jpg"
      alt="Example Image"
      width={500}
      height={300}
    />
  )
}

주요 속성

src : 이미지 소스 URL
alt : 이미지 대체 텍스트
width 및 height : 이미지 크기
layout : 이미지 레이아웃 동작 ('fixed', 'responsive', 'fill', 'intrinsic')
priority : 중요한 이미지의 우선 로딩

반응형 이미지 처리

반응형 이미지를 구현하려면 layout 속성을 사용합니다.

<Image
  src="/example.jpg"
  alt="Responsive Image"
  layout="responsive"
  width={700}
  height={475}
/>

레이지 로딩

Image 컴포넌트는 기본적으로 레이지 로딩을 지원합니다.

뷰포트에 들어올 때만 이미지를 로드합니다.

<Image
  src="/example.jpg"
  alt="Lazy Loaded Image"
  width={500}
  height={300}
  loading="lazy"
/>

외부 이미지 도메인 설정

외부 도메인의 이미지를 사용하려면 next.config.js에 해당 도메인을 추가해야 합니다.

next.config.js

module.exports = {
  images: {
    domains: ['example.com'],
  },
}

그 후 외부 이미지를 사용할 수 있습니다.

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

자동 이미지 최적화

Next.js는 이미지를 자동으로 최적화합니다.

적절한 이미지 포맷 (WebP 등) 사용
디바이스에 맞는 크기로 리사이징
품질 조정

이를 통해 페이지 로드 시간을 줄이고 성능을 향상시킬 수 있습니다.

9장 스타일링과 CSS와의 연결

Image 컴포넌트는 9장에서 다룬 CSS 모듈이나 styled-components와 함께 사용할 수 있습니다.

예를 들어, CSS 모듈을 사용하여 이미지 컨테이너의 스타일을 지정할 수 있습니다.

import styles from './ImageContainer.module.css'
import Image from 'next/image'
 
export default function ImageContainer() {
  return (
    <div className={styles.container}>
      <Image
        src="/example.jpg"
        alt="Styled Image"
        layout="fill"
        objectFit="cover"
      />
    </div>
  )
}

/* ImageContainer.module.css */
.container {
  position: relative;
  width: 100%;
  height: 300px;
}

실습 : 반응형 이미지 갤러리 구현

다양한 디바이스 크기에 최적화된 반응형 이미지 갤러리를 구현해보겠습니다.

먼저, 이미지 데이터를 준비합니다.

app/data/images.js

export const images = [
  { src: '/image1.jpg', alt: 'Image 1' },
  { src: '/image2.jpg', alt: 'Image 2' },
  { src: '/image3.jpg', alt: 'Image 3' },
  // ... 더 많은 이미지 추가
]

갤러리 컴포넌트를 생성합니다.

app/components/ImageGallery.js

'use client'
 
import Image from 'next/image'
import { useState, useEffect } from 'react'
import styles from './ImageGallery.module.css'
 
export default function ImageGallery({ images }) {
  const [columns, setColumns] = useState(3)
 
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 600) setColumns(1)
      else if (window.innerWidth < 1024) setColumns(2)
      else setColumns(3)
    }
 
    window.addEventListener('resize', handleResize)
    handleResize()
 
    return () => window.removeEventListener('resize', handleResize)
  }, [])
 
  return (
    <div className={styles.gallery} style={{ '--columns': columns }}>
      {images.map((image, index) => (
        <div key={index} className={styles.imageWrapper}>
          <Image
            src={image.src}
            alt={image.alt}
            layout="fill"
            objectFit="cover"
          />
        </div>
      ))}
    </div>
  )
}

CSS 모듈을 사용하여 갤러리 스타일을 지정합니다.

app/components/ImageGallery.module.css

.gallery {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: 1rem;
  padding: 1rem;
}
 
.imageWrapper {
  position: relative;
  padding-top: 100%; /* 1:1 Aspect Ratio */
}

갤러리를 페이지에 추가합니다.

app/page.js

import ImageGallery from './components/ImageGallery'
import { images } from './data/images'
 
export default function GalleryPage() {
  return (
    <div>
      <h1>Responsive Image Gallery</h1>
      <ImageGallery images={images} />
    </div>
  )
}

이 실습을 통해 Next.js의 Image 컴포넌트를 사용하여 반응형 이미지 갤러리를 구현할 수 있습니다.

이 갤러리는 디바이스 크기에 따라 열 수를 조정하고, 각 이미지를 자동으로 최적화하여 로드 시간을 줄이고 성능을 향상시킵니다.

Next.js의 Image 컴포넌트를 활용한 이미지 최적화는 웹 애플리케이션의 성능을 크게 향상시킬 수 있는 중요한 기술입니다.

자동 최적화, 레이지 로딩, 반응형 처리 등의 기능을 통해 사용자 경험을 개선하고 페이지 로드 시간을 단축할 수 있습니다.

이전으로 다음으로