WASM (WebAssembly) | KAITRUST AI 백과사전

📖 상세 설명

WebAssembly(WASM)는 브라우저에서 네이티브에 가까운 속도로 실행되는 이진 명령어 포맷입니다. C, C++, Rust, Go 등의 언어로 작성된 코드를 .wasm 바이너리로 컴파일하여 웹에서 실행할 수 있습니다. JavaScript의 성능 한계를 넘어서는 연산 집약적 작업에 사용됩니다.

WASM은 2017년 주요 브라우저에서 지원을 시작했습니다. JavaScript 가상 머신 위에서 실행되지만, 미리 컴파일된 바이트코드여서 파싱 시간이 거의 없고 최적화된 네이티브 코드로 변환됩니다. 보안상 JavaScript와 동일한 샌드박스에서 실행됩니다.

WASM의 주요 사용 사례는 게임 엔진(Unity, Unreal), 영상/이미지 처리(FFmpeg, Photoshop Web), 암호화 연산, 과학 시뮬레이션 등입니다. Figma, Google Earth, AutoCAD 웹 버전이 WASM을 활용합니다. 기존 C/C++ 코드베이스를 웹으로 포팅하는 데도 유용합니다.

WASM은 JavaScript를 대체하지 않습니다. DOM 직접 접근이 불가능해서 JavaScript와 협력해야 합니다. 또한 WASI(WebAssembly System Interface)를 통해 브라우저 밖에서도 실행 가능해져, 서버리스 함수나 플러그인 시스템에서도 활용됩니다.

💻 코드 예제

// JavaScript에서 WebAssembly 로드 및 실행

// 1. .wasm 파일 로드 (기본 방법)
const response = await fetch('module.wasm');
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);

// 2. WASM 함수 호출
const result = instance.exports.add(10, 20);
console.log(result); // 30

// 3. 스트리밍 컴파일 (더 효율적)
const { instance: streamInstance } = await WebAssembly.instantiateStreaming(
  fetch('module.wasm'),
  { env: { log: console.log } } // import 객체
);

// Rust로 WASM 만들기 (wasm-bindgen 사용)
// Cargo.toml
// [lib]
// crate-type = ["cdylib"]
// [dependencies]
// wasm-bindgen = "0.2"

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2)
    }
}

// JavaScript에서 사용
import init, { fibonacci } from './pkg/my_wasm.js';
await init();
console.log(fibonacci(40)); // JS보다 훨씬 빠름

🗣️ 실무에서 이렇게 말하세요

💬 기술 검토에서

"이미지 처리를 클라이언트에서 하면 서버 부하를 줄일 수 있어요. JavaScript Canvas로는 느리니까 Rust로 작성한 WASM 모듈로 처리하면 네이티브 앱에 가까운 성능이 나옵니다. wasm-bindgen으로 JS와 연동도 쉬워요."

💬 면접에서

"WebAssembly는 저수준 바이트코드로, JavaScript 엔진이 빠르게 컴파일할 수 있습니다. 연산 집약적 작업에서 JavaScript보다 수십 배 빠를 수 있지만, DOM 접근이나 Web API 호출은 JavaScript를 통해야 합니다. 용도에 따라 적절히 조합하는 것이 중요합니다."

💬 성능 논의에서

"Figma가 WASM 덕분에 브라우저에서 네이티브 앱처럼 동작해요. 저희도 복잡한 그래프 계산 로직을 Rust로 포팅해서 WASM으로 컴파일하면 로딩 시간을 크게 줄일 수 있을 것 같습니다."

⚠️ 흔한 실수 & 주의사항

❌

모든 것을 WASM으로 대체하려 함

WASM은 연산 집약적 작업에 적합합니다. 일반적인 UI 로직이나 DOM 조작은 JavaScript가 더 효율적입니다. JS-WASM 호출 오버헤드도 고려하세요.

❌

.wasm 파일 크기 무시

WASM 바이너리가 크면 초기 로딩이 느려집니다. 코드 분할, 지연 로딩, 압축(gzip/brotli)으로 최적화하세요.

✅

올바른 활용

이미지/비디오 처리, 암호화, 시뮬레이션, 게임 엔진 등 CPU 집약적 작업에 WASM을 적용하세요. Rust + wasm-bindgen 조합이 개발 경험이 좋습니다.

🔗 관련 용어

📚 더 배우기

📄 WebAssembly 공식 사이트 🎓 Rust and WebAssembly Book 📖 MDN WebAssembly 문서