올리브영 셔터 이미지 업로드 성능 개선기

Context

올리브영 셔터는 사용자가 고화질 이미지(3~5MB)를 최대 10장(50MB 이상)까지 업로드하는 서비스이다. 기존 방식에서는 클라이언트가 모든 이미지를 서버에 전송 후 서버가 순차적으로 AWS S3에 저장하는 구조로, 네트워크 대역폭 한계와 서버 부하 증가로 업로드 완료까지 최대 몇 분이 소요되어 사용자가 게시글 작성을 포기하는 상황이 발생했다.

Technical Solution

• 이미지 병렬 업로드: 여러 이미지를 하나의 request로 묶어 순차 처리하던 방식을 개별 request로 분리해 Promise.all로 병렬 실행
• PreSignedURL 도입: 서버가 AWS S3에 직접 접근 권한이 있는 미리 서명한 URL을 클라이언트에 발급해 클라이언트가 S3에 직접 업로드하도록 변경 (서버 부하 최소화)
• OffscreenCanvas + Web Worker: 메인 스레드가 아닌 별도 워커 스레드에서 캔버스 작업 처리로 메인 스레드 부하 경감
• 이미지 포맷 변환 (JPEG → WebP): WebP 포맷으로 변환하는 로직 적용해 같은 화질에서 파일 크기 감소
• 실시간 업로드 진행률 표시: onprogress 이벤트로 업로드 진행 상태를 실시간 표시해 사용자의 기다림 불확실성 해소

Impact

• 이미지 업로드 성능 평균 50% 이상 향상

Key Takeaway

대용량 파일 업로드 성능 개선은 단순 병렬 처리보다 클라이언트→서버→클라우드 전체 경로에서 서버 부하를 제거(PreSignedURL)하고 파일 크기 자체를 줄이며(WebP), 사용자 심리를 고려한 피드백(진행률 표시)까지 조합할 때 극대화된다.