Next.js 이미지 최적화 비용 절감 플레이북

이미지 비용은 트래픽이 늘면 언젠가 한 번 크게 맞게 됩니다. 저희도 비슷했습니다. 기능 출시 주간에 매출은 올랐는데, CDN 전송비 그래프가 매출 그래프보다 가파르게 올라갔습니다. 로그를 까보니 원인은 “큰 화면 대응”이라는 명목으로 거의 모든 카드에 넓은 폭 후보를 열어 둔 설정이었습니다. 같은 원본이 폭마다 새로 변환되고, 캐시는 잘게 쪼개지고, 히트율은 떨어졌습니다. 그때부터 팀에서 합의한 원칙이 하나 있습니다. 이미지 최적화는 감각 문제가 아니라 운영 문제라는 것. 보기 좋은 결과물도 중요하지만, 월말 청구서를 통제하지 못하면 결국 기능팀 전체 일정이 흔들립니다.

가장 먼저 한 일은 화면별로 품질 목표를 분리한 겁니다. 상품 상세, 목록 카드, 블로그 썸네일을 같은 품질 정책으로 운영하면 늘 과잉 전송이 생깁니다. 상세는 선명도가 우선이지만, 목록 썸네일은 안정된 로딩이 더 중요합니다. 그리고 폭 후보를 실제 UI에 맞게 강하게 줄였습니다. 카드 최대 폭이 640px인데 1200px 변환 후보를 유지할 이유가 없었습니다. 이 두 가지만 정리해도 히트율이 올라가고, “왜 같은 이미지가 계속 새로 생성되지?” 같은 질문이 줄어듭니다.

설정은 단순하게 가져갔습니다. next.config.js에서 포맷 우선순위를 정하고(AVIF, WebP, fallback), deviceSizes와 imageSizes를 컴포넌트 실측 기준으로 재정의했습니다. 외부 이미지 도메인도 화이트리스트로 고정해 무분별한 원본 유입을 막았습니다. 업로드 파이프라인에는 해상도 상한을 걸어 초고해상도 원본이 바로 들어오지 않게 했고, 첫 화면 핵심 이미지 외에는 preload를 쓰지 않도록 룰을 뒀습니다. 의외로 효과가 컸던 건 “예외를 허용하되 만료일을 기록”하는 운영 방식이었습니다. 급한 캠페인 페이지 때문에 임시 설정을 넣어도 언제 원복할지 미리 남겨 두면 기술 부채가 덜 쌓입니다.

운영에서는 지표를 세 개만 고정해도 충분했습니다. 이미지 총 전송량, 캐시 히트율, 상위 원본 기여도. 여기에 상위 URL 20개를 주 단위로 봤습니다. 전송량이 큰데 요청도 많은 항목부터 손보면 체감 개선이 빠릅니다. 캐시 히트율이 갑자기 떨어지는 주에는 코드보다 파라미터를 먼저 확인했습니다. 실제로 상태값이 쿼리에 붙으면서 같은 원본이 다른 키로 저장되는 경우가 자주 있었습니다. 이건 코드 리뷰에서 놓치기 쉬워서, 배포 체크리스트에 “이미지 URL 파라미터 증가 여부”를 항목으로 박아두는 편이 안전했습니다.

주의할 점도 분명합니다. 품질 값을 과하게 낮추면 전송비는 줄어도 전환율이 바로 흔들릴 수 있습니다. 모든 이미지를 AVIF로 강제하는 것도 기기별 디코딩 특성 때문에 역효과가 납니다. 그리고 비용 절감한다고 원본을 한 번에 재압축하면 디자인 일관성이 깨지기 쉽습니다. 그래서 저희는 컴포넌트 단위로 점진 적용하고, 적용 전후를 실제 클릭 구간 기준으로 비교합니다. 이미지 최적화는 “한 번 끝내는 작업”이 아니라 트래픽 패턴이 바뀔 때마다 업데이트해야 하는 운영 루틴입니다. 이 관점으로 보면 비용과 속도를 같이 잡는 게 충분히 가능합니다.