문제상황

• HACCP 페이지는 사용자에게 친숙한 카테고리 탐색을 제공하기 위해, 각 카테고리에 배경 이미지를 사용하는 방식으로 UI를 구성했다.
• 그러나 총 29개의 이미지가 각각 독립적인 요청으로 이루어졌고, 페이지 최초 로드시 **총 3.8MB**에 달하는 이미지가 다운로드되어, 렌더링 지연이 간헐적으로 발생하는 문제가 있었다.
• 특히, 카테고리별 상품 목록(약 100여 개의 아이템) 이미지와 중첩되며 브라우저의 리소스 처리 부하로 이어졌다.

개선

1. 원인 분석

• 각 카테고리 이미지가 개별로 100KB 이상이고, 최적화(webp 전환, 리사이징 등)가 이루어지지 않았다.
• HTTP 요청이 2**9회** 발생, 브라우저 렌더링 큐에 대기열이 생겨남에 따라 지연 발생하고 있다.
• 개별 캐싱으로 인해 브라우저 캐시 효율이 낮다.

2. 선택한 전략: 이미지 스프라이트 기법

1. 다수의 이미지를 하나의 이미지로 합쳐 HTTP 요청을 **1건**으로 줄일 수 있다.
2. 각 이미지의 위치는 CSS의 background-position 또는 left, top offset을 이용해 조정하면 구현이 단순하다.
3. 한 장의 이미지만 캐시에 저장하여 재사용하므로 캐싱 효율 상승에 효과적이다.

작업 세부

• 피그마(Figma)를 활용하여 29개 이미지를 일정 간격으로 배치해 스프라이트 이미지 생성
• 피그마의 Export 기능을 통해 크기 자동 최적화 및 WebP로 변환하여 용량 축소
• 완성된 스프라이트 이미지를 프로젝트 public 경로에 배치