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

올리브영 셔터가 Web Worker로 이미지 처리를 메인 스레드에서 분리해 메인 스레드 블로킹 97% 감소

2025년 4월 25일12분intermediate

AI 요약

Context

모바일 환경에서 4MB 이상, 4000px 이상 해상도의 고화질 이미지를 처리할 때 메인 스레드가 디코딩, 레이아웃 계산, 페인트 작업으로 블로킹되었다. 특히 iOS 환경에서는 메모리 제한으로 UI 반응 저하 시 브라우저가 강제 새로고침되는 현상이 발생했으며, 최대 10장 이미지 업로드 시 40MB 데이터 전송으로 LTE 환경 28.2초, 불안정한 네트워크 환경 64초의 업로드 시간이 소요되었다.

Technical Solution

Web Worker의 Dedicated Worker 패턴 도입: 1:1 통신으로 단일 페이지에서 이미지 처리 전담
OffscreenCanvas를 활용한 이미지 리사이징: DOM에 연결되지 않는 Canvas API로 메모리 효율성 확보
Base64 → File 변환을 Worker로 분리: 디코딩 과정의 메모리 급증과 메인 스레드 블로킹 방지
postMessage/onmessage를 통한 메시지 기반 통신: 메인 스레드와 Worker 간 비동기 데이터 전송
병렬 처리 구조 설계: 여러 이미지를 동시에 처리하면서 UI 스레드 분리 유지

Impact

Base64 변환 처리 시간: 388ms → 137ms (65% 감소)
메인 스레드 블로킹 시간: 350ms → 8ms (97% 감소)

Key Takeaway

CPU 집약적이고 DOM 접근이 불필요한 연산 작업은 Web Worker로 메인 스레드와 분리하면, 통신 오버헤드를 상쇄할 만큼의 병렬 처리 효율을 얻어 UI 반응성을 크게 개선할 수 있다.

실천 포인트

대용량 이미지 처리가 필요한 프론트엔드 서비스에서 Dedicated Worker를 도입하고 Base64 디코딩, 리사이징, 포맷 변환 같은 CPU 연산을 Worker로 이관하면, 메인 스레드 블로킹을 90% 이상 줄이고 동시에 여러 이미지를 안정적으로 처리할 수 있다.

태그

#Performance Optimization #Web Worker #Frontend Threading #Image Processing

원문 읽기