웹어셈블리란?

웹 어셈블리?

WebAssembly는 JavaScript의 효율적인 대안으로 설계되었으며

1. 성능

2. 이식성

3. 상호 운용성

이라는 3가지의 큰 특징을 가진다.

WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이다.

어셈블리라 해서 언어라고 생각할 수 있지만 언어는 아니다.

 

WebAssembly는 직접 코드를 작성해서 만드는 것이 아니라 C, C++, RUST 등의 소스 언어를 컴파일하여 생성하는 바이너리코드이다.

출처 : https://www.researchgate.net/figure/WebAssembly-data-flow-architecture_fig1_373229823

웹어셈블리는 웹 플랫폼에 큰 영향을 미치는데, 이전에는 불가능했던 클라이언트 앱을 웹에서 실행하여 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 웹에서 실행할 수 있는 방법을 제공한다.

쉽게 말해 c언어로 작성한 로직을 웹에서도 실행할 수 있다!

이러한 웹 어셈블리로 컴파일 하는 방식에는

웹 어셈블리로 컴파일 하는 방법

1. Emscripten
2. LLVM
3. Binaryen
4. wasi-sdk

등등의 방법이 있다.

자바스크립트 보다 빠른 이유?

출처 : https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/

자바스크립트는 실행까지 위의 과정을 거쳐 실행된다.

일단 바이너리 코드가 아니기에 컴파일 과정과 최적화 과정 + 가비지 컬렉션까지 더해져 실행되게 된다.

하지만 이에 비해 웹 어셈블리는 이미 컴파일이 되어 있고 바이너리 코드 이므로 속도가 빠를 수 밖에 없다.

그렇다면 이러한 빠른 속도의 웹 어셈블리를 웹이 아닌 다른 환경에서 쓰고 싶다는 생각이 들지 않는가?

그렇게 해서 등장하게 된 것이 바로 WASI(WebAssembly System Interface)이다!

 

 

웹 어셈블리를 사용한 예시

 

https://squoosh.app/

Squoosh

 

위 사이트는 구글 크롬 연구소에서 개발한 이미지 용량 감소 서비스를 제공하는 사이트이다.

위 사이트의 소스코드는 깃허브에 공개되어 있는데,

https://github.com/GoogleChromeLabs/squoosh

GitHub - GoogleChromeLabs/squoosh: Make images smaller using best-in-class codecs, right in the browser.

이미지 용량을 줄이는 로직을 C++로 구현한 뒤, c++ 파일을 wasm파일로 컴파일하여 서비스를 제공한다.

(코드를 분석해 알아낸 내용이다..)

이런식으로 C++코드를 wasm로 컴파일하여 웹서비스에도 사용하는 등 다양한 방식으로 코드를 컴파일하여 활용할 수 있다.