next.js <Image /> 관련하여 layout shift 란

Next.js에서 <Image /> 컴포넌트를 사용할 때 발생할 수 있는 레이아웃 시프트(Layout Shift) 문제는 이미지의 로딩 및 레이아웃 위치 조정과 관련이 있습니다. Next.js의 <Image /> 컴포넌트는 이미지가 로딩되는 동안 레이아웃 시프트 문제가 발생할 수 있습니다. 즉, 이미지가 로딩 중에 다른 콘텐츠를 밀어내거나 레이아웃을 변경 할 수 있습니다. 이는 사용자가 예상치 못한 레이아웃 변경을 경험하게 만들고, 이로 인해 혼란스러운 사용자 경험을 야기할 수 있습니다.  몇 가지 주의 사항을 고려하여 레이아웃 시프트를 방지할 수 있습니다

 

1. 이미지의 가로 및 세로 크기를 width 및 height 속성을 통해 명시적으로 지정하면, 이미지가 로딩되는 동안에도 레이아웃이 깨지지 않습니다.

2. layout="responsive" 속성을 사용하여 이미지를 반응형으로 지정할 수 있습니다. 이렇게 하면 이미지가 로딩 중에도 올바른 레이아웃을 유지합니다.

3. loading="eager" 속성을 사용하여 이미지를 지연 로딩 대신 즉시 로딩할 수 있습니다.

<Image
  src="/path/to/image.jpg"
  alt="Image Description"
  width={500}
  height={300}
  layout="responsive"
  loading="eager"
/>