✍️ 필사 모드: WebAssembly 완전 가이드 2025: 브라우저를 넘어서 — WASI, Component Model, 서버사이드 Wasm

2015: WebAssembly 프로젝트 발표 (W3C)
2017: 4대 브라우저에서 Wasm 1.0 지원
2019: WASI 초기 제안 (비브라우저 Wasm)
2020: Wasm 1.0이 W3C 공식 권고안
2021: Component Model 제안, Fermyon 창립
2022: Docker+Wasm 기술 프리뷰, WASI Preview 1
2023: WASI 0.2 안정화, Component Model 성숙
2024: GC proposal 구현, 주요 런타임 최적화
2025: WASI 0.2 Production-ready, Wasm 서버 본격 채택

Wasm 모듈 구조:
+------------------+
| Magic Number     |  0x00 0x61 0x73 0x6D ("\0asm")
| Version          |  0x01 0x00 0x00 0x00 (v1)
+------------------+
| Type Section     |  함수 시그니처 정의
| Import Section   |  외부 함수/메모리 임포트
| Function Section |  함수 인덱스
| Table Section    |  간접 호출 테이블
| Memory Section   |  선형 메모리 정의
| Global Section   |  전역 변수
| Export Section   |  외부 공개 함수/메모리
| Start Section    |  자동 실행 함수
| Element Section  |  테이블 초기화
| Code Section     |  함수 본문 (바이트코드)
| Data Section     |  메모리 초기 데이터
+------------------+

;; 두 수를 더하는 간단한 Wasm 모듈
(module
  ;; 함수 타입 정의
  (type $add_type (func (param i32 i32) (result i32)))

  ;; 함수 구현
  (func $add (type $add_type) (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )

  ;; 선형 메모리 (1 페이지 = 64KB)
  (memory (export "memory") 1)

  ;; 함수 내보내기
  (export "add" (func $add))
)

// lib.rs - Rust에서 Wasm으로
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u64 {
    if n <= 1 {
        return n as u64;
    }
    let mut a: u64 = 0;
    let mut b: u64 = 1;
    for _ in 2..=n {
        let temp = a + b;
        a = b;
        b = temp;
    }
    b
}

#[wasm_bindgen]
pub struct ImageProcessor {
    width: u32,
    height: u32,
    pixels: Vec<u8>,
}

#[wasm_bindgen]
impl ImageProcessor {
    #[wasm_bindgen(constructor)]
    pub fn new(width: u32, height: u32) -> ImageProcessor {
        ImageProcessor {
            width,
            height,
            pixels: vec![0; (width * height * 4) as usize],
        }
    }

    pub fn grayscale(&mut self) {
        for chunk in self.pixels.chunks_exact_mut(4) {
            let gray = (0.299 * chunk[0] as f64
                + 0.587 * chunk[1] as f64
                + 0.114 * chunk[2] as f64) as u8;
            chunk[0] = gray;
            chunk[1] = gray;
            chunk[2] = gray;
        }
    }

    pub fn pixels_ptr(&self) -> *const u8 {
        self.pixels.as_ptr()
    }
}

# Rust -> Wasm 빌드
wasm-pack build --target web

// image_filter.c - C에서 Wasm으로
#include <emscripten.h>
#include <stdint.h>

EMSCRIPTEN_KEEPALIVE
void apply_blur(uint8_t* pixels, int width, int height) {
    uint8_t* temp = (uint8_t*)malloc(width * height * 4);

    for (int y = 1; y < height - 1; y++) {
        for (int x = 1; x < width - 1; x++) {
            for (int c = 0; c < 3; c++) {
                int sum = 0;
                for (int dy = -1; dy <= 1; dy++) {
                    for (int dx = -1; dx <= 1; dx++) {
                        sum += pixels[((y+dy)*width + (x+dx))*4 + c];
                    }
                }
                temp[(y*width + x)*4 + c] = sum / 9;
            }
            temp[(y*width + x)*4 + 3] = pixels[(y*width + x)*4 + 3];
        }
    }

    memcpy(pixels, temp, width * height * 4);
    free(temp);
}

# C -> Wasm 빌드
emcc image_filter.c -O3 -s WASM=1 \
  -s EXPORTED_FUNCTIONS='["_apply_blur"]' \
  -s EXPORTED_RUNTIME_METHODS='["cwrap"]' \
  -o image_filter.js

// Wasm 모듈 로드 및 사용
async function initWasm() {
  // 방법 1: fetch + instantiate
  const response = await fetch('module.wasm');
  const bytes = await response.arrayBuffer();
  const { instance } = await WebAssembly.instantiate(bytes, {
    env: {
      // 호스트 함수를 Wasm에 제공
      log_value: (value) => console.log('Wasm says:', value),
      get_time: () => Date.now(),
    }
  });

  // Wasm 함수 호출
  const result = instance.exports.add(10, 20);
  console.log('Result:', result); // 30

  // 선형 메모리 접근
  const memory = new Uint8Array(instance.exports.memory.buffer);
  // 메모리에서 데이터 읽기/쓰기

  return instance;
}

// 방법 2: wasm-bindgen (Rust)
import init, { fibonacci, ImageProcessor } from './pkg/my_wasm.js';

async function main() {
  await init();

  console.log('fib(40):', fibonacci(40));

  const processor = new ImageProcessor(800, 600);
  processor.grayscale();
}

WASI 0.2 구조:
+----------------------------------+
| wasi:cli        (CLI 앱 지원)    |
| wasi:http       (HTTP 클라이언트/서버) |
| wasi:filesystem (파일시스템 접근)  |
| wasi:sockets    (네트워크 소켓)   |
| wasi:clocks     (시간 관련)      |
| wasi:random     (난수 생성)      |
| wasi:io         (스트림 I/O)     |
+----------------------------------+
| Component Model (기반 레이어)     |
+----------------------------------+
| Wasm Core (실행 엔진)           |
+----------------------------------+

// Rust + WASI HTTP 서버
use spin_sdk::http::{IntoResponse, Request, Response};
use spin_sdk::http_component;
use serde::{Deserialize, Serialize};

#[derive(Serialize, Deserialize)]
struct TodoItem {
    id: u32,
    title: String,
    completed: bool,
}

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

    match (method, path) {
        ("GET", "/api/todos") => {
            let todos = vec![
                TodoItem { id: 1, title: "Learn WASI".into(), completed: false },
                TodoItem { id: 2, title: "Build Wasm app".into(), completed: false },
            ];
            Ok(Response::builder()
                .status(200)
                .header("content-type", "application/json")
                .body(serde_json::to_string(&todos)?)
                .build())
        },
        ("POST", "/api/todos") => {
            let body: TodoItem = serde_json::from_slice(req.body())?;
            Ok(Response::builder()
                .status(201)
                .header("content-type", "application/json")
                .body(serde_json::to_string(&body)?)
                .build())
        },
        _ => Ok(Response::builder()
            .status(404)
            .body("Not Found")
            .build())
    }
}

# WASI 실행 시 권한 부여 예시
# 특정 디렉터리만 읽기 허용
wasmtime run --dir /data::/data:readonly my-app.wasm

# 네트워크 접근 허용
wasmtime run --tcplisten 0.0.0.0:8080 my-server.wasm

# 환경 변수 전달
wasmtime run --env KEY=VALUE my-app.wasm

기존 보안 모델 (Ambient Authority):
  프로세스 -> [전체 파일시스템 접근 가능]
           -> [모든 네트워크 접근 가능]
           -> [환경 변수 모두 읽기 가능]

WASI 보안 모델 (Capability-Based):
  Wasm 모듈 -> [/data 디렉터리만 읽기 가능]
            -> [localhost:8080만 리슨 가능]
            -> [지정된 환경 변수만 접근 가능]

// todo.wit - 인터페이스 정의
package example:todo@0.1.0;

interface types {
    record todo-item {
        id: u32,
        title: string,
        completed: bool,
    }

    variant todo-error {
        not-found(string),
        validation-error(string),
        storage-error(string),
    }
}

interface todo-store {
    use types.{todo-item, todo-error};

    list-todos: func() -> result<list<todo-item>, todo-error>;
    get-todo: func(id: u32) -> result<todo-item, todo-error>;
    create-todo: func(title: string) -> result<todo-item, todo-error>;
    update-todo: func(id: u32, title: string, completed: bool) -> result<todo-item, todo-error>;
    delete-todo: func(id: u32) -> result<_, todo-error>;
}

world todo-app {
    import wasi:http/outgoing-handler@0.2.0;
    import wasi:logging/logging;

    export todo-store;
}

# 여러 컴포넌트를 조합하여 하나의 앱 구성
# 1. 각 컴포넌트 빌드
cargo component build --release  # Rust 컴포넌트
componentize-py -d todo.wit -w todo-app app.py  # Python 컴포넌트

# 2. 컴포넌트 조합
wasm-tools compose \
  --definitions auth-component.wasm \
  --definitions db-component.wasm \
  app-component.wasm \
  -o composed-app.wasm

# 3. 조합된 컴포넌트 실행
wasmtime serve composed-app.wasm

# spin.toml - Spin 앱 설정
spin_manifest_version = 2

[application]
name = "my-api"
version = "1.0.0"
description = "Wasm 기반 API 서버"

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

[[trigger.http]]
route = "/api/users/..."
component = "users"

[component.hello]
source = "target/wasm32-wasi/release/hello.wasm"
allowed_outbound_hosts = []

[component.users]
source = "target/wasm32-wasi/release/users.wasm"
allowed_outbound_hosts = ["https://api.example.com"]
key_value_stores = ["default"]
sqlite_databases = ["default"]

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

#[http_component]
fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
    // Key-Value 스토어 사용
    let store = Store::open_default()?;

    match req.method().as_str() {
        "GET" => {
            let key = req.path().trim_start_matches("/api/users/");
            match store.get(key)? {
                Some(value) => Ok(Response::builder()
                    .status(200)
                    .header("content-type", "application/json")
                    .body(value)
                    .build()),
                None => Ok(Response::builder()
                    .status(404)
                    .body("Not found")
                    .build()),
            }
        },
        "POST" => {
            let body = req.body().to_vec();
            let key = format!("user:{}", uuid::Uuid::new_v4());
            store.set(&key, &body)?;

            Ok(Response::builder()
                .status(201)
                .header("content-type", "application/json")
                .body(body)
                .build())
        },
        _ => Ok(Response::builder()
            .status(405)
            .body("Method not allowed")
            .build()),
    }
}

# Spin 앱 빌드 및 실행
spin build
spin up  # 로컬 실행 (포트 3000)

# Fermyon Cloud에 배포
spin deploy

# wadm.yaml - wasmCloud 앱 매니페스트
apiVersion: core.oam.dev/v1beta1
kind: Application
metadata:
  name: my-api
  annotations:
    description: "wasmCloud HTTP API"
spec:
  components:
    - name: api-handler
      type: component
      properties:
        image: ghcr.io/myorg/api-handler:0.1.0
      traits:
        - type: spreadscaler
          properties:
            instances: 5
        - type: link
          properties:
            target: httpserver
            namespace: wasi
            package: http
            interfaces: [incoming-handler]

    - name: httpserver
      type: capability
      properties:
        image: ghcr.io/wasmcloud/http-server:0.22.0
      traits:
        - type: link
          properties:
            target: api-handler
            namespace: wasi
            package: http
            interfaces: [incoming-handler]
            source_config:
              - name: default-http
                properties:
                  address: 0.0.0.0:8080

기존 Linux 컨테이너:
  Docker Engine -> containerd -> runc -> Linux Container
                                         (full OS, 수십~수백 MB)

Wasm 컨테이너:
  Docker Engine -> containerd -> runwasi -> Wasm Runtime (wasmtime/wasmedge)
                                            (Wasm 모듈, 수 MB)

# Dockerfile.wasm - Wasm 컨테이너 이미지
FROM scratch
COPY target/wasm32-wasi/release/my-app.wasm /my-app.wasm
ENTRYPOINT ["/my-app.wasm"]

# Wasm 이미지 빌드 및 실행
docker buildx build --platform wasi/wasm -t my-wasm-app .
docker run --runtime=io.containerd.wasmtime.v1 \
  --platform wasi/wasm \
  -p 8080:8080 \
  my-wasm-app

# docker-compose.yml - Wasm + Linux 컨테이너 혼합
version: "3"

services:
  # Wasm 서비스 (초경량)
  api:
    image: my-wasm-api:latest
    runtime: io.containerd.wasmtime.v1
    platform: wasi/wasm
    ports:
      - "8080:8080"
    environment:
      - DB_HOST=postgres

  # 전통적인 Linux 컨테이너
  postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: mydb
      POSTGRES_USER: user
      POSTGRES_PASSWORD: pass
    volumes:
      - pgdata:/var/lib/postgresql/data

  # Wasm 워커 서비스
  worker:
    image: my-wasm-worker:latest
    runtime: io.containerd.wasmtime.v1
    platform: wasi/wasm
    environment:
      - QUEUE_URL=redis://redis:6379

  redis:
    image: redis:7-alpine

volumes:
  pgdata:

// Cloudflare Worker (Wasm 기반)
export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname === '/api/compute') {
      // Wasm 모듈로 무거운 계산 수행
      const wasmModule = await import('./compute.wasm');
      const result = wasmModule.heavy_computation(42);

      return new Response(JSON.stringify({ result }), {
        headers: { 'Content-Type': 'application/json' }
      });
    }

    // KV 스토어 사용
    if (url.pathname.startsWith('/api/cache/')) {
      const key = url.pathname.split('/').pop();

      if (request.method === 'GET') {
        const value = await env.MY_KV.get(key);
        return new Response(value || 'Not found', {
          status: value ? 200 : 404
        });
      }

      if (request.method === 'PUT') {
        const body = await request.text();
        await env.MY_KV.put(key, body, { expirationTtl: 3600 });
        return new Response('OK');
      }
    }

    return new Response('Not found', { status: 404 });
  }
};

// Fastly Compute (Rust + Wasm)
use fastly::{Error, Request, Response};
use fastly::http::StatusCode;

#[fastly::main]
fn main(req: Request) -> Result<Response, Error> {
    let path = req.get_path().to_string();

    match path.as_str() {
        "/api/hello" => {
            Ok(Response::from_status(StatusCode::OK)
                .with_body_text_plain("Hello from Fastly Compute!"))
        },
        path if path.starts_with("/api/proxy/") => {
            // 백엔드로 프록시
            let backend_path = path.trim_start_matches("/api/proxy");
            let mut backend_req = req;
            backend_req.set_path(backend_path);
            backend_req.send("origin_backend")
        },
        _ => {
            Ok(Response::from_status(StatusCode::NOT_FOUND)
                .with_body_text_plain("Not found"))
        }
    }
}

// Cargo.toml
[package]
name = "my-wasm-app"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wit-bindgen = "0.25"
serde = { version = "1", features = ["derive"] }
serde_json = "1"

# 빌드 타겟
rustup target add wasm32-wasi     # WASI 타겟
rustup target add wasm32-unknown-unknown  # 브라우저 타겟

# 빌드
cargo build --target wasm32-wasi --release

# Component로 변환
wasm-tools component new target/wasm32-wasi/release/my_app.wasm \
  -o my_app.component.wasm

// main.go - TinyGo Wasm
package main

import (
    "encoding/json"
    "net/http"

    spinhttp "github.com/fermyon/spin/sdk/go/v2/http"
)

type Response struct {
    Message string `json:"message"`
    Count   int    `json:"count"`
}

func init() {
    spinhttp.Handle(func(w http.ResponseWriter, r *http.Request) {
        resp := Response{
            Message: "Hello from Go Wasm!",
            Count:   42,
        }

        w.Header().Set("Content-Type", "application/json")
        json.NewEncoder(w).Encode(resp)
    })
}

func main() {}

# TinyGo로 Wasm 빌드
tinygo build -target=wasi -o main.wasm main.go

# app.py - Python Wasm (Spin)
from spin_sdk.http import IncomingHandler, Request, Response
import json

class IncomingHandler(IncomingHandler):
    def handle_request(self, request: Request) -> Response:
        if request.method == "GET" and request.uri == "/api/hello":
            body = json.dumps({
                "message": "Hello from Python Wasm!",
                "path": request.uri,
            })
            return Response(
                200,
                {"content-type": "application/json"},
                bytes(body, "utf-8")
            )

        return Response(404, {}, b"Not found")

# Python -> Wasm 컴포넌트
componentize-py -d spin-http.wit -w spin-http-trigger app -o app.wasm

// app.js - JavaScript Wasm Component
import { handle } from 'wasi:http/incoming-handler@0.2.0';

export const incomingHandler = {
  handle(request, responseOut) {
    const headers = new Headers();
    headers.set('Content-Type', 'application/json');

    const body = JSON.stringify({
      message: 'Hello from JS Wasm!',
      method: request.method(),
      path: request.pathWithQuery(),
    });

    const response = new OutgoingResponse(headers);
    response.setStatusCode(200);

    const bodyStream = response.body();
    bodyStream.write(new TextEncoder().encode(body));
    bodyStream.close();

    responseOut.set(response);
  }
};

# JavaScript -> Wasm Component
jco componentize app.js -w wasi-http.wit -o app.wasm

HTTP "Hello World" 벤치마크 (단일 인스턴스):

Spin (Rust/Wasm):     ~150,000 req/s
Native Rust (Actix):  ~200,000 req/s
Go (net/http):        ~120,000 req/s
Node.js (Express):    ~30,000 req/s
Python (FastAPI):     ~10,000 req/s

Wasm은 네이티브의 70-90% 성능을 달성

단일 HTTP 서비스 메모리 사용:

Wasm (Spin):          2-5 MB
Wasm (wasmtime):      5-15 MB
Node.js:              30-80 MB
Python:               30-60 MB
Java (JVM):           100-300 MB
.NET:                 50-150 MB
Go:                   10-30 MB

1GB 메모리에서 동시 서비스 수:
Wasm: ~200개 서비스
Node.js: ~15개 서비스
Java: ~5개 서비스

전통적인 프로세스:
+------------------------------------------+
| 프로세스                                  |
|  - 전체 파일시스템 접근                     |
|  - 모든 네트워크 접근                       |
|  - 시스템 콜 무제한                         |
|  - 다른 프로세스 메모리 접근 (exploit 시)    |
+------------------------------------------+

Wasm 샌드박스:
+------------------------------------------+
| Wasm 모듈                                |
|  +------------------------------------+  |
|  | 선형 메모리 (모듈 전용)               |  |
|  | - 경계 검사 (bounds checking)        |  |
|  | - 호스트 메모리 접근 불가              |  |
|  +------------------------------------+  |
|  | 허가된 시스템 인터페이스만 사용         |  |
|  | - wasi:filesystem (지정 경로만)       |  |
|  | - wasi:sockets (지정 주소만)          |  |
|  +------------------------------------+  |
+------------------------------------------+

// 호스트 애플리케이션 - 플러그인 로더
use wasmtime::*;
use wasmtime_wasi::WasiCtxBuilder;

fn load_plugin(plugin_path: &str) -> Result<(), Box<dyn std::error::Error>> {
    let engine = Engine::default();
    let mut linker = Linker::new(&engine);
    wasmtime_wasi::add_to_linker(&mut linker, |s| s)?;

    // 플러그인에 최소 권한만 부여
    let wasi = WasiCtxBuilder::new()
        .inherit_stdout()  // stdout만 허용
        // 파일시스템 접근 없음
        // 네트워크 접근 없음
        .build();

    let mut store = Store::new(&engine, wasi);
    let module = Module::from_file(&engine, plugin_path)?;
    let instance = linker.instantiate(&mut store, &module)?;

    // 플러그인 함수 호출
    let process = instance
        .get_typed_func::<(i32,), i32>(&mut store, "process")?;
    let result = process.call(&mut store, (42,))?;

    println!("Plugin result: {}", result);
    Ok(())
}

Edge Wasm 아키텍처:

사용자 요청 -> [CDN Edge (300+ PoP)]
                 |
                 v
              [Wasm Worker]
                 |
                 +-> 캐시 히트: 즉시 응답 (0ms)
                 |
                 +-> 캐시 미스: 원본 서버에 요청
                 |              |
                 |              v
                 |         [Origin Server]
                 |              |
                 v              v
              [응답 + 캐시 저장]

장점:
- 사용자에게 가장 가까운 위치에서 실행
- 콜드 스타트 거의 없음
- 글로벌 분산 자동 배포

Lambda vs Wasm Serverless:

AWS Lambda:
  요청 -> API Gateway -> Lambda Runtime -> 함수 실행
  콜드 스타트: 100ms-8s
  메모리: 128MB-10GB
  과금: 1ms 단위

Wasm Serverless (Spin/Fermyon):
  요청 -> Spin Runtime -> Wasm 모듈 실행
  콜드 스타트: 0.5ms 이하
  메모리: 2-50MB
  과금: 요청 단위

2025-2026 전망:
- WASI 0.2 완전 안정화 및 주요 클라우드 채택
- Component Model 생태계 성숙
- Docker Wasm 프로덕션 레디
- GC proposal 주요 런타임 구현
- Threads proposal 안정화

2027+ 전망:
- Wasm이 컨테이너와 동등한 위상
- Edge-first 아키텍처의 기본 런타임
- IoT/임베디드 표준 실행 환경
- 다중 언어 컴포넌트 생태계 확립