[JavaScript] # WebAssembly, 웹 어셈블리

웹 어셈블리에 대한 관심

 

먼저 웹 어셈블리가 뭔지 알아보기 전에 얼마나 브라우저사 또는 IT관련 회사들에서 웹 어셈블리에 관심을 가지고 있는지 찾아봤습니다.

 

 

 

 

기사 제목들만 봐도 많은 관심이 있고, 현재도 계속 진행중인것을 알수 있습니다.

 

 

 

그럼 웹 어셈블리가 뭔지 알아보도록 하겠습니다.

 

웹 어셈블리란?

일단 이름에서도 알수 있듯이 Web과 Assembly에 합성어로 WebAssembly로 불립니다.

 

웹 브라우저에서 실행 할수 있는 코드 형식이고 성능적인 부분에서 상당한 이점을 가지고 있다고 합니다.

직접 코드를 작성하는 것이 아니고 C/C++,Rust(모질라 리서치에서 개발한 인터넷에서 사용되는 서버와 클라이언트에 적합한 프로그래밍 언어, C/C++과 유사한 모양) 같은 로우레벨 언어를 컴파일 타겟이 되어 컴파일된다고 생각하면됩니다.

 

이 웹 어셈블리는 상당히 큰 의의를 갖는다고 하고요.

향후 Java, C, C++ 등등 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 웹에서 돌릴 수 있는 길을 제공하고, 프로그램, 앱 환경, 즉 네이티브 환경에서 동작하던 작업들을 웹에서 할수 있게 됩니다.

 

 

심지어 웹어셈블리를 작성하는 방법 또한 몰라도 되며, 임포트하여 자바스크립트에서 불릴 수 있도록 제공되고 있습니다.

 

 

웹 어셈블리는 구글, 마이크로소프트, 애플, 모질라가 참여하여 웹 어셈블리 커퓨니티 그룹이 웹 성능을 향상시키지 위해 2015년부터 개발하고 있는 표준 포맷으로 2017년 3월부터 도입되어 현재 지원되고 있습니다.

 

메이저 브라우저 엔진 개발회사들에서 참여하고 있어 큰 의미가 있어 보입니다.

 

 

 

현재 엣지, 파이어폭스, 크롬, 사파리에서 지원되고 있으며,  모바일에서도 ios Safari, Android Chrome 에서도 지원되고 있습니다.

웹 어셈블리 등장 배경

플러그인 지원 중단

 

웹 어셈블리가 나오게 된 배경을 보면 2014년에 발표되어 점차적으로 크롬, 파이어폭스 브라우저에서 플러그인 지원을 중단하였습니다. 보안적인 이슈와 복잡한 코드 등에 이슈로 중단하게 되었죠

 

자바 스크립트의 한계

그리고 웹브라우저의 VM은 오직 자바스크립트만 불러올 수 있었습니다. 오늘날의 웹에서 사람들이 겪는 대부분의 문제를 해결하기에 자바스크립트가 충분히 잘 작동했다고 볼 수 있기는 합니다. 하지만 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례(웹어셈블리 사용례 참고)에서는 성능상의 문제에 부딪혀 왔습니다.

 

 

---

---

웹 어셈블리의 발전 배경

 

 

 

웹 어셈블리를 설명하게 되면서 같이 설명되는 것들이 있는대요

먼저 구글 웹 툴킷은 자바스크립트 프론트엔드 애플리케이션을 먼저 자바로 만들고 자바스크립트로 변환/관리할 수 있게 하는 오픈 소스 도구 집합입니다.

 

성능적인 부분을 향상하기 위함을 목표로 하진 않았지만, 

웹 어셈블리를 설명하는 많은 곳에서 언급되어 있고 이러한 일련의 프로젝트들의 기술들이 축적되어 웹 어셈블리 개발의 밑거름이 되었다고 봅니다.

 

또하나 무조건 언급되고 있는게 asm.js 입니다.

asmjs란 2013년에 모질라에서 발표하였습니다. 새로운 언어나 코드가 아니고, c나 c++코드를 javascript로 변환하여 웹으로 포팅하는 자바스크립트의 서브셋이라고 설명되어 있고,

Emscripten와 같은 컴파일 라이브러리를 이용합니다.

 

jQuery 창시자인 존 레식도 트위터에서 모질라에 몸담고 있었기 때문이라고 볼수도 있지만, 자바스크립트 분야에서 가장 흥미로운 일중에 하나라고 Asm.js를 언급하였었다고 합니다.

 

 

웹 어셈블리의 목표

웹 어셈블리의 목표는 빠르고, 이식성이 좋도록 하여 여러종유의 플랫폼 위에서 거의 네이티브에 가까운속도로 실행될 수 있도록 하는 것

읽기 쉽고, 디버깅이 가능하도록 하는 것, 보안적으로도 안전함을 유지하도록 하는 것과 하위호환성을 관리 할수 있도록 설계하여 웹을 망가뜨리지 않는 것이라고 합니다.

 

웹 어셈블리의 컨셉

 

 

웹 어셈블리는 모듈, 메모리, 테이블, 인스턴스라는 핵심 컨셉을 가지고 개발되어 있으며 그에 대한 설명입니다.

 

자바스크립트 API에 반영되어 웹 어셈블리 모듈, 메모리, 테이블, 인스턴스를 생성할 수 있는 방법을 제공합니다. 

자바스크립트 코드에서 웹어셈블리 인스턴스에 접근하면 일반 자바스크립트 함수의 형태로 노출시킨 익스포트 함수를 동기적으로 호출할 수 있습니다. 뒤에서 실제로 해보도록 하겠습니다.

 

웹어셈블리 코드 또한, 웹어셈블리 인스턴스의 임포트 형식으로 넘겨받은 임의의 자바스크립트 함수를 동기적으로 호출할 수 있습니다.

 

 

웹 어셈블리 사용 방법

 

 

 

 

먼저 C코드를 작성하게 되고, EmScripten 툴을 통해 컴파일 하여 wasm 파일을 가져오게 됩니다.

그 후 glue code라고 불리는 javascript문법(?)을 통해 wasm파일을 로드하여 사용하면 됩니다.

 

속도 비교

 

실행 속도는 다음과 같다고 합니다. 

ASM.JS를 웹 어셈블리의 속도와 비슷하다고 생각되어 첨부하였습니다.

이 표는 3D에서 피부를 입히는 스키닝, zlib 압축 라이브러리, 물리 엔진인 불릿을 파이어폭스, 크롬, asm.js Native로 돌렸을 때 퍼포먼스를 표로 나타낸 것입니다.

네이티브 코드를 1로 보았을 때 비교 입니다.

 

마찬가지로 보시면 Native보다는 아직 성능적으로 부족하나 기존 자바스크립트보다는 월등한 속도인걸 알수 있으며 asm.js는 파이어폭스에서 시작한 프로젝트인 만큼 파이어폭스에 특화된걸 볼 수 있습니다.

 

웹 어셈블리 데모

Sobel은 윤곽선을 추출하는 알고리즘입니다. 웹 어셈블리로 데모를 제공하(WASMSobel)여 javascript와 속도를 비교 할수 있도록 제공

 

 

 

 

게임에 적용된 웹 어셈블리 데모(데모 사이트)

 

openCV를 웹 어셈블리로 제공(데모 사이트)

 

 

 

얼굴 인식 데모 사이트

 

참고

• https://caniuse.com/
• https://developer.mozilla.org/ko/docs/WebAssembly/Concepts
• https://github.com/mdn/webassembly-examples/tree/master/wasm-sobel
• http://webassembly.org
• https://www.websightjs.com/
• https://www.devpools.kr/2017/01/21/webassembly-binaryen-emscripten/
• https://blog.outsider.ne.kr/927