Hello web assembly

오래전에 C/C++ 로 만든 모듈을 python 에서 가져다 사용할 수 있는 것을 보고 깜짝 놀랐던 기억이 있는데 이제는 웹에서도 그렇게 할 수 있다는 사실에 한번 더 깜짝 놀랐습니다. 사실 web assembly 기술은 새로울 것도 없지만 마침 사용할 일이 있어서 파내다 보니 이제서야 신세계를 맛보는중이겠습니다. 자 지금부터 web assembly의 첫 걸음을 떼고 hello world를 출력해봅시다.

Emscripten 설치

C/C++ 로 작성한 모듈을 웹 어셈블리로 컴파일 하기 위해서는 여러가지 툴이 논의 될 수 있겠지만 여기서는 Emscripten을 소개하고 사용해보기로 합니다. 우선 Emscripten SDK (emsdk) 를 GitHub 에서 다운로드 받도록 합니다.

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

다운로드 받은 디렉터리로 이동합니다.

cd emsdk

우리는 방금 소스코드를 clone 받은 상태라 아래 과정은 필요 없지만 혹시 이미 받아놓은게 있다면 최신 소스코드로 갱신하도록 합니다.

git pull

아래 명령어를 통해 SDK 툴을 다운로드 하고 설치까지 진행하도록 합시다.

./emsdk install latest

현재 사용자의 환경에서 SDK를 사용할 수 있도록 활성화시켜줍니다. SDK를 자주 사용해야 한다면 아래 두 라인을 .bash_profile에 추가하는 것도 나쁘지 않겠습니다. 물론 이때는 emsdk 의 절대경로를 줘야합니다. ( /hoem/user/path/to/emsdk 처럼 )

./emsdk activate latest
source ./emsdk_env.sh

hello.c

이제 Emscripten SDK가 준비되었으니 간단한 C코드를 작성해보도록 합니다.

#include <stdio.h>

int main(void)
{
  printf("Hello World\n");
  return 0;
}

emcc

GCC 등을 생각해봤을 때 emcc는 EMscripten C Compiler 의 약어가 아닐까 싶습니다. 아무튼 emcc를 통해 앞서 작성한 hello.c를 컴파일하도록 합시다.

$ emcc hello.c -o hello.html
cache:INFO: generating system library: libdlmalloc.bc... (this will be cached in "/Users/caley/.emscripten_cache/asmjs/libdlmalloc.bc" for subsequent builds)
cache:INFO:  - ok
cache:INFO: generating system library: libpthreads_stub.bc... (this will be cached in "/Users/caley/.emscripten_cache/asmjs/libpthreads_stub.bc" for subsequent builds)
cache:INFO:  - ok
cache:INFO: generating system library: libc.bc... (this will be cached in "/Users/caley/.emscripten_cache/asmjs/libc.bc" for subsequent builds)
cache:INFO:  - ok
cache:INFO: generating system library: libcompiler_rt.a... (this will be cached in "/Users/caley/.emscripten_cache/asmjs/libcompiler_rt.a" for subsequent builds)
cache:INFO:  - ok
cache:INFO: generating system library: libc-wasm.bc... (this will be cached in "/Users/caley/.emscripten_cache/asmjs/libc-wasm.bc" for subsequent builds)
cache:INFO:  - ok
cache:INFO: generating system asset: generated_struct_info.json... (this will be cached in "/Users/caley/.emscripten_cache/asmjs/generated_struct_info.json" for subsequent builds)
cache:INFO:  - ok

최초 컴파일에는 수초 이상 소요되며 그 이후로 hello.c가 변경되지 않는 이상 캐시를 그대로 사용하기 때문에 1초 이내로 컴파일이 완료됩니다. 컴파일이 완료되면 아래와 같이 목적어 파일로 지정한 hello.html 이외에 hello.js, hello.wasm 파일이 추가로 생성되어 있습니다. 안에 기본 골격을 보면 hello.html --> hello.js --> hello.wasm 을 순서대로 호출하는 구조를 갖고 있으며 웹 브라우저에서 방금 컴파일한 hello.html을 호출해보려면 아래와 같이 실행해주면 되겠습니다. ( 예제의 골격일뿐, 항상 그렇게 사용해야 하는것이 강제되지는 않습니다 )

emrun hello.html

단순하게 open hello.html처럼 그냥 html 파일 자체를 열게되면 스크립트 내부에서 사용하는 Download 로 인해 정상적인 출력을 보지 못하게됩니다. 일단 안에 구조는 천천히 살펴보고 emrun을 통해 예제를 실습하도록 합시다. 자, 축하합니다. 아래와 같이 Heloo World 가 출력되었기를 바랍니다. :)

---

본 글을 작성하는 테스트 환경에서는 emsdk를 위한 python, node, cmake 등의 패키지들이 이미 다 설치되어 있습니다. 혹시 설치에 어려움이 있으시다면 댓글 남겨주세요. 같이 고민하고 풀어나가보도록 합시다.