한양과기고 에듀테크 수업도구 대시보드

WebAssembly는 브라우저가 이해하는 바이너리 명령어 포맷이다. C, Rust, Go 같은 언어로 짠 코드를 컴파일하면 자바스크립트 엔진의 파싱·인터프리팅 비용 없이 스택 기반 가상머신 위에서 근(近) 네이티브 속도로 돌아간다. 아래에서는 사람이 직접 한 바이트씩 손으로 인코딩한 실제 56바이트짜리 .wasm 모듈을 이 페이지 안에서 그대로 WebAssembly.instantiate()로 실행해본다.

🔬 56바이트 뜯어보기 hex dump

매직 넘버 버전 Type 섹션 Function 섹션 Export 섹션 Code 섹션

바이트를 클릭하면 그 의미를 여기에 설명합니다.

▶️ 브라우저에서 실제 실행 LIVE

함수 선택 (이 모듈이 export하는 것)

결과 —

instantiate + 호출 소요 시간 —

브라우저가 콘솔이나 서버로 미리 계산해 보내주는 값이 아니다. 지금 이 탭의 자바스크립트 엔진 안에 진짜 WebAssembly 런타임이 떠서, 위 hex dump와 완전히 동일한 바이트를 컴파일 → 실행하고 있다.

// 이 모듈이 원래 어떤 소스에서 왔다고 상상하면 (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)) ;; mul도 구조는 동일, i32.add → i32.mul만 다름 )

📚 스택 머신으로 계산하기 개념

WASM 명령어에는 레지스터가 없다. 모든 연산은 값 스택을 push/pop 하며 진행된다. a + b 는 다음 3단계로 표현된다.

local.get 0 ; 스택: [a] local.get 1 ; 스택: [a, b] i32.add ; 스택: [a+b] (두 값 pop → 결과 push)

이 방식 덕분에 명령어 인코딩이 아주 단순하고 짧아진다 — 오퍼랜드가 어느 레지스터인지 적을 필요 없이 "무엇을 할지"만 한 바이트로 적으면 된다. 그래서 우리가 만든 add 함수 본문은 단 7바이트다.

🔒 샌드박스와 실전 활용 응용

WASM 모듈은 파일 시스템도, DOM도, 네트워크도 직접 건드릴 수 없다. 메모리는 격리된 ArrayBuffer 한 덩어리뿐이고, 외부와의 통로는 모듈을 인스턴스화할 때 넘겨주는 imports 함수 뿐이다.

Figma — C++ 렌더링 엔진을 wasm으로 컴파일해 웹에서 데스크톱급 속도
ffmpeg.wasm — 서버 업로드 없이 브라우저 안에서 영상 인코딩
AutoCAD Web — 수십 년치 C++ 코드베이스를 그대로 웹으로
Figma/게임 엔진 — Unity/Godot 웹 빌드가 wasm 위에서 물리 연산

🏁 반복 호출 벤치마크 JS 함수 호출 vs WASM 함수 호출

같은 a + b 를 300만 번 반복 호출했을 때, 자바스크립트로 짠 순수 함수와 방금 그 wasm 모듈의 add 익스포트를 호출하는 시간을 비교한다. (단일 덧셈은 JIT가 인라인해버릴 만큼 가벼워서 wasm의 우위가 크지 않을 수 있다 — 그 자체가 "무거운 연산일수록 wasm 이득이 커진다"는 걸 보여주는 포인트다.)