웹어셈블리(WebAssembly)에 대해 알아보자
최근에 Developer-Roadmap을 둘러보다 웹어셈블리(WebAssembly)라는 개념에 대해 접하게 되었다.
웹 개발을 공부하는 입장에서 처음 접하는 용어에 대한 호기심이 생겼고, 이번 시간을 통해 웹어셈블리에 대해 함께 알아보려고 한다.
웹어셈블리
웹어셈블리는 2017년에 처음 발표되었고, 현재는 최신 브라우저에서 대부분 사용 가능하며 웹 표준으로 개발되고 있다. 일반적으로 웹 어플리케이션을 개발할 때에는 HTML, CSS, 자바스크립트를 사용하지만, 이들과 함께 웹어셈블리도 사용 가능하다.
웹어셈블리는 어떠한 ‘새로운 언어’가 아니다. MDN 문서를 보면 웹어셈블리에 대해 ‘최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드’라고 설명하고 있다. 웹어셈블리 파일인 wasm은 직접 코드를 작성하는 것이 아니라 C, C ++, RUST 등의 언어를 컴파일하여 만들게 된다.
이를 통해 기존에 C, C ++, RUST 언어로 작성된 코드를 웹에서도 네이티브에 가까운 속도로 실행 가능하게 되었고, 자바스크립트만으로는 어려웠던 고성능의 애플리케이션도 구현할 수 있게 되었다.
웹어셈블리와 자바스크립트
웹어셈블리를 사용하면 기존에 자바스크립트만으로 개발하는 것보다 고성능의 애플리케이션을 구현할 수 있다고 한다. 이게 가능한 이유는 웹어셈블리와 자바스크립트가 브라우저에서 처리되는 과정이 다르기 때문이라고 한다.
자바스크립트 처리 과정
웹어셈블리 처리 과정
위의 그림은 웹어셈블리와 자바스크립트 처리 과정을 비교하기 위한 그림이다. 각 과정을 살펴보면서 어떤 차이가 있는지 살펴보자.
-
구문해석 (Parsing)
자바스크립트 파일이 브라우저에 전달되면, *추상 구문 트리(AST: Abstract Syntax Tree)로 변환이 된다. 그리고 이로 부터 바이트 코드를 생성한다. 반면,
웹어셈블리파일은 이미 바이트 코드 형태이기 때문에, 변환 과정이 필요 없이 해석(decode)만 하여 검증 과정만 거치면 됩니다.*추상 구문 트리(AST: Abstract Syntax Tree)는 컴파일러에 널리 사용되는 자료 구조이다. 컴파일러가 요구하는 여러 단계를 통해 프로그램의 중간 표현의 역할을 한다.
-
컴파일 및 최적화 (Compile + Optimize)
자바스크립트와
웹어셈블리모두 컴파일 과정을 거친다. 차이가 있다면웹어셈블리는 이미 많은 최적화가 진행된 상태이기 때문에 기계 코드와 훨씬 가까운 상태에서 시작한다. 그렇기 때문에 자바스크립트에 비해 최적화 과정이 적다. -
재-최적화 (Reoptimizing)
재-최적화는
웹어셈블리에서는 일어나지 않고, 자바스크립트에서만 일어나는 과정이다. 자바스크립트는 컴파일 과정에서 간혹 여러 이유로 인해 기존 최적화를 버리고 다시 최적화를 하는데 이를 재-최적화라고 한다.웹어셈블리에서는 타입과 같은 것들이 명시적이기 때문에 재-최적화 단계가 필요없다고 한다. -
실행 (execute)
자바스크립트의 경우에도 컴파일러의 최적화 방식을 알고 있다면 그에 친화적인 형태의 코드 패턴으로 작성해 성능을 향상시킬 수도 있다. 그러나 대다수 개발자들은 컴파일러의 내부 동작을 알지 못하며, 브라우저에 따라 최적화 방식은 다르게 접근해야 하기 때문에 실제로는 어려운 일이다. 반면
웹어셈블리은 컴파일러를 위해 최적화 되어있기 때문에 자바스크립트에 비해 일반적으로 빠르다. -
가비지 컬렉션 (Garbage Collection)
자바스크립트에서는 가비지 컬렉터가 더이상 필요없는 오래된 변수들을 메모리에서 제거하는 작업을 자동으로 해준다. 하지만 가비지 컬렉터를 직접 제어할 수 없기 때문에, 코드 실행을 방해하는 요인이 될 수도 있다. 웹어셈블리는 메모리를 수동으로 관리하기 때문에 성능에 있어서 더 안정적이다.
이러한 차이들에 의해서 일반적으로 웹어셈블리가 자바스크립트보다 더 좋은 성능을 나타낸다고 한다. 그래서 웹어셈블리를 이용하면 게임이나 VR/AR 처럼 높은 성능을 요구하는 프로그램도 웹으로 구현이 가능하고, 프로젝트를 하면서 많이 사용했던 피그마도 웹어셈블리로 구현되어 있다고 한다.
마무리
이번 시간에는 웹어셈블리에 대한 개념과 웹어셈블리가 자바스크립트에 비해 더 높은 성능을 낼 수 있는 이유에 대해서 살펴보았다. 웹어셈블리에 대해 더 자세한 내용들이 궁금하다면 카툰으로 소개하는 웹어셈블리을 정주행 해보는 것을 추천한다.