염딩코

웹어셈블리(WebAssembly)란? 본문

Front-End

웹어셈블리(WebAssembly)란?

johnyeom 2023. 5. 21. 19:52

오늘은 웹어셈블리에 대한 내용을 다뤄보려고 합니다.

아마 처음 들으시는 분들도 있을 거라고 생각합니다. 

 

저도 얼마전에 지인을 통해서 알게된 개념이고 정리하고 싶어서 글을 작성하게 되었습니다.

 

웹어셈블리란?

WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며 새로운 기능과 성능에서 큰 이점을 제공합니다.

직접 코드를 작성하는 것이 아니라 C, C++, RUST 등의 저급 소스 언어를 효과적으로 컴파일 하도록 고안되었습니다.

 

이는 웹 플랫폼에 큰 영향을 미칩니다.

이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 길을 제공합니다.

 

게다가 웹어셈블리 코드를 사용하여 이를 활용하는 방법을 알 필요조차 없습니다.

웹어셈블리 모듈을 웹 (또는 Node.js) 앱으로 가져와 Javascript를 통해 사용할 수 있도록 할 수 있습니다.

Javascript 프레임워크는 웹어셈블리를 사용하여 대규모 성능 이점과 새로운 기능을 제공하면서도 웹 개발자가 쉽게 기능을 사용할 수 있도록 할 수 있습니다.

웹어셈블리의 목표

웹어셈블리는 W3C 웹어셈블리 커뮤니티 그룹에서 다음과 같은 목표들로 만들어지고 있는 열린 표준입니다.

  • 빠르고, 효과적이고, 이식성이 좋을 것
  • 읽기 쉽고 디버깅이 가능할 것
  • 안전함을 유지할 것
  • 웹을 망가뜨리지 않을 것

웹어셈블리는 웹 플랫폼에 어떻게 적용될까?

웹 플랫폼을 다음과 같이 두 부분으로 나눠서 생각해볼 수 있습니다.

  • Javascript같이 우리가 만든 앱을 구성하는 코드를 돌리는 가상머신(VM)
  • 웹브라우저나 하드웨어의 기능을 호출해서 웹앱이 뭔가를 하도록 만들 수 있는 Web API의 집합

이전까지 웹브라우저의 VM은 오직 Javascript만 불러올 수 있었습니다.

오늘날의 웹에서 사람들이 겪는 대부분의 문제를 해결하기에 Javascript가 충분히 잘 작동했다고 볼 수 있기는 합니다.

 

하지만, 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집, 그 외 네이티브 성능을 필요로하는 여러 분야의 사례에서는 성능상의 문제에 부딪혀왔습니다.

 

거기에 더해서 아주 큰 자바스크립트 어플리케이션을 다운받고 파싱하고 컴파일하는 비용은 감당하기 힘들 수가 있습니다.

모방일이라거나 다른 리소스가 많이 제한된 환경에서는 이런 성능병목현상이 더 두드러지게 나타나기도 합니다.

 

웹어셈블리는 Javascript와는 다른 언어이지만, Javascript를 대체하기 위해서 만들어지지는 않았습니다.

대신 Javascript와 나란히 돌아가면서 서로의 부족한 점을 보완하여 웹 개발자가 두 언어의 강점을 동시에 취할 수 있도록 설계되었습니다.

 

브라우저에 WebAssembly 가 등장하면서 앞에서 이야기했던 VM은 이제 JavaScript와 WebAssembly 두 가지 유형의 코드를 불러오고 실행합니다.

 

필요하면 다른 형식의 코드끼리 서로를 호출할 수도 있습니다.  웹어셈블리 자바스크립트 API가 익스포트된 웹어셈블리 코드를 일반적으로 부를 수 있는 자바스크립트 함수로 감싸고, 웹어셈블리 코드에서도 동기적으로 일반 자바스크립트 함수를 호출할 수 있습니다. 사실 웹어셈블리의 기본 단위는 모듈이라고 불리고, 웹어셈블리 모듈은 여러모로 ES6 모듈과 대칭적입니다.

 

저작자표시