프론트엔드
Web Worker로 이미지 처리 최적화하기
두줄요약
모바일 이미지 처리에서 메인 스레드 부하와 메모리 과다 사용 문제를 분석했습니다. Web Worker와 OffscreenCanvas로 전처리를 분리해 반응성과 처리 시간을 개선했습니다.
문제 상황
- 모바일 환경의 고해상도 이미지 처리에서 메모리 과다 사용과 UI 반응 저하 발생
- 이미지가 많아질수록 메인 스레드가 막히고, iOS에서는 강제 새로고침까지 이어짐
- 최대 10장, 40MB 수준의 업로드에서 네트워크 지연과 사용자 불만, 리소스 낭비 문제 동반
원인 분석
- 이미지 디코딩, 압축 해제, 리샘플링, 페인트 준비가 메인 스레드에 집중
- Canvas 기반 리사이징도 디코딩·인코딩 과정과 디스크 IO로 블로킹 유발
- Base64 변환은 문자열 크기 증가로 메모리 사용량과 처리 비용이 큼
해결 방법
- CPU 집약적이고 DOM 접근이 불필요한 이미지 전처리를 Web Worker로 분리
- Dedicated Worker를 사용해 1:1 메시지 통신 구조로 이미지 처리 전담
- OffscreenCanvas와 Base64→File 변환 워커로 리사이징과 변환 작업 분리