Web Worker와 OffscreenCanvas를 활용한 올리브영 이미지 업로드 성능 개선 전략

핵심 기술: 본 콘텐츠는 올리브영 앱에서 고화질 이미지 업로드 시 발생하는 모바일 환경에서의 메모리 과다 사용, UI 반응 저하, 브라우저 강제 새로고침 문제를 해결하기 위해 Web Worker와 OffscreenCanvas를 활용한 사례를 공유합니다. 메인 스레드에서 독립적인 백그라운드 스레드로 이미지 처리 작업을 분리하여 성능을 크게 개선했습니다.

기술적 세부사항:
* 문제점 분석:
* 고해상도 이미지(HEIC to JPEG 변환 포함)로 인한 파일 용량 증가.
* 이미지 디코딩, 압축 해제, 픽셀 데이터 로딩 시 메모리 과다 사용.
* 메인 스레드에서 레이아웃/페인트 작업 시 원본 리소스 기반 처리로 인한 성능 저하.
* 다수의 이미지 업로드 시 레이아웃 계산 시간 증가 및 페인트 과부하.
* iOS의 엄격한 메모리 제한으로 인한 UI 반응 속도 저하 및 브라우저 강제 새로고침 발생.
* 업로드 시간 지연으로 인한 사용자 불만, 리소스 낭비, 에러 발생 가능성.
* 자체 해결 시도 및 한계:
* WebP 등으로 포맷 변환: 복잡한 이미지에서 압축 효율 낮고 품질 저하 발생.
* Canvas 리사이징: 파일 크기 감소 효과 있으나, 메인 스레드 점유, JS 블로킹, 클릭 이벤트 무시 현상 발생.
* 구조적 개선 방안 (Web Worker):
* CPU 연산 집중, DOM 접근 불필요, UI 스레드와 병렬 동작 가능한 작업에 Web Worker 적용.
* Dedicated Worker 활용: 1:1 통신 구조로 이미지 처리 최적화.
* Base64 문자열 처리 분리:
* 대용량 문자열 처리 및 반복적인 변환 작업으로 인한 메인 스레드 블로킹 방지.
* atob, Uint8Array, Blob, File 객체를 활용한 Worker 내 변환 로직 구현.
* OffscreenCanvas 활용:
* 메모리 효율적인 이미지 리사이징 및 포맷 변경 가능.
* 일반 Canvas와 달리 DOM에 연결되지 않아 메인 스레드 사용 시에도 렌더링 성능 이점.
* createImageBitmap, OffscreenCanvas, convertToBlob API 활용 예시.
* 측정 결과:
* Worker 도입 전후 Base64 변환 및 리사이징 총 시간 및 메인 스레드 블로킹 시간 비교 결과, 총 처리 시간 및 블로킹 시간 모두 단축 확인.

개발 임팩트:
* 메인 스레드에서 이미지 처리 작업을 분리하여 UI 반응성을 유지하고 사용자 경험을 크게 향상시킴.
* 메모리 사용량을 분산시켜 모바일 환경에서의 안정적인 UX 확보.
* 업로드 시간 단축으로 사용자 만족도 증대 및 리소스 낭비 감소.
* 성능 최적화를 넘어 웹 아키텍처를 구조적으로 개선하는 기반 마련.

커뮤니티 반응: 원문에는 직접적인 커뮤니티 반응 언급은 없으나, 제시된 기술적 해결책은 개발자 커뮤니티에서 자주 논의되는 주제와 관련 깊음.