MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

웹어셈블리는 현대 웹브라우저에서 돌릴 수 있는 새로운 형식의 코드입니다. 네이티브에 가까운 성능으로 돌아가며 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어로, C/C++ 등과 같은 언어의 컴파일 타겟으로써 그런 언어로 작성된 프로그램을 웹에서 돌릴 수 있게 해줍니다. 또한 자바스크립트와 나란히 돌아가면서, 서로를 보완할 수 있도록 설계되었습니다.

간단히 말해서

웹어셈블리는 웹 플랫폼에 있어서 상당히 큰 의의를 갖습니다 — 여러 언어로 작성된 코드들을 네이티브에 가까운 속도로 웹에서 돌릴 수 있는 길을 제공하며, 이전까지는 웹에서 돌려볼 수 없었던 클라이언트 앱들을 웹에서 돌릴 수 있도록 만들어주기 때문입니다.

웹어셈블리는 자바스크립트와 나란히 돌아가면서 서로의 부족한 부분을 보완할 수 있도록 설계되었습니다 — 웹어셈블리 자바스크립트 API를 사용해서 웹어셈블리 모듈을 자바스크립트 앱으로 불러와 둘 사이에 기능을 공유할 수 있습니다. 이는 웹어셈블리를 작성하는 법을 몰라도 같은 앱 안에서 웹어셈블리의 고성능과 자바스크립트의 유연함이라는 두 마리 토끼를 동시에 취할 수 있도록 합니다.

더 훌륭한 점은, 주요 브라우저 벤더의 적극적인 참여를 통해 W3C 웹어셈블리 커뮤니티 그룹에서 웹 표준으로 개발되고있다는 것입니다.

가이드

웹어셈블리의 컨셉
웹 어셈블리가 무엇인지, 왜 그렇게 유용한지, 어떻게 기존의 웹 플랫폼(혹은 그 이상)에 적응시켜 사용할 수 있는지 기본 개념을 알아봅시다.
C/C++을 웹어셈블리로 컴파일하기
엠스크립튼 같은 도구를 사용해서 C/C++ 로 작성된 코드를 .wasm으로 컴파일할 수 있습니다. 어떻게 컴파일할 수 있는지 알아봅시다.
웹어셈블리 코드를 불러오고 실행시키기
본 글에서는 .wasm 파일을 가진 후에 Fetch 나 XHR API를 이용하여 웹어셈블리 자바스크립트 API와 결합하여 .wasm 파일을 브라우저로 가져오는 방법, 컴파일하고 초기화 하는 방법에 대해서 다룹니다.
컴파일 된 웹어셈블리 모듈 캐싱하기
클라이언트에서 크기가 큰 웹어셈블리 모듈을 캐싱하는 것은 어플리케이션의 시작 성능 향상에 굉장히 유용합니다. 본 글에서는 IndexedDB 를 활용하여 웹어셈블리 모듈을 캐싱하는 방법을 설명합니다.
웹어셈블리 자바스크립트 API 사용하기
.wasm 모듈을 브라우저로 불러왔으면, 사용해야겠지요? 본 글에서는 웸어셈블리 자바스크립트 API를 이용하여 웹어셈블리를 어떻게 사용하는지를 설명합니다.
익스포트 된 웹어셈블리 함수
익스포트 된 웹어셈블리 함수는 자바스크립트에서의 웹어셈블리 함수의 반영이며, 자바스크립트에서 웹어셈블리 코드를 호출할 수 있도록 해줍니다. 본 글에서는 익스포트 된 웹어셈블리 함수가 무엇인지에 대해 설명합니다.
웹어셈블리 텍스트 포맷 이해하기
본 글에서는 웹어셈블리의 텍스트 포맷에 대해 설명합니다. 텍스트 포맷은 브라우저에서 개발자 도구를 이용하여 디버깅 할 때 보여지는 .wasm 모듈의 저수준(Low-level) 문자형 표현입니다.
웹어셈블리 텍스트 포맷을 wasm으로 변환하기
본 글에서는 텍스트 포맷으로 작성된 웹어셈블리 모듈을 .wasm 바이너리로 변환하는 방법을 제시합니다. 

API 참조

WebAssembly
이 객체는 모든 웹어셈블리와 관련된 기능의 네임스페이스로서 역할합니다.
WebAssembly.Module
WebAssembly.Module 객체는 이미 브라우저에 의해 컴파일된 상태없는 웹어셈블리 코드를 담고있습니다. 게다가 여러번 인스턴스화 시킬 수 있고 효과적으로 워커 사이에 공유가능하며 IndexedDB에 캐시 가능합니다.
WebAssembly.Instance
WebAssembly.Instance 객체는 상태를 가지며, 실행가능한 모듈의 인스턴스입니다. Instance 객체는 웹어셈블리 코드를 자바스크립트에서 부를 수 있도록 익스포트된 모든 웹어셈블리 함수를 포함하고있습니다.
WebAssembly.instantiate()
WebAssembly.instantiate() 함수는 웹어셈블리 코드를 받아서 컴파일하고 인스턴스화하여, 모듈과 그 모듈의 첫 인스턴스를 반환하는 기본적인 API입니다.
WebAssembly.Memory()
WebAssembly.Memory 객체는 사이즈 조절 가능한 어레이버퍼(ArrayBuffer)로, 인스턴스가 접근하는 메모리를 날(raw) 바이트들로 들고있습니다.
WebAssembly.Table()
WebAssembly.Table 객체는 인스턴스에 의해 접근되는 불투명한 값(함수 레퍼런스 등)들의 사이즈 조절 가능한, 형식지정된 배열입니다.
WebAssembly.CompileError()
새 웹어셈블리 CompileError 객체를 생성합니다.
WebAssembly.LinkError()
새 웹어셈블리 LinkError 객체를 생성합니다.
WebAssembly.RuntimeError()
새 웹어셈블리 RuntimeError 객체를 생성합니다..

예제

스펙

스펙 상태 설명
Web Assembly JavaScript API Draft 자바스크립트 API 정의 초안.

브라우저 호환성

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 57 No support 52 (52)[1] No support (Yes) No support
Feature Chrome for Android Android Webview Edge Mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57 57 No support 52.0 (52)[1] No support No support No support

[1] 웹어셈블리는 파이어폭스 52+부터 활성화되었습니다. 다만 파이어폭스 52 확장 지원 릴리즈 (ESR.)에서는 비활성화 돼 있습니다.

바깥 고리

문서 태그 및 공헌자

 이 페이지의 공헌자: kesuskim, 0xABCDEF, lukewagner
 최종 변경: kesuskim,