이번 포스팅에서는 WebAssembly에 대해 알아보도록 하겠습니다
WebAssembly란?
MDN 문서에 따르면, “최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드” 라고 소개하고 있습니다.
웹어셈블리는 기존에 사용하던 C, C++, Rust 같은 low-level 언어를 컴파일하여 생성하게 됩니다.
즉, 사용하기 위해 새로운 언어를 익히는 개념이 아니라, 기존에 사용하던 언어를 웹에 올려서 사용할 수 있는 코드 정도로 이해하시면 됩니다.
그렇다면, 단순히 코드를 재사용할 수 있다 라는 장점만 있을까요? 이 점도 충분히 사용하기에 매력적인 이유지만, 가장 매력적인 부분은 아닙니다.
웹어셈블리의 가장 매력적인 점은 Native에 근접한 성능에 있습니다
왜 빠를까?
브라우저에서 웹어셈블리는 자바스크립트와는 다른 방식으로 처리되기 때문에 성능의 차이가 발생하게 됩니다.
아래 그림으로 처리 방식의 차이를 살펴보겠습니다.
자바스크립트의 처리 과정
웹어셈블리의 처리 과정
각 과정들을 살펴보며 어떤 차이가 있는지 알아보겠습니다
Parsing
구문해석 단계입니다. 자바스크립트 파일이 브라우저에 전달되면, 해당 파일은 *추상 구문 트리(AST: Abstract Syntax Tree)로 변환이 되고, AST로부터 바이트 코드를 생성합니다. 반면 웹어셈블리는 생성된 시점에 이미 바이트 코드의 형태이므로 앞의 변환 과정 없이 해석(decode)과 검증만 거치면 됩니다.
추상 구문 트리(Abstract Syntax Tree) - 컴파일러에서 널리 사용되는 자료구조로, 프로그램의 중간 표현의 역할을 합니다
Compile & Optimize
컴파일 및 최적화 작업으로, 자바스크립트와 웹어셈블리 모두 거치는 과정입니다. 다만 웹어셈블리의 경우, 웹어셈블리 생성 시 컴파일러에서 최적화를 진행할 수 있기 때문에 브라우저에 올라갈 때 최적화에 들어가는 비용이 자바스크립트에 비해 적습니다.
Re-optimize
재-최적화 과정으로, 자바스크립트 처리 과정에만 있는 절차이며, 모호한 타입 등 여러 이유로 인해 JIT(Just-In-Time) 컴파일러를 사용하는 과정에서 기존 최적화를 철회하고 다시 최적화를 하는 과정입니다. 웹어셈블리의 경우 타입 등이 명시적이기 때문에 재-최적화를 거칠 필요가 없다고 합니다.
Execute
해석 및 컴파일, 최적화 과정을 거친 파일을 실행하는 절차입니다. 자바스크립트의 경우 빠르게 실행하기 위해서는 JIT을 자세히 알고, 이에 친화적인 패턴으로 코드를 작성해야 합니다. 그러나 실제로 컴파일러의 동작을 알기란 쉽지 않고, 모든 브라우저에서 동일하게 적용되지 않는 문제가 있습니다. 웹어셈블리의 경우 컴파일러를 위해 최적화가 되어 있기 때문에 일반적으로 더 나은 성능을 기대할 수 있습니다.
Garbage collection
가비지 컬렉션이란, 가비지 컬렉터(Garbage collector)가 더 이상 필요없는/사용하지 않는 오래된 변수들을 메모리에서 제거하는 작업을 자동으로 수행하는 것을 의미합니다. 개발자 입장에서는 할당한 메모리의 해제를 걱정하지 않고 코드를 작성할 수 있다는 이점이 있지만, 직접 가비지 컬렉터를 제어할 수 없기 때문에 순간적인 메모리 오버플로나, 해제되어야 하는데 유지되는 메모리 누수 등의 문제가 나타날 수 있습니다. 웹어셈블리는 아직 가비지 컬렉션을 지원하지 않는 언어로 작성을 하기 때문에 이러한 문제에서 자유롭습니다.
이러한 차이들에 의해서 일반적으로 웹어셈블리가 자바스크립트에 비해 좋은 성능을 낸다고 합니다. 때문에 복잡한 연산이 들어가는 게임이나 머신러닝 코드도 웹으로 구현이 가능하다고 합니다.
그렇다면 웹어셈블리만 사용하면 되지, 왜 자바스크립트는 여전히 쓰일까요?
단점
언어의 장벽
필자는 C/C++을 메인으로 오랜 기간 일을 했으며, 개인적인 취미로 Rust를 익혀왔습니다. 때문에 필자가 웹어셈블리를 접했을 때는 환경 구성만 신경쓰면 됐습니다.
그러나 보통의 웹 개발자 라면 이러한 low-level 언어에 익숙하지 않을 수 있습니다. 자바스크립트로 프론트엔드, 백엔드를 모두 구현할 수 있는 지금의 상황에서는 더욱 그럴 것이라고 생각합니다. 이 유형의 개발자 분들은 웹어셈블리 사용을 위해 추가적인 문법 학습이 필요합니다.
자바스크립트와 같은 명시적인 타입이 없는 언어에서, 타입이 있는 언어를 익히는 것은 생각보다 어려울 것입니다.
제한된 지원 범위
가장 널리 사용하는 도구인 Emscripten에서는 number, string, array 타입만을 지원합니다. 특히 array 타입의 경우 웹어셈블리와 자바스크립트 간에 데이터를 전달할 때는 포인터 형태로 변경해야하므로, 실질적으로는 number 타입으로 봐야할 것입니다. 타입의 제한은 활용 방안의 제한으로 이어지게 됩니다.
적은 참고자료
처음 웹어셈블리를 접할 때 가장 어려웠던 것이 참고자료였습니다. 개발 환경과 언어가 통합된 형태가 아닌 여러 가지가 있다보니 발생할 수 있는 에러의 범위도 넓게 나타납니다. 현재까지 현업에서 사용하는 사례가 적어서(특히나 한국에서는 더…) 에러 해결 등을 위한 참고 자료도 부족한 상태입니다.
성능
장점 아닌가? 하는 항목일 것입니다. 수행 면만 봤을 때는 거의 항상 웹어셈블리가 빠른 모습을 보입니다. 다만 자바스크립트와 크게 차이가 나지 않는 로직의 경우, 자바스크립트로만 구성된 코드가 빠르게 수행되는 것을 볼 수 있습니다.
이는 웹어셈블리가 처음 실행되기 전 적재되는 부분이 있기 때문입니다. 비교적 간단한 계산 로직 등에 무조건 웹어셈블리를 적용하는 것은 자칫 웹 성능을 떨어뜨리는 원흉이 될 수 있습니다.
마치며
웹어셈블리가 무엇이며 자바스크립트와 비교해서 어떠한 장점과 단점이 있는지 살펴봤습니다.
이후 포스팅에서는 실제로 웹어셈블리를 만드는 방법을 공유하고자 합니다.