몽상가

WebAssembly에 대하여.. 

WebAssembly는 최근에 많이 회자되는 웹 기술중 하나이다. 웹은 개발의 편의성과 호환성으로 사실상 대표적인 네트워크 기반 응용 플랫폼이 되었다고 해도 과언이 아니지만, 스크립트 기반의 런타임(HTML, JavaScript)의 성능적 한계로 게임과 같은 성능이 필요한 응용 프로그램에서는 잘 사용되지 않는 플랫폼이다. 물론 웹으로 만든 게임 프로그램중에 훌륭한 것들도 많이 있지만 특정 plugin이 없이 실시간성 성능이 필요한 게임들은 돌리기가 버거운 것은 사실이다. (당연히 plugin사용은 지양하는게 좋다.)

 WebAssembly는 Low-Level 언어들(C++)로 개발한 어플리케이션을 Binary Format 형태로 웹브라우저에서 실행하는 기술이라고 할 수 있다. JavaScript보다는 당연히 성능이 좋은 것으로 알려져 있고 웹상에서 퀘이크3등을 돌린 사람도 있다. 거의 Native 수준의 성능(near-native performacne)를 제공하는 것이 목표라고 한다.

  5G 네트워크 상용화와 더불어 게임의 스트리밍 플랫폼이 최근에 각광을 받기 시작하면서 구글도 스타디아 같은 스트리밍 응용 플랫폼을 발표하기도 하였다. 이런 트랜드로 보았을 때, 바이너리를 스트림 형태로 전송하고 브라우저에서 Native하게 실행될수 있는 WebAssembly에 대해서도 향후 많은 관심이 모아질 것으로 예상된다.

 Web+assembly라는 용어 자체도 매우 가슴 설레는 일이기도 하지만, W3C 웹어셈플리 커뮤니티 그룹에서 웹 표준으로 개발되고 있다는 것은 그 가능성에 기대해 볼만 하다.

다음은 모질라 사이트에서 언급하는 웹어셈블리의 목표이다.

1.  빠르고 효과적이고 이식성이 좋을 것 - 웹 어셈플리 코드는 일반적인 하드웨어들이 제공하는 기능을 활용하여 빠르고, 효과적이고, 이식성이 좋을 것 — 웹어셈블리 코드는 일반적인 하드웨어들이 제공하는 기능을 활용하여 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있습니다.
2. 읽기 쉽고 디버깅이 가능할 것 — 웹어셈블리는 저수준 어셈블리 언어지만, 손으로 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고있습니다 (아직 스펙이 다듬어지는 중이긴 합니다).
3. 안전함을 유지할 것 — 웹어셈블리는 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되었습니다. 웹상의 다른 코드와 마찬가지로, 웹어셈블리 코드도 브라우저의 동일한 출처(same-origin)와 권한정책을 강제할 것입니다.
4. 웹을 망가뜨리지 않을 것 — 웹어셈블리는 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계되었습니다.

특이한 것은 브라우저 또는 JavaScript VM이 없이도 동작이 되도록 한다고 한다. WebAssembly 사이트는 다음과 같다.

https://webassembly.org/

Concept이나 관련 문서들은 다음의 모질라 개발자 네트워크에서 찾아볼 수 있다.

https://developer.mozilla.org/en-US/docs/WebAssembly

WebAssembly 개발하기

현재 웹어셈플리는 다음과 같이 개발이 가능하다고 한다.

1. 엠스크림튼(Emscripten)으로 C/C++ 애플리케이션 포팅하기
2. 어셈블리 수준에서 바로 웹 어셈블리 작성하거나 생성하기
3. Rust 응용 프로그램 작성하고 webAssembly를 출력으로 지정하기

1.번의 Emscripten에 대해서 알아보자. Emscripten은 다음의 URL에서 설명이 되어 있다. (이후 본 포스팅 내용은 Ecmscripten의 내용을 자의적으로 추린 것입니다.)

https://emscripten.org/index.html

Ecmscripten은 C/C++ 코드를 JavaScript로 변환시켜주는 툴인데 정확히는 LLVM bytecode를 JavaScript로 변환시켜주는 것이다. 다음 그림이 잘 설명해 주는듯 하다. (https://emscripten.org/docs/introducing_emscripten/about_emscripten.html 에서 발췌)

emscripten을 설치해 보자. (ubuntu 18.04 desktop에서 실치하였다.)

git clone https://github.com/emscripten-core/emsdk.git 

cd emsdk

git pull

./emsdk install latest

./emsdk activate latest

source ./emsdk_env.sh

다음의 hello_webassembly.c라는 C/C++ 예제를 JavaScript로 컴파일 해보도록 하겠다.

컴파일은 emcc(C++은 em++) 로 컴파일 하면 된다

emcc hello_webassembly.c

이러면 a.out.js 및 a.out.wasm 두 파일이 생성된다. 

a.out.wasm 은 컴파일 된 코드이며 a.out.js 는 a.out.wasm를 로드하고 실행시켜 주는 코드이다. node.js 로 다음과 같이 실행시킬 수 있다.

node a.out.js

만약 wasm 파일만 단독으로 만들고 싶다면 emcc -o [파일명].wasm [소스명].c 와 같이 명령을 실행해 주면된다. 

HTML로더 샘플은 다음과 같이 생성 가능하다. 

emcc -o a.html ./hello_webassembly.c

이 명령 이후 a.html, a.js , a.wasm 이 생성된다. 웹서버에 올리고 WebServer URL/a.html 로 실행하게 되면 다음과 같이 표시되는 것을 볼 수 있다.

emscripten 의 tutorial 에는 SDL 기반 graphics를 표시하는 것과 파일을 이용하는 것도 나와 있으니 참고하면 될것 같다.

https://emscripten.org/docs/getting_started/Tutorial.html#tutorial