WebAssembly 기초

앞 절의 비동기 로드와 배포 파일 개념을 바탕으로, 이번에는 소스를 만드는 단계와 브라우저에서 모듈을 초기화해 호출하는 단계를 구별합니다. 작은 덧셈은 호출 계약을 익히는 예제이며 성능 비교 자료는 아닙니다.

add.c → emcc
add.js · add.wasm

const module =
  await createAddModule();
module._add(10, 20); // 30

add.c → emcc
add.js · add.wasm

const module =
  await createAddModule();
module._add(10, 20); // 30

기존 웹 애플리케이션의 핵심 언어인 JavaScript는 동적인 웹 페이지를 만드는 데 매우 강력하고 유연합니다.

다만 CPU 집약적인 작업(3D 게임, 비디오 편집, 이미지 처리, 과학 계산)에서는 성능 한계가 드러날 때가 있습니다.

동적 타입, JIT 최적화, 가비지 컬렉션, 메인 스레드 UI 처리와 맞물려 무거운 반복 계산에서 예측 가능한 성능을 확보하기 어려울 수 있기 때문입니다.

이 문제를 해결하기 위해 등장한 기술이 WebAssembly (Wasm)입니다.

WebAssembly는 웹에서 고성능 애플리케이션 실행을 가능하게 하고, 연산량이 큰 애플리케이션도 원활히 동작할 수 있도록 돕습니다.

이번 장에서는 WebAssembly가 무엇인지, 왜 필요한지, 어떻게 동작하는지 기본 개념을 정리합니다.

핵심 목적은 웹이 문서 중심 플랫폼을 넘어 고성능 실행 환경으로 확장되는 흐름을 이해하는 것입니다.

WebAssembly (Wasm)이란?

WebAssembly는 현대 웹 브라우저와 다양한 런타임에서 실행되도록 설계된 컴팩트한 이진 명령 형식이자 저수준 컴파일 대상입니다.

사람이 주로 직접 작성하는 언어라기보다 C, C++, Rust 같은 언어의 결과물을 웹에서 실행하기 위한 형식에 가깝고, JavaScript와 함께 동작할 수 있도록 설계되었습니다.

• 컴파일 대상: C, C++, Rust와 같은 고성능 언어들을 WebAssembly 모듈로 컴파일할 수 있습니다.
• 이진 형식: 텍스트 형식이 아닌 컴팩트한 이진 형식으로 배포되어 네트워크 전송 및 파싱 속도가 빠릅니다.
• 샌드박스 실행: 브라우저의 WebAssembly 엔진에서 검증된 뒤 격리된 실행 환경 안에서 동작합니다.
• JavaScript와 상호 운용: WebAssembly 모듈은 JavaScript에서 호출되고, JavaScript도 WebAssembly 모듈이 제공하는 함수를 사용할 수 있습니다.

WebAssembly의 필요성

• 성능 향상: CPU 집약적인 계산을 네이티브에 가까운 성능으로 실행하도록 설계되었습니다. 모든 JavaScript 코드보다 항상 빠른 것은 아니지만, 게임, 이미지/비디오 편집, CAD, VR/AR, 과학 시뮬레이션처럼 계산량이 큰 작업에 유리합니다.
• 기존 코드 재활용: C, C++, Rust 등으로 작성된 기존의 고성능 라이브러리나 애플리케이션을 웹으로 쉽게 포팅하여 재활용할 수 있습니다. 웹 개발자들이 새로운 언어를 배우지 않고도 기존의 전문 지식을 활용할 수 있게 합니다.
• 성능 평가: JavaScript와 Wasm 모두 엔진·컴파일·메모리·입력 크기의 영향을 받습니다. 초기 로드와 반복 호출, 데이터 전달 비용을 포함해 같은 작업을 비교해야 성능 이득이 있는지 판단할 수 있습니다.
• 메인 스레드 부담 감소: Web Workers와 함께 사용하면 메인 스레드의 부담을 줄여 UI의 반응성을 높일 수 있습니다.
• 보안: 안전한 샌드박스 환경에서 실행됩니다.

WebAssembly vs. JavaScript

핵심: WebAssembly는 JavaScript를 대체하는 것이 아니라, JavaScript가 잘 하지 못하는 고성능 연산 부분을 보완하는 동반자입니다.

대부분의 웹 애플리케이션에서는 여전히 JavaScript가 UI와 사용자 상호작용을 담당하고, WebAssembly는 필요한 고성능 모듈을 담당하는 방식으로 사용됩니다.

Web Worker는 작업을 수행할 위치를 나누는 수단이고 Wasm은 실행 코드의 형식입니다. 둘은 대안만이 아니라 함께 사용할 수 있는 선택입니다. DOM과 사용자 입력을 연결하는 JavaScript 코드, JS↔Wasm 값 전달, 오류 대체 경로도 구현 범위에 남습니다.

실측 대신 비교 연습의 조건을 정합니다. 한 묶음 처리에 JavaScript는 12ms, Wasm은 최초 초기화 18ms에 묶음당 계산 4ms와 전달 3ms가 필요하며 초기화는 한 번만 한다고 가정합니다. 첫 묶음은 Wasm 18+4+3=25ms라 12ms보다 깁니다. 3묶음은 18+3×7=39ms 대 36ms, 4묶음은 18+4×7=46ms 대 48ms입니다. “반복 계산이 빠름”만 보면 첫 호출의 비용을 놓칩니다. 이 수치는 계산용 가정이며 실제 브라우저·툴체인 성능이 아닙니다.

위 같은 입력·재사용 조건에서 2묶음과 5묶음의 총 시간을 각각 구하세요. 매 묶음마다 모듈을 새로 초기화한다면 결론이 같나요? 작은 add 결과가 30이라는 사실로 Wasm이 더 빠르다고 판단할 수 있나요?

WebAssembly의 동작 원리 (간략)

WebAssembly가 웹 브라우저에서 어떻게 실행되는지 간략한 흐름을 살펴보겠습니다.

WebAssembly 사용 예시

간단한 WebAssembly 모듈을 생성하고 JavaScript에서 로드하는 과정을 살펴보겠습니다.

// add.c
int add(int a, int b) {
    return a + b;
}

# main 없이 add 함수를 내보내는 JS factory와 add.wasm 생성
emcc add.c -o add.js --no-entry -s MODULARIZE=1 -s EXPORT_ES6=1 -s EXPORTED_FUNCTIONS="['_add']"

// <script type="module" src="./index.js"></script>로 로드
import createAddModule from './add.js';

async function loadWasmModule() {
    try {
        // 생성된 JS factory가 Wasm 로드·초기화와 필요한 imports를 처리
        const module = await createAddModule();
        const addFunction = module._add; // Emscripten JS wrapper의 내보내기 이름
        const result = addFunction(10, 20);
        console.log(`WebAssembly를 사용한 덧셈 결과: ${result}`); // 성공 시 예상값: 30
    } catch (error) {
        console.error('WebAssembly 모듈 로드 또는 실행 실패:', error);
    }
}

loadWasmModule();

WebAssembly의 미래와 활용 분야

WebAssembly는 웹 내부의 고성능 실행 형식에서 출발해 서버와 엣지 런타임까지 활용 범위를 넓혀 가고 있습니다.

• 현재 활용 분야
  • 게임: 웹 기반 게임 엔진(Unity, Unreal Engine)의 웹 포팅, 고사양 게임 에뮬레이터.
  • 이미지/비디오 처리: 브라우저 내에서의 실시간 필터링, 압축, 편집. (예: Figma, Photoshop on Web)
  • CAD/3D 모델링: 웹 기반 3D 뷰어 및 디자인 도구.
  • 과학 계산/데이터 분석: 복잡한 수치 계산, 머신러닝 모델 추론.
  • P2P 통신: 웹RTC와 결합하여 고성능 데이터 처리.
• 확장 방향

아래 제품·엔진 이름은 활용 분야를 이해하기 위한 사례입니다. 해당 제품의 모든 최신 버전이나 기본 배포 대상에 Wasm 지원이 있다는 보증이 아니며, 실제 적용은 선택한 버전의 공식 빌드·플랫폼 계약을 확인합니다.

• WASI (WebAssembly System Interface): 웹 브라우저 외부 환경(서버, IoT 장치 등)에서도 WebAssembly를 실행할 수 있도록 하는 인터페이스입니다. 이는 WebAssembly를 웹을 넘어선 범용 런타임으로 확장합니다.
• GC (Garbage Collection): 가비지 컬렉션 기반 언어(Java, C#, Go 등)를 WebAssembly로 옮기기 쉽게 만드는 방향입니다.
• Multi-threading: 웹 워커와 공유 메모리 모델을 활용해 병렬 처리 성능을 높이는 방향입니다.
• Debuggability: 개발자 도구에서의 디버깅 경험 개선.

WebAssembly는 연산량이 큰 기능을 웹에서 처리해야 할 때 검토할 수 있는 선택지입니다.

적용 전 JavaScript와의 경계 비용과 빌드 복잡도를 함께 확인해야 합니다.

WebAssembly 요약

Wasm을 적용할 때는 빠른 실행만 보지 말고 JavaScript와의 경계 비용, 메모리 전달, 빌드 복잡도, 대체 경로를 함께 검토해야 합니다.

이번 장에서는 웹 브라우저에서 저수준 바이너리 모듈을 실행하는 WebAssembly (Wasm)의 기초를 학습했습니다.

여러분은 WebAssembly가 JavaScript의 성능 한계를 보완하기 위해 설계된 컴팩트한 이진 실행 형식이자 저수준 컴파일 대상임을 이해했습니다.

그리고 JavaScript를 대체하는 기술이 아니라, 서로 역할을 나누는 보완 관계라는 점도 확인했습니다.

또한 WebAssembly가 C, C++, Rust 코드의 웹 실행을 가능하게 해 기존 고성능 라이브러리를 재활용할 수 있다는 점을 배웠습니다.

컴파일, 다운로드, 실행으로 이어지는 동작 흐름과 JavaScript에서 Wasm 모듈을 로드하는 기본 예시도 살펴봤습니다.

마지막으로 현재 활용 분야와 앞으로의 확장 방향까지 함께 정리했습니다.

WebAssembly는 연산량이 큰 기능을 웹에서 처리해야 할 때 검토할 수 있는 선택지입니다.

다음 절에서는 JAMstack의 빌드·배포·요청 경계를 살펴봅니다.