2026년 Rust와 WebAssembly 완벽 가이드: Wasm, wasm-bindgen 실전 튜토리얼과 면접 질문

# install-wasm-tools.sh
# rustup에 WebAssembly 타겟 추가
rustup target add wasm32-unknown-unknown

# 빌드 및 패키징을 위한 wasm-pack 설치
cargo install wasm-pack

# 설치 확인
wasm-pack --version

# Cargo.toml
[package]
name = "wasm-calculator"
version = "0.1.0"
edition = "2024"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.100"

[profile.release]
opt-level = "z"      # 크기 최적화
lto = true           # 링크 타임 최적화

use wasm_bindgen::prelude::*;

// 이 함수를 JavaScript로 익스포트
#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    // 재귀의 베이스 케이스
    match n {
        0 => 0,
        1 => 1,
        // 꼬리 호출 최적화를 동반한 재귀 계산
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

// JavaScript에서 console.log 임포트
#[wasm_bindgen]
extern "C" {
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);
}

// console.log를 사용하는 함수 익스포트
#[wasm_bindgen]
pub fn greet(name: &str) {
    log(&format!("Hello, {}!", name));
}

# build-wasm.sh
# webpack, Vite, Rollup 등 번들러용 빌드
wasm-pack build --target bundler --release

# 네이티브 ES 모듈(브라우저)용 빌드
wasm-pack build --target web --release

# Node.js용 빌드
wasm-pack build --target nodejs --release

// 생성된 WebAssembly 모듈 임포트
import init, { fibonacci, greet } from './pkg/wasm_calculator.js';

async function run() {
    // WebAssembly 모듈 초기화
    await init();
    
    // 익스포트된 Rust 함수 호출
    const result = fibonacci(20);
    console.log(`fibonacci(20) = ${result}`);
    
    greet('WebAssembly');
}

run();

use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};

// wasm-bindgen의 serde 지원 활성화
#[derive(Serialize, Deserialize)]
pub struct Point {
    pub x: f64,
    pub y: f64,
}

// JavaScript 객체를 받아서 반환
#[wasm_bindgen]
pub fn distance(a: JsValue, b: JsValue) -> Result<f64, JsValue> {
    // JavaScript 객체를 Rust 구조체로 역직렬화
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    // 유클리드 거리 계산
    let dx = point_b.x - point_a.x;
    let dy = point_b.y - point_a.y;
    
    Ok((dx * dx + dy * dy).sqrt())
}

// Rust 구조체를 JavaScript 객체로 반환
#[wasm_bindgen]
pub fn midpoint(a: JsValue, b: JsValue) -> Result<JsValue, JsValue> {
    let point_a: Point = serde_wasm_bindgen::from_value(a)?;
    let point_b: Point = serde_wasm_bindgen::from_value(b)?;
    
    let mid = Point {
        x: (point_a.x + point_b.x) / 2.0,
        y: (point_a.y + point_b.y) / 2.0,
    };
    
    // Rust 구조체를 JavaScript 객체로 직렬화
    Ok(serde_wasm_bindgen::to_value(&mid)?)
}

# optimize-wasm.sh
# wasm-opt용 binaryen 설치
# macOS: brew install binaryen
# Ubuntu: apt install binaryen

# 적극적인 크기 최적화 적용
wasm-opt -Oz -o pkg/wasm_calculator_opt.wasm pkg/wasm_calculator_bg.wasm

# 대신 속도 최적화 적용
wasm-opt -O3 -o pkg/wasm_calculator_fast.wasm pkg/wasm_calculator_bg.wasm

# Cargo.toml - 추가 최적화
[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"
strip = true

use wasm_bindgen::prelude::*;
use wasm_bindgen::Clamped;

#[wasm_bindgen]
pub fn grayscale(data: Clamped<Vec<u8>>, width: u32, height: u32) -> Clamped<Vec<u8>> {
    let mut pixels = data.0;
    let len = (width * height * 4) as usize;
    
    // 각 픽셀 처리 (RGBA 형식)
    for i in (0..len).step_by(4) {
        // 표준 계수를 사용하여 휘도 계산
        let r = pixels[i] as f32;
        let g = pixels[i + 1] as f32;
        let b = pixels[i + 2] as f32;
        
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
        
        // RGB 채널을 그레이스케일 값으로 설정
        pixels[i] = gray;     // R
        pixels[i + 1] = gray; // G
        pixels[i + 2] = gray; // B
        // 알파 채널 (i + 3)은 변경하지 않음
    }
    
    Clamped(pixels)
}

import init, { grayscale } from './pkg/image_processor.js';

async function applyGrayscale(canvas) {
    await init();
    
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    
    // 픽셀 데이터를 WebAssembly에 전달
    const result = grayscale(imageData.data, canvas.width, canvas.height);
    
    // 처리된 픽셀로 새 ImageData 생성
    const processed = new ImageData(result, canvas.width, canvas.height);
    ctx.putImageData(processed, 0, 0);
}

#[cfg(test)]
mod tests {
    use super::*;
    use wasm_bindgen_test::*;
    
    // 브라우저에서 테스트를 실행하도록 구성
    wasm_bindgen_test_configure!(run_in_browser);
    
    #[wasm_bindgen_test]
    fn test_fibonacci() {
        assert_eq!(fibonacci(0), 0);
        assert_eq!(fibonacci(1), 1);
        assert_eq!(fibonacci(10), 55);
    }
    
    #[wasm_bindgen_test]
    fn test_greet() {
        // 이 테스트는 greet이 패닉하지 않는지 확인
        greet("Test User");
    }
}

# test-wasm.sh
# 헤드리스 Chrome에서 테스트 실행
wasm-pack test --headless --chrome

# 헤드리스 Firefox에서 테스트 실행
wasm-pack test --headless --firefox

use wasm_bindgen::prelude::*;

#[wasm_bindgen(start)]
pub fn init_panic_hook() {
    console_error_panic_hook::set_once();
}