WebAssembly — 브라우저에서 C++ 속도 내기

이 토픽을 마치면

WebAssembly가 무엇이고 왜 필요한지, JavaScript와 어떻게 다른지, 실제로 어디에 쓰이는지 이해하게 됩니다.

JavaScript로 안 되는 것들

웹 브라우저에서 돌아가는 언어는 JavaScript뿐이었습니다. 웹사이트, 웹 앱, 간단한 게임까지 JavaScript로 만들 수 있습니다. 하지만 한계가 있습니다.

포토샵 수준의 이미지 편집, 3D 게임, 영상 인코딩, 과학 시뮬레이션 — 이런 작업은 CPU를 극한까지 사용합니다. JavaScript는 인터프리터 + JIT 컴파일 언어라서 네이티브 코드(C, C++, Rust)에 비해 느릴 수밖에 없습니다.

그래서 이런 작업은 "데스크톱 앱으로 설치하세요"가 답이었습니다. 브라우저에서는 불가능했습니다.

WebAssembly는 이 벽을 부쉈습니다.

WebAssembly란

WebAssembly(줄여서 Wasm)는 브라우저에서 실행되는 바이너리 포맷입니다. C, C++, Rust 같은 언어로 작성한 코드를 .wasm 파일로 컴파일하면, 브라우저가 이걸 거의 네이티브 속도로 실행합니다.

text

C++ 소스코드 → 컴파일 → .wasm 파일 → 브라우저에서 실행

JavaScript는 텍스트 코드를 브라우저가 읽고 해석하고 최적화합니다. Wasm은 이미 컴파일된 바이너리라서 해석 단계가 없습니다. 바로 실행합니다.

비유하면 JavaScript는 외국어 소설을 동시통역하면서 읽는 것이고, Wasm은 이미 번역이 끝난 책을 읽는 것입니다.

JavaScript를 대체하는 건 아닙니다

Wasm이 JavaScript보다 빠르다고 해서 모든 웹 개발을 Wasm으로 하는 건 아닙니다. 역할이 다릅니다.

text

JavaScript — DOM 조작, 이벤트 처리, UI 로직, API 호출
Wasm       — 무거운 계산, 이미지 처리, 물리 시뮬레이션, 코덱

Wasm은 DOM에 직접 접근하지 못합니다. 버튼 클릭 이벤트를 처리하거나, HTML 요소를 만들거나 하는 건 여전히 JavaScript의 영역입니다. Wasm은 계산 집약적인 부분만 담당하고, JavaScript가 그 결과를 받아서 화면에 보여줍니다.

둘은 경쟁이 아니라 협업 관계입니다.

실제 사례

Figma — 디자인 도구 Figma의 렌더링 엔진이 Wasm으로 작성되어 있습니다. 브라우저에서 수천 개 벡터 오브젝트를 실시간으로 조작할 수 있는 이유입니다.

Google Earth — 브라우저에서 3D 지구를 돌려볼 수 있습니다. 지형 렌더링, 타일 디코딩 같은 무거운 작업이 Wasm으로 처리됩니다.

FFmpeg.wasm — 영상 편집 라이브러리 FFmpeg를 Wasm으로 컴파일한 것입니다. 서버에 파일을 보내지 않고 브라우저에서 직접 영상을 자르고 변환할 수 있습니다.

게임 — Unity, Unreal Engine이 Wasm 빌드를 지원합니다. 3D 게임을 브라우저에서 바로 플레이할 수 있습니다. 설치가 필요 없습니다.

공통점은 "원래 브라우저에서 못 하던 것"을 가능하게 만든다는 것입니다.

어떻게 만드나

Wasm을 직접 작성하지는 않습니다. 기존 언어로 코드를 쓰고 컴파일합니다.

C/C++ → Emscripten 컴파일러로 .wasm을 만듭니다. 가장 오래된 경로입니다.

Rust → wasm-pack으로 빌드합니다. Rust 커뮤니티가 Wasm을 적극 밀고 있어서 도구 지원이 좋습니다.

Go → 공식적으로 Wasm 빌드를 지원합니다. 다만 바이너리 크기가 큰 편입니다.

JavaScript에서 Wasm 모듈을 불러오는 코드는 간단합니다:

javascript

const result = await WebAssembly.instantiateStreaming(
  fetch("module.wasm")
);
const add = result.instance.exports.add;
console.log(add(2, 3));

핵심

WebAssembly는 브라우저에서 네이티브에 가까운 속도로 코드를 실행하는 바이너리 포맷입니다. JavaScript를 대체하는 게 아니라, 계산 집약적 작업을 분담합니다. Figma, Google Earth, 브라우저 게임 등 "원래 못 하던 것"을 가능하게 합니다.