Skip to content
Tools/WebAssembly 원리 & 만드는 법

WebAssembly 원리 & 만드는 법

WebAssembly: Principles & How to Build

WebAssembly가 어떻게 동작하고 어떻게 만드는지 배우는 도구입니다. 스택 머신 시각화, 리틀 엔디언 선형 메모리 바이트 그리드, 모듈 구조 해부, Rust·C(Emscripten)·AssemblyScript·Go/TinyGo 컴파일 파이프라인을 눈으로 익혀보세요.

코딩 실습관련 글 읽기

WebAssembly(WASM)가 어떻게 동작하고 어떻게 만드는지 브라우저에서 눈으로 배우는 도구입니다. 이 사이트의 도구들도 대부분 WASM으로 돌아갑니다. WAT를 직접 컴파일·실행해보고 싶다면 아래의 WebAssembly 스튜디오로 이어집니다.

WASM은 이식 가능한 스택 기반 가상 머신(VM)입니다. 네이티브에 가까운 속도, 샌드박스 격리, 언어 중립, 작은 바이너리가 특징입니다.

거의 네이티브 속도

기계어에 가까운 컴팩트한 바이트코드를 브라우저·런타임이 곧바로 기계어로 컴파일합니다.

샌드박스 안전

자체 선형 메모리 안에서만 동작하고, 호스트가 명시적으로 넘겨준 함수(import)만 호출할 수 있습니다.

언어 중립

Rust·C/C++·Go·AssemblyScript 등 여러 언어가 같은 .wasm으로 컴파일됩니다.

작고 빠른 로딩

텍스트가 아닌 바이너리 포맷이라 파싱과 검증이 스트리밍으로 빠르게 이뤄집니다.

✨ 어디서 빛나나

  • ▹이미지·동영상 처리(FFmpeg.wasm), 압축, 암호화
  • ▹언어 런타임을 브라우저에서: 진짜 Ruby·PHP·Lua·Python 실행
  • ▹컴파일러·포매터: esbuild·SWC·Graphviz를 서버 없이
  • ▹게임·물리 엔진, 오디오/DSP, CAD 같은 무거운 연산

🧮 스택 머신 시각화

WASM은 레지스터가 아니라 스택으로 계산합니다. 각 명령이 스택에서 값을 꺼내(pop) 연산하고 결과를 다시 넣습니다(push). 한 단계씩 실행해보세요.

예제 선택

(func (result i32)) — 2 + 3

명령어

1i32.const 2◀
2i32.const 3
3i32.add

오퍼랜드 스택

(비어 있음)

💡

  • •스택 머신: 피연산자를 스택에 쌓고, 명령이 위에서 꺼내 계산해 다시 올립니다.
  • •i32.const N 은 상수 N을 push, i32.add 는 두 값을 pop 해 합을 push 합니다.
  • •local.get $i 는 지역 변수/파라미터 값을 스택에 올립니다.
  • •함수가 끝나면 스택에 남은 값(들)이 반환값이 됩니다 — 그래서 타입 검증이 가능합니다.

이어서 해볼 도구

같은 흐름으로 이어지는 도구를 골라 두었습니다.