Rust → WASM — 브라우저에서 Rust 돌리기

Tooscut(브라우저 영상 편집기)가 왜 Rust/WASM인지 앞에서 다뤘다. 여기서는 실제로 Rust를 WASM으로 컴파일하는 방법을 정리한다.

기본 흐름

1. wasm-pack build — Rust 코드를 .wasm + JS 바인딩으로 컴파일
2. npm 패키지로 배포 가능한 형태가 생성된다
3. JS에서 import { my_function } from './pkg'로 호출

wasm-bindgen

Rust의 String과 JS의 string, Rust의 Vec<u8>과 JS의 Uint8Array는 메모리 레이아웃이 다르다. wasm-bindgen이 이 변환을 자동 생성한다.

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {name}!")
}

JS에서 greet("world")를 호출하면 문자열 변환이 자동으로 일어난다.

성능

WASM은 네이티브의 90~95% 성능이다. CPU 집약 작업(이미지 처리, 암호화, 파싱)에서 JS 대비 5~50배 빠르다. DOM 조작은 JS가 더 적합하다 — WASM에서 DOM API 호출은 오버헤드가 크다.