카카오 FE플랫폼팀, WebAssembly로 사진 편집기 성능 개선기 공유

카카오 FE플랫폼팀이 **WebAssembly(WASM)**를 활용해 웹 사진 편집기의 성능을 개선한 경험을 공유했다. 기존 JavaScript 기반 사진 편집기는 서버와의 통신 비용이 주요 병목 현상이었으나, WASM을 적용해 클라이언트 측에서 직접 이미지를 처리함으로써 네트워크 지연을 제거했다.

성능 비교 및 원인 분석

팀이 Gray scale, Threshold, Histogram equalize, Gaussian blur, Canny edge detection 등 5가지 필터를 대상으로 테스트한 결과, WASM 구현체가 JavaScript 대비 약 2~3배 빠른 성능을 보였다. 이는 WASM이 이미 컴파일된 이진 파일 형태여서 브라우저의 파싱 및 최적화 과정이 생략되거나 간소화되기 때문이다.

JavaScript 엔진은 AST 변환, JIT 컴파일, 재최적화 등 복잡한 과정을 거치지만, WASM은 LLVM 컴파일러를 통해 사전 최적화된 바이트 코드를 제공하므로 실행 준비 시간이 짧다. 또한 WASM은 명시적 타입을 사용하므로 JavaScript의 타입 추론 오버헤드가 없다.

한계 및 향후 방향

WASM은 Native 코드 대비 약 20% 수준의 성능 저하가 있지만, 보안 제약 조건을 고려하면 매우 효율적이다. 다만 현재 Emscripten 도구는 Number와 Array 타입 지원에 제한이 있으며, Garbage Collection(GC)을 제공하지 않아 메모리 관리가 수동으로 이루어져야 한다. 팀은 이러한 한계에도 불구하고 복잡한 이미지 처리 로직의 성능 향상을 위해 WASM 도입을 지속하고 있다.