---
title: "웹어셈블리란"
author: "jungsuk lee"
published_at: "2026-09-29T04:52:39.377Z"
updated_at: "2026-09-29T04:57:23.530Z"
tags: ["웹어셈블리","webassembly","wasm","자바스크립트","웹개발","브라우저","고성능","바이너리","프론트엔드","c언어"]
canonical_url: "https://ariser.io/@writer_5a76322474a3/%EC%9B%B9%EC%96%B4%EC%85%88%EB%B8%94%EB%A6%AC%EB%9E%80"
ai_assisted: true
---
# 웹어셈블리란
이 글은 AI가 활용됐습니다.
[원문](https://ariser.io/@writer_5a76322474a3/%EC%9B%B9%EC%96%B4%EC%85%88%EB%B8%94%EB%A6%AC%EB%9E%80)
> 가장 먼저 글의 머리에 한 마디 얹자면 웹어셈블리라고 해서 성능이 대놓고 엄청나게 좋아지진 않는다.. 그리고 '자바스크립트를 극한까지 깎아서 마이크로소프트에서 탄생시킨 **타입스크립트** ' 이친구가 웹으로써만 쓸 프로그램을 만든다면 여러모로 이점이 많다. 단 그렇다고 무조건 TS>WASM 인건 아니고 기존에 다른 사람들이 코딩한 라이브러리 철학을 WASM에서 그대로 쓸 수 있다는 이점은 또 중요하게 가져가야 한다. 이 이점때문에 결국 WASM은 죽은 기술이 되지는 않을거임.
# 웹어셈블리(Wasm), 10분 만에 떠먹여 드립니다
자, 브라우저에서 C언어 프로그램을 돌리거나, 기존 게임을 웹으로 가져오고 싶은 적이 있었나요?
“꼭 자바스크립트만 써야 하나?”라는 생각이 들었다면, 오늘 이야기할 **웹어셈블리(WebAssembly, Wasm)**가 딱 맞는 친구입니다.
고등학생도 이해할 수 있게, 개념부터 완전 간단한 실습까지 떠먹여 드릴게요.
---
## 1. 웹어셈블리가 뭐야? 한 줄 요약
**“웹 브라우저에서 거의 네이티브 속도로 돌아갈 수 있게 만든, 작고 빠른 바이너리 형식”**
이라고 하면 교과서 같지만… 더 쉽게 말하면:
- 자바스크립트는 사람이 읽고 쓰기 편한 **스크립트 언어**
- 웹어셈블리는 **기계어에 가까운 저수준 포맷**
- 둘 다 브라우저에서 돌아가지만, **무거운 계산**은 Wasm이 더 빠를 수 있음
즉, “웹에서 고성능이 필요한 부분을 Wasm으로 돌리고, 나머지는 JS가 담당하는” 식으로 같이 쓰는 경우가 많아요.
---
## 2. 왜 등장했을까?
브라우저는 원래 주로 **웹 페이지, 폼, 간단한 상호작용**을 다루도록 만들어졌어요.
그런데 시대가 변하면서:
- 영상 편집
- 게임
- 이미지/오디오 처리
- CAD, 3D 뷰어
- 기존 데스크톱 앱을 웹으로 포팅
이런 것들이 웹에서 돌아가길 원하게 됐습니다.
이때 **“무거운 연산을 JS만으로 버티기엔 한계”**가 있고, 그렇다고 플러그인(플래시 같은 옛날 방식)을 쓰고 싶진 않으니 나온 게 Wasm입니다.(애초에 자바스크립트 자체가 90년대에 엄청 간단하게 간단한걸 장벽없이 만들자는 철학으로 '대충' 만들었는데 이게 너무 퍼져서 지금 마개조가 되고있는 케이스이다..)
핵심은:
- **보안 샌드박스 안에서** 돎 (브라우저가 격리해서 실행)
- **거의 네이티브에 가까운 속도**를 목표로 함
- **여러 언어(C/C++, Rust, Go 등)**로 만든 코드를 웹에서 돌릴 수 있는 길을 열어줌
---
## 3. 자바스크립트랑 뭐가 달라?
| 구분 | 자바스크립트 | 웹어셈블리 |
|------|--------------|------------|
| 주 용도 | 웹 상호작용, UI, 로직 glue | 무거운 계산, 포팅, 고성능 모듈 |
| 형태 | 텍스트 기반 코드 | 바이너리 형식 (저수준) |
| 사람이 직접 쓰기 | 쉬움 | 보통 컴파일러/도구 사용 |
| 실행 방식 | JIT 등으로 최적화 | 브라우저가 Wasm 런타임으로 실행 |
| 협업 방식 | 주로 메인 로직 | JS가 호출하고 결과 주고받는 경우가 많음 |
즉, **“JS를 대체하는 것”이라기보다 “웹에서 고성능/기존 코드 재활용을 돕는 보완재”**에 가깝습니다.
---
## 4. 어떻게 돌아가지? (초간단 구조)
전체 흐름은 보통 이렇습니다:
1. 개발자가 C/C++/Rust 등으로 코드 작성
2. 컴파일러(Emscripten, Rust wasm32 타겟 등)로 **.wasm** 파일 생성
3. 브라우저에서 JS로 Wasm 모듈을 로드
4. JS ↔ Wasm 함수 호출, 데이터 주고받음
5. 결과가 나오면 JS가 DOM/UI에 반영
브라우저는 Wasm을 다운로드→검증→컴파일(또는 JIT)→실행합니다.
중요한 건 **Wasm 자체만으로는 DOM을 직접 막 조작하지 않고**, 보통 JS를 통해 웹 페이지와 연결된다는 점이에요.
---
## 5. 엄청나게 간단한 실습 코드 사용법
이제 정말 **최소한으로** Wasm 느낌을 맛보는 방법을 볼게요.
여기서는 편의상 이미 만들어진 아주 작은 `.wasm`을 JS에서 불러 쓰는 예시를 보여드립니다.
### 5-1. 준비물
- 브라우저 (아무거나.)
- 로컬 서버 (보안상 Wasm은 `file://`보다 `http(s)://`에서 여는 게 편함)
- 예: `python -m http.server` 또는 VS Code Live Server
- 대략 이런 파일 구성:
- `index.html`
- `script.js`
- `simple.wasm` (아래에서 설명)
### 5-2. 가장 쉬운 예시 구조
`script.js` 예시:
```js
async function loadWasm() {
const response = await fetch("simple.wasm");
const bytes = await response.arrayBuffer();
const { instance } = await WebAssembly.instantiate(bytes);
const result = instance.exports.add(3, 5);
document.getElementById("output").textContent = `3 + 5 = ${result}`;
}
loadWasm();
```
`index.html` 예시:
```html
초간단 Wasm 맛보기
웹어셈블리 초간단 예제
로딩 중...
```
이 코드의 포인트:
- `fetch("simple.wasm")`로 Wasm 파일을 가져오고
- `WebAssembly.instantiate(...)`로 실행 가능한 형태로 만들고
- `instance.exports.add(3, 5)`처럼 **Wasm 쪽 함수를 JS에서 호출**합니다
여기서 `add`가 Wasm 모듈에 노출돼 있는 함수라고 가정한 거예요.
---
## 6. “근데 .wasm 파일은 어떻게 만들지?” 버전
위 예제에서 필요한 `simple.wasm`은 직접 바이너리를 손으로 만들기보다는, 보통 **컴파일러/도구**로 만듭니다.
가장 널리 알려진 흐름 하나는:
- C/C++ 코드를 **Emscripten**으로 컴파일
- 또는 Rust를 `wasm32-unknown-unknown` 같은 타겟으로 빌드
하지만 **처음엔 직접 Wasm을 만들기보다**, 이미 공개된 간단한 예시 모듈을 써보는 게 훨씬 진입장벽이 낮습니다.
방법은 두 가지로 생각하면 편해요:
1. **맛보기용**: 누군가 만들어 둔 간단한 `.wasm`을 JS에서 불러 실행
2. **직접 만들기용**: 나중에 C/Rust 등을 Wasm으로 컴파일하는 도구chain을배움
처음부터 “Wasm 바이너리를 손으로 만들겠다”보다,
“JS에서 Wasm 모듈을 instantiate해서 함수 호출하는 감각”을 먼저 익히는 게 좋습니다.
---
## 7. 직접 돌려보는 가장 쉬운 시나리오
당장 해볼 수 있는 쉬운 시나리오는 이렇습니다:
1. 위 `index.html`, `script.js`를 같은 폴더에 만든다
2. 같은 폴더에 `simple.wasm`을 둔다 (예시용 모듈)
3. 해당 폴더를 로컬 서버로 서빙
- 예: `python -m http.server 8000`
4. 브라우저에서 `http://localhost:8000` 열기
5. 화면에 `3 + 5 = 8` 같은 결과가 나오면 성공
만약 `simple.wasm`이 없다면,
이 예제만으로는 “로딩은 되지만 실제 Wasm 함수 결과가 안 나온다”가 될 수 있어요.
그럴 땐 **이미 Wasm 예제를 제공하는 튜토리얼/ 저장소**에서 `add` 같은 단순 함수가 포함된 샘플을 가져와서 써보면 됩니다.
---
## 8. 어디에 쓰면 좋을까?
본격적으로 써볼 만한 장면은 보통 이런 쪽입니다:
- 이미지/필터 처리처럼 **반복 연산이 많은 작업**
- 게임 로직이나 물리 연산 일부
- 기존 C/C++/Rust로 작성된 라이브러리를 **웹으로 가져오기**
- 브라우저에서 **무거운 계산을 offload**하고 싶을 때
반면, 버튼 이벤트 처리나 HTML 조작 같은 건 보통 **자바스크립트가 더 편하고 자연스럽습니다.**
---
## 9. 초보자가 기억하면 좋은 포인트
- Wasm은 **JS를 없애는 게 아니라** 같이 쓰는 경우가 많다
- “무조건 빨라서 무조건 써야 한다”는 아님 — 상황에 따라 다름
- 보안상 샌드박스에서 실행됨
- 처음엔 **작은 예제 하나 실행해보는 것**이 제일 중요
- 나중엔 **C/Rust → Wasm 컴파일** 같은 실제 빌드 흐름을 익히면 됨
---
## 10. 마무리
웹어셈블리는 어렵게 보이지만, 핵심은 단순합니다.
> “웹에서 고성능이 필요한 부분을, 여러 언어로 만든 코드를 브라우저에서 돌릴 수 있게 하자”
그리고 시작은 의외로 간단합니다.
`fetch` → `WebAssembly.instantiate` → `exports` 함수 호출.
이것만 몸으로 한번 경험해보면, “아, 이런 느낌이었구나”가 훨씬 빨리 옵니다.
처음엔 **Wasm을 직접 만들기보다, 이미 있는 작은 Wasm 모듈을 JS로 불러보는 것**부터 해보세요.
그 감각이 잡히면, 그다음부터는 “어떤 코드를 Wasm으로 옮겨볼까?”가 훨씬 현실적으로 보입니다.