왜 기본 img 태그 대신 next/Image를 사용하셨나요?
분야: 프론트엔드
결론부터 말씀드리면, 기본 <img> 태그 대신 next/image 컴포넌트를 사용한 이유는 사용성 향상 및 성능 최적화를 빠르게 구현할 수 있기 때문입니다.
먼저, next/image는 placeholder 속성을 활용하여 로딩 중일 때의 사용자 경험을 개선할 수 있습니다. 기본 <img>를 사용할 경우 이미지를 로딩하는 동안 빈 공간이 보이지만, next/image는 placeholder 옵션을 활용해 로딩 전에도 이미지를 잠시 대체할 수 있는 요소를 보여줄 수 있습니다. 이를 통해 콘텐츠의 시각적 일관성을 유지하여 사용자가 페이지를 더 쾌적하게 탐색할 수 있게 해줍니다.
또한, next/image는 브라우저 환경에 맞는 최적화된 포맷과 크기의 이미지를 제공합니다. 예를 들어, 사용자의 브라우저가 WebP 포맷을 지원하면 JPG나 PNG 대신 WebP 이미지를 자동으로 제공합니다. 또한, 요청된 이미지 크기에 따라 적절한 크기의 이미지를 서빙하여 불필요한 데이터 전송을 줄입니다. 이러한 기능 덕분에 개발자가 별도로 이미지 최적화를 수행하지 않아도 성능이 향상됩니다.
마지막으로, next/image는 기본적으로 lazy loading을 지원합니다. next/image는 기본적으로 뷰포트에 들어올 때 필요한 이미지만 로드하도록 구현되어 있습니다. 이를 통해 별도 설정 없이도 초기 페이지 로딩 속도를 개선하고, 네트워크 리소스를 절약할 수 있습니다.
next/image를 사용할 때 발생할 수 있는 단점은 무엇인가요? 🤔
가장 큰 단점은 설정이 상대적으로 복잡할 수 있다는 점입니다. 예를 들어, 외부 도메인의 이미지를 사용할 경우 next.config.js에서 해당 도메인을 허용 목록에 추가해야 합니다. 또한, 기본적으로 next/image는 서버 사이드에서 이미지 최적화를 수행하므로, 자체 서버가 없는 경우 Vercel과 같은 호스팅 서비스를 활용해야 하는 제약이 있을 수 있습니다.
next/image를 사용하지 않고도 이미지 최적화를 할 수 있지 않을까요? 🧐
물론 가능합니다. 예를 들어, 이미지 크기를 미리 조절한 후 정적인 파일로 제공하거나, loading="lazy" 속성을 활용하여 지연 로딩을 설정할 수도 있습니다. 또, 클라우드 기반의 이미지 최적화 서비스(ex. Cloudinary, Imgix)를 활용하면 next/image 없이도 최적화를 진행할 수 있습니다.
그러나 next/image를 사용하면 이러한 기능들을 많은 노력을 들이지 않고도 기본 제공받을 수 있기 때문에, 시간의 제약을 극복하기 위해 사용했습니다.