피드로 돌아가기
Dev.toFrontend
원문 읽기
OPFS와 Backpressure 도입으로 RAM 200MB 제한 내 500개 파일 처리 구현
Building a Privacy-First Media Converter in the Browser: No Servers, No Cloud, 100% Client-Side (RAM-Friendly)
AI 요약
Context
기존 온라인 컨버터의 서버 업로드 방식에 따른 프라이버시 침해와 네트워크 지연 문제 분석. 브라우저 내 처리를 시도할 때 발생하는 대용량 파일 로딩으로 인한 OOM(Out-of-Memory) 및 CPU 집약적 작업에 따른 UI Freezing 현상을 핵심 병목 지점으로 식별.
Technical Solution
- OPFS(Origin Private File System)를 활용해 파일을 RAM이 아닌 브라우저 가상 디스크로 직접 스트리밍하여 메모리 점유 최소화
- navigator.hardwareConcurrency 기반의 Dynamic Web Worker Pool을 설계하여 CPU 코어 수에 최적화된 병렬 처리 구조 구현
- In-flight 데이터 크기를 추적하는 Backpressure 메커니즘을 도입해 총 메모리 사용량을 200MB로 제한하는 흐름 제어 적용
- OffscreenCanvas, WASM, Native Streams API를 혼합한 하이브리드 파이프라인을 통해 오케스트레이션과 고성능 연산을 분리
- fflate 라이브러리를 통한 결과물 Blob의 ZIP 스트리밍 처리로 최종 다운로드 단계의 메모리 효율성 확보
실천 포인트
1. 대용량 파일 처리 시 RAM 로드 대신 OPFS 기반의 가상 파일 시스템 검토
2. CPU 집약적 작업은 Main Thread 분리를 위해 Web Worker Pool 적용
3. 병렬 처리 시 메모리 폭발 방지를 위해 In-flight 데이터 크기 기반의 Backpressure 로직 설계
4. 범용 JS보다 성능이 필요한 지점에만 WASM을 부분적으로 주입하는 하이브리드 전략 채택