WebAssembly 2025: 브라우저를 넘어 서버·엣지·AI까지 — Wasm이 바꾸는 컴퓨팅의 미래

;; WAT(WebAssembly Text Format) 예시 - 두 수를 더하는 함수
(module
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )
  (export "add" (func $add))
)

┌─────────────────────────────────────────┐
│           호스트 환경 (Host)              │
│  ┌───────────┐  ┌───────────┐           │
│  │ Wasm 모듈A │  │ Wasm 모듈B │           │
│  │ ┌───────┐ │  │ ┌───────┐ │           │
│  │ │ 선형   │ │  │ │ 선형   │ │           │
│  │ │ 메모리  │ │  │ │ 메모리  │ │           │
│  │ └───────┘ │  │ └───────┘ │           │
│  └───────────┘  └───────────┘           │
│       서로 완전히 격리됨                   │
└─────────────────────────────────────────┘

// WASI Preview 1 스타일 - 파일 읽기
use std::fs;

fn main() {
    let content = fs::read_to_string("/data/config.toml")
        .expect("파일을 읽을 수 없습니다");
    println!("설정: {}", content);
}

// WIT (Wasm Interface Type) 정의 예시
package my-app:backend;

interface http-handler {
    handle-request: func(req: request) -> response;
}

world my-server {
    import wasi:http/outgoing-handler;
    export http-handler;
}

// WASI 0.3 - 네이티브 async HTTP 핸들러
use wasi::http::handler;

async fn handle(request: handler::Request) -> handler::Response {
    // 비동기 데이터베이스 쿼리
    let user = db::query("SELECT * FROM users WHERE id = ?", &[request.user_id]).await;

    // 비동기 외부 API 호출
    let enriched = external_api::enrich(user).await;

    handler::Response::new(200, serde_json::to_string(&enriched).unwrap())
}

# Rust로 작성된 비즈니스 로직과 Python으로 작성된 ML 모듈을 조합
wasm-tools compose business-logic.wasm -d ml-module.wasm -o combined-app.wasm

# spin.toml - Spin 애플리케이션 설정
spin_manifest_version = 2

[application]
name = "my-api"
version = "1.0.0"

[[trigger.http]]
route = "/api/hello"
component = "hello-handler"

[component.hello-handler]
source = "target/wasm32-wasip2/release/hello_handler.wasm"
allowed_outbound_hosts = ["https://api.example.com"]

// Spin HTTP 핸들러 (Rust)
use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::http_component;

#[http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    let name = req
        .query()
        .get("name")
        .unwrap_or(&"World".to_string())
        .clone();

    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(format!(r#"{{"message": "Hello, {}!"}}"#, name))
        .build())
}

// Cloudflare Worker - Wasm 모듈 사용
export default {
  async fetch(request, env) {
    // Rust로 컴파일된 Wasm 모듈에서 이미지 처리
    const wasmModule = await import('./image-processor.wasm')
    const imageData = await request.arrayBuffer()

    const processed = wasmModule.resize(
      new Uint8Array(imageData),
      800, // width
      600 // height
    )

    return new Response(processed, {
      headers: { 'Content-Type': 'image/webp' },
    })
  },
}

// Fastly Compute 핸들러
use fastly::{Error, Request, Response};

#[fastly::main]
fn main(req: Request) -> Result<Response, Error> {
    // 지리 정보 기반 라우팅
    let geo = req.get_client_geo().unwrap();
    let country = geo.country_code().unwrap_or("US");

    let backend = match country {
        "KR" | "JP" => "origin-apac",
        "DE" | "FR" | "GB" => "origin-eu",
        _ => "origin-us",
    };

    // 오리진으로 요청 전달
    let mut beresp = req.send(backend)?;
    beresp.set_header("X-Served-By", "fastly-compute-wasm");

    Ok(beresp)
}

질문 1: 주요 사용 언어가 Go인가?
  ├─ YES → wazero (외부 의존성 제로, CGo 불필요)
  └─ NO
      ├─ 질문 2: 최신 WASI 표준 준수가 중요한가?
      │   ├─ YES → Wasmtime (Bytecode Alliance, 표준 선도)
      │   └─ NO
      │       ├─ 질문 3: AI/ML 워크로드가 주요 목적인가?
      │       │   ├─ YES → WasmEdge (GGML, TensorFlow Lite 통합)
      │       │   └─ NO → Wasmer (범용, wapm 패키지 매니저)

HTTP "Hello World" 응답 시간 (p99, 마이크로초):

Wasmtime:     ████████░░░░░░░░  45us
WasmEdge:     ████████░░░░░░░░  48us
Wasmer:       █████████░░░░░░░  52us
wazero:       ██████████░░░░░░  62us
Node.js:      ████████████████  120us
Docker+Node:  극히 큰 값 (ms 단위)

// ONNX Runtime Web (Wasm 백엔드) 예시
import * as ort from 'onnxruntime-web'

// Wasm 백엔드 설정
ort.env.wasm.numThreads = 4
ort.env.wasm.simd = true

async function classifyImage(imageData) {
  const session = await ort.InferenceSession.create('mobilenet-v2.onnx', {
    executionProviders: ['wasm'],
  })

  const tensor = new ort.Tensor('float32', preprocessImage(imageData), [1, 3, 224, 224])
  const results = await session.run({ input: tensor })

  return postprocess(results.output)
}

# WasmEdge로 LLM 실행
wasmedge --dir .:. \
  --nn-preload default:GGML:AUTO:llama-2-7b-chat.Q4_K_M.gguf \
  llm-chat.wasm

// Spin에서 LLM 추론
use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::llm;

#[spin_sdk::http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    let prompt = req.body().as_str()?;

    let result = llm::infer(
        llm::InferencingModel::Llama2Chat,
        prompt,
    )?;

    Ok(Response::builder()
        .status(200)
        .header("content-type", "text/plain")
        .body(result.text)
        .build())
}

┌──────────────────────────────────────────────────┐
│                    유저 요청                       │
└─────────────┬────────────────────────────────────┘
              v
┌─────────────────────────┐
│    엣지 (Wasm/Spin)      │  인증, 캐시, A/B 테스트
│    - 마이크로초 응답       │  지리 기반 라우팅
└─────────────┬───────────┘
              v
┌─────────────────────────┐
│  서버리스 (Lambda)        │  비즈니스 로직, API
│  - 이벤트 처리            │  DB 쿼리, 외부 API
└─────────────┬───────────┘
              v
┌─────────────────────────┐
│  컨테이너 (ECS/K8s)      │  ML 학습, 배치 처리
│  - 장시간 작업            │  상태 관리 서비스
└─────────────────────────┘

# Rust 설치 (이미 설치되어 있다면 건너뛰기)
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Wasm 타겟 추가
rustup target add wasm32-wasip2

# Spin CLI 설치
curl -fsSL https://developer.fermyon.com/downloads/install.sh | bash
sudo mv spin /usr/local/bin/

# HTTP 핸들러 템플릿으로 프로젝트 생성
spin new -t http-rust my-wasm-api
cd my-wasm-api

// src/lib.rs
use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::http_component;
use spin_sdk::key_value::Store;
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize)]
struct VisitorCount {
    path: String,
    count: u64,
    last_visited: String,
}

#[http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    let path = req.path().to_string();
    let method = req.method().to_string();

    match (method.as_str(), path.as_str()) {
        ("GET", "/api/health") => health_check(),
        ("GET", "/api/visitors") => get_visitor_count(&path),
        ("POST", "/api/visitors") => increment_visitor(&path),
        _ => Ok(Response::builder()
            .status(404)
            .body("Not Found")
            .build()),
    }
}

fn health_check() -> anyhow::Result<impl IntoResponse> {
    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(r#"{"status": "healthy", "runtime": "wasm"}"#)
        .build())
}

fn get_visitor_count(path: &str) -> anyhow::Result<impl IntoResponse> {
    let store = Store::open_default()?;
    let count = store
        .get(path)
        .map(|bytes| String::from_utf8(bytes).unwrap_or_default())
        .unwrap_or_else(|| "0".to_string());

    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(format!(r#"{{"path": "{}", "count": {}}}"#, path, count))
        .build())
}

fn increment_visitor(path: &str) -> anyhow::Result<impl IntoResponse> {
    let store = Store::open_default()?;
    let current: u64 = store
        .get(path)
        .map(|bytes| String::from_utf8(bytes).unwrap_or_default())
        .unwrap_or_else(|| "0".to_string())
        .parse()
        .unwrap_or(0);

    let new_count = current + 1;
    store.set(path, new_count.to_string().as_bytes())?;

    Ok(Response::builder()
        .status(200)
        .header("content-type", "application/json")
        .body(format!(r#"{{"path": "{}", "count": {}}}"#, path, new_count))
        .build())
}

# 빌드
spin build

# 로컬 실행
spin up

# 다른 터미널에서 테스트
curl http://localhost:3000/api/health
# 출력: {"status": "healthy", "runtime": "wasm"}

curl -X POST http://localhost:3000/api/visitors
# 출력: {"path": "/api/visitors", "count": 1}

curl http://localhost:3000/api/visitors
# 출력: {"path": "/api/visitors", "count": 1}

# Fermyon Cloud 로그인
spin cloud login

# 배포
spin cloud deploy

# 출력 예시:
# Uploading my-wasm-api version 1.0.0...
# Deploying...
# Application deployed!
# URL: https://my-wasm-api-xyz123.fermyon.app

빌드 결과물 크기:
  Wasm 바이너리:        247 KB
  Node.js (node_modules): 45 MB
  Go 바이너리:          8.2 MB
  Docker 이미지 (Node): 145 MB
  Docker 이미지 (Alpine): 52 MB

// Rust - 완전한 WASI 0.2 지원
use std::io::Write;

fn main() {
    let mut stdout = std::io::stdout();
    writeln!(stdout, "Hello from Rust + Wasm!").unwrap();
}

# 컴파일
cargo build --target wasm32-wasip2 --release
# 실행
wasmtime target/wasm32-wasip2/release/my-app.wasm

// C - Emscripten 또는 wasi-sdk로 컴파일
#include <stdio.h>

int main() {
    printf("Hello from C + Wasm!\n");
    return 0;
}

# wasi-sdk로 컴파일
/opt/wasi-sdk/bin/clang hello.c -o hello.wasm
wasmtime hello.wasm

// Go - TinyGo를 사용한 Wasm 컴파일
package main

import "fmt"

func main() {
    fmt.Println("Hello from Go + Wasm!")
}

# TinyGo로 컴파일 (표준 Go도 WASI 지원 중)
tinygo build -target=wasip2 -o hello.wasm main.go
wasmtime hello.wasm

// C# - .NET 8+ Wasm 지원
using System;

class Program {
    static void Main() {
        Console.WriteLine("Hello from C# + Wasm!");
    }
}

# .NET 8 WASI 워크로드로 빌드
dotnet workload install wasi-experimental
dotnet build -c Release
wasmtime bin/Release/net8.0/wasi-wasm/my-app.wasm

# Python - componentize-py를 이용한 Wasm 변환
# 아직 실험적이지만 빠르게 발전 중

def handle_request(request):
    return {
        "status": 200,
        "body": f"Hello from Python + Wasm!"
    }

# componentize-py로 Wasm 컴포넌트 생성
componentize-py -d wit/ -w my-world componentize app -o app.wasm

// JavaScript - StarlingMonkey (SpiderMonkey 기반) 또는 javy
export function handleRequest(request) {
  return {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: 'Hello from JS + Wasm!' }),
  }
}

채택 곡선:

  혁신가      초기 수용자     초기 다수     후기 다수     지각 수용자
  (2019)      (2022)        (2025)      (2027?)      (2030?)
    |            |        <<<현재>>>       |             |
    ▼            ▼            ▼            ▼             ▼
  ┌──┐      ┌────────┐  ┌──────────┐
  │  │      │        │  │          │
  │  │      │        │  │  여기!    │
  └──┘      └────────┘  └──────────┘
  Wasm MVP   WASI P1    WASI 0.2/0.3
  브라우저    서버 실험    프로덕션 배포