Next.js 기초 입문 6주차: 정적 파일 및 이미지 최적화 심화 학습

Next.js는 웹 애플리케이션 개발에 있어 뛰어난 성능과 개발 편의성을 제공합니다. 특히 정적 파일 관리 및 이미지 최적화는 웹 성능에 직접적인 영향을 미치는 중요한 요소입니다. 본 학습지에서는 Next.js 환경에서 정적 파일을 효율적으로 다루고, Next/Image 컴포넌트를 활용하여 이미지를 최적화하는 고급 기법을 상세히 탐구합니다.

📌 이번 회차 학습 목표

• Next.js 애플리케이션에서 정적 파일(Static Assets)을 올바르게 관리하는 방법을 이해합니다.
• public 디렉토리의 역할과 정적 파일 접근 방식을 숙지합니다.
• Next/Image 컴포넌트의 필요성과 기능을 파악하고, 이를 활용하여 이미지를 최적화하는 방법을 학습합니다.
• 이미지 최적화가 웹 성능 및 사용자 경험에 미치는 영향을 분석합니다.
• Next/Image 컴포넌트의 다양한 속성(width, height, layout, quality 등)을 활용하여 이미지를 제어하는 실습을 수행합니다.

📝 개념 설명

1. Next.js의 정적 파일 관리

Next.js에서 정적 파일(Static Files)은 빌드 시점에 변경되지 않고 그대로 제공되는 파일들을 의미합니다. 여기에는 이미지, 폰트, 동영상, robots.txt, favicon.ico 등이 포함됩니다. Next.js는 이러한 정적 파일들을 public 디렉토리에 배치하여 관리합니다.

1.1. public 디렉토리의 역할

Next.js 프로젝트의 루트에 위치한 public 디렉토리는 정적 자산을 제공하는 특별한 디렉토리입니다. 이 디렉토리 내의 모든 파일은 애플리케이션의 루트 URL(/)에서 직접 접근 가능합니다. 예를 들어, public/images/logo.png 파일은 웹 애플리케이션에서 /images/logo.png 경로로 접근할 수 있습니다.

2. 이미지 최적화의 중요성

웹 페이지 로딩 시간의 상당 부분은 이미지 로딩에 소요됩니다. 최적화되지 않은 이미지는 웹 성능 저하, 사용자 경험 악화, SEO 순위 하락 등으로 이어질 수 있습니다. 이미지 최적화는 다음과 같은 이점을 제공합니다:

• 빠른 로딩 속도: 파일 크기를 줄여 페이지 로딩 시간을 단축합니다.
• 대역폭 절약: 사용자 및 서버의 네트워크 대역폭 사용량을 줄입니다.
• 향상된 사용자 경험: 이미지가 빠르게 표시되어 사용자의 만족도를 높입니다.
• SEO 개선: 검색 엔진은 빠른 웹사이트를 선호하므로, SEO 순위 향상에 기여합니다.

3. Next/Image 컴포넌트

Next.js는 이미지 최적화를 위한 내장 컴포넌트인 Next/Image를 제공합니다. 이 컴포넌트는 HTML의 <img> 태그를 확장하여 다음과 같은 강력한 기능을 자동으로 제공합니다.

• 반응형 이미지: 다양한 뷰포트 크기에 맞춰 최적화된 이미지 크기를 자동으로 제공합니다.
• 지연 로딩(Lazy Loading): 뷰포트 내에 이미지가 들어올 때까지 로딩을 지연시켜 초기 로딩 성능을 향상시킵니다.
• 이미지 형식 최적화: WebP와 같은 최신 이미지 형식으로 자동 변환하여 파일 크기를 줄입니다 (브라우저 지원 여부에 따라).
• 외부 이미지 최적화: CDN이나 외부 URL의 이미지도 최적화할 수 있습니다.
• 레이아웃 시프트 방지: 이미지 로딩으로 인한 레이아웃 변경(CLS: Cumulative Layout Shift)을 최소화합니다.

3.1. Next/Image의 주요 속성

• src: 이미지 파일의 경로 (로컬 파일 또는 외부 URL). 로컬 파일은 public 디렉토리 내에 있어야 합니다.
• alt: 이미지에 대한 대체 텍스트. 접근성 및 SEO에 필수적입니다.
• width, height: 이미지의 원본 너비와 높이. 레이아웃 시프트 방지를 위해 중요합니다.
• layout: 이미지의 레이아웃 방식을 정의합니다. ('fill', 'fixed', 'intrinsic', 'responsive')
• quality: 이미지 압축 품질 (1-100, 기본값 75).
• priority: true로 설정하면 이미지를 즉시 로드하여 LCP(Largest Contentful Paint) 개선에 기여합니다.

💡 예제 & 실습

다음 예제를 통해 Next.js에서 정적 파일을 관리하고 Next/Image 컴포넌트를 사용하는 방법을 실습해 봅시다.

실습 1: public 디렉토리에 정적 이미지 추가 및 사용

먼저, Next.js 프로젝트를 생성하고 public 디렉토리에 이미지를 추가합니다.

1. Next.js 프로젝트 생성 (이미 생성되어 있다면 생략):
   

   npx create-next-app@latest my-next-app --typescript
   cd my-next-app

2. public 디렉토리에 이미지 파일 추가:
   

   프로젝트 루트의 public 디렉토리 안에 images 폴더를 생성하고, 그 안에 sample-image.jpg 파일을 넣어주세요. (어떤 이미지 파일이든 상관없습니다.)

   my-next-app/
   ├── public/
   │   └── images/
   │       └── sample-image.jpg
   └── ...

3. pages/index.tsx 파일 수정:
   

   public/images/sample-image.jpg 파일을 <img> 태그와 Next/Image 컴포넌트로 각각 사용해봅니다.

   // pages/index.tsx
   import Image from 'next/image';
   
   export default function HomePage() {
     return (
       <div>
         <h1>정적 파일 및 이미지 최적화</h1>
   
         <h2>1. 일반 <img> 태그로 이미지 사용</h2>
         <p>public 디렉토리의 이미지는 절대 경로로 접근합니다.</p>
         <img src='/images/sample-image.jpg' alt='일반 이미지' width='500' height='300' /
         >
   
         <h2>2. Next/Image 컴포넌트로 이미지 사용</h2>
         <p>Next/Image는 이미지 최적화를 자동으로 처리합니다.</p>
         <Image
           src='/images/sample-image.jpg'
           alt='최적화된 이미지'
           width={500}
           height={300}
           layout='responsive' // 화면 크기에 맞춰 반응형으로 조절
           priority // LCP 개선을 위해 우선 로드
         /
         >
   
         <h2>3. 외부 이미지 사용 (Next/Image)</h2>
         <p>외부 이미지도 Next/Image로 최적화할 수 있습니다.</p>
         <Image
           src='https://via.placeholder.com/600x400'
           alt='외부 이미지 예시'
           width={600}
           height={400}
           layout='intrinsic' // 이미지 고유 크기를 유지하되, 컨테이너에 맞게 축소
         /
         >
       </div>
     );
   }

4. next.config.js 설정 (외부 이미지 사용 시 필수):
   

   Next/Image 컴포넌트로 외부 이미지를 사용하려면, next.config.js 파일에 해당 도메인을 등록해야 합니다. 이는 보안상의 이유와 이미지 최적화 서버가 해당 도메인에서 이미지를 가져올 수 있도록 하기 위함입니다.

   // next.config.js
   /** @type {import('next').NextConfig} */
   const nextConfig = {
     reactStrictMode: true,
     images: {
       domains: ['via.placeholder.com'], // 외부 이미지 도메인 추가
     },
   };
   
   module.exports = nextConfig;

5. 애플리케이션 실행:
   

   npm run dev

   브라우저에서 http://localhost:3000에 접속하여 이미지가 어떻게 렌더링되고 있는지 확인합니다. 개발자 도구(F12)의 네트워크 탭에서 이미지 로딩 방식과 크기를 비교해보세요.

⚠️ 자주 틀리는 것 / 주의사항

🔗 다음 회차 예고

이번 회차에서는 Next.js의 정적 파일 관리와 Next/Image를 통한 이미지 최적화 기법을 학습했습니다. 다음 7회차에서는 데이터 페칭(Data Fetching)에 대해 심층적으로 다룰 예정입니다. Next.js에서 데이터를 가져오는 다양한 방법(getServerSideProps, getStaticProps, getStaticPaths)과 그 활용 시나리오를 학습하여, 동적인 웹 페이지를 효율적으로 구축하는 방법을 익히게 될 것입니다. 이번 회차에서 다룬 정적 자산 관리와 함께, 데이터 페칭은 Next.js 애플리케이션의 성능과 유연성을 결정하는 핵심 요소이므로 다음 회차 학습에 많은 기대를 바랍니다.