목표, 주요 개념 및 사용 사례

WASM의 핵심 원리와 실제 적용 사례에 대해 궁금하신 적이 있으신가요? 만약 그렇다면, 저희가 그 궁금증을 풀어드리겠습니다.

WebAssembly(WASM)는 웹 환경에서 네이티브 수준의 성능을 구현할 수 있게 해주는 새로운 저수준 언어입니다.

WebAssembly 초보자를 위한 가이드 1부에서는 WASM의 정의와 제약 사항을 살펴보며, 초심자의 눈높이에서 WASM을 소개했습니다. 또한 WebAssembly의 기능, 로드맵, 그리고 JavaScript와 WebAssembly의 협력 방식에 대해서도 논의했습니다.

이번 글에서는 WebAssembly의 목표, 핵심 개념, 그리고 다양한 활용 사례를 자세히 알아봄으로써 WebAssembly에 대한 이해를 넓혀보려 합니다. 또한, 몇 가지 흥미로운 프로젝트도 함께 살펴볼 것입니다.

자, 시작해 볼까요?

WebAssembly의 목표

WebAssembly의 핵심적인 부분을 이해하기 위해서는 우선 그 목표부터 살펴봐야 합니다. 주요 목표는 다음과 같습니다.

로드 시간과 크기 면에서 효율적인 이진 형식으로 컴파일하여 하드웨어 자원을 최대한 활용하는 것. 간단히 말해, WASM은 바이너리 형식의 추상 구문 트리(AST)를 사용하여 빠른 컴파일과 실행을 지원합니다. 이러한 접근 방식을 통해 WASM은 IoT, 웹, 모바일 등 다양한 환경에서 효율적으로 작동할 수 있습니다.
기존 웹 플랫폼을 바꾸거나 변경하는 것이 아니라, 웹 환경에 잘 통합되는 것을 목표로 합니다. 따라서 WebAssembly는 현재 및 과거의 웹 기술과 조화롭게 공존할 수 있습니다. JavaScript와 함께 실행되거나, JavaScript에서 동기적으로 호출되는 등 JavaScript와의 원활한 연동도 가능합니다.
권한 보안 정책 및 동일 출처 정책과 완벽하게 호환됩니다.
개발자가 브라우저 외 환경에서도 활용할 수 있도록 다양한 솔루션을 설계할 수 있게 합니다.
개발자들이 효율적으로 WebAssembly 소스 코드를 다룰 수 있도록 사람이 읽고 편집할 수 있는 텍스트 형식을 제공합니다.

WebAssembly의 핵심 개념

WebAssembly는 내부적으로 다음과 같은 단계를 거쳐 작동합니다.

먼저, 정적으로 타입이 정의된 언어로 코드를 작성합니다.
작성이 완료되면, 미리 컴파일된 WASM 모듈을 생성하고, 생성된 코드는 엔진 컴파일러에 입력됩니다.
이러한 단계를 통해 WASM은 구문 분석 과정을 건너뛰고 웹 브라우저에서 즉시 실행될 수 있게 됩니다.

웹 브라우저에서 실행되는 WebAssembly의 핵심 개념은 다음과 같습니다.

메모리: WebAssembly의 메모리는 저수준 메모리 접근 명령어를 통해 관리되고 기록됩니다. 기술적으로 이는 크기 조절이 가능한 ArrayBuffer이며, 메모리 바이트 배열을 포함합니다.
모듈: WebAssembly 모듈은 컴파일된 실행 가능한 컴퓨터 코드입니다. 상태가 없는 형태로 인해 웹 브라우저는 모듈을 컴파일하고 Windows와 작업자 간에 공유할 수 있습니다. 모듈은 함수, 테이블, 타입, 전역 변수, 메모리 등을 저장하고 선언할 뿐만 아니라, 가져오기 및 내보내기 기능도 제공합니다.
테이블: 테이블은 크기 조절이 가능한 타입 배열을 사용하여 모든 참조 및 함수를 저장합니다. 이를 통해 메모리에 원시 바이트를 저장할 필요가 없어집니다.
인스턴스: WASM에서 인스턴스는 런타임 동안 모든 상태가 연결된 모듈을 의미합니다. 이러한 상태에는 테이블, 메모리, 기타 가져온 값들이 포함됩니다.

WASM 핵심 개념

웹 개발자는 JavaScript API를 사용하여 모듈, 테이블, 인스턴스, 테이블 등을 호출하고 정의할 수 있습니다. 또한, JavaScript를 사용하여 JavaScript 함수 내에서 WASM 내보내기를 동기적으로 호출할 수 있습니다. 따라서 WASM을 활용하여 웹 브라우저에서 고성능 애플리케이션을 개발할 수 있으며, 이는 JavaScript와 WebAssembly가 훌륭한 조합을 이룬다는 것을 의미합니다.

WASM 객체

WebAssembly를 사용할 때에는 8가지의 WASM 객체를 기억해야 합니다. 이러한 객체는 다음과 같습니다.

WebAssembly.Global: 전역 변수의 인스턴스를 나타냅니다. WebAssembly.Module과 JavaScript 모두에서 접근할 수 있습니다.
WebAssembly.Module: 상태가 없는 컴파일된 WASM 코드를 포함합니다.
WebAssembly.Instance: WebAssembly.Module의 실행 가능한 상태 저장 인스턴스를 의미합니다.
WebAssembly.Table: 함수 참조를 저장하며, JavaScript 래퍼 역할을 합니다.
WebAssembly.CompileError: 유효성 검사 및 디코딩 과정에서 발생하는 모든 오류를 포함합니다.
WebAssembly.RuntimeError: 런타임 오류를 나열합니다.
WebAssembly.LinkError: 모듈 인스턴스화 과정에서 발생하는 오류를 포함합니다.

WASM의 활용 사례 및 프로젝트

WebAssembly가 웹 브라우저에서 네이티브 수준의 성능을 제공한다는 것을 이미 알고 있습니다. 하지만 실제로 어디에 사용될 수 있는지 제대로 이해하기 위해서는 다양한 활용 사례를 살펴볼 필요가 있습니다. 몇 가지 WASM 활용 사례를 아래에 소개합니다.

WebAssembly는 브라우저 내부뿐만 아니라 외부에서도 다양한 방식으로 활용될 수 있습니다. 예를 들어, 브라우저에서 WASM을 사용한다면 다음과 같은 작업들을 할 수 있습니다.

ffmpegwasm 프로젝트와 같은 비디오 또는 오디오 편집 작업.
웹 브라우저 기반의 고성능 비디오 게임.
과학적 시각화 및 시뮬레이션.
DOSBox, MAME 등과 같은 플랫폼 에뮬레이션/시뮬레이션.
암호화.
원격 데스크톱.
개발자 도구.

활용 사례

더 넓은 관점에서 WebAssembly의 강력한 활용 사례는 다음과 같습니다.

기본 하드웨어를 활용하여 더 빠른 코드를 작성할 수 있습니다.
클라이언트 측 압축을 수행할 수 있어 로딩 시간과 대역폭을 절약할 수 있습니다. 즉, 클라이언트의 CPU나 하드웨어를 사용하여 압축 및 해제를 하고, 서버 자원을 아낄 수 있습니다.
JavaScript 외에도 다른 프로그래밍 언어를 사용하여 웹용 코드를 작성할 수 있습니다. 예를 들어, Rust, C, C++ 등을 사용하여 웹 애플리케이션의 특정 부분에서 고성능 코드를 구현할 수 있습니다.

프로젝트

실제 사례로 넘어가서, 주목할 만한 몇 가지 프로젝트를 소개합니다.

Figma는 WebAssembly를 도입하여 웹 앱의 성능을 크게 개선했습니다. 앱 초기화, 전체 디자인 렌더링, 디자인 파일 다운로드 시 로딩 시간을 단축했습니다. 또한, 앞에서 언급했듯이 WebAssembly는 압축에도 효과적입니다. Figma는 WASM을 활용하여 다운로드 크기를 크게 줄였습니다.
Pyodide: Mozilla에서 개발한 Pyodide 프로젝트는 또 다른 흥미로운 WASM 프로젝트입니다. 이 프로젝트를 통해 과학자들은 NumPy, SciPy, Scikit-learn 등 Python 과학 스택을 WebAssembly로 컴파일하여 브라우저로 전송할 수 있습니다. 또한, Python과 JavaScript 간의 투명한 객체 변환을 제공하며, 개발자는 Python을 사용하여 웹 API를 사용할 수도 있습니다.
Brazor WebAssembly: Brazor WebAssembly 프레임워크를 사용하면 .NET을 사용하여 클라이언트 측에서 실행되는 단일 페이지 및 대화형 웹 앱을 개발할 수 있습니다. WebAssembly 기반의 .NET 런타임을 사용하여 이러한 앱을 브라우저에서 호스팅할 수 있으며, 개발자는 WebAssembly의 JavaScript API를 통해 .NET 코드에서 브라우저 기능을 활용할 수 있습니다.

출처: Figma

이 외에도 Binaryen, Cheerp, Forest, Grain 등 다양한 프로젝트에서 WebAssembly를 사용하고 있습니다.

마지막 생각들

WebAssembly는 초심자에게 다소 어려울 수 있습니다. 하지만 핵심 개념과 활용 사례를 충분히 이해한다면 그 강력한 기능을 분명히 파악할 수 있을 것입니다.

다양한 흥미로운 프로젝트들이 등장하고 있으므로, 특히 웹 개발 분야에 종사한다면 지금이 WebAssembly를 배우기에 가장 적절한 시기입니다. 브라우저 외부에서도 작동하는 WASM의 능력은 고성능 개발을 위한 탁월한 선택이 될 것입니다.

이 기사가 흥미로우셨나요? 그렇다면 다른 사람들과도 공유해 주세요!