WASM (WebAssembly) 기초

WASM (WebAssembly) 기초

Chapter 1. WASM이란?

1-1. WASM의 정의

WebAssembly
(WASM)은 웹 브라우저에서 매우 빠르게 실행되는 바이너리 형식의 코드입니다.

쉽게 말하면

“브라우저에서 고성능 프로그램을 실행하기 위한 기술”

입니다.

기존에는 브라우저에서 주로

JavaScript만 실행할 수 있었지만,

WASM을 사용하면

• C
• C++
• Rust
• Go

같은 언어로 만든 프로그램도 브라우저에서 실행할 수 있습니다.

---

Chapter 2. 왜 필요한가?

JavaScript의 한계

• 무거운 계산이 느림
• 게임 엔진 성능 제한
• 영상 편집 어려움
• CAD / 3D 처리 제한
• AI 추론 속도 제한

그래서 등장한 것이

WASM

입니다.

즉,

웹에서도 네이티브에 가까운 속도

를 목표로 합니다.

---

Chapter 3. 특징

주요 특징

① 매우 빠름

바이너리 형식이라 빠르게 실행

---

② 브라우저 지원

• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge

모두 지원

---

③ 다양한 언어 지원

직접 WASM을 작성하는 것이 아니라

다른 언어를 컴파일해서 사용

---

④ 보안성이 높음

Sandbox 환경에서 실행

---

Chapter 4. 동작 구조

C / C++ / Rust 코드 작성
↓
컴파일
↓
.wasm 파일 생성
↓
브라우저에서 로드
↓
JavaScript와 연결
↓
실행

즉

JS + WASM

구조입니다.

---

Chapter 5. 간단한 예제

Rust → WASM 예제

Rust 코드

pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

↓

컴파일 후

add.wasm

생성

---

JavaScript에서 호출

WebAssembly.instantiateStreaming(fetch("add.wasm"))
.then(result => {
    console.log(result.instance.exports.add(10, 20));
});

실행 결과

30

---

Chapter 6. 주요 사용 분야

---

① 게임 엔진

• 브라우저 게임
• 3D 렌더링

예:

Unity Web Build

---

② 영상/이미지 편집

• 포토 에디터
• 영상 편집기
• PDF 편집기

예:

브라우저 포토샵 수준 앱

---

③ CAD / 시뮬레이션

• 3D 모델링
• 공학 계산
• 산업용 시뮬레이터

---

④ AI 추론

• 브라우저 AI 실행
• ONNX Runtime
• Tensor 연산

---

⑤ 암호화 / 보안

• 고속 암호 연산
• 블록체인 처리

---

Chapter 7. JavaScript와 차이

항목JavaScriptWASM

실행 방식	인터프리터/JIT	바이너리
속도	보통	매우 빠름
작성 난이도	쉬움	상대적으로 어려움
DOM 제어	매우 강함	직접 어려움
계산 성능	제한 있음	매우 강함

즉

UI는 JavaScript
고성능 계산은 WASM

입니다.

---

Chapter 8. 대표 도구

도구설명

Emscripten	C/C++ → WASM
wasm-pack	Rust → WASM
AssemblyScript	TS 기반
TinyGo	Go → WASM

---

Chapter 9. 한계점

• DOM 직접 제어 어려움
• 디버깅이 불편함
• 파일 크기 문제
• 초기 로딩 비용
• 서버 연동은 별도 필요

즉

모든 것을 WASM으로 만들지는 않음

---

최종 정리

WASM은

웹에서 고성능 프로그램을 실행하기 위한 기술

입니다.

실무에서는

JavaScript + WASM

조합이 가장 많습니다.