이미지 썸네일 3단계 — 256, 512, 1024

이미지 풀 208장, 각 150~300KB. 슬라이드에서 6장 동시 로드하면 1MB+. 모바일에서 체감 1초씩 기다렸다.

용도별 해상도 분리

용도	해상도	용량	동시 로드
슬라이드 (선택지)	256px	~12KB	6장 = 72KB
갤러리/목록	512px	~40KB	12장 = 480KB
프리뷰/다운로드	1024px	~200KB	1장

Pillow로 원본에서 256, 512 썸네일을 일괄 생성했다. webp 포맷으로 PNG 대비 90% 용량 절감.

from PIL import Image

for size in [256, 512]:
    img = Image.open(original_path)
    img.thumbnail((size, size), Image.LANCZOS)
    img.save(thumb_path, 'WEBP', quality=85)

UX: 블러 트랜지션

이미지 선택 시 이전 이미지 위에 블러 오버레이 → 새 이미지 로드 완료 → fade out. 로딩 시간이 체감적으로 사라진다.

결과

• 추가 저장: 208장 × 3벌 = 624파일, 총 ~50MB
• 생성 시간: 30초
• 체감 속도: 3배 빨라짐

프론트에서는 getThumbUrl(url, 512) 유틸 함수 하나로 URL을 변환한다. 컴포넌트마다 용도에 맞는 해상도를 지정하면 끝이다.