Next/Image를 통한 이미지의 최적화

작성일 Edited on Disqus:

Next

들어가며

Next.js를 사용해 프로젝트를 진행하면서 이미지를 위해 <img> 태그를 사용하던 중 다음과 같은 ESLint 오류가 발생했다.

Next/Image 사용

Next/Image에서 제공하는 <Image />를 사용해 자동적으로 이미지를 최적화하라는 내용이었다.

처음 알게된 내용인만큼 Next/Image 컴포넌트의 기능과 또 실제로 프로젝트에 적용하면서 겪은 문제점들에 대해 정리해보고자 한다.

Next/Image를 활용한 이미지 최적화

Next/Image의 장점

Next/Image 컴포넌트를 사용하면 대표적으로 다음의 3가지 이점을 얻을 수 있다.

  • Lazy loading
  • 이미지 사이즈 최적화
  • placeholder를 통한 스켈레톤 UI로 CLS 방지

Lazy loading

Lazy loading이란 이미지를 로드하는 시점을 지연시키는 기술을 말한다. 페이지를 읽어들이는 시점에 중요하지 않은 리소스를 추후에 로딩함으로써 빠른 콘텐츠의 제공이 가능해진다.

기존 img 태그를 사용하는 경우 loading=“lazy” 속성을 통해 브라우저의 도움을 받거나 혹은 개발자가 Intersection Observer API, Scroll 이벤트를 통해 스크린에 element가 보일 때를 캐치하여 이미지를 로드하도록 직접 구현해야 했다. 하지만 Next/Image의 경우 자동으로 lazy loading이 적용된다.

이미지 사이즈 최적화

여러 프로젝트를 경험하면서 이미지를 사용할때 중요하다고 느낀 점 중 하나는 이미지 사이즈의 최적화였다. 이를 위해 이미지의 포맷을 변경하고 이미지의 용량을 압축하는 등의 과정이 필요해 번거로웠다.

Next/Image는 디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자의 디바이스에 맞는 이미지를 다운로드할 수 있게 지원함과 동시에 이미지를 webp와 같은 용량이 작은 포맷으로 변환해 제공함으로써 쉽게 이미지 사이즈를 최적화 할 수 있다.

Placeholder를 통한 스켈레톤 UI로 CLS 방지

Next/Image는 레이아웃이 흔들리는 현상 즉 CLS(Cumulative Layout Shift)를 방지하기 위한 placeholder를 제공한다. Placeholder로 빈 영역 또는 blur 이미지 혹은 커스텀 이미지도 설정 가능하다.

Next/Image 적용하면서 발생한 문제점

리모트 이미지 설정

Next/Image는 next/image로부터 Image를 import해 사용하기만 하면 되어 정말 간단했다.

다만 리모트 이미지의 경우 Next.js 서버에서 이미지를 가지고 있는 리모트 서버에 직접 요청을 하기 때문에 보안상의 이유로 모든 url에 대한 접근을 방지한다는 문제가 존재했다. 때문에 리모트 이미지를 사용하기 위해서는 next.config.js 파일에 CDN의 host를 명시해 주어야 했다.

1
2
3
4
5
6
// next.config.js
const nextConfig = {
	images: {
		domains: ['cdn-host'],
	},
};

리모트 이미지 placeholder

리모트 이미지의 경우 로컬 이미지와 다르게 빌드 타임에 이미지 파일에 접근하는 것이 불가능하기 때문에 placeholder를 blur로 설정해도 blur 이미지가 존재하지 않았다.

이 문제는 Image의 blurDataURL 속성에 직접적인 데이터를 추가함으로써 해결할 수 있었다.

1
2
3
4
5
6
7
8
9
// prettier-ignore
<Image
  width="60"
  height="60"
  alt={name}
  src={imageUrl}
  placeholder="blur"
  blurDataURL={BLUR_DATA_URL}
/>

마치며

Next.js를 사용하는 이유로 ‘SEO(Search Engine Optimization)를 위한 Server-Side Rendering(SSR)을 가능하게 함’ 정도만 알고 있었는데, 이번 프로젝트를 진행하면서 Image의 자동 최적화, 편리한 라우팅 시스템과 같은 다양한 장점들이 존재함을 알 수 있었다.

왜 많은 기업들이 Next.js를 사용하고 있는지 약간은 알 것 같다. 더 자세히 공부해봐야지!

참고