안녕하세요. 소소한개발자 후니대디입니다.
이번에는 WebAssembly(a.k.a WASM) 에 대해 빠르게 핵심만 알아보겠습니다.
정 의
C와 C++ 같은 프로그래밍 언어를 컴파일해 어느 브라우저에서나 빠르게 실행되는 바이너리 형식(low-level language)으로 바꾸는 기술입니다. 네이티브 언어 수준의 성능을 보여 줄 수 있는 기술이 WebAssembly의 목표입니다. → 즉, C,C++,Rust와 같은 로우 레벨의 언어의 퍼포먼스를 웹에서 내겠다는 것이 주요 목적이라고 볼 수 있죠.
좀 더 쉽게 풀어서 설명드리면, 기존에 여러분이 C++로 작업한 알고리즘이 있다고 가정해보죠. 음 적당히 큰 알고리즘 엔진이라고 합시다. 어느 날 회사에서 이 알고리즘을 이제 web에서 서비스해야겠다고 공표합니다. 크게 보면 방법은 두 가지가 있겠죠.
1. JS로 다시 알고리즘을 프로그래밍하고 브라우저에서 실행하는 것입니다.
→ 이 경우 다시 알고리즘을 짜야하는 수고와, JS와 C++의 퍼포먼스 차이가 발생합니다.
2. 가장 일반적인 서버에서 알고리즘을 돌리고 결과값을 받아오는 것입니다.
→ 만일 알고리즘이 지속적으로 값을 확인해야 하는 것이라면 잦은 서버와의 통신이 발생하게 되고 이는 곧 비용이 증가하게 됩니다.
WebAssembly가 등장하고서는 3번째 방법이 생겨났습니다. 바로 이 WebAssembly를 활용하는 것이지요.
기존에 짠 C++알고리즘을 그대로 이용하고 .wasm파일(webassembly로 컴파일된 파일을 말합니다.)로 컴파일만 시키면 새로 알고리즘을 짤 필요도 없습니다. 브라우저에서 실행시킬 수 있습니다. 가장 중요한 native code만큼의 속도를 자랑합니다.(이 부분은 약간의 논란이 있습니다. 밑에서 다시 설명하겠습니다.)
그럼 이 WASM(이하 webassembly를 wasm이라고 표현하겠습니다.)의 특징을 살펴보겠습니다.
특 징
제가 사용해 본 경험 위주로 특징을 말씀드리겠습니다.
- WASM은 개발자가 배워야 하는 또 하나의 언어는 아닙니다. LLVM(예로 emscripten) 과 같은 컴파일러로 C언어로 작성된 코드를 WASM으로 cross-compile 하는 느낌으로 생각하시면 됩니다 → 이는 저처럼 C++등의 저수준언어 개발자가 웹으로 개발한 알고리즘을 구현할 때 효과적이라고 판단되는 부분입니다.(welcome WASM !!)
- Standalone으로 동작 가능합니다. 즉, serverless 도 가능하고, 플러그인 설치나 실행시키기 위한 별도의 software 설치 필요 없습니다. 이는 유저 입장에서 매우 큰 편의성이죠.
- 현재 웹 표준에 공식적으로 등록되어 있습니다. (2017yr → HTML, CSS, JS, WASM) 물론 아직 커뮤니티가 작아서 레퍼런스가 적습니다.
- JS와 비교하는 글들이 많은데 자세한 JS와 WASM의 비교는 아래 동영상을 참고하시면 좋습니다. 결과적으로 저도 테스트해본 결과 JS보다는 빠릅니다.
실제 사례
그럼 실제로 WASM이 product에 사용되는지 궁금하실 겁니다. 실제로 많이 사용되고 있습니다. 사용은 되는데 JS코드 전체를 wasm으로 변경하는 것은 아닙니다. 나중에 실습 편을 올리게 되면 말씀드리겠지만, wasm으로 module(function)을 구현할 수 있는데 JS에서 퍼포먼스가 필요한 부분만 이 wasm으로 구현된 module을 가져다 쓰는 식으로 많이 활용되고 있습니다.
디자인 툴로 유명한 피그마입니다. 피크마 tech 공식 blog에서도 wasm으로 인한 속도 절감 이야기를 하고 있습니다.
또 다른 유명한 예로는 AutoCAD입니다. 아시다시피 autoCAD는 기구설계 툴로 매우 유명합니다. AutoCAD가 최근 웹으로 서비스를 제공하기 시작했습니다. 당연하게도 core Algorithm은 C로 작성되어 있을 겁니다. 이 엄청난 C 코드들을 AutoCAD에서는 wasm을 통해 또다시 웹 언어로 알고리즘을 구현하는 시간낭비를 줄일 수 있다고 말했습니다.
이외에도 카카오 에디터, 구글의 이미지 변환 사이트 등 많은 유명한 사이트에서도 WASM을 사용하고 있습니다.
BenchMark
그럼 실제로 WASM이 공식 Docs에서 주장하는 대로 navtive language만큼의 성능이 나오는지 살펴보겠습니다. 아래는 이를 비교한 여러 그래프입니다.
보시면 아시겠지만, 어떤 건 오히려 JS가 WASM보다 더 빠른 경우도 있는 것 같습니다. 아마도 TEST환경에 따라 성능에 영향이 있는 것 같다고 추측됩니다. 결과적으론 native정도의 속도는 여러 요인 때문에 그 정도의 수준을 달성하기는 힘든 것 같습니다. 하지만, WASM커뮤니티가 생기도 개발이 시작된지는 얼마 되지 않았고 지금도 업데이트 버전들이 나오고 있습니다. 공식적으로도 아직도 최적화할 것들이 많이 남아있어서, 속도를 더 끌어올릴 수 있다고 말하고 있습니다. 저도 실제로 sensor fusion 하는 알고리즘을 wasm으로 짜서 브라우저에서 돌려보았는데요. 나쁘지 않았습니다. 기회가 된다면 제가 테스트한 실험 결과도 올려보도록 하겠습니다.
왜 빠른가?
그렇다면 다음으로 왜 빠른가를 알아보죠. 아래 그림은 유튜브 코딩애플님 영상에서 따온 그림입니다.
첫 번째 그림은 JS 파일이 실행될 때의 pipeline이고 두 번째 그림은 wasm파일이 실행될 때의 pipeline입니다. wasm파일이 가지고 있는 두 가지 특징이 있는대요.
- pipeline이 간결합니다. JS경우 코드를 파싱 하고 bytecode로 바꾸고 optimize하고 실행하는 단계를 거치지만, wasm은 파싱하고 bytecode하는 단계를 거치지 않습니다. 왜냐? 사실 wasm파일 자체가 bytecode입니다. 즉, Assembly언어와 같은 형식으로 "FF12 88AB" 이런 식으로 구성되어있죠. 그렇기 때문에 pipeline이 간결해지면서 얻는 속도의 이점이 있습니다.
- Optimization입니다. WASM의 문서에 따르면 Optimization의 성능을 엄청나게 끌어올렸다고 합니다. 실제로 저도 C++에서 emscripten( C++ 코드를 wasm으로 컴파일해주는 일종의 크로스 컴파일러? 툴킷이라고 생각하셔도 무방합니다.)으로 컴파일할 때 optimization 옵션을 넣지 않으면 사실상 JS보다 속도가 빠르지 않았습니다. 즉, Optimization이 빠른 속도의 두 번째 인자라 할 수 있습니다.
Result
제가 생각하는 결론입니다. 기존 저수준 언어로 개발하는 개발자에게는 wasm이라는 녀석이 매우 매력적인 것 같습니다. 실제로 저도 사용해보니 속도측면에서 매우 이점이 있고 이전에 짰던 C++ 코드도 재사용하는 극강의 효율성을 발휘하죠.
다만, 예상하셨다시피 크로스 컴파일(?) 이 어렵습니다. 예컨대 emscripten이라는 컴파일러는 standard c, c++ LIB만 지원합니다. 그렇기 때문에 opencv를 사용하였다고 하면 그 opencv도 emscripten으로 컴파일하여 LIB화 해야 하는 거죠. 시간과 노력이 요구됩니다.
아마 커뮤니티가 더 커지고 시간이 지나면 큰 형님들께서 유명한 LIB들은 컴파일하는 CMake파일이든지 .wasm으로 제공하든지 js로 제공하지 않을까 합니다.
이상 후니대디의 WASM 알아보기 이론 편을 마치겠습니다.
