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

</aside>

한 줄 요약

상품 상세 페이지의 무거운 이미지를 자동으로 가볍게 만들었습니다. 상품 본문과 원본 이미지는 처음부터 건드리지 않는 방식입니다.

배경

카페24 자사몰의 상품 상세 페이지는 디자이너가 올린 큰 용량의 이미지로 채워져 있었습니다. 모바일에서 화면이 뜨는 속도가 눈에 띄게 느렸습니다. 이미지를 가볍게 만들면 되지만, 카페24는 상품 본문을 외부에서 바꾸면 원래대로 되돌려 놓기 때문에 손대기 어려웠습니다. 운영 중인 쇼핑몰이라 손님 화면이 깨지지 않는 것이 가장 중요했습니다.

한 일

• 상품 본문의 이미지를 찾아 가벼운 형식으로 바꾸고, 화면에 보여줄 때 원래 이미지 대신 내보내도록 만들었습니다.

• 상품 본문과 원본 이미지 파일은 처음부터 건드리지 않습니다. 화면에 내보내는 단계에서만 바꿔치기하기 때문에, 최적화를 끄면 원래 이미지가 그대로 나옵니다. 되돌려야 할 대상 자체가 생기지 않는 구조입니다.

  

  

• 본문을 건드리지 않는 구조를 택하자 쓰기 권한이 필요 없어졌습니다. 쇼핑몰에서 받아야 하는 권한을 6개에서 상품 정보를 읽는 1개로 줄였습니다.

• 같은 이미지가 여러 상품에 쓰이면 한 번만 변환합니다. 실제로 세어 보니 이미지 188개 가운데 실제 변환은 약 50개였습니다.

  

• 관리자 화면을 만들었습니다. 버튼 한 번으로 전체를 최적화하고, 상품별로 이미지를 들여다보며 최적화를 끄거나 다시 걸 수 있습니다.

• 디자이너가 이미지를 새로 올렸는데 자동으로 반영되지 않으면, 원하는 상품만 골라 다시 최적화할 수 있게 했습니다.

• 전체를 한꺼번에 끄는 작업은 운영자가 쇼핑몰 이름을 직접 입력해야 실행되도록 막아두었습니다.

• 지금 상태가 정상인지 한 화면에서 볼 수 있는 운영 대시보드를 만들었습니다. 조용히 잘못되고 있는 상황을 바로 알아챌 수 있습니다.

• 하루에 한 번 실제 화면이 제대로 나오는지 자동으로 확인하고, 이상하면 알림을 받습니다. 처음에는 화면에 넣은 스크립트가 살아 있는지만 봤는데, 스크립트가 있어도 실제로는 이미지가 제대로 나가지 않을 수 있어서 확인 기준을 바꿨습니다.

• 처리 도중 멈춘 작업이 남아 있으면 자동으로 회수해 다시 처리합니다. 많은 양을 한꺼번에 처리할 때 빠지는 이미지가 없도록 했습니다.

• 라이브 화면에서 이미지가 보이지 않는 장애가 났을 때 원인을 세 겹으로 나눠 찾아 각각 고쳤습니다. 이미지 주소를 해석하는 규칙이 어긋나 이미지를 찾지 못했고, 그 실패 응답이 중간 전송 서버에 저장돼 하루 동안 이어졌으며, 카페24가 쓰는 다른 스크립트가 대비책을 무력화하고 있었습니다.