Web Worker로 이미지 처리 최적화하기

올리브영의 커뮤니티 서비스인 **셔터(Shutter)**는 고화질 이미지 업로드가 핵심 기능이다. 하지만 모바일 환경에서 4MB 이상의 고해상도 이미지를 처리할 때, 브라우저의 메모리 과다 사용과 메인 스레드 블로킹으로 인해 UI 반응이 저하되거나 브라우저가 강제 새로고침되는 문제가 발생했다.

기존에는 포맷 변환(WebP)이나 Canvas를 이용한 리사이징을 시도했으나, 이 역시 CPU 집약적인 연산 특성상 메인 스레드를 점유하여 클릭 이벤트 지연 등의 UX 저하를 초래했다. 특히 네트워크 환경이 불안정한 경우, 대용량 데이터 전송으로 인한 사용자 불만과 리소스 낭비가 심화되었다.

이를 해결하기 위해 Web Worker를 도입했다. Web Worker는 메인 스레드와 분리된 백그라운드 스레드에서 동작하므로, DOM 접근이 불필요한 디코딩, 리사이징, 포맷 변환과 같은 CPU 집약적 작업을 병렬로 처리할 수 있다.

다양한 Worker 종류 중, 단일 페이지에서 1:1 통신으로 데이터 처리에 최적화된 Dedicated Worker를 사용하여 UI 반응성을 유지하면서도 안정적인 이미지 업로드 환경을 구축했다.