<aside> <img src="/icons/document_gray.svg" alt="/icons/document_gray.svg" width="40px" /> 목차

</aside>

프로젝트의 배경 및 목표

카페24 자사몰의 상품 상세 페이지 본문은 디자이너가 올린 대용량 jpg, png 이미지로 채워져 있어 모바일 로딩이 무거웠습니다. 이미지를 가볍게 만들면 로딩이 빨라지지만, 카페24는 본문 이미지를 임의로 바꾸면 원래대로 자동 복구하는 등 외부에서 손대기 어려운 제약이 많았습니다.

이 프로젝트의 목표는 상품 본문 이미지를 WebP(고압축 이미지 포맷)로 자동 변환해 로딩을 줄이되, 원본을 훼손하지 않고 언제든 되돌릴 수 있도록 만드는 것이었습니다. 운영 중인 쇼핑몰에 적용하는 만큼, 손님 화면이 깨지지 않는 안전성을 최우선 비기능 요구로 두었습니다.

핵심 성과

• 평균 84% 용량 절감 — 상품 본문 이미지 자동 변환, 실측 124.93MB → 20.03MB
• 즉시 롤백 — 본문 수정 0회, DB 상태 변경만으로 되돌리기·재최적화 즉시 발효
• 구조적 중복 제거 — 같은 이미지를 콘텐츠 해시로 연결해 한 번만 변환(실측 188개 중 고유 변환 약 50종)

프로젝트 주요 내용

이미지 자동 변환 파이프라인

• 상품 본문의 이미지를 스캔해 WebP로 변환하고, 변환된 이미지를 본문에 반영하는 전 과정을 자동화했습니다. 실측 기준 평균 84% 용량 절감(124.93MB→20.03MB)을 확인했습니다.

  

  

비파괴 설계 (원본 보존 및 롤백)

• 원본 파일과 이미지 주소를 직접 건드리지 않고, 화면에 보여줄 때만 WebP로 바꿔치기하는 방식을 택했습니다. 덕분에 문제가 생기면 주입한 속성만 제거해 즉시 원본으로 되돌릴 수 있습니다.

• 전체 되돌리기처럼 위험한 작업은 운영자가 몰 이름을 직접 입력해야 실행되도록 가드를 두어 실수를 방지했습니다.

  

관리자 UI

• 원클릭으로 전체 압축을 실행하는 화면, 상품별로 이미지를 드릴다운해 개별 되돌리기 및 다운로드하는 화면, 그리고 현재 처리 상태를 보여주는 운영 대시보드를 Next.js로 구축했습니다.
• 디자이너가 이미지를 새로 올려 자동 반영되지 않는 경우, 원하는 상품만 골라 강제로 다시 최적화하는 기능을 제공했습니다.