Next/Image를 활용한 이미지 최적화

카카오 엔터테인먼트의 스테이지 서비스에서 홈 화면의 이미지 로딩 성능 문제를 해결하기 위해 Next/Image 컴포넌트를 도입한 경험을 공유합니다. 기존에는 평균 500KB의 이미지가 50개 노출되어 총 25MB에 달하는 용량으로 인해 페이지 로딩이 느려지고 끊기는 현상이 발생했습니다.

Next/Image는 lazy loading, 이미지 사이즈 최적화, placeholder 제공 기능을 통해 이러한 문제를 해결하는 데 도움을 주었습니다. 특히, Viewport 내에 있는 이미지만 로딩하고, 실제 렌더링 사이즈에 맞춰 이미지를 최적화하여 불필요한 대역폭 사용을 줄이고 사용자 경험을 개선했습니다.

이 글은 Next/Image 도입 과정에서 겪었던 장단점과 해결 방법을 상세히 설명합니다.