NEXT14 Image 부모 컨테이너 사이즈에 맞게 반응형으로 작동시키기 (가로세로 중앙정렬)

Next(React)에서는 HTML img 태그 대신 Image라는 자체 태그를 따로 제공하고 있다. Image 태그는 서버에서 이미지를 미리 받아와 화면에 더 빠르고 최적화된 방식으로 이미지를 표시할 수 있게 해준다. 

 

보통 컨테이너(div) 크기에 맞게 반응형으로 이미지를 조절하고 싶을 때는 이미지를 div 백그라운드 속성으로 지정하거나 div 태그를 중복해서 작성한 다음 안쪽 div에 absolute 속성을 먹여 적용한다. 

 

하지만 Image 태그를 사용하면 위와 같은 복잡한 방식 필요 없이 간단하게 부모 크기에 이미지를 맞출 수 있다. 일반적으로 구글링을 검색했을 때 나오는 방법은 다음과 같다.

 

<Image src={imgsrc} layout="fill" objectFit="cover" alt="default"></Image>

 

layout 속성에 fill 값을 주어 이미지를 컨테이너에 꽉 채우고, objectFit 속성에 cover 값을 주어 이미지가 항상 가로세로 중앙에 위치하도록 구성하면 된다.

 

하지만 위 처럼 코드를 작성하면, next 13 이상 버전을 사용하는 환경에서는 경고문이 발생한다. 

 

Image with src "(이미지 링크)" has legacy prop "layout". Did you forget to run the codemod?

 

이유는 next13 버전 부터는 Image 태그에서 layout과 objectFit 요소가 삭제되었기 때문이다. 때문에 13버전 이상부터는 상단에 next/image 모듈이 아닌 next/legacy/image 모듈을 적용해야한다. 하지만 레거시는 어디까지나 업데이트 이전 버전에 만들어진 웹사이트들을 위해 호환성 차원에서 남겨놓은 모듈일 뿐이므로, 특히 App Router 버전(Next 14 이상)을 사용하고 있다면 현재 버전에 맞는 방식을 써주는게 어쩐지 마음이 편하다.

 

Next 공식 웹페이지에서는 다음의 방법을 안내해준다.

 

<Image src={imgSrc} 
	sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" 
    fill={true} style={{ objectFit : "cover"}} alt="default">
</Image>

 

layout 속성값으로 존재했던 fill이 속성으로 나왔고, objectFit 속성은 style 속성을 이용해 css 코드로 넣어준다. 다만 이 방법을 사용할 때는 sizes 속성도 함께 사용해야하는데, 이유는 브라우저가 서버에서 처음 이미지를 가져올 때 어떤 크기로 가져와야하는지를 sizes 속성이 알려주기 때문이다. sizes 속성이 없다면 브라우저는 서버에서 이미지를 무조건 100%의 크기로 가져오게 되고, 이미지 사이즈가 클수록 무척 비효율적이 된다.

 

따라서 next 14 버전부터는 fill 속성과 style 속성을 이용해 Image 크기를 부모 컨테이너에 맞춰 사용해주고, sizes 태그를 이용해 브라우저에 가져올 이미지 사이즈를 알려주는 방식으로 편안하게 반응형 이미지를 쓰도록 하자.

 

실행 결과는 대충 아래처럼 보인다. (부모 사이즈가 바뀌면 이미지가 찌그러지지 않고 중앙에 보여짐)

 

 

 

 

 

Tip. Image 태그의 fill 속성과 objectFit 속성은 position 속성에 영향을 받는다. 따라서 부모 컨테이너가 무조건 position : relative 혹은 position : absolute 속성을 갖고 있어야 한다. 

 

 

 

 

 

END.