올리브영 셔터, 이미지 업로드 속도 50% 개선!
by DD
1년 전
조회수 4
병렬 업로드, PreSignedURL 적용, WebP 변환 등을 통해 이미지 업로드 속도 개선
Canvas API 및 OffscreenCanvas를 활용하여 이미지 압축 성능 향상
업로드 속도 50% 이상 향상 및 사용자 경험 개선, S3 사용
병렬 업로드와 PreSignedURL
병렬 업로드를 통해 여러 이미지를 동시에 업로드하여 업로드 시간 단축을 시도했다. 구체적으로, 각 이미지를 개별 요청으로 분리하여 네트워크 대역폭 활용도를 높였다. 따라서, PreSignedURL을 적용하여 서버 부하를 줄이고, S3 직접 업로드를 가능하게 했다.
Canvas API를 활용한 이미지 최적화
OffscreenCanvas를 사용하여 메인 스레드 부하를 줄이고, WebP 변환을 통해 이미지 용량을 줄였다. 구체적으로, Canvas API를 활용하여 이미지 압축 작업을 별도 워커 스레드에서 처리했다. 따라서, 이미지 업로드 속도 향상과 사용자 경험 개선을 동시에 달성했다.
UI/UX 개선을 통한 사용자 경험 향상
업로드 진행 상태를 실시간으로 표시하는 UI를 구현하여 사용자 대기 시간에 대한 불확실성을 해소했다. 구체적으로, onprogress 이벤트를 활용하여 업로드 진행률을 시각적으로 표시했다. 따라서, 사용자 만족도를 높이고, 서비스 이용률 증가에 기여했다.
