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

올리브영의 뷰티 커뮤니티 Shutter 셔터는 고화질 이미지 중심 서비스로, 사용자가 한 번에 최대 10장(약 50MB 이상)의 이미지를 업로드할 때 발생하는 속도 저하와 사용자 이탈 문제를 해결해야 했습니다.

기존 방식은 클라이언트가 서버로 이미지를 전송하면 서버가 이를 다시 AWS S3에 저장하는 구조였습니다. 이 과정에서 네트워크 대역폭 한계로 인한 속도 저하와 서버 리소스 부하가 발생했습니다.

이를 개선하기 위해 리뷰커뮤니티 스쿼드는 다음과 같은 4단계 전략을 시행했습니다.

• 이미지 병렬 업로드: 여러 파일을 하나의 요청으로 묶지 않고 개별 요청으로 분리하여 네트워크 대역폭 활용도를 높였습니다.
• PreSignedURL 활용: 서버를 거치지 않고 클라이언트가 AWS S3에 직접 파일을 업로드하게 하여 서버 부하를 최소화했습니다.
• Canvas API 및 OffscreenCanvas: 멀티 스레드 환경에서 이미지 압축 및 최적화를 수행하여 클라이언트 성능을 개선했습니다.
• UI/UX 개선: 사용자 경험을 향상시키기 위한 인터페이스 최적화를 병행했습니다.