브라우저를 여행하는 힙스터 개발자를 위한 웹 어셈블리 안내서

1. WebAssembly의 정체

WASM은 브라우저가 이해하는 바이너리 명령어 포맷입니다. C/C++/Rust 등을 컴파일한 결과물로, 파싱 없이 바로 기계어에 가깝게 실행됩니다. JS 엔진(V8 등)의 JIT 최적화 사이클 없이도 일관된 성능을 내며, 특히 CPU 집약적 연산(암호화, 코덱, 물리 시뮬레이션)에서 JS보다 수십 배 빠릅니다.

핵심 용어

2. JS와 WASM의 경계

WASM 모듈은 JS에서 `WebAssembly.instantiate()`로 로드하고, export된 함수를 JS에서 직접 호출합니다. 숫자형(i32, f64)은 그대로 전달되지만 문자열·객체는 선형 메모리(ArrayBuffer)를 통해 직렬화해야 합니다. wasm-bindgen(Rust)나 Emscripten glue 코드가 이 과정을 자동화해줍니다.

핵심 용어

3. 언제 WASM을 써야 하나

WASM이 항상 빠른 것은 아닙니다. JS→WASM 경계를 넘는 호출 비용이 있어 빈번하게 소규모 데이터를 주고받으면 오히려 느릴 수 있습니다. 이미지/오디오/비디오 처리, 암호화 알고리즘, 게임 물리 엔진처럼 순수 연산 비중이 높고 호출 횟수가 적은 케이스에 적합합니다.

핵심 용어

Q1. WebAssembly는 JavaScript를 대체할 수 있나요?

힌트

[감점 답변] 정의만 반복하거나 "WebAssembly는 JavaScript를 대체할 수 있나요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] 대체가 아닌 보완 관계임을 명확히 하세요. WASM은 DOM 접근이 없고 JS와 협력해야 동작합니다. WASM이 잘하는 것: 연산 집약적 작업. JS가 잘하는 것: DOM 조작, 이벤트 처리, 비동기 I/O. 둘을 함께 사용하는 것이 현실적 패턴입니다.

Q2. WebAssembly에서 JavaScript로 문자열을 전달하는 방법은 무엇인가요?

힌트

[감점 답변] 정의만 반복하거나 "WebAssembly에서 JavaScript로 문자열을 전달하는 방법은 무엇인가요?"에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] WASM의 선형 메모리는 단순한 바이트 배열(ArrayBuffer)입니다. 문자열은 메모리에 UTF-8로 인코딩해 포인터와 길이를 JS에 전달하면, JS쪽에서 TextDecoder로 읽어야 합니다. wasm-bindgen이나 Emscripten은 이 과정을 자동화하는 glue 코드를 생성합니다.

Q3. WASM 모듈을 브라우저에서 로드하는 방법을 설명해주세요.

힌트

[감점 답변] 정의만 반복하거나 "WASM 모듈을 브라우저에서 로드하는 방법을 설명해주세요."에 대해 장단점 없이 단편적으로 답하면 감점 포인트입니다. 면접관은 실무 적용 경험이 부족하다고 판단합니다. [좋은 답변] `WebAssembly.instantiateStreaming(fetch('module.wasm'), importObject)`가 권장 방법입니다. `importObject`로 WASM에서 사용할 JS 함수를 주입하고, 반환된 `instance.exports`에서 WASM이 공개한 함수와 메모리에 접근합니다.