WebAssembly Component Model: Wasm을 웹의 1등 시민으로 만드는 여정

// 현재 방식: Wasm 로딩에 반드시 JS가 필요
const response = await fetch('image-processor.wasm')
const bytes = await response.arrayBuffer()
const { instance } = await WebAssembly.instantiate(bytes, {
  env: {
    // Web API를 JS에서 수동으로 바인딩해야 함
    log: (ptr, len) => {
      const msg = new TextDecoder().decode(new Uint8Array(instance.exports.memory.buffer, ptr, len))
      console.log(msg)
    },
    now: () => performance.now(),
  },
})

// Wasm 함수 호출
const result = instance.exports.processImage(imageData)

// image-processor.wit
package example:image-processor@1.0.0;

interface image-ops {
  // 레코드 타입 정의
  record image {
    width: u32,
    height: u32,
    pixels: list<u8>,
    format: image-format,
  }

  enum image-format {
    rgb,
    rgba,
    grayscale,
  }

  record resize-options {
    target-width: u32,
    target-height: u32,
    algorithm: resize-algorithm,
  }

  enum resize-algorithm {
    nearest-neighbor,
    bilinear,
    lanczos3,
  }

  // 인터페이스 함수 정의
  resize: func(img: image, opts: resize-options) -> result<image, string>;
  grayscale: func(img: image) -> image;
  blur: func(img: image, radius: f32) -> result<image, string>;
}

world image-processor {
  export image-ops;
}

// src/lib.rs - wit-bindgen으로 생성된 트레이트 구현
wit_bindgen::generate!({
    world: "image-processor",
    path: "wit/image-processor.wit",
});

struct ImageProcessor;

impl Guest for ImageProcessor {
    fn resize(img: Image, opts: ResizeOptions) -> Result<Image, String> {
        let src_pixels = &img.pixels;
        let src_w = img.width as usize;
        let src_h = img.height as usize;
        let dst_w = opts.target_width as usize;
        let dst_h = opts.target_height as usize;

        let channels = match img.format {
            ImageFormat::Rgb => 3,
            ImageFormat::Rgba => 4,
            ImageFormat::Grayscale => 1,
        };

        let mut dst_pixels = vec![0u8; dst_w * dst_h * channels];

        match opts.algorithm {
            ResizeAlgorithm::NearestNeighbor => {
                for y in 0..dst_h {
                    for x in 0..dst_w {
                        let src_x = x * src_w / dst_w;
                        let src_y = y * src_h / dst_h;
                        let src_idx = (src_y * src_w + src_x) * channels;
                        let dst_idx = (y * dst_w + x) * channels;
                        dst_pixels[dst_idx..dst_idx + channels]
                            .copy_from_slice(&src_pixels[src_idx..src_idx + channels]);
                    }
                }
            }
            _ => {
                return Err("Bilinear and Lanczos3 not yet implemented".to_string());
            }
        }

        Ok(Image {
            width: opts.target_width,
            height: opts.target_height,
            pixels: dst_pixels,
            format: img.format,
        })
    }

    fn grayscale(img: Image) -> Image {
        // 구현 생략
        img
    }

    fn blur(img: Image, radius: f32) -> Result<Image, String> {
        if radius <= 0.0 {
            return Err("Radius must be positive".to_string());
        }
        // 가우시안 블러 구현
        Ok(img)
    }
}

export!(ImageProcessor);

# Rust 프로젝트에서 Wasm Component 빌드
cargo install cargo-component

# Cargo.toml에 wasm32-wasip2 타겟 설정 후 빌드
cargo component build --release --target wasm32-wasip2

# 생성된 컴포넌트 확인
wasm-tools component wit target/wasm32-wasip2/release/image_processor.wasm

// composed-image-service.wit
package example:image-service@1.0.0;

// 외부 컴포넌트의 인터페이스를 import
interface exif-parser {
  record exif-data {
    camera-make: string,
    camera-model: string,
    date-taken: string,
    gps-latitude: option<f64>,
    gps-longitude: option<f64>,
  }
  parse: func(raw-bytes: list<u8>) -> result<exif-data, string>;
}

interface metadata-validator {
  record validation-result {
    is-valid: bool,
    errors: list<string>,
  }
  validate: func(metadata: string) -> validation-result;
}

world image-service {
  import exif-parser;
  import metadata-validator;
  export process-and-validate: func(image-bytes: list<u8>) -> result<string, string>;
}

# 개별 컴포넌트 빌드 후 합성
wasm-tools compose \
  image-processor.wasm \
  --definitions exif-parser.wasm \
  --definitions metadata-validator.wasm \
  -o composed-image-service.wasm

# 합성된 컴포넌트의 인터페이스 검사
wasm-tools component wit composed-image-service.wasm

// 미래: ESM으로 Wasm 컴포넌트 직접 import
import { resize, grayscale } from './image-processor.wasm'

// Web API처럼 자연스럽게 사용
const canvas = document.getElementById('preview')
const ctx = canvas.getContext('2d')
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

// Wasm 함수를 직접 호출 - 타입 변환 자동 처리
const resized = resize(
  {
    width: canvas.width,
    height: canvas.height,
    pixels: new Uint8Array(imageData.data.buffer),
    format: 'rgba',
  },
  {
    targetWidth: 200,
    targetHeight: 200,
    algorithm: 'lanczos3',
  }
)

// 결과를 다시 Canvas에 렌더링
const output = new ImageData(new Uint8ClampedArray(resized.pixels), resized.width, resized.height)
ctx.putImageData(output, 0, 0)

// 미래: Rust에서 Web API 직접 호출 (동반 JS 파일 불필요)
use wasi::http::outgoing_handler;
use wasi::io::streams;

// fetch API에 대응하는 WASI HTTP 인터페이스
fn fetch_user_data(user_id: u32) -> Result<UserData, HttpError> {
    let request = outgoing_handler::OutgoingRequest::new(
        outgoing_handler::Method::Get,
        None, // default scheme
        Some("api.example.com"),
        Some(&format!("/users/{}", user_id)),
        None, // default headers
    );

    let response = outgoing_handler::handle(request, None)?;
    let status = response.status();

    if status != 200 {
        return Err(HttpError::StatusError(status));
    }

    let body = response.consume()?;
    let bytes = streams::read_all(body)?;
    let user: UserData = serde_json::from_slice(&bytes)?;
    Ok(user)
}

# jco를 사용한 Wasm Component -> ESM 변환 (현재 사용 가능)
npm install -g @bytecodealliance/jco

# Wasm 컴포넌트를 ESM 래퍼로 변환
jco transpile image-processor.wasm -o dist/image-processor

# 변환 결과물 구조
# dist/image-processor/
#   image-processor.core.wasm
#   image-processor.js        (ESM 래퍼)
#   image-processor.d.ts      (TypeScript 타입 정의)

# 복구 절차: 모든 컴포넌트의 wit-bindgen 버전 통일
# 1. 현재 각 컴포넌트의 ABI 버전 확인
wasm-tools component wit --json image-processor.wasm | jq '.canonical_abi'
wasm-tools component wit --json exif-parser.wasm | jq '.canonical_abi'

# 2. wit-bindgen 버전 통일 후 전체 재빌드
cargo install wit-bindgen-cli --version 0.38.0
cargo component build --release --target wasm32-wasip2

# 3. 재합성 및 검증
wasm-tools compose image-processor.wasm \
  --definitions exif-parser.wasm \
  -o composed.wasm
wasm-tools validate composed.wasm

# 복구 절차: 메모리 제한 조정
# 1. 문제 컴포넌트의 현재 메모리 설정 확인
wasm-tools print image-processor.wasm | grep "memory"

# 2. wasm-tools를 이용한 메모리 제한 수정
wasm-tools component embed \
  --world image-processor \
  --memory-max 256 \
  image-processor.core.wasm \
  -o image-processor-fixed.wasm

# 복구 절차: WASI 어댑터 버전 맞추기
# 1. wasmtime 버전 확인
wasmtime --version

# 2. 호환되는 WASI 어댑터 다운로드
curl -LO "https://github.com/bytecodealliance/wasmtime/releases/download/v29.0.0/wasi_snapshot_preview1.reactor.wasm"

# 3. Core Module을 Component로 변환 시 올바른 어댑터 사용
wasm-tools component new \
  image-processor-core.wasm \
  --adapt wasi_snapshot_preview1=wasi_snapshot_preview1.reactor.wasm \
  -o image-processor-component.wasm

// 성능 비교 벤치마크 예시
async function benchmarkComparison() {
  // 기존 방식: JS 브릿지 경유
  const legacyModule = await WebAssembly.instantiateStreaming(
    fetch('legacy-processor.wasm'),
    importObject
  )

  // Component Model 방식: jco 트랜스파일된 ESM
  const componentModule = await import('./dist/image-processor/image-processor.js')

  const testImage = generateTestImage(1920, 1080)
  const iterations = 100

  // Legacy 벤치마크
  const legacyStart = performance.now()
  for (let i = 0; i < iterations; i++) {
    legacyModule.instance.exports.resize(testImage.ptr, testImage.len, 200, 200)
  }
  const legacyTime = performance.now() - legacyStart

  // Component Model 벤치마크
  const componentStart = performance.now()
  for (let i = 0; i < iterations; i++) {
    componentModule.resize(testImage, {
      targetWidth: 200,
      targetHeight: 200,
      algorithm: 'nearest-neighbor',
    })
  }
  const componentTime = performance.now() - componentStart

  console.log('Legacy (JS bridge):', legacyTime.toFixed(2), 'ms')
  console.log('Component Model:', componentTime.toFixed(2), 'ms')
  console.log('Overhead:', ((componentTime / legacyTime - 1) * 100).toFixed(1), '%')
}

# warg CLI를 사용한 컴포넌트 패키지 관리
# 1. 레지스트리에 컴포넌트 배포
warg publish example:image-processor --version 1.0.0 ./image-processor.wasm

# 2. 의존성 컴포넌트 다운로드
warg download example:exif-parser@1.2.0

# 3. 의존성 해소와 합성을 한 번에
warg compose \
  --dependency example:exif-parser@1.2.0 \
  --dependency example:metadata-validator@2.0.0 \
  ./image-service.wasm \
  -o ./composed-service.wasm