핵심 요약
올리브영은 Web Worker를 활용해 이미지 업로드 전 처리 파이프라인을 백그라운드로 분리하고 OffscreenCanvas를 적용해 메모리 효율과 UI 반응성을 개선했으며, Base64 변환을 워커로 분리해 메인 스레드 차단을 크게 줄인 사례를 공유합니다.
구현 방법
- Dedicated Web Worker로 디코딩/리사이징/포맷 변환 등의 CPU 집중 작업을 메인 스레드와 분리해 비동기 처리
- OffscreenCanvas를 활용한 리사이징 및 JPEG/WebP 변환으로 메모리 사용 최적화 및 렌더링 간섭 최소화
- base64-worker.js를 도입해 대용량 Base64 문자열을 파일로 변환하는 작업을 워커에서 처리, UI 블로킹 감소
주요 결과
- 처리 시간: 388ms → 137ms로 65% 감소
- 메인 스레드 블로킹: 350ms → 8ms로 97% 감소
- UI 반응성 유지 및 업로드 신뢰성 향상
