[NextJs] Next.js 13 도입으로 인한 이미지 최적화 경험: Next/Image 컴포넌트의 강력한 기능들

프로젝트에서 next.js 13버전을 도입하여 이미지 최적화 한 경험을 토대로 작성해봅니다.

 

Next/Image 컴포넌트의 기능

Next/Image 컴포넌트에서 제공하는 대표적인 기능은 다음의 3가지입니다.

 

각 기능에 대해 어떤 이점이 있는지 정리해 보겠습니다.

lazy loading

lazy loading는 이미지 로드하는 시점을 필요할 때까지 지연시키는 기술을 의미합니다.

예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연시키고 스크린 안에 있는 이미지만을 로드해서, 불필요한 대역폭 사용을 줄이고 필요한 이미지만 빠르게 로드할 수 있도록 하는 것입니다. 모든 브라우저에서 잘 동작하는 lazy loading 을 구현하기 위해서는 Intersection Observer 혹은 scroll 이벤트를 통해 스크린에 element가 보일 때를 캐치하여 이미지를 로드하도록 구현해야 합니다. (크롬 76 버전 이상부터는 img 태그에 loading=“lazy” 속성을 추가하면 간단하게 적용할 수 있습니다).

Next/Image를 사용하게 되면 자동으로 lazy loading이 적용됩니다. 물론 중요한 이미지 일부에 lazy loading을 적용하고 싶지 않은 경우에는 해당 기능을 끌 수도 있습니다.

 

 

이미지 사이즈 최적화

Next/Image는 디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원합니다. 또한 Next.js는 이미지를 webp와 같은 용량이 작은 포맷으로 이미지를 변환해서 제공합니다.

 

사용자의 디바이스에 맞는 이미지 사이즈를 만들고, 용량이 작은 webp 포맷으로 변환하는 작업은 이미지에 대한 최초 요청 시에 Next.js 서버에서 진행됩니다. 이후 요청에는 캐시가 만료될 때까지 캐시 된 이미지가 제공되기 때문에 첫 번째 요청보다 훨씬 빠르게 이미지를 서빙할 수 있습니다. 캐시가 만료된 후 요청이 들어오면 오래된 이미지를 우선 제공하고, 백그라운드에서 이미지 최적화를 다시 진행합니다.

 

placeholder 제공

웹사이트를 방문했을 때 이미지가 로드되기 전에는 영역의 높이가 0이었다가 이미지가 로드된 후에 이미지 높이만큼 영역이 커져 레이아웃이 흔들리는 경험을 해보신 적이 있을 겁니다. 이러한 현상을 CLS(Cumulative Layout Shift)라고 합니다. Next/Image는 레이아웃이 흔들리는 문제를 해결하기 위해 placeholder를 제공합니다. 이미지가 로드되기 전에도 이미지 높이만큼의 영역을 표시하여 이미지가 로드된 후 레이아웃이 흔들리지 않도록 하는 것이죠. placeholder는 빈 공간 또는 블러 처리된 이미지(로컬 이미지의 경우 빌드 시 생성, 원격 이미지의 경우 base64로 인코딩된 데이터 URL을 지정해야 함)로 설정할 수 있으며, 사용자 정의 설정도 가능합니다.

 

 

사용 방법

import Image from 'next/image';

export default function Test() {
  return (
    <div>
      <h1>Placeholder</h1>
      <Image
        src="/images/photo4.jpg"
        alt="Fourth Image"
        width={500}
        height={300}
        placeholder="blur"
        blurDataURL="/images/placeholder-image.jpg" // 블러 처리된 이미지 경로
      />
    </div>
  );
}

 

폰트 최적화

@next/font는 Next.js에서 폰트 최적화를 위해 제공하는 기능으로, 구글 폰트와 같은 외부 폰트를 보다 효율적으로 사용할 수 있게 해줍니다. 이를 통해 웹 애플리케이션의 성능을 향상시키고, 페이지 로드 시간을 줄일 수 있습니다.

사용 방법

import { Inter } from '@next/font/google';

const inter = Inter({ subsets: ['latin'] });

function MyApp({ Component, pageProps }) {
  return (
    <div className={inter.className}>
      <Component {...pageProps} />
    </div>
  );
}

 

느낀점

Next.js 13에서 제공하는 이미지 최적화 기능을 활용하면서 웹 애플리케이션의 성능이 눈에 띄게 향상된 것을 느꼈습니다. 특히, Next/Image 컴포넌트를 통해 자동으로 적용되는 lazy loading 덕분에 사용자 경험이 크게 개선되었습니다. 사용자가 스크롤할 때 필요한 이미지만을 즉시 로드함으로써 불필요한 대역폭 소비를 줄이고, 페이지의 응답성을 높일 수 있었습니다.

또한, 이미지 사이즈 최적화 기능은 다양한 디바이스에 맞는 이미지를 자동으로 제공하여, 로딩 시간을 단축시켰습니다. 최초 요청 시 서버에서 이미지를 최적화하는 과정이 있더라도, 이후 요청에서는 캐시된 이미지를 빠르게 서빙할 수 있어 효율적인 리소스 관리가 가능했습니다.

마지막으로, placeholder 기능을 통해 CLS 문제를 효과적으로 해결함으로써, 사용자에게 더욱 매끄러운 시각적 경험을 제공할 수 있었습니다.

전반적으로, Next.js 13의 이미지 최적화 기능은 프로젝트의 품질을 높이고, 사용자 경험을 개선하는 데 큰 기여를 했다고 생각합니다. 앞으로도 이러한 기능을 적극 활용하여 더욱 향상된 웹 애플리케이션을