JavaScript의 연산 한계와 WebAssembly의 등장
브라우저의 JavaScript는 동적 인터프리터 언어로, 수천만 픽셀의 RGBA 바이트 데이터를 처리할 때 가비지 컬렉션과 메인 스레드 블로킹으로 인해 화면 버벅임(Jank)이 발생하기 쉽습니다.
WebAssembly(Wasm)는 C, C++, Rust로 작성된 고성능 코드를 브라우저가 직접 실행할 수 있는 저수준 바이너리 포맷으로 컴파일하여 네이티브 수준의 처리 속도를 제공합니다.
핵심 기술: 선형 메모리와 Web Worker 스레딩
Only My Kit은 Wasm 모듈과 JavaScript 간에 데이터 복사 오버헤드를 없애기 위해 SharedArrayBuffer와 선형 메모리(Linear Memory)를 직접 참조합니다.
또한 무거운 압축 연산을 백그라운드 Web Worker 스레드로 격리하여 대용량 4K 이미지를 처리하는 중에도 화면 스크롤과 UI 반응이 60fps로 부드럽게 유지됩니다.
- Zero-Copy 메모리 공유: 대용량 이미지 바이트를 복사 없이 포인터 오프셋으로 즉각 전달
- UI 스레드 완전 분리: Web Worker에서 백그라운드 인코딩 수행으로 렌더링 멈춤 방지
- SIMD 벡터 연산 지원: 최신 CPU의 128비트 벡터 명령어로 픽셀 변환 속도 3~4배 가속
실제 성능 벤치마크: Canvas API vs Wasm MozJPEG
4K 해상도(3840x2160, 24MB PNG) 사진을 80% 품질의 JPEG로 압축할 때의 실제 처리 속도와 메모리 사용량 측정 결과입니다.
| 연산 엔진 | 평균 처리 시간 | 메모리 점유율 | 압축률(용량 절감) |
|---|---|---|---|
| 표준 Canvas API (JS) | 1,840ms | 148 MB | -72.4% |
| Wasm MozJPEG (단일 스레드) | 720ms | 62 MB | -84.1% |
| Wasm MozJPEG (SIMD + Worker) | 310ms | 54 MB | -84.6% |
서버리스 로컬 연산이 주는 보안과 비용 이점
모든 연산이 사용자 컴퓨터나 스마트폰에서 이루어지므로, 사용자는 민감한 계약서나 개인 사진이 유출될 위험이 전혀 없습니다.
동시에 서비스 운영자는 비싼 GPU 클라우드 인스턴스 비용과 대역폭 전송료를 획기적으로 줄일 수 있습니다.
- 민감 데이터 보호: 주민등록증, 사내 기밀 그래픽의 외부 전송 원천 차단
- 오프라인 작동: 웹페이지 로드 후 인터넷이 끊겨도 100% 정상 작동
- 지연시간 0초: 서버 업로드/다운로드 대기 시간 없이 즉각 결과물 생성
FAQ
- WebAssembly를 실행하면 컴퓨터가 느려지지 않나요?
- Wasm 연산은 브라우저의 별도 백그라운드 워커 스레드에서만 정밀하게 제한된 CPU 코어를 사용하므로 다른 프로그램이나 웹서핑 속도에 지장을 주지 않습니다.
- 모바일 스마트폰 브라우저에서도 지원되나요?
- 네, 최신 iOS 사파리와 안드로이드 크롬 모두 표준 WebAssembly 및 Web Worker를 완벽히 지원합니다.