WebAssembly란? - 웹 어셈블리 소개, 웹 어샘블리의 미래. 그리고Emscripten

웹 어셈블리란?

웹 어셈블리 공식 페이지(webassembly.org)에 정의되어있는 내용은 아래와 같다.

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable compilation target for programming languages, enabling deployment on the web for client and server applications.

 웹 어셈블리(=Wasm) : 스택 기반 가상머신을 위한 바이너리 명령 형식.

 "웹 스택 기반 가상머신"을 기반으로 한다는 말은 다양한 리얼머신으로 쉽게 컴파일하고 portable하게 이식될 수 있도록 설계되었다는 맥락으로 이해할 수 있다. 즉, 어떤 언어로든 코드를 작성하고 이를 WebAssembly로 컴파일하면, 명령어 셋은 바이너리 형식(보통 .wasm 파일)으로 저장이 된다. 브라우저는 해당 .wasm파일을 리얼 머신 코드로 바꿀 수 있다.

 이제까지의 웹브라우저의 가상머신은 javascript를 불러오는 방식이였으나, WebAssembly를 불러오는 것을 가능하게 함을 통해 저수준 언어를 실행가능하도록 해 네이티브에 가까운 성능을 제공하고, 저수준의 메모리 모델을 가진 언어의 컴파일 타겟 프로그램을 웹에서 돌릴 수 있게 해준다. 브라우저는 해당 .wasm파일을 리얼 머신 코드로 바꾸고 이를 실행한다.

 웹어셈블리는 웹 플랫폼을 아래 두가지 측면으로 볼 수 있다.

1. 자바스크립트와 같은 코드로 이루어진 앱이 실행되는 가상머신.

2. 웹 브라우저나 하드웨어의 기능을 호출해서 웹앱이 의도한 작업할 수 있도록 하는 Web API의 집합(DOM, CSSOM, WebGL, IndexedDB, Web Audio API 등)

여태 웹 플랫폼의 1번 측면에서 WebAssembly를 말했다면 2번의 측면에서는 "웹어셈블리 자바스크립트 API"를 말해야 한다. 웹어셈블리는 필요하면 다른 형식의 코드끼리 서로를 호출할 수 있다는 맥락으로, 웹어셈블리 코드를 자바스크립트 함수로 감싸 호출 가능하도록 할 수 있고, 웹어셈블리에서도 동기적으로 자바스크립트 함수를 호출할 수 있다. 이는 "웹어셈블리 자바스크립트 API"를 익스포트하여 가능하게 한다. 

https://www.youtube.com/watch?v=njt-Qzw0mVY 구글에서 발표한 웹어셈블리 소개 동영상에서는, AutoCAD도 웹에서 돌릴 수 있고, 보편적 UI 프레임워크인 QT, 게임엔진 Unity, Unreal에서도 웹어셈블리를 제공한다고 한다.

 

Emscripten

이를 모두 가능하게 한 역할에는 Emscripten이라 한다.  C 또는 C++ 코드를 웹어셈블리 바이트 코드로 컴파일할 수 있도록 한다. Emscripten은 본디 c/c++를 asm.js로 변환하기 위해 만들어진 툴이였으나, 현재는 웹 어셈블리 모듈에 쓰는 코드를 컴파일하는 데에도 사용하고 있다. Emscripten 컴파일러는 C++의 GCC와 유사한 Clang을 프론트엔드 컴파일러로 사용하여 C 또는 C++ 코드를 LLVM IR(Intermediate Representation)로 변환한다. 그런 다음 Emscripten은 LLVM IR을 사용하여 바이너리 바이트 코드로 변환한다. 이는 위에서 언급한 웹 어셈블리를 지원하는 브라우저가 이해하는 가상 명령 집합과 같다.

Wasm module generation with the EMSDK