WebAssembly(WASM)는 웹에서 네이티브에 가까운 성능으로 코드를 실행할 수 있게 해주는 바이너리 명령어 형식이다. JavaScript와 함께 작동하며, C/C++, Rust, Go 등 다양한 언어로 작성된 코드를 웹에서 실행할 수 있게 한다. 이 글은 WebAssembly의 모든 것을 다룬다.
\nWebAssembly는 다음과 같은 특징을 가진다:
\n| 구분 | \nJavaScript | \nWebAssembly | \n
|---|---|---|
| 타입 | \n동적 타입 | \n정적 타입 | \n
| 파싱 | \n텍스트 파싱 필요 | \n바이너리 직접 실행 | \n
| 성능 | \n인터프리터/JIT | \n네이티브에 가까움 | \n
| 메모리 관리 | \n가비지 컬렉션 | \n수동 관리 | \n
| 디버깅 | \n쉬움 | \n상대적으로 어려움 | \n
| 용도 | \n범용 | \n계산 집약적 작업 | \n
;; add.wat\n(module\n (func $add (param $a i32) (param $b i32) (result i32)\n local.get $a\n local.get $b\n i32.add)\n (export "add" (func $add))\n)# Wat를 WASM으로 컴파일\nwat2wasm add.wat -o add.wasm// add.js\nasync function loadWasm() {\n const wasmModule = await WebAssembly.instantiateStreaming(\n fetch('add.wasm')\n );\n \n const { add } = wasmModule.instance.exports;\n \n console.log(add(5, 3)); // 8\n return wasmModule;\n}\n\nloadWasm();;; memory.wat\n(module\n (memory 1) ;; 1 페이지 (64KB) 메모리 할당\n (export "memory" (memory 0))\n \n (func $store (param $offset i32) (param $value i32)\n local.get $offset\n local.get $value\n i32.store)\n \n (func $load (param $offset i32) (result i32)\n local.get $offset\n i32.load)\n \n (export "store" (func $store))\n (export "load" (func $load))\n)// memory.js\nasync function useMemory() {\n const wasmModule = await WebAssembly.instantiateStreaming(\n fetch('memory.wasm')\n );\n \n const { memory, store, load } = wasmModule.instance.exports;\n \n // 메모리에 값 저장\n store(0, 42);\n store(4, 100);\n \n // 메모리에서 값 읽기\n console.log(load(0)); // 42\n console.log(load(4)); // 100\n \n // JavaScript에서 직접 메모리 접근\n const memoryView = new Int32Array(memory.buffer);\n console.log(memoryView[0]); // 42\n console.log(memoryView[1]); // 100\n}# Rust 설치 확인\nrustc --version\n\n# wasm-pack 설치\ncargo install wasm-pack\n\n# 새 프로젝트 생성\ncargo new --lib wasm-example\ncd wasm-example# Cargo.toml\n[package]\nname = \"wasm-example\"\nversion = \"0.1.0\"\nedition = \"2021\"\n\n[lib]\ncrate-type = [\"cdylib\"]\n\n[dependencies]\nwasm-bindgen = \"0.2\"// src/lib.rs\nuse wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn add(a: i32, b: i32) -> i32 {\n a + b\n}\n\n#[wasm_bindgen]\npub struct Calculator {\n value: i32,\n}\n\n#[wasm_bindgen]\nimpl Calculator {\n #[wasm_bindgen(constructor)]\n pub fn new(value: i32) -> Calculator {\n Calculator { value }\n }\n \n #[wasm_bindgen]\n pub fn add(&mut self, n: i32) -> i32 {\n self.value += n;\n self.value\n }\n \n #[wasm_bindgen]\n pub fn get_value(&self) -> i32 {\n self.value\n }\n}\n\n#[wasm_bindgen]\npub fn fibonacci(n: u32) -> u64 {\n if n <= 1 {\n return n as u64;\n }\n \n let mut a = 0u64;\n let mut b = 1u64;\n \n for _ in 2..=n {\n let temp = a + b;\n a = b;\n b = temp;\n }\n \n b\n}# WASM 빌드\nwasm-pack build --target web\n\n# 또는 Node.js용\nwasm-pack build --target nodejs\n\n# 또는 브라우저 번들용\nwasm-pack build --target bundler// main.js\nimport init, { add, Calculator, fibonacci } from './wasm-example.js';\n\nasync function run() {\n // WASM 모듈 초기화\n await init();\n \n // 간단한 함수 호출\n console.log(add(5, 3)); // 8\n \n // 클래스 사용\n const calc = new Calculator(10);\n console.log(calc.add(5)); // 15\n console.log(calc.get_value()); // 15\n \n // 성능 비교\n console.time('JavaScript Fibonacci');\n jsFibonacci(40);\n console.timeEnd('JavaScript Fibonacci');\n \n console.time('WASM Fibonacci');\n fibonacci(40);\n console.timeEnd('WASM Fibonacci');\n}\n\nfunction jsFibonacci(n) {\n if (n <= 1) return n;\n return jsFibonacci(n - 1) + jsFibonacci(n - 2);\n}\n\nrun();// src/lib.rs\nuse wasm_bindgen::prelude::*;\nuse wasm_bindgen::JsValue;\n\n#[wasm_bindgen]\nextern \"C\" {\n #[wasm_bindgen(js_namespace = console)]\n fn log(s: &str);\n \n #[wasm_bindgen(js_namespace = Math)]\n fn random() -> f64;\n}\n\n#[wasm_bindgen]\npub fn greet(name: &str) {\n log(&format!(\"Hello, {}!\", name));\n}\n\n#[wasm_bindgen]\npub fn get_random_number() -> f64 {\n random()\n}\n\n// JavaScript 객체 사용\n#[wasm_bindgen]\npub fn process_array(arr: &[i32]) -> Vec<i32> {\n arr.iter().map(|x| x * 2).collect()\n}\n\n// JavaScript 콜백\n#[wasm_bindgen]\npub fn process_with_callback(data: &[i32], callback: &js_sys::Function) {\n for item in data {\n let result = callback.call1(&JsValue::NULL, &JsValue::from(*item));\n log(&format!(\"Callback result: {:?}\", result));\n }\n}// main.js\nimport init, { greet, get_random_number, process_array, process_with_callback } from './wasm-example.js';\n\nasync function run() {\n await init();\n \n greet('WebAssembly');\n \n console.log(get_random_number());\n \n const input = [1, 2, 3, 4, 5];\n const output = process_array(input);\n console.log(output); // [2, 4, 6, 8, 10]\n \n process_with_callback([1, 2, 3], (x) => x * x);\n}\n\nrun();// main.go\npackage main\n\nimport (\n \"syscall/js\"\n)\n\nfunc add(this js.Value, args []js.Value) interface{} {\n a := args[0].Int()\n b := args[1].Int()\n return a + b\n}\n\nfunc fibonacci(this js.Value, args []js.Value) interface{} {\n n := args[0].Int()\n if n <= 1 {\n return n\n }\n \n a, b := 0, 1\n for i := 2; i <= n; i++ {\n a, b = b, a+b\n }\n return b\n}\n\nfunc main() {\n js.Global().Set(\"wasmAdd\", js.FuncOf(add))\n js.Global().Set(\"wasmFibonacci\", js.FuncOf(fibonacci))\n \n // Go 프로그램이 종료되지 않도록 대기\n <-make(chan bool)\n}# WASM 빌드\nGOOS=js GOARCH=wasm go build -o main.wasm main.go\n\n# wasm_exec.js 복사 (Go 런타임)\ncp \"$(go env GOROOT)/misc/wasm/wasm_exec.js\" .<!-- index.html -->\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\">\n <script src=\"wasm_exec.js\"></script>\n</head>\n<body>\n <script>\n const go = new Go();\n WebAssembly.instantiateStreaming(fetch(\"main.wasm\"), go.importObject)\n .then((result) => {\n go.run(result.instance);\n \n // Go 함수 호출\n console.log(wasmAdd(5, 3)); // 8\n console.log(wasmFibonacci(40));\n });\n </script>\n</body>\n</html>// dom.go\npackage main\n\nimport (\n \"syscall/js\"\n)\n\nfunc updateDOM(this js.Value, args []js.Value) interface{} {\n document := js.Global().Get(\"document\")\n element := document.Call(\"getElementById\", \"output\")\n element.Set(\"innerHTML\", \"Hello from WebAssembly!\")\n return nil\n}\n\nfunc main() {\n js.Global().Set(\"updateDOM\", js.FuncOf(updateDOM))\n <-make(chan bool)\n}# AssemblyScript 설치\nnpm install -g assemblyscript\n\n# 프로젝트 초기화\nmkdir as-project && cd as-project\nnpm init -y\nnpm install --save-dev assemblyscript\nnpx asinit .// assembly/index.ts\nexport function add(a: i32, b: i32): i32 {\n return a + b;\n}\n\nexport function fibonacci(n: i32): i32 {\n if (n <= 1) return n;\n \n let a: i32 = 0;\n let b: i32 = 1;\n \n for (let i: i32 = 2; i <= n; i++) {\n let temp = a + b;\n a = b;\n b = temp;\n }\n \n return b;\n}\n\n// 메모리 조작\nexport function processArray(arr: Int32Array): i32 {\n let sum: i32 = 0;\n for (let i = 0; i < arr.length; i++) {\n sum += arr[i];\n }\n return sum;\n}# 빌드\nnpm run asbuild// loader.js\nconst fs = require(\"fs\");\nconst loader = require(\"@assemblyscript/loader\");\n\nconst imports = { /* imports */ };\nconst wasmModule = loader.instantiateSync(\n fs.readFileSync(__dirname + \"/build/optimized.wasm\"),\n imports\n);\n\nmodule.exports = wasmModule.exports;// node-wasm.js\nconst fs = require('fs');\nconst { instantiateSync } = require('@assemblyscript/loader');\n\n// 동기 로드\nconst wasmModule = instantiateSync(\n fs.readFileSync('./add.wasm')\n);\n\nconsole.log(wasmModule.exports.add(5, 3)); // 8// async-wasm.js\nconst fs = require('fs').promises;\n\nasync function loadWasm() {\n const wasmBuffer = await fs.readFile('./add.wasm');\n const wasmModule = await WebAssembly.instantiate(wasmBuffer);\n \n const { add } = wasmModule.instance.exports;\n console.log(add(5, 3));\n}\n\nloadWasm();// src/lib.rs\nuse wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn process_data(input: &[u8]) -> Vec<u8> {\n // 데이터 처리 로직\n input.iter().map(|b| b.wrapping_add(1)).collect()\n}# Node.js 타겟으로 빌드\nwasm-pack build --target nodejs// node-main.js\nconst { process_data } = require('./wasm-example');\n\nconst input = new Uint8Array([1, 2, 3, 4, 5]);\nconst output = process_data(input);\nconsole.log(output); // [2, 3, 4, 5, 6]// src/lib.rs\nuse wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub struct ImageProcessor {\n width: u32,\n height: u32,\n data: Vec<u8>,\n}\n\n#[wasm_bindgen]\nimpl ImageProcessor {\n #[wasm_bindgen(constructor)]\n pub fn new(width: u32, height: u32) -> ImageProcessor {\n let size = (width * height * 4) as usize;\n ImageProcessor {\n width,\n height,\n data: vec![0; size],\n }\n }\n \n #[wasm_bindgen]\n pub fn get_data_ptr(&self) -> *const u8 {\n self.data.as_ptr()\n }\n \n #[wasm_bindgen]\n pub fn process(&mut self) {\n // 이미지 처리 로직\n for pixel in self.data.chunks_exact_mut(4) {\n // RGBA 처리\n pixel[0] = pixel[0].saturating_add(10); // R\n pixel[1] = pixel[1].saturating_add(10); // G\n pixel[2] = pixel[2].saturating_add(10); // B\n // pixel[3]는 Alpha, 변경하지 않음\n }\n }\n}// worker.js\nself.onmessage = async function(e) {\n const { wasmModule, data } = e.data;\n \n // WASM 모듈에서 처리\n const result = wasmModule.exports.process(data);\n \n self.postMessage({ result });\n};\n\n// main.js\nconst worker = new Worker('worker.js');\n\nasync function processInWorker(data) {\n const wasmModule = await WebAssembly.instantiateStreaming(\n fetch('processor.wasm')\n );\n \n return new Promise((resolve) => {\n worker.onmessage = (e) => {\n resolve(e.data.result);\n };\n \n worker.postMessage({ wasmModule, data });\n });\n}// src/lib.rs\nuse wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn apply_grayscale(input: &[u8], output: &mut [u8]) {\n for i in 0..input.len() / 4 {\n let r = input[i * 4] as f32;\n let g = input[i * 4 + 1] as f32;\n let b = input[i * 4 + 2] as f32;\n \n let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;\n \n output[i * 4] = gray;\n output[i * 4 + 1] = gray;\n output[i * 4 + 2] = gray;\n output[i * 4 + 3] = input[i * 4 + 3];\n }\n}\n\n#[wasm_bindgen]\npub fn apply_blur(input: &[u8], output: &mut [u8], width: u32, height: u32, radius: u32) {\n // 블러 필터 구현\n // (간단한 박스 블러 예시)\n for y in 0..height {\n for x in 0..width {\n let mut r_sum = 0u32;\n let mut g_sum = 0u32;\n let mut b_sum = 0u32;\n let mut count = 0u32;\n \n for dy in -(radius as i32)..=(radius as i32) {\n for dx in -(radius as i32)..=(radius as i32) {\n let nx = (x as i32 + dx).max(0).min(width as i32 - 1) as u32;\n let ny = (y as i32 + dy).max(0).min(height as i32 - 1) as u32;\n \n let idx = (ny * width + nx) as usize * 4;\n r_sum += input[idx] as u32;\n g_sum += input[idx + 1] as u32;\n b_sum += input[idx + 2] as u32;\n count += 1;\n }\n }\n \n let idx = (y * width + x) as usize * 4;\n output[idx] = (r_sum / count) as u8;\n output[idx + 1] = (g_sum / count) as u8;\n output[idx + 2] = (b_sum / count) as u8;\n output[idx + 3] = input[idx + 3];\n }\n }\n}// image-processor.js\nimport init, { apply_grayscale, apply_blur } from './image-processor.js';\n\nasync function processImage(imageData) {\n await init();\n \n const input = new Uint8Array(imageData.data);\n const output = new Uint8Array(imageData.data.length);\n \n // 그레이스케일 적용\n apply_grayscale(input, output);\n \n // 또는 블러 적용\n // apply_blur(input, output, imageData.width, imageData.height, 5);\n \n return new ImageData(\n new Uint8ClampedArray(output),\n imageData.width,\n imageData.height\n );\n}// src/lib.rs\nuse wasm_bindgen::prelude::*;\n\n#[wasm_bindgen]\npub fn encrypt(data: &[u8], key: &[u8]) -> Vec<u8> {\n let mut result = Vec::with_capacity(data.len());\n \n for (i, &byte) in data.iter().enumerate() {\n let key_byte = key[i % key.len()];\n result.push(byte ^ key_byte);\n }\n \n result\n}\n\n#[wasm_bindgen]\npub fn decrypt(data: &[u8], key: &[u8]) -> Vec<u8> {\n encrypt(data, key) // XOR은 암호화와 복호화가 동일\n}# Rust 빌드 시 소스 맵 생성\nwasm-pack build --target web -- --features wasm-bindgen/debug// performance.js\nasync function measurePerformance() {\n const wasmModule = await WebAssembly.instantiateStreaming(\n fetch('compute.wasm')\n );\n \n const { compute } = wasmModule.instance.exports;\n \n // 성능 측정\n performance.mark('wasm-start');\n const result = compute(1000000);\n performance.mark('wasm-end');\n \n performance.measure('wasm-compute', 'wasm-start', 'wasm-end');\n \n const measure = performance.getEntriesByName('wasm-compute')[0];\n console.log(`WASM execution time: ${measure.duration}ms`);\n \n return result;\n}WebAssembly는 웹과 서버에서 고성능 코드 실행을 가능하게 하는 강력한 기술이다. 이 글에서 다룬 내용:
\n이러한 기능들을 활용하면 웹 애플리케이션의 성능을 크게 향상시킬 수 있다.
\nWebAssembly (WASM) - 브라우저와 서버를 넘나드는 범용 런타임
\n