2018년 8월경 우연히 Chrome Dev Summit 2017 발표를 시청하면서 웹 브라우저의 새로운 기능이 추가되고 있는 상황을 알게 되었는데 그 당시에는 웹 브라우저에 대한 새로운 기술 프로젝트들이 시도되고 있다는 느낌과 흥미로운 주제 정도로만 느껴졌었습니다. 그러나 그로부터 2년이 지난 지금 WebAssembly는 점점 웹에서의 영향력이 커지게 되고 있는 것을 보고 WebAssembly에 대해 좀 더 자세히 알아보게 되었습니다.

WebAssembly 탄생 배경

WebAssembly(약칭: WA, Wasm)가 탄생하게 된 배경은 과거 Web 기반 어플리케이션의 한계 즉 브라우저상에서 동작하는 프로그램들의 성능 때문이었습니다. 그래서 많은 사람들은 Web 브라우저상에서 네이티브 환경처럼 동작하는 프로그램 성능을 구현하기 위해 많은 노력을 하기 시작하였는데 대표적인 프로젝트가 Mozilla asm.js 그리고 Google Native Client(PNaCI/NaCI)가 대표적인 프로젝트입니다.

2017년 2월 28일, 4개의 주요 브라우저 업체들은 WebAssembly의 MVP(Minimum Viable Product)가 완료되었다는 합의에 이르렀고, 이는 브라우저에서 안정적인 버전을 지원하기 시작했으며, 그 후 2019년 12월, W3C는 HTML, CSS, Javascript 외 WebAssembly을 4번째 언어로 공식 권고하였고 이로써 Web 환경에 큰 변화가 시작되었습니다.

WebAssembly 란?

Wasm(WebAssembly)은 새로운 유형의 바이너리 코드이며, Wast(WebAssembly text format) 또는 C, C++, Java, RUST, Golang 등과 같이 다양한 언어로 작성된 것을 컴파일 과정을 통해 Wasm 바이너리 코드를 생성하여 이를 브라우저에서 실행할 수 있도록 하는 새로운 유형의 코드 입니다

이로써 Wasm은 웹 브라우저에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행할 수 있는 길을 제공 하였습니다. 그 외에도 W3C 웹어셈블리 커뮤니티 그룹에서는 Wasm에 대해 다음과 같은 목표를 가지고 있는데 첫번째는 다양한 플랫폼에서 사용할 수 있고 두번째는 디버깅이 가능해야 하며 세번째는 보안성을 유지 해야고 마지막 네번째는 이전 버전과의 호환성을 유지하도록 하는 목표를 가지고 있습니다.

1. C/C++로 작성된 코드를 Emscripten(clang + LLVM) complie toolchain 컴파일 요청

2. Emscripten이 컴파일 결과를 받아 .wasm 바이너리로 변환 시켜줍니다.

$emcc hello_sinsiway.c -s WASM=1 -o hello_sinsiway.wsam

3. Wasm는 그 자체로 DOM에 접근할 수가 없으므로, 자바스크립트의 접착제 코드[fetch(), Webassembly.compile(),WebAssebly.Instance()]와 HTML에 연결해주는 과정을 거치면 브라우저에서 실행 가능하게 됩니다.

현재 Wasm는 이식성과 관련해 다양한 브라우 및 플랫폼에서 지원하고 있으며, 조금 더 시간이 지나면 호환성에 대한 부분도 많이 개선될 것으로 보입니다.

WebAssembly 적용 사례

현재 Wasm 적용한 프로젝트는 100여 개가 있고, 현재도 새로운 프로젝트들이 생겨나고 있습니다. 그중 대표적인 사례로는 AUTODESK로 AUTODESK는 AutoCAD 소프트웨어를 웹 브라우저에서도 사용할 수 있게 하려고 Flash를 사용하기도 했고, HTML5와 Javascript의 조합을 사용하기도 했습니다.

그러나 기능 및 성능에 제약이 있고 코드를 다시 재작성해야 하는 문제가 발생하게 되었는데 WebAssembly를 사용하면서 35년 전에 작성된 AutoCAD Core C++ Code를 재사용하여 AutoCAD 웹 앱으로 성공적으로 전환하였습니다.

AutoCAD 웹 앱 구조(Build the future of the web with WebAssembly and more (Google I/O '18))

AutoCAD Web App

MS Blazor는 WebAssembly를 이용하여 클라이언트 웹 개발에 Javascript 대신 C#코드를 사용하여 웹 UI를 빌드할 수 있도록 하였으며 .NET 라이브러리를 그대로 활용할 수 있게 하여 .NET개발자로 하여금 플랫폼 확장성을 높일 수 있게 하였습니다.

WebAssembly는 C++,C#, Java, Go, Rust 언어를 사용하는 웹 어플리케이션을 개발해야 하는 상황이라면 혹은 기존에 작성된 C 라이브러리를 웹에 적용할 때도 효과적인 입니다. 또한, 응용 프로그램 배포가 브라우저로 제한되고 동시에 가능한 모든 운영체제를 포함하는 것 역시 큰 장점입니다.

글. 프리세일즈·마케팅팀 | 이경진