해당 글은 여기에서 원본으로 감상할 수 있습니다 : )
📍 목표
왜 next/Image v.13에서 위와 같은 태도를 취한 건지 생각해 보는 시간 가지기
📍 예상 소요 시간
10분
Next.js는 최근 v.13 버전이 릴리즈 되면서 정말 많은 것이 바뀌었고, 그로 인해 next/Image 또한 props 관련하여 정말 많은 변경이 있었습니다. 오늘은 버전이 업데이트됨에 따라 더 이상 objectFit을 필요로 하지 않게 된 next/Image에 대해 살펴보면서 왜 이렇게 변한 건지에 대해 생각해 보는 시간을 가지도록 하겠습니다.
✅ 기존의 next/Image에서 이미지 비율을 맞추던 방법, layout과 objectFit
v.13 이전, 우리는 크기를 알 수 없는 이미지를 next/Image로 구겨 넣기 위해서 next/Image의 props로 layout="fill"을 넣어줘야 했습니다. layout="fill"은 부모 요소 중 position으로 relative, absolute, fixed 값 중 하나를 가지고 있는 요소를 기준으로 삼아 이미지의 크기를 결정했습니다. 이러한 특징을 통해 우리는 이미지의 크기를 유동적으로 결정할 수 있었습니다.
하지만 layout="fill"은 크기를 유동적으로는 결정 해 줘도 이미지 비율까지는 보장하지 못한다는 단점이 있었습니다. 이러한 단점을 보완하기 위해 함께 사용했던 props가 바로 objectFit입니다. objectFit props는 css의 object-fit과 동일한 역할을 했으며, fill, contain 등의 값을 통해 이미지 비율을 유지할 수 있도록 해 주었습니다. 즉 next/Image에서 이미지 비율을 유지하며 반응형으로 크기를 정하기 위해선 반드시 objectFit이라는 props를 필수로 넣어주어야 했습니다.
⛔️ 더 이상 objectFit을 필요로 하지 않는 next/Image
v.13이 릴리즈 되면서 next/Image에서 objectFit은 더 이상 필요로 하지 않게 되었습니다. next.js의 공식문서를 먼저 함께 봐 볼까요? 아래 글은 next.js 공식 문서에서 next/Image의 새로운 props 중 하나인 fill을 설명하는 글입니다.
( cf. fill은 기존의 layout 기능을 대체하는 역할의 props입니다. )
위의 글을 번역하면 아래와 같습니다.
fill
width와 height을 지정하는 것 대신 이미지가 부모 요소를 채우도록 하게 하는 boolean타입의 props입니다.
부모 요소는 반드시 style에 position: "relative, position: "fixed" 혹은 position: "absolute"를 지니고 있어야 합니다.
기본적으로, 해당 이미지 요소는 position: "absolute" 스타일을 부여받습니다.
이미지는 기본적으로 컨테이너(a.k.a 부모 요소)에 맞춰 채우기 위해 늘어나게 됩니다. 아마 당신은 이미지의 비율을 유지하면서 컨테이너에 맞게 채우기 위해 object-fit: "contain"을 스타일로 설정하는 것을 선호하게 될 수도 있습니다.
그 외에도, object-fit: "cover"을 스타일로 설정하여 이미지가 비율을 유지하면서도 일부분을 잘라내어 컨테이너를 가득 채우도록 할 수도 있습니다. 이를 정확하게 보이게 하기 위해, 부모 요소에 반드시 overflow: "hidden" 스타일을 부여해야 합니다.
조금 더 자세한 설명을 원한다면 :
(클릭을 하면 각각 관련된 mdn 문서로 이동합니다)
위의 글을 통해 next/Image가 더 이상 css역할을 담당하지 않게 되었음을 알 수 있습니다. 실제로 해당 next/Image의 문서를 조금 더 살펴보면, 그 어디에서도 objectFit props에 관한 이야기를 하고 있지 않으며 혹시라도 기존의 objectFit을 찾고 있는 사람들을 위해 친절하게 next/legacy/Image로 안내하는 문구까지 확인할 수 있습니다.
🤔 왜 새로워진 next/Image는 더이상 objectFit을 필요로 하지 않게 됐을까?
그렇다면 왜 새로운 next/Image는 CSS로서의 역할을 포기한 것일까요? 그것에 대한 확실한 답은 찾을 수 없었지만, 공식 문서에서의 한 에러에 대한 안내 문구를 보며 그 이유를 어림짐작 해 볼 수는 있을 것 같습니다.
위 글에서 우리는 in favor of라는 단어에 조금 더 집중해 볼 필요가 있습니다. next.js는 layout, objectFit, objectPosition이라는 Props를 in favor of style, 즉 style을 지지하며 없앴다고 말합니다. in favor of는 사전에서 지지하여, 찬성하여라고 번역되는 게 일반적이지만, 저는 여기서 지지라는 단어보다는 존중이라는 단어가 조금 더 알맞지 않을까라고 조심스럽게 이야기해 봅니다.
아마 next/Image는 next/Image로서의 자신의 역할을 조금 더 확실하게 규명한 것이 아닐까 예상합니다. 이미지를 효율적으로 로드하는 프레임워크로서의 역할을 더 확실히 하기 위해, 그 외의 부수적인 역할들에 대해서는 과감히 내려놓는 용기를 가진 게 아닐까요? layout, objectFit 등 기존의 스타일 관련 props들 또한 원래 그 역할을 하던 css를 존중하며 그들이 제 역할을 할 수 있도록 양보한 것이 아닐까라고 저는 생각합니다.
개인적으로 이번 업데이트를 통해 자신들의 목표와 정체성을 더욱 명확하게 하고 이 과정에서 기존의 다른 언어들에 대해서도 존중하는 자세를 보여준 next.js가 더욱 마음에 들었습니다. 더불어 next/Image에서 이러한 태도를 보여준 next.js가 v.13 업데이트의 다른 부분에선 어떠한 태도와 배려를 보여주었을지 궁금해지네요. 틈틈이 시간이 날 때 한 번씩 업데이트 문서를 번역해 보는 시간을 가져도 즐거울 것 같습니다.
이렇게 여러분과 함께 왜 next/Image가 objectFit을 더 이상 필요로 하지 않게 되었는지 생각해 보는 시간을 가져 보았습니다. 제 이야기가 여러분들께 도움이 되는 글이었나요? 여러분들께 조금이라도 도움이 되셨길 바라며, 이번 글은 여기서 마무리하도록 하겠습니다.
다음 글에서 만나요 😃
