여는말

앞으로 우리는

  • 예제 1 : 브라우저에서 Rust 애플리케이션을 실행해보겠습니다.

  • 예제 2 : 브라우저에서 Python 애플리케이션을 실행해보겠습니다.

  • 예제 3 : 브라우저에서 Rust 서버 애플리케이션을 실행해보겠습니다.

  • 예제 4 : 파이썬 웹 크롤링 예제

  • 예제 5 : 프론트엔드와 백엔드를 함께 배포해 서버리스를 구현하는 방법을 알아봅니다.

  • 예제 6 : 로컬 파일시스템에 접근, Markdown -> PDF 변환 프로그램

  • 예제 7 : Bevy 엔진으로 게임 실행해보기

  • 예제 8 : 도커로 WASM 배포하기

Ch. 1 : WASM이란?


WebAssembly란 무엇인가?

WebAssembly(또는 Wasm)은 다양한 소스 언어에서 포터블 바이너리 실행 파일을 생성할 수 있게 하는 이진 명령어 형식을 정의하는 개방 표준입니다.

Alt text

이 바이너리는 다양한 환경에서 실행할 수 있습니다. 웹에서 유래했으며 모든 주요 브라우저에서 지원합니다.


왜 웹 어셈블리인가?

2023년을 WebAssembly(Wasm)의 해로 예상했으며, 이는 여러 표준의 진전과 다양한 언어의 지원 확대로 실현됨

Python과 Ruby는 Wasm 지원을 포함시켰고, 공식 Go 프로젝트도 Wasm 및 WebAssembly System Interface(WASI)를 지원할 예정

첫 Wasm I/O 컨퍼런스와 WasmCon이 개최되었으며, GlueCon과 DockerCon에서도 WebAssembly 트랙이 마련됨

Suborbital이 F5에 인수되고 Adobe가 Figma를 인수하려 했으나 규제로 인해 실패한 사건은 Wasm을 선도하는 기업들의 시장 가치를 입증함

  1. Wasm은 AI의 완벽한 파트너

Wasm의 플랫폼 중립성, 빠른 시작 시간, 이식성 및 작은 바이너리 크기는 AI 애플리케이션에 이상적임 2024년 AI의 주요 테마 중 하나는 효율성이며, Wasm은 이 분야에서 큰 이점을 제공할 것

  1. 세 가지 주요 표준이 완성됨

Wasm은 W3C의 감독하에 표준화되었으며, 핵심 Wasm 표준은 몇 년 전에 완성됨 WASI, 메모리 관리, 컴포넌트 모델 등 세 가지 추가 표준이 Wasm의 성공에 중요함 2023년에 이 표준들은 큰 발전을 이루었으며, 2024년에는 모두 완성될 것으로 예상됨

  1. Wasm의 본거지는 서버 사이드

Wasm은 원래 브라우저에서 실행되도록 작성되었지만, 현재는 서버 사이드에서 더 많은 동력을 얻고 있음 서버리스 함수가 강점으로 부상했으며, 이는 확실히 성장하고 있음 Wasm은 Kubernetes 생태계에서 중요한 진전을 이룰 것으로 예상되며, 효율성, 확장성, 비용이 중요한 곳에서 등장할 것

  1. 클라이언트/서버 양쪽에서 Wasm에 의한 점진적 개선

웹 개발 프레임워크의 부상으로 클라이언트 측, 서버 측 또는 둘 다에서 선택적으로 실행할 수 있는 애플리케이션이 등장 이러한 애플리케이션은 클라이언트 측 렌더링(CSR)과 서버 측 렌더링(SSR)으로 구축될 수 있으며, 일부 프레임워크는 이미 Wasm을 활용하고 있음 2024년에는 이러한 프로젝트가 더 많이 등장할 것이며, Wasm의 강점인 어디에서나 실행 가능한 바이너리 형식을 더욱 활용할 것으로 보임

WASM

Wasm의 장점은 무엇인가?

🚀 빠르고 효율적 - JIT/AOT 기능을 가진 대부분의 런타임을 통해 네이티브와 유사한 속도를 제공할 수 있습니다. VM 부팅이나 컨테이너 시작과 달리 콜드 스타트가 없습니다. Wasm 애플리케이션은 최소 메모리 요구사항과 CPU 요구사항으로 실행될 수 있습니다.

🔒 안전 - Wasm 런타임은 기본적으로 샌드박스화되어 있고 메모리에 대한 안전한 접근을 허용합니다. 기능 기반 모델은 Wasm 애플리케이션이 명시적으로 허용된 것만 접근할 수 있도록 보장합니다. 공급망 보안이 향상되었습니다.

💼 이식 가능 - 주요 런타임 사이에서 대부분의 CPU(x86, ARM, RISC-V)와 대부분의 OS(Linux, Windows, macOS, Android, ESXi)를 지원하며 심지어 비-Posix 운영 체제도 지원합니다.

🗣️ 다중 언어 - 40개 이상의 언어가 Wasm으로 컴파일될 수 있으며, 최신의 지속적으로 향상되는 도구체인이 있습니다.


브라우저에서 Wasm은 어떻게 동작하는가?

브라우저 엔진은 Wasm 가상 머신을 통합하는데, 일반적으로 Wasm 런타임이라고 합니다. 이는 Wasm 이진 명령어를 실행할 수 있습니다. Emscripten과 같은 컴파일러 툴체인은 소스 코드를 Wasm 대상으로 컴파일할 수 있습니다. 이를 통해 레거시 애플리케이션을 브라우저로 포팅하고 클라이언트 측 웹 애플리케이션에서 실행되는 JS 코드와 직접 통신할 수 있습니다.


Alt text


이러한 기술들은 전통적인 데스크톱 앱들이 브라우저에서 실행되도록 했습니다. 이제 브라우저가 있는 장치에서든 실행할 수 있습니다. 주목할만한 예시로는 Google Earth와 컴퓨터 비전을 위한 Open CV 라이브러리가 있습니다.


WASI

WASI란 무엇인가?

브라우저 외부에서 실행할 수 있는 Wasm 런타임이 있는데, 여기에는 전통적인 운영 체제인 Linux, Windows, macOS가 포함됩니다. JavaScript 엔진을 사용할 수 없으므로 외부 세계와의 통신을 위해 WASI(WebAssembly System Interface)와 같은 다른 인터페이스를 사용합니다. 이러한 런타임을 통해 Wasm 애플리케이션이 POSIX와 유사한(하지만 완전히 같지는 않은) 방식으로 호스트 시스템과 상호 작용할 수 있습니다. WASI SDK와 wasi-libc와 같은 프로젝트는 기존 POSIX 호환 애플리케이션을 WebAssembly로 컴파일하는 데 도움이 됩니다.


Alt text


애플리케이션을 한번 Wasm 모듈로 컴파일하면, 동일한 이진 파일을

"어디서든"

실행할 수 있습니다.


인터프리터 언어는 어떻게 되나요?

지금까지 컴파일 언어인 C와 Rust만 WebAssembly를 대상으로 삼을 수 있다고 언급했습니다. Python, Ruby, PHP와 같은 인터프리터 언어의 경우 접근 방식이 다릅니다. : 그들의 인터프리터는 C로 작성되어 있으며 WebAssembly로 컴파일할 수 있습니다. 그러면 이 인터프리터 컴파일을 통해 소스 코드 파일(일반적으로 .py, .rb, .php 등으로 끝남)을 실행할 수 있습니다. 일단 Wasm으로 컴파일되면, Wasm 런타임을 가진 모든 플랫폼에서 해당 인터프리터 언어를 실행할 수 있습니다. 심지어 해당 인터프리터가 그 플랫폼용으로 네이티브로 컴파일된 적이 없더라도 말입니다.


Alt text


If WASM+WASI existed in 2008, we wouldn't have needed to create Docker. That's how important it is. WebAssembly on the server is the future of computing.

Solomon Hykes (co-founder of Docker)


컴퓨팅의 다음 논리적 단계

Alt text


WasmEdge

노트: WasmEdge

containderd + wasmedge = WASI on docker!

베타 기능은 Docker Desktop에서만 사용 가능


Ch. 2 : 가장 간단한 예제


예제 1

브라우저에서 Rust 애플리케이션을 실행해보겠습니다.


예제 2

브라우저에서 Python 애플리케이션을 실행해보겠습니다.


예제 3

브라우저에서 Rust 서버 애플리케이션을 실행해보겠습니다.


예제 4

파이썬 웹 크롤링 예제

WASM을 이용한 RUST 애플리케이션

WASM으로 파이썬 실행해보기

WASM으로 파이썬 실행해보기

파이썬 웹 크롤링

WASM을 이용한 RUST 애플리케이션

예제 5: Yew로 풀스택 웹앱 만들기

프론트엔드와 백엔드를 함께 배포해 서버리스를 구현하는 방법을 알아봅니다.

예제 6: PDF 변환 프로그램

로컬 파일시스템에 접근

Markdown -> PDF 변환 프로그램

게임 엔진

Bevy

예제 8: 브라우저에서 게임 실행하기

WasmEdge

넥스트 레벨 컨테이너

예제 9: 도커로 WASM 배포하기

WASM + WASI = WASM