WebP와 AVIF 전환 전에 확인해야 할 이미지 운영 조건

문제

"AVIF로 바꾸면 이미지 용량이 줄어든다"는 말은 맞지만, 이것만으로 전환 프로젝트가 끝나지는 않습니다. 커머스 이미지 운영에서 더 어려운 것은 변환 자체가 아니라 변환된 이미지를 누구에게, 언제, 어떤 캐시 조건으로, 실패 없이 내려보내는 일입니다. 상품 상세는 매출 화면이기 때문에 일부 브라우저에서 이미지가 깨지는 순간 성능 개선이 아니라 장애가 됩니다.

특히 운영 중인 쇼핑몰은 이미지가 한곳에만 있지 않습니다. 자체 CMS에 등록된 상품 이미지, 셀러가 HTML에 붙여 넣은 외부 이미지, 프로모션 배너, 리뷰 이미지, 상세 설명 안의 긴 통이미지가 섞입니다. 일부는 원본 파일을 바꿀 수 있지만, 일부는 권한도 없고 저장 위치도 다릅니다. 그래서 "전체 이미지를 AVIF로 일괄 변환하자"는 접근은 현실에서 자주 멈춥니다.

운영자가 확인해야 할 질문은 단순합니다. 구형 브라우저는 무엇을 받는가. 캐시는 포맷별로 안전하게 나뉘는가. 새로 등록되는 이미지는 계속 처리되는가. 외부 이미지도 같은 정책으로 다룰 수 있는가. 이 네 가지가 없으면 전환 효과보다 운영 리스크가 먼저 커집니다.

원인

첫 번째 조건은 폴백입니다. AVIF를 지원하지 않는 브라우저나 앱 내 웹뷰는 여전히 WebP나 JPEG가 필요합니다. 같은 상품 이미지 URL에 대해 브라우저의 Accept header를 보고 AVIF, WebP, 원본 계열로 분기해야 합니다. 단순히 파일 확장자를 바꿔 별도 URL을 만드는 방식은 템플릿 수정, 링크 관리, SEO, 캐시 운영을 복잡하게 만듭니다.

두 번째 조건은 캐시 분리입니다. AVIF를 지원하는 브라우저가 받은 응답이 캐시에 저장된 뒤, 지원하지 않는 브라우저에 그대로 전달되면 이미지가 깨질 수 있습니다. 그래서 Vary: Accept 같은 기준으로 포맷별 캐시가 분리되어야 합니다. 성능을 위해 캐시를 쓰다가 호환성을 깨뜨리는 일이 생기면 운영팀은 포맷 전환 자체를 중단하게 됩니다.

세 번째 조건은 재업로드 금지입니다. 기존 이미지를 모두 변환해 다시 저장하면 스토리지와 관리 비용이 늘고, 내일 등록되는 이미지부터 다시 원점으로 돌아갑니다. 네 번째 조건은 외부 이미지입니다. 실무에서는 셀러가 올린 외부 이미지가 큰 비중을 차지할 수 있고, 이 영역이 빠지면 대표 상품 일부만 좋아지는 제한적 개선에 그칩니다.

해결

안전한 이미지 포맷 전환은 "원본을 바꾸는 프로젝트"가 아니라 "요청에 맞춰 응답을 바꾸는 운영 체계"에 가깝습니다. 원본은 그대로 두고, 사용자의 브라우저와 디바이스 조건을 감지한 뒤 가능한 최적 포맷과 크기로 응답합니다. 지원하지 않는 환경에는 자동으로 폴백하고, 포맷별 결과는 캐시 기준을 분리합니다.

내부에서 시작할 수 있는 범위도 있습니다. 대표 상품 이미지 몇 개를 골라 AVIF/WebP 변환 효과를 비교하고, 브라우저별 지원 범위를 확인합니다. CDN이나 이미지 서버가 Accept 기반 분기를 지원하는지, cache key가 포맷별로 분리되는지 확인합니다. 모바일에서 실제 표시 크기보다 큰 원본이 내려가는지도 함께 봐야 합니다.

M2 Live Cloud 방식은 이 운영 조건을 앞단에서 묶어 처리하는 접근입니다. 기존 원본 URL 요청을 기준으로 브라우저, 디바이스, 캐시 상태에 맞춰 포맷과 크기를 결정합니다. 실측에서 원본의 대부분이 JPEG인 상태에서도 출력의 상당 부분을 AVIF로 전환하고 전송량을 줄일 수 있었던 이유는, 파일을 미리 바꾼 것이 아니라 응답 시점에 분기했기 때문입니다.

지금 실행

• 직접 확인: 대표 이미지 URL을 Chrome, Safari, 구형 Android WebView 조건으로 나누어 어떤 포맷이 내려오는지 확인하세요. DevTools Network에서 content-type, vary, cache-control, transferred size를 같이 봅니다.
• 내부 조치: AVIF 전환을 검토한다면 먼저 폴백, 캐시 분리, 신규 이미지 처리, 외부 이미지 처리 네 가지를 체크리스트로 만드세요. 이 중 하나라도 비어 있으면 전면 전환이 아니라 제한된 URL에서 테스트해야 합니다.
• 구조 검토: 원본 재업로드 없이 같은 URL에서 브라우저별 포맷 분기와 캐시 분리를 해야 하거나, 셀러 외부 이미지까지 포함해야 한다면 앞단 이미지 계층이 필요합니다. 이때 이미지 최적화 가이드로 운영 조건을 먼저 맞춰보세요.