Next.js의 Image 컴포넌트와 width, height 속성의 중요성
Next.js의 Image 컴포넌트를 사용할 때 width와 height 속성을 명시해야 하는 중요한 이유가 있다. 이는 CLS(Cumulative Layout Shift) 방지를 위한 것이다.
CLS란 무엇인가?
CLS(Cumulative Layout Shift)는 Google의 Core Web Vitals 중 하나로, 페이지 로딩 중에 예상치 못한 레이아웃 이동이 발생하는 정도를 측정하는 지표다. 사용자가 페이지를 방문했을 때 컨텐츠가 갑자기 움직이면 사용자 경험에 부정적인 영향을 미친다.
이미지가 로드될 때 발생하는 상황:
- 이미지의 크기가 미리 지정되어 있지 않으면, 브라우저는 해당 공간을 얼마나 확보해야 할지 모른다.
- 이미지가 로드되면서 실제 크기가 표시되고, 이때 페이지의 다른 요소들이 밀려나거나 재배치된다.
- 사용자는 클릭하려던 버튼이 갑자기 이동하는 등의 불편함을 경험하게 된다.
Next.js Image 컴포넌트의 장점
Next.js의 Image 컴포넌트는 이러한 문제를 해결하기 위해 width와 height 속성을 필수로 요구한다.
import Image from 'next/image';
// 올바른 사용법
<Image src="/profile.jpg" width={500} height={300} alt="프로필 이미지" />width와 height를 지정하게 되면
- 브라우저는 이미지가 로드되기 전에도 정확한 공간을 확보할 수 있다.
- 이미지가 로드되는 동안에도 레이아웃은 안정적으로 유지된다.
- CLS 점수가 개선되어 사용자 경험과 SEO에 긍정적인 영향을 미친다.
unoptimized 속성의 활용
모든 이미지에 최적화를 적용하는 것이 항상 최선은 아니다. Next.js는 unoptimized 속성을 통해 이미지 최적화를 선택적으로 비활성화할 수 있는 옵션을 제공한다.
<Image src="/large-image.jpg" width={1200} height={800} alt="대형 이미지" unoptimized />
이 속성을 사용해야 하는 경우:
- 이미 최적화된 이미지를 사용할 때
- 매우 큰 이미지나 많은 이미지를 처리해야 할 때 서버 리소스 절약을 위해
- 개발 환경에서 빠른 로딩이 필요할 때
항상 최적화 기능을 사용하면 리소스 소비가 증가하고, 특히 많은 트래픽이 발생하는 사이트에서는 비용 증가로 이어질 수 있다. 그러므로 페이지의 성격과 이미지의 중요도에 따라 최적화 여부를 결정하는 것이 중요하다.
결론
Next.js에서 이미지를 다룰 때는 CLS를 방지하기 위해 width와 height 속성을 지정하는 것이 중요하다. 또한 모든 이미지에 최적화를 적용하는 것보다 필요에 따라 선택적으로 적용하는 것이 리소스 활용 측면에서 효율적일 수 있다.
