카카오페이지 스테이지, Next/Image 적용으로 이미지 용량 1/40 감소

카카오페이지 스테이지는 신인작가 발굴 서비스의 홈 화면 이미지 로딩 성능을 개선하기 위해 Next/Image 컴포넌트를 적용했습니다. 기존에는 500px x 750px 크기의 500KB 이미지를 100px x 150px 영역에 그대로 로드하여 불필요한 대역폭을 소모하고 레이아웃 흔들림(CLS)을 유발했습니다.

Next/Image 적용 효과

Next/Image는 디바이스 크기에 맞는 srcSet을 자동 생성하고 이미지를 WebP 포맷으로 변환하여 서빙합니다. 이를 통해 스테이지 홈의 이미지 총용량은 기존 25MB에서 589KB로 약 1/40 수준으로 감소했습니다. 또한 viewport 내 이미지만 로드하는 lazy loading과 placeholder 기능을 통해 페이지 로드 완료 시간(loaded)이 1.11초에서 386ms로 대폭 단축되었습니다.

적용 중 발생한 이슈와 해결

적용 과정에서 layout="fill" 속성 사용 시 화면 너비(3840px)에 맞춰 과도하게 큰 이미지가 로드되는 문제가 발생했습니다. 이는 sizes 속성이 기본값인 100vw로 설정되어 있었기 때문입니다. 스테이지는 next.config.js에서 images.sizes 기본값을 '250px'로 변경하여 이 문제를 해결했습니다.

또한, 서버 컨테이너마다 최초 요청 시 이미지를 생성하는 과정에서 대기 시간이 발생했습니다. 이를 해소하기 위해 고정 크기의 이미지는 layout="fixed"를 사용하여 srcSet을 1x, 2x 두 개로 제한하고, images.imageSizes와 images.deviceSizes 설정을 조정하여 불필요한 이미지 변형 생성을 최소화했습니다.