수백 메가바이트의 오디오 데이터를 MP3로 인코딩하는 연산은 대량의 수학적 푸리에 변환(FFT)과 심리음향 필터링을 포함하여 CPU 소모량이 매우 큽니다. 만약 자바스크립트 메인 스레드에서 이를 실행하면 브라우저 렌더링 엔진이 차단되어 버튼 클릭이 먹히지 않고 프로그레스 바 애니메이션이 멈추게 됩니다.
1. Web Worker 비동기 스레드 아키텍처
배처 툴은 메인 UI 스레드와 오디오 인코딩 로직을 Web Worker로 완벽하게 격리 분리합니다.
- 메인 스레드: 사용자의 드롭존 파일 선택 수신 및 프로그레스 바 UI 업데이트를 60 FPS로 매끄럽게 유지.
- 워커 스레드: 백그라운드에서 LameJS 인코더 엔진을 돌려 청크 단위로 MP3 바이너리를 인코딩하고 진행률(%) 메시지를 메인 스레드로 전송.
2. ArrayBuffer와 Transferable Objects를 통한 메모리 최적화
대용량 오디오 데이터를 워커로 넘길 때 복사(Copy) 방식을 사용하면 RAM 사용량이 2배로 폭증합니다. 배처 툴은 Transferable Objects를 적용하여 원본 버퍼의 소유권만을 이전함으로써 메모리 누수 없이 대량의 음원을 연속 처리합니다.