Web Assembly - WASM, 웹 어셈블리

웹 어셈블리(WebAssembly, WASM)

브라우저에서 실행되는 고성능 바이너리 코드.
자바스크립트처럼 브라우저에서 동작하지만, 성능은 네이티브에 가까움.

📊 JS vs WASM 비교

구분	JavaScript(JS)	WebAssembly(WASM)
형식	텍스트 (.js)	바이너리 (.wasm)
언어	사람이 읽기 쉬움	기계가 읽기 쉬움
실행	JS 엔진	WASM 엔진
속도	느림	빠름 (네이티브 수준)

⚙️ 구동 방식

C, C++, Rust 등으로 작성 → WASM 포맷으로 컴파일 → 브라우저가 .wasm 파일 로딩 및 실행.

💡 사용 예시

• 🎮 Unity, Unreal 같은 게임 엔진 웹 이식
• 🧮 과학 계산, 이미지 처리 등 고성능 연산
• 🔒 보안상 난독화 또는 실행 코드 보호
• 🦀 Rust 기반 SPA 또는 시뮬레이터

⚠️ 제한 사항

• DOM 직접 접근 불가 (JS를 통해 우회)
• 실행은 빠르나 초기 로딩/준비 시간 필요
• 디버깅 및 로그 확인이 상대적으로 불편

JavaScript가 바이너리 컴파일이 어려운 이유

1. 동적 타입 시스템

변수 타입이 실행 중에 바뀌는 구조. 컴파일 타임에 타입을 확정할 수 없어 정적 바이너리 생성이 어려움.

2. eval() 같은 런타임 코드 생성

코드가 실행 중 새로 생성됨. 컴파일러는 미리 파악할 수 없음 → 보안상 위험.

3. 객체 구조의 동적 변경

필드 추가/삭제가 실행 중 발생. 메모리 레이아웃을 사전에 결정 불가.

4. 클로저, 스코프 체인

함수가 외부 스코프 변수 참조. 스코프 구조가 런타임까지 확정되지 않음.

5. 복잡한 런타임 규칙

this, with, prototype 체인 등은 호출 방식에 따라 의미가 동적으로 변함. 정적 분석 불가.

🔁 그래서 JS는 JIT(Just-In-Time) 방식 사용

• 인터프리터: 코드를 순차적으로 해석
• JIT 컴파일러: 반복 실행되는 코드를 바이너리로 변환
• 실행 중 최적화, 필요 시 롤백 수행

🧠 브라우저는 복수 런타임 동시 제공

기능	설명
🧠 JS 엔진	인터프리터 + JIT 최적화 (V8, SpiderMonkey)
🧩 WASM 엔진	바이너리 코드 실행기 (C/C++/Rust 지원)
🎨 렌더링 엔진	HTML, CSS 파싱 및 UI 렌더링
🖱️ 브라우저 API	DOM, WebGL, Audio 등 인터페이스
🔐 샌드박스	보안 격리 및 메모리 보호
📦 스토리지	LocalStorage, IndexedDB 등 제공
🔄 스레드	Web Workers, SharedArrayBuffer 등 병렬 처리
📶 네트워킹	fetch, WebSocket, HTTP/2/3 지원

🆚 Node.js / JVM과 비교

항목	웹 브라우저	Node.js	JVM
언어	JS, WASM, HTML/CSS	JS only	Java, Kotlin 등
실행환경	JS + DOM + 렌더링	JS only (no DOM)	JVM 바이트코드
네이티브 접근	제한적 (샌드박스)	제한적 (모듈 필요)	JNI 가능
UI 처리	강력 (DOM, WebGL)	불가능	JavaFX, Swing
배포성	URL만 있으면 실행	설치 필요	설치 필요
병렬성	Web Workers	기본 단일스레드	다중스레드

✅ 결론

• JS는 유연하지만, 실행 중 최적화 필요 → 구조가 복잡하고 느림
• WASM은 정적 타입 기반 → 실행 즉시 최적화된 코드 실행 가능
• 브라우저는 이제 단순한 웹 뷰어가 아니라 고성능 슈퍼 런타임