Image Optimization

Next.js의 <Image> 컴포넌트는 기본 HTML의 <img> 요소를 확장해서 다음과 같은 강력한 기능들을 제공합니다:

• 크기 최적화 (Size optimization): 각 기기에 맞는 올바른 크기의 이미지를 자동으로 제공하며, WebP와 같은 최신 이미지 포맷을 사용합니다.
• 시각적 안정성 (Visual stability): 이미지가 로드될 때 발생하는 레이아웃 이동(Layout Shift) 현상을 자동으로 방지해 줍니다.
• 더 빠른 페이지 로드 (Faster page loads): 브라우저의 기본 지연 로딩(lazy loading)을 사용하여 이미지가 뷰포트(화면)에 들어올 때만 로드합니다. 원한다면 로딩 중에 흐릿한 자리 표시자(blur-up placeholder)를 보여줄 수도 있어요.
• 자원 유연성 (Asset flexibility): 원격 서버에 저장된 이미지까지도 필요에 따라 즉석에서(on-demand) 크기를 조정할 수 있습니다.

💡 강사의 보충 설명 & 팁:
여기서 말하는 '레이아웃 이동(CLS, Cumulative Layout Shift)'이란, 글을 읽고 있는데 갑자기 위에 큰 이미지가 로딩되면서 읽던 글이 밑으로 확 밀려나는 짜증 나는 현상을 말해요. 사용자 경험(UX)에 아주 치명적이죠. Next.js의 <Image> 컴포넌트는 이미지의 영역을 미리 확보해 두어서 이런 현상을 원천 차단해 줍니다.
또한 WebP 포맷은 기존 JPEG나 PNG보다 용량이 훨씬 작아서 페이지 속도를 획기적으로 높여줍니다. 프론트엔드 개발자라면 꼭 챙겨야 할 성능 최적화 포인트랍니다!

<Image> 컴포넌트를 사용하기 시작하려면, next/image에서 모듈을 불러와서(import) 여러분의 컴포넌트 안에서 렌더링하면 됩니다.

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

src 속성에는 로컬(내부) 이미지나 원격(외부) 이미지를 모두 넣을 수 있습니다.

🎥 영상 보기: next/image를 사용하는 방법에 대해 더 자세히 알아보세요 → YouTube (9분)

---

로컬 이미지 (Local images)

이미지나 폰트 같은 정적(static) 파일들은 프로젝트 최상위 디렉토리에 있는 public이라는 폴더 안에 저장할 수 있습니다. public 폴더 안에 있는 파일들은 코드 내에서 기본 URL(/)을 시작점으로 하여 참조할 수 있어요.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

💡 강사의 보충 설명 & 팁:
위 코드처럼 src="/profile.png" 형태로 문자열 경로를 직접 적어줄 때는, Next.js가 원본 이미지의 크기를 미리 알 수 없기 때문에 반드시 width와 height 값을 수동으로 적어주어야 합니다. 이 값을 안 적으면 에러가 뿜어져 나올 거예요!

하지만 만약 이미지를 정적으로(statically) 임포트(import) 한다면, Next.js가 이미지의 고유한 width와 height를 자동으로 알아냅니다! 이 값들은 이미지의 비율을 결정하고, 이미지가 로딩되는 동안 누적 레이아웃 이동(Cumulative Layout Shift) 현상을 방지하는 데 사용됩니다.

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Picture of the author"
      // width={500} 자동으로 제공됨
      // height={500} 자동으로 제공됨
      // blurDataURL="data:..." 자동으로 제공됨
      // placeholder="blur" // 선택 사항: 로딩되는 동안 흐리게 보여주는 효과
    />
  )
}

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Picture of the author"
      // width={500} 자동으로 제공됨
      // height={500} 자동으로 제공됨
      // blurDataURL="data:..." 자동으로 제공됨
      // placeholder="blur" // 선택 사항: 로딩되는 동안 흐리게 보여주는 효과
    />
  )
}

💡 강사의 꿀팁:
실무에서는 로컬 이미지를 사용할 때 문자열 경로를 쓰기보다는 정적 임포트(Static Import) 방식을 훨씬 많이 추천합니다. width와 height를 일일이 찾아 적지 않아도 될 뿐만 아니라, placeholder="blur" 기능까지 아주 손쉽게 사용할 수 있거든요! 로딩 뼈대(스켈레톤 UI)를 굳이 만들지 않아도 멋진 로딩 효과를 줄 수 있어요.

---

원격 이미지 (Remote images)

원격(외부 서버) 이미지를 사용하려면, src 속성에 URL 문자열을 제공하면 됩니다.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Next.js는 빌드 과정(build process) 중에 외부 원격 파일에 접근할 수 없기 때문에, 원격 이미지를 쓸 때는 width, height, 그리고 선택 사항인 blurDataURL 속성을 수동으로 제공해야 합니다.
여기서 제공한 width와 height는 이미지의 올바른 종횡비(aspect ratio)를 유추하고, 이미지가 로딩되면서 레이아웃이 밀리는 현상을 막기 위해 사용됩니다. 만약 부모 요소의 크기에 맞게 이미지를 채우고 싶다면, 대신 fill 속성을 사용할 수도 있습니다.

원격 서버의 이미지를 안전하게 허용하려면, next.config.js 파일에 지원하는 URL 패턴 목록을 정의해야 합니다. 악의적인 사용을 방지하기 위해 최대한 구체적으로 설정하는 것이 좋습니다. 예를 들어, 아래의 설정은 특정 AWS S3 버킷에서 오는 이미지만을 허용합니다:

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

💡 강사의 보충 설명 & 팁:
"왜 귀찮게 next.config.js에 외부 주소를 다 등록해야 하죠?"라고 생각하실 수 있어요. 이건 바로 보안과 비용 때문입니다. Next.js의 이미지 최적화는 서버 자원을 사용합니다. 만약 해커나 악의적인 사용자가 무거운 이미지 URL을 마구잡이로 요청해서 여러분의 서버에서 최적화 작업을 하도록 만든다면, 서버 비용이 폭탄처럼 쏟아질 수 있겠죠? 그래서 여러분이 신뢰하는 도메인(예: 서비스 공식 AWS S3, 혹은 unsplash 같은 정해진 이미지 제공 사이트)만 화이트리스트로 허용해 주는 과정이 필수랍니다!

---

API 레퍼런스 (API Reference)

Next.js Image 컴포넌트의 전체 기능 세트를 보려면 API 레퍼런스를 참조하세요.

• Image 컴포넌트 (Image Component)
  • 내장된 next/image 컴포넌트를 사용하여 Next.js 애플리케이션의 이미지를 최적화하세요.

---

모든 문서의 의미론적 개요를 보려면 /docs/sitemap.md를 참조하세요.

사용 가능한 모든 문서의 인덱스를 보려면 /docs/llms.txt를 참조하세요.