<div id="readability-page-1" class="page"><div><figure><div role="button" tabindex="0"><p><img alt="" src="https://miro.medium.com/max/1400/1*4wgGlY6jkSiIujW7EJa-ig.png" width="700" height="351" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" loading="eager" role="presentation"></p></div><figcaption>새로워진 next.js 로고 보셨나요?</figcaption></figure><p id="e0ff">next.js를 사용하시는 분들은 이미 아시겠지만 <a href="https://nextjs.org/docs/api-reference/next/image" rel="noopener ugc nofollow" target="_blank">next/image</a>라는 이미지 컴포넌트가 존재합니다. img태그를 직접 사용하지 않고 next/image 컴포넌트를 사용하는 것을 권장하고 있는데요. 문서에 소개된 장점을 살펴보면 다음과 같습니다.</p><p id="4985">✔ 향상된 성능<strong>(Improved Performance): </strong>각 기기에 맞는 올바른 사이즈로 모던 이미지 포맷을 사용할 수 있게 제공한다.<br>✔ 시각적 안정성(<strong>Visual Stability</strong>): CLS를 자동으로 예방해줍니다.<br>✔ 빠른 페이지 로드(<strong>Faster Page Loads</strong>): 레이지 로딩을 통해 페이지를 로드하고 blur-up placeholder를 옵션으로 제공한다.<br>✔ 애셋 유연성(<strong>Asset Flexibility</strong>): 온디맨드로 이미지를 리사이징 합니다.</p><p id="40dc">이미지를 최적화하는 기법들을 직접 이미지태그에 적용해가면서 일일히 사용할 수 있지만 해당 컴포넌트를 사용할 경우 번거로운 작업들을 처리해주기 때문에 편리하게 사용할 수 있습니다.</p><p id="0231">하지만 이미 이렇게 자랑하고 있는 기능을 제공하는 next/image를 두고 next.js는 12.2에서 실험기능으로, 12.3에서 stable 모드로 next/future/image를 등장시켰습니다. 왜 next/future/image를 만들었을까요? 사실 이 문제는 이 <a href="https://github.com/vercel/next.js/discussions/22861" rel="noopener ugc nofollow" target="_blank">토론을 보면</a> 꽤 묵은지였습니다.</p><blockquote><p id="c2b1">추가로 이 글에서는 next/future/image의 사용법을 다루진 않습니다. 사용법이나 마이그레이션 가이드가 궁금하다면 이 <a href="https://nextjs.org/docs/api-reference/next/future/image" rel="noopener ugc nofollow" target="_blank">링크</a>를 참고해주세요.</p></blockquote><h2 id="829e">next/future/image와 next/image의 차이점</h2><p id="ceab">next/future/image는 더 나은 성능과 <code>next/image</code>의 DX를 통해 <code>&lt;img&gt;</code>의 더 나은 기본 사용성을 제공합니다. 이 설명에서 알 수 있듯이 기존 next/image 컴포넌트는 기존 img태그를 그대로 사용하는 것과는 조금 거리가 있었는데요. 대표적으로 span 태그가 래핑되고 원하는 스타일이 지정이 안된다는 점이였는데요.</p><p id="8778">이 <a href="https://stackoverflow.com/questions/70210003/how-to-remove-the-wrapper-spans-from-next-image-in-next-js" rel="noopener ugc nofollow" target="_blank">이슈</a>의 코드를 그대로 가져와보면,</p><figure></figure><p id="3253">의 코드는</p><figure></figure><p id="9463">로 img 태그가 아주 꽁꽁 감싸져 있는 것을 볼 수 있습니다. 또한 next/image에서는 <a href="https://nextjs.org/docs/api-reference/next/image#style" rel="noopener ugc nofollow" target="_blank">layout 같은 프로퍼티들</a>로 인해 강제되는 기본 스타일들의 우선순위가 높아 이 중첩을 뚫어 스타일을 지정하기 위해서는 <code>!important</code>를 사용해야 하는 문제들도 있었습니다.</p><p id="f394">그럼 변경점을 하나 하나 살펴보겠습니다.</p><h2 id="052e">감싸져있는 <code>&lt;span&gt;</code> wrapper를 제거합니다.</h2><ul><li id="df58">기존 <code>&lt;img&gt;</code>태그의 <a href="https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes" rel="noopener ugc nofollow" target="_blank">aspect ratio 계산 기능</a>을 그대로 사용하기 위한 처리라고 합니다.</li><li id="b293">일례로 img태그에 width, height를 작성하고 css에서 이미지 너비 계산 후 적용되는 프로퍼티를 사용한 경우(<code>auto</code>같은..) Layout Shift가 발생하는데 이를 width와 height 값을 사용해 방지해줍니다.</li><li id="de24">aspect ratio 계산 기능에 대해 궁금하다면 <a href="https://www.youtube.com/watch?v=4-d_SoCHeWE" rel="noopener ugc nofollow" target="_blank">이 영상</a>을 참고해보세요!</li></ul><h2 id="27d5">정식 <code>style</code> 프로퍼티가 추가되었습니다.</h2><ul><li id="1ff1"><code>style</code> 과 <code>className</code> 사용을 위해 기존 <code>layout</code> , <code>objectFit</code>, <code>objectPosition</code> 프로퍼티가 사라졌습니다.</li><li id="60d1"><code>layout</code> 프로퍼티가 사라졌기 때문에 기존에 적용되던 스타일 또한 사라졌는데요. <a href="https://nextjs.org/docs/api-reference/next/future/image#migration" rel="noopener ugc nofollow" target="_blank">마이그레이션 가이드</a>를 참고해 스타일을 지정해 줘야 동일한 동작이 이뤄집니다.</li></ul><h2 id="6880">레이지 로딩을 위한 <code>IntersectionObserver</code> 구현이 사라집니다.</h2><ul><li id="bbf3">대신 <a href="https://caniuse.com/loading-lazy-attr" rel="noopener ugc nofollow" target="_blank">native 레이지 로딩</a>이 사용됩니다.</li><li id="fabf">따라서 <code>lazyBoundary</code>, <code>lazyRoot</code> prop이 사라집니다.</li><li id="bb9a">브라우저 레벨에서 제공하는 네이티브 레이지 로딩은 <a href="https://web.dev/browser-level-image-lazy-loading/" rel="noopener ugc nofollow" target="_blank">이 글</a>에서 확인할 수 있습니다.</li></ul><h2 id="d9e0"><code>loader</code> 설정이 사라지고 <code>loader</code> 프로퍼티로 사용됩니다</h2><ul><li id="3ec5">loader는 Next.js 대신 외부 클라우드 공급자를 사용해 이미지를 최적화하려는 경우 사용되는 옵션입니다.</li><li id="fb47">기존 이미지 컴포넌트에서는 <code>next.config.js</code> 설정 파일에 로더를 설정하고 사용하거나 프로퍼티로 내려주는 방식이 존재했는데 두 번째 방식만 남겨졌습니다.</li></ul><h2 id="39de"><code>alt</code> 프로퍼티가 필수로 변경되었습니다.</h2><ul><li id="18ef">접근성을 위한 조치입니다.</li></ul><h2 id="0b9b">이미지 로딩이 완료되고 플레이스홀더가 사라지는 시점을 나타내는 <code>onLoadingComplete</code> 콜백이 <code>&lt;img&gt;</code>요소 자체를 인자로 갖습니다</h2><ul><li id="565f">기존 핸들러와 사용성이 크게 달라지지 않지만 next/image에서 <code>naturalHeight</code>, <code>naturalWidth</code>만 사용 가능했던 부분에서 좀 더 범용적으로 사용할 수 있게 변경되었습니다. 예시를 보면 더 쉽게 이해되실 것 같습니다.</li></ul><figure></figure><p id="234c">개인적으로는 next/image는 많은 것을 해주지만 처음에는 꽤 혼란스러웠던 기억이 있습니다. 훨씬 더 직관적인 컴포넌트가 된 것 같아 좋은 변화처럼 느껴졌고 서비스의 지원 범위에서 네이티브 기능이 전부 지원된다면 바로 변경을 해도 괜찮을 것 같습니다.</p><h2 id="c5f8">참고</h2><ul><li id="b05e"><a href="https://nextjs.org/docs/basic-features/image-optimization" rel="noopener ugc nofollow" target="_blank">https://nextjs.org/docs/basic-features/image-optimization</a></li><li id="38dd"><a href="https://nextjs.org/docs/api-reference/next/image" rel="noopener ugc nofollow" target="_blank">https://nextjs.org/docs/api-reference/next/image</a></li><li id="0a40"><a href="https://nextjs.org/docs/api-reference/next/future/image" rel="noopener ugc nofollow" target="_blank">https://nextjs.org/docs/api-reference/next/future/image</a></li><li id="dc39"><a href="https://nextjs.org/blog/next-12-2#improvements-to-nextimage" rel="noopener ugc nofollow" target="_blank">https://nextjs.org/blog/next-12-2#improvements-to-nextimage</a></li><li id="cb02"><a href="https://nextjs.org/blog/next-12-3#image-component" rel="noopener ugc nofollow" target="_blank">https://nextjs.org/blog/next-12-3#image-component</a></li></ul></div></div>

Stories by Jung Han on Medium

한정

next.js를 사용하시는 분들은 이미 아시겠지만 next/image라는 이미지 컴포넌트가 존재합니다. img태그를 직접 사용하지 않고 next/image 컴포넌트를 사용하는 것을 권장하고 있는데요. 문서에 소개된 장점을 살펴보면 다음과 같습니다.
✔ 향상된 성능(Improved Performance): 각 기기에 맞는 올바른 사이즈로 모던 이미지 포맷을 사용할 수 있게 제공한다.
✔ 시각적 안정성(Visual Stability): CLS를 자동으로 예방해줍니다.
✔ 빠른 페이지 로드(Faster Page Loads): 레이지 로딩을 통해 페이지를 로드하고 blur-up placeholder를 옵션으로 제공한다.
✔ 애셋 유연성(Asset Flexibility): 온디맨드로 이미지를 리사이징 합니다.
이미지를 최적화하는 기법들을 직접 이미지태그에 적용해가면서 일일히 사용할 수 있지만 해당 컴포넌트를 사용할 경우 번거로운 작업들을 처리해주기 때문에 편리하게 사용할 수 있습니다.
하지만 이미 이렇게 자랑하고 있는 기능을 제공하는 next/image를 두고 next.js는 12.2에서 실험기능으로, 12.3에서 stable 모드로 next/future/image를 등장시켰습니다. 왜 next/future/image를 만들었을까요? 사실 이 문제는 이 토론을 보면 꽤 묵은지였습니다.
추가로 이 글에서는 next/future/image의 사용법을 다루진 않습니다. 사용법이나 마이그레이션 가이드가 궁금하다면 이 링크를 참고해주세요.
next/future/image와 next/image의 차이점
next/future/image는 더 나은 성능과 next/image의 DX를 통해 <img>의 더 나은 기본 사용성을 제공합니다. 이 설명에서 알 수 있듯이 기존 next/image 컴포넌트는 기존 img태그를 그대로 사용하는 것과는 조금 거리가 있었는데요. 대표적으로 span 태그가 래핑되고 원하는 스타일이 지정이 안된다는 점이였는데요.
이 이슈의 코드를 그대로 가져와보면,
https://medium.com/media/15291b1e7beaa108a75c75a18ef47f1f/href
의 코드는
https://medium.com/media/4eaaec2e3571481ddcdb18c5ccbc5f39/href
로 img 태그가 아주 꽁꽁 감싸져 있는 것을 볼 수 있습니다. 또한 next/image에서는 layout 같은 프로퍼티들로 인해 강제되는 기본 스타일들의 우선순위가 높아 이 중첩을 뚫어 스타일을 지정하기 위해서는 !important를 사용해야 하는 문제들도 있었습니다.
그럼 변경점을 하나 하나 살펴보겠습니다.
감싸져있는 <span> wrapper를 제거합니다.
기존 <img>태그의 aspect ratio 계산 기능을 그대로 사용하기 위한 처리라고 합니다.
일례로 img태그에 width, height를 작성하고 css에서 이미지 너비 계산 후 적용되는 프로퍼티를 사용한 경우(auto같은..) Layout Shift가 발생하는데 이를 width와 height 값을 사용해 방지해줍니다.
aspect ratio 계산 기능에 대해 궁금하다면 이 영상을 참고해보세요!
정식 style 프로퍼티가 추가되었습니다.
style 과 className 사용을 위해 기존 layout , objectFit, objectPosition 프로퍼티가 사라졌습니다.
layout 프로퍼티가 사라졌기 때문에 기존에 적용되던 스타일 또한 사라졌는데요. 마이그레이션 가이드를 참고해 스타일을 지정해 줘야 동일한 동작이 이뤄집니다.
레이지 로딩을 위한 IntersectionObserver 구현이 사라집니다.
대신 native 레이지 로딩이 사용됩니다.
따라서 lazyBoundary, lazyRoot prop이 사라집니다.
브라우저 레벨에서 제공하는 네이티브 레이지 로딩은 이 글에서 확인할 수 있습니다.
loader 설정이 사라지고 loader 프로퍼티로 사용됩니다
loader는 Next.js 대신 외부 클라우드 공급자를 사용해 이미지를 최적화하려는 경우 사용되는 옵션입니다.
기존 이미지 컴포넌트에서는 next.config.js 설정 파일에 로더를 설정하고 사용하거나 프로퍼티로 내려주는 방식이 존재했는데 두 번째 방식만 남겨졌습니다.
alt 프로퍼티가 필수로 변경되었습니다.
접근성을 위한 조치입니다.
이미지 로딩이 완료되고 플레이스홀더가 사라지는 시점을 나타내는 onLoadingComplete 콜백이 <img>요소 자체를 인자로 갖습니다
기존 핸들러와 사용성이 크게 달라지지 않지만 next/image에서 naturalHeight, naturalWidth만 사용 가능했던 부분에서 좀 더 범용적으로 사용할 수 있게 변경되었습니다. 예시를 보면 더 쉽게 이해되실 것 같습니다.
https://medium.com/media/669ffc88b5b3e0e7936248c3a96340d7/href
개인적으로는 next/image는 많은 것을 해주지만 처음에는 꽤 혼란스러웠던 기억이 있습니다. 훨씬 더 직관적인 컴포넌트가 된 것 같아 좋은 변화처럼 느껴졌고 서비스의 지원 범위에서 네이티브 기능이 전부 지원된다면 바로 변경을 해도 괜찮을 것 같습니다.
참고
https://nextjs.org/docs/basic-features/image-optimization
https://nextjs.org/docs/api-reference/next/image
https://nextjs.org/docs/api-reference/next/future/image
https://nextjs.org/blog/next-12-2#improvements-to-nextimage
https://nextjs.org/blog/next-12-3#image-component

next/future/image 소개

댓글