WebAssembly(WASM)로 나만의 고성능 웹앱 만들기

이전 글

https://ilikesunday.tistory.com/66

WebAssembly(WASM): 웹의 미래를 바꾸는 기술

 

WebAssembly(WASM)의 이론과 구조를 알아봤다면, 이제 실제로 고성능 웹 애플리케이션을 직접 만들어볼 차례입니다. 이 글에서는 C언어와 Rust를 이용한 간단한 WebAssembly 모듈 생성, JavaScript와의 연동, 그리고 브라우저에서 실행되는 고성능 계산기 예제를 만들어보겠습니다.

---

1. 목표 및 개발 환경 준비

목표

• WebAssembly 모듈을 직접 컴파일하고 실행해보기
• JavaScript와 연동하여 웹앱에서 사용하는 구조 이해하기
• 실시간 계산, 이미지 필터링, 게임 룰 처리 등 고성능 연산 처리 실습

준비물

• VSCode 또는 원하는 코드 에디터
• Node.js 설치 (JS 로컬 테스트용)
• Emscripten SDK (C/C++) 또는 Rust + wasm-pack

# emsdk 설치 예시
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

# Rust 및 wasm-pack 설치
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
cargo install wasm-pack

---

2. 예제 프로젝트: 고성능 수학 계산기 만들기

C 언어 버전

// calc.c
int square(int x) {
    return x * x;
}

emcc calc.c -s WASM=1 -o calc.js

이제 calc.wasm과 calc.js가 생성됩니다.

HTML + JS로 연동

<script>
  fetch('calc.wasm')
    .then(res => res.arrayBuffer())
    .then(bytes => WebAssembly.instantiate(bytes))
    .then(result => {
      const square = result.instance.exports.square;
      console.log(square(7)); // 49 출력
    });
</script>

📸 결과 이미지: 브라우저 콘솔에 계산 결과 출력

---

3. Rust 기반 고성능 모듈 만들기

프로젝트 초기화

cargo new wasm_calc --lib
cd wasm_calc

Cargo.toml

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

src/lib.rs

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn multiply(x: i32, y: i32) -> i32 {
    x * y
}

빌드

wasm-pack build --target web

---

4. 고성능 연산을 위한 WASM 활용 포인트

• 반복 루프 및 수학 계산 처리 → WASM으로 위임
• 이미지 변환, 필터링 연산 → WASM 모듈화
• 물리엔진, 게임 룰 처리 등 고부하 연산 → JS에서 호출만 수행

 

 

---

5. 성능 테스트 (옵션)

JavaScript vs WASM 비교

// JS 방식
function squareJS(x) { return x * x; }

// WASM 방식은 위에서 작성한 square() 사용

• Chrome DevTools에서 실행 시간 비교
• 대량 루프 1억 회 등 반복 계산으로 차이 확인 가능
• 성능 테스트 참고 자료: https://engineering.widen.com/blog/A-Tale-of-Performance-Javascript%2C-Rust%2C-and-WebAssembly/

 

---

6. 마무리: 실전 프로젝트로 나아가기

지금까지 간단한 계산기 예제를 통해 WebAssembly의 기본 구조와 성능 이점을 체험해봤습니다.

WebAssembly는 단순히 새로운 기술이 아니라, 웹의 실행력을 한 차원 끌어올리는 혁신적인 도구입니다. 여러분만의 웹앱에 WASM을 접목시켜보세요!