WebAssembly 기초

기존 웹 애플리케이션의 핵심 언어인 JavaScript는 동적인 웹 페이지를 만드는 데 매우 강력하고 유연하지만, CPU 집약적인 작업(예: 3D 게임, 비디오 편집, 이미지 처리, 과학 계산)에서는 성능상의 한계를 가집니다. JavaScript는 인터프리터 언어의 특성상 컴파일된 언어(C, C++, Rust 등)에 비해 속도가 느리고, 브라우저의 메인 스레드를 사용하여 UI를 블로킹할 수 있는 단점이 있습니다.

이러한 문제를 해결하고 웹 브라우저에서 고성능 애플리케이션을 실행할 수 있도록 설계된 새로운 기술이 바로 WebAssembly (Wasm) 입니다. WebAssembly는 웹에 새로운 가능성을 열어주며, 복잡하고 연산량이 많은 애플리케이션도 웹에서 원활하게 동작할 수 있게 합니다.

이번 장에서는 WebAssembly가 무엇인지, 왜 필요한지, 그리고 어떻게 동작하는지에 대한 기본 개념을 학습할 것입니다. 이를 통해 여러분은 웹이 단순히 문서와 상호작용하는 공간을 넘어, 더욱 강력하고 다재다능한 플랫폼으로 진화하고 있음을 이해할 수 있을 것입니다.

WebAssembly (Wasm) 이란?

WebAssembly는 현대 웹 브라우저에서 실행될 수 있도록 설계된 이진 형식의 저수준 프로그래밍 언어입니다. 웹 브라우저의 가상 머신에서 실행되며, JavaScript와 함께 동작할 수 있도록 설계되었습니다.

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

WebAssembly의 필요성

• 성능 향상: JavaScript에 비해 훨씬 빠른 실행 속도를 제공합니다. 이는 특히 게임, 이미지/비디오 편집, CAD, VR/AR, 과학 시뮬레이션 등 CPU 집약적인 작업에 유리합니다.
• 기존 코드 재활용: C, C++, Rust 등으로 작성된 기존의 고성능 라이브러리나 애플리케이션을 웹으로 쉽게 포팅하여 재활용할 수 있습니다. 웹 개발자들이 새로운 언어를 배우지 않고도 기존의 전문 지식을 활용할 수 있게 합니다.
• 일관된 성능: JIT(Just-In-Time) 컴파일 방식의 JavaScript는 초기 로딩 시 성능 편차가 있을 수 있지만, WebAssembly는 예측 가능한 고성능을 제공합니다.
• 메인 스레드 부담 감소: Web Workers와 함께 사용하면 메인 스레드의 부담을 줄여 UI의 반응성을 높일 수 있습니다.
• 보안: 안전한 샌드박스 환경에서 실행됩니다.

WebAssembly vs. JavaScript

핵심: WebAssembly는 JavaScript를 대체하는 것이 아니라, JavaScript가 잘 하지 못하는 고성능 연산 부분을 보완하는 동반자 관계입니다. 대부분의 웹 애플리케이션은 여전히 JavaScript가 UI와 사용자 상호작용을 담당하고, WebAssembly는 필요한 고성능 모듈을 담당하는 방식으로 사용됩니다.

WebAssembly의 동작 원리 (간략)

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

1. 고수준 언어로 코드 작성: 개발자는 C, C++, Rust 등 원하는 언어로 고성능 로직을 작성합니다. (예: 이미지 필터링 알고리즘)
2. WebAssembly로 컴파일: Emscripten (C/C++), wasm-pack (Rust)과 같은 툴체인을 사용하여 작성된 코드를 .wasm 이진 파일과 이를 로드하고 실행하기 위한 .js (Glue Code) 파일로 컴파일합니다.
3. 브라우저 다운로드: 웹 페이지는 컴파일된 .wasm 파일과 .js 파일을 네트워크를 통해 다운로드합니다. .wasm 파일은 매우 작고 빠르게 다운로드됩니다.
4. 브라우저 파싱 및 컴파일: 브라우저의 WebAssembly 엔진은 .wasm 이진 코드를 파싱하여 거의 하드웨어에 가까운 머신 코드로 컴파일합니다. 이 과정이 JavaScript의 JIT 컴파일보다 훨씬 빠르고 효율적입니다.
5. 실행: 컴파일된 WebAssembly 코드가 브라우저의 샌드박스 환경 내에서 실행됩니다. JavaScript는 필요할 때 WebAssembly 모듈의 함수를 호출하고, WebAssembly는 결과를 JavaScript로 반환합니다.

graph LR
    A[C/C++/Rust Code] --> B{Emscripten/Wasm-pack};
    B -- Compile --> C[my_module.wasm (Binary)];
    B -- Generate --> D[my_module.js (Glue Code)];
    E[Web Server] -- Host --> C;
    E -- Host --> D;
    F[Web Browser] --> G[Download my_module.js & my_module.wasm];
    G --> H[JavaScript Code];
    G --> I[WebAssembly Module];
    H -- Load & Instanciate --> I;
    H -- Call Functions --> I;
    I -- Return Results --> H;

WebAssembly 사용 예시

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

1. C 언어로 간단한 합산 함수 작성 (add.c)

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

2. Emscripten을 사용하여 WebAssembly로 컴파일

Emscripten 툴체인을 설치해야 합니다. (설치 과정은 복잡하므로 여기서는 명령어만 제시합니다.)

# add.c 파일을 add.wasm 및 add.js로 컴파일
emcc add.c -o add.html -s STANDALONE_WASM -s EXPORTED_FUNCTIONS="['_add']"
# 또는 간략하게 .wasm과 .js 파일만 생성
# emcc add.c -o add.wasm -s STANDALONE_WASM -s EXPORTED_FUNCTIONS="['_add']" -s WASM_ASYNC_COMPILATION=0

위 명령어를 실행하면 add.wasm (WebAssembly 이진 모듈)과 add.js (Webpack이 생성하는 것과 유사한 glue 코드) 파일이 생성됩니다.

3. JavaScript에서 WebAssembly 모듈 로드 및 사용

// index.js (또는 웹 페이지의 script 태그)
async function loadWasmModule() {
    try {
        // add.wasm 파일 로드 (Fetch API 사용)
        const response = await fetch('add.wasm');
        const buffer = await response.arrayBuffer();

        // WebAssembly 모듈 컴파일 및 인스턴스화
        const module = await WebAssembly.compile(buffer);
        const instance = await WebAssembly.instantiate(module, {}); // 두 번째 인자는 import 객체 (현재는 비어 있음)

        // WebAssembly 모듈에서 내보낸 함수(_add) 사용
        const addFunction = instance.exports._add; // C 함수의 이름 앞에 '_'가 붙는 경우가 많음

        const result = addFunction(10, 20);
        console.log(`WebAssembly를 사용한 덧셈 결과: ${result}`); // 결과: 30

    } catch (error) {
        console.error('WebAssembly 모듈 로드 또는 실행 실패:', error);
    }
}

loadWasmModule();

참고: 실제 프로덕션 환경에서는 Emscripten이 생성하는 .js (glue code) 파일을 사용하여 .wasm 모듈을 로드하고 인스턴스화하는 것이 더 편리하고 강력합니다. 위의 예시는 .wasm 파일을 순수 JavaScript로 직접 다루는 원리를 보여주기 위함입니다.

WebAssembly의 미래와 활용 분야

WebAssembly는 아직 발전 초기 단계이지만, 그 잠재력은 엄청납니다.

• 현재 활용 분야
  • 게임: 웹 기반 게임 엔진(Unity, Unreal Engine)의 웹 포팅, 고사양 게임 에뮬레이터.
  • 이미지/비디오 처리: 브라우저 내에서의 실시간 필터링, 압축, 편집. (예: Figma, Photoshop on Web)
  • CAD/3D 모델링: 웹 기반 3D 뷰어 및 디자인 도구.
  • 과학 계산/데이터 분석: 복잡한 수치 계산, 머신러닝 모델 추론.
  • P2P 통신: 웹RTC와 결합하여 고성능 데이터 처리.
• 향후 발전 방향
  • WASI (WebAssembly System Interface): 웹 브라우저 외부 환경(서버, IoT 장치 등)에서도 WebAssembly를 실행할 수 있도록 하는 표준화 노력입니다. 이는 WebAssembly를 웹을 넘어선 범용 런타임으로 확장할 것입니다.
  • GC (Garbage Collection): JavaScript처럼 가비지 컬렉션을 지원하여 더 많은 언어(Java, C#, Go 등)를 WebAssembly로 컴파일하기 쉽게 만듭니다.
  • Multi-threading: 웹 워커와 더 효율적으로 연동하여 병렬 처리 성능을 더욱 향상시킵니다.
  • Debuggability: 개발자 도구에서의 디버깅 경험 개선.

WebAssembly는 웹이 더욱 강력한 플랫폼으로 진화하는 데 핵심적인 역할을 할 것입니다. 여러분이 미래에 웹 기반의 고성능 애플리케이션을 개발해야 할 때, WebAssembly는 매우 중요한 선택지가 될 것입니다.

마무리하며

이번 장에서는 웹 브라우저에서 고성능 애플리케이션을 실행할 수 있게 하는 혁신적인 기술인 WebAssembly (Wasm) 의 기초를 학습했습니다.

여러분은 WebAssembly가 JavaScript의 성능 한계를 극복하기 위해 설계된 이진 형식의 저수준 언어임을 이해했으며, JavaScript를 대체하는 것이 아니라 보완하는 관계임을 파악했습니다. 또한, WebAssembly가 C, C++, Rust 등의 언어로 작성된 코드를 웹에서 실행할 수 있게 하여 기존 고성능 라이브러리 재활용과 새로운 가능성을 열어준다는 것을 배웠습니다. WebAssembly의 동작 원리(컴파일, 다운로드, 실행)와 JavaScript에서 WebAssembly 모듈을 로드하는 간단한 예시를 살펴보았으며, 마지막으로 WebAssembly의 현재 활용 분야와 미래 발전 방향에 대해서도 알아보았습니다.

WebAssembly는 웹이 단순한 정보 전달의 매체를 넘어, 점차 고성능 데스크톱 애플리케이션의 영역까지 확장될 수 있도록 돕는 매우 중요한 기술입니다. 이 장에서 배운 지식들을 바탕으로 웹의 성능 한계를 뛰어넘는 새로운 유형의 애플리케이션 개발에 도전해 보시길 바랍니다. 다음 장에서는 웹의 시각적인 영역에 혁신을 가져올 웹 컴포넌트와 새로운 CSS 기술들을 살펴보겠습니다.