백엔드
올리브영 셔터 이미지 업로드 성능 개선기
두줄요약
고화질 이미지 다장 업로드의 지연과 서버 부하를 줄이기 위해 병렬 업로드, PreSignedURL, 이미지 압축을 적용했습니다. 업로드 진행 상태 UI까지 개선해 평균 50% 이상 성능을 향상했습니다.
문제 상황
- 셔터 게시글 작성에서 고화질 이미지 다장 업로드 시 업로드 지연과 서버 부하 발생
- 10장 기준 50MB 이상 대용량 전송으로 대기 시간 증가, 작성 포기 가능성 존재
해결 방법
- 이미지 개별 요청 분리와 병렬 업로드로 네트워크 활용도 개선
- PreSignedURL로 클라이언트의 S3 직접 업로드 전환, 서버 수신 부하 완화
- Canvas API와 OffscreenCanvas로 워커 스레드에서 이미지 압축, JPEG에서 WebP로 변환
- 업로드 진행 상태를 실시간 표시하는 UI/UX로 기다림의 불확실성 완화
성능/운영 포인트
- 대용량 다수 이미지 동시 업로드 시 병렬 업로드 효과 한계 존재
- 파일 용량이 클수록 PreSignedURL 방식의 서버 부하 절감 효과 확대
- 평균 50% 이상 업로드 성능 향상