가장 먼저 글의 머리에 한 마디 얹자면 웹어셈블리라고 해서 성능이 대놓고 엄청나게 좋아지진 않는다.. 그리고 '자바스크립트를 극한까지 깎아서 마이크로소프트에서 탄생시킨 타입스크립트 ' 이친구가 웹으로써만 쓸 프로그램을 만든다면 여러모로 이점이 많다. 단 그렇다고 무조건 TS>WASM 인건 아니고 기존에 다른 사람들이 코딩한 라이브러리 철학을 WASM에서 그대로 쓸 수 있다는 이점은 또 중요하게 가져가야 한다. 이 이점때문에 결국 WASM은 죽은 기술이 되지는 않을거임.

웹어셈블리(Wasm), 10분 만에 떠먹여 드립니다

자, 브라우저에서 C언어 프로그램을 돌리거나, 기존 게임을 웹으로 가져오고 싶은 적이 있었나요?
“꼭 자바스크립트만 써야 하나?”라는 생각이 들었다면, 오늘 이야기할 **웹어셈블리(WebAssembly, Wasm)**가 딱 맞는 친구입니다.

고등학생도 이해할 수 있게, 개념부터 완전 간단한 실습까지 떠먹여 드릴게요.

---

1. 웹어셈블리가 뭐야? 한 줄 요약

“웹 브라우저에서 거의 네이티브 속도로 돌아갈 수 있게 만든, 작고 빠른 바이너리 형식”
이라고 하면 교과서 같지만… 더 쉽게 말하면:

• 자바스크립트는 사람이 읽고 쓰기 편한 스크립트 언어
• 웹어셈블리는 기계어에 가까운 저수준 포맷
• 둘 다 브라우저에서 돌아가지만, 무거운 계산은 Wasm이 더 빠를 수 있음

즉, “웹에서 고성능이 필요한 부분을 Wasm으로 돌리고, 나머지는 JS가 담당하는” 식으로 같이 쓰는 경우가 많아요.

---

2. 왜 등장했을까?

브라우저는 원래 주로 웹 페이지, 폼, 간단한 상호작용을 다루도록 만들어졌어요.
그런데 시대가 변하면서:

• 영상 편집
• 게임
• 이미지/오디오 처리
• CAD, 3D 뷰어
• 기존 데스크톱 앱을 웹으로 포팅

이런 것들이 웹에서 돌아가길 원하게 됐습니다.
이때 **“무거운 연산을 JS만으로 버티기엔 한계”**가 있고, 그렇다고 플러그인(플래시 같은 옛날 방식)을 쓰고 싶진 않으니 나온 게 Wasm입니다.(애초에 자바스크립트 자체가 90년대에 엄청 간단하게 간단한걸 장벽없이 만들자는 철학으로 '대충' 만들었는데 이게 너무 퍼져서 지금 마개조가 되고있는 케이스이다..)

핵심은:

• 보안 샌드박스 안에서 돎 (브라우저가 격리해서 실행)
• 거의 네이티브에 가까운 속도를 목표로 함
• **여러 언어(C/C++, Rust, Go 등)**로 만든 코드를 웹에서 돌릴 수 있는 길을 열어줌

---

3. 자바스크립트랑 뭐가 달라?

즉, **“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 예시:

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 예시:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>초간단 Wasm 맛보기</title>
  </head>
  <body>
    <h1>웹어셈블리 초간단 예제</h1>
    <div id="output">로딩 중...</div>
    <script src="script.js"></script>
  </body>
</html>

이 코드의 포인트:

• 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으로 옮겨볼까?”가 훨씬 현실적으로 보입니다.