초보자를 위한 WebAssembly - 2부: 목표, 주요 개념 및 사용 사례

게시 됨: 2022-12-07

WASM의 핵심 개념과 활용 사례가 궁금하셨나요? 그렇지 않다면 저희가 도와드리겠습니다.

WebAssembly(WASM)는 웹에서 네이티브와 같은 성능을 차단 해제할 수 있는 새로운 저수준 언어입니다.

초보자를 위한 WebAssembly - 1부에서는 WASM의 정의와 한계를 다루면서 초보자의 관점에서 WASM을 소개했습니다. 또한 WebAssembly 기능, WASM 로드맵, JavaScript가 WebAssembly와 함께 작동하는 방식을 살펴보았습니다.

이 게시물에서는 WASM 목표, 주요 개념 및 사용 사례를 논의하여 WebAssembly를 탐색합니다. 우리는 또한 흥미로운 프로젝트 중 일부를 살펴볼 것입니다.

시작하자.

웹어셈블리 목표

WebAssembly의 주요 개념을 이해하려면 먼저 목표를 살펴봐야 합니다. 이러한 목표에는 다음이 포함됩니다.

  • 로드 시간 및 크기 효율적인 이진 형식을 컴파일 대상으로 사용하여 사용 가능한 하드웨어를 활용하는 기능. 간단히 말해서 WASM은 바이너리 형식의 추상 구문 트리(AST)를 사용하여 기본 속도로 컴파일 및 실행을 지원합니다. 이 접근 방식을 사용하여 WASM은 IoT, 웹 및 모바일을 비롯한 다양한 장치에서 수행할 수 있습니다.
  • WASM의 목표는 기존 웹 플랫폼을 변경하거나 변경하는 것이 아닙니다. 이 접근 방식을 통해 WebAssembly는 현재 및 과거 웹과 잘 통합될 수 있습니다. 또한 WebAssembly가 JavaScript와 함께 실행하거나 JavaScript에서 동기 호출을 수행하는 것을 포함하여 JavaScript와 원활하게 작동할 수 있습니다.
  • 권한 보안 정책 및 동일 출처와 원활하게 작동합니다.
  • 개발자가 비브라우저 임베딩을 지원하도록 솔루션을 설계할 수 있도록 합니다.
  • 마지막으로 개발자는 사람이 편집할 수 있는 텍스트 형식을 제공하여 WebAssembly 소스 코드로 효율적으로 작업할 수 있는 도구를 제공합니다.
웹어셈블리-목표-1

WebAssembly 주요 개념

내부적으로 WebAssembly는 다음 단계를 따릅니다.

  • 처음에는 유형이 정의된 정적 유형 언어로 코드를 작성해야 합니다.
  • 완료되면 미리 컴파일된 WASM 모듈을 생성하고 코드를 엔진 컴파일러에 공급합니다.
  • 위의 단계는 WASM이 구문 분석을 건너뛰고 웹 브라우저에서 코드를 렌더링할 준비가 되도록 합니다.

웹 브라우저에서 실행되는 WebAssembly의 핵심 개념은 다음과 같습니다.

  • 메모리: WebAssembly의 메모리는 저수준 메모리 액세스 명령에 의해 관리되고 기록됩니다. 기술적으로 이것은 크기 조정 가능한 ArrayBuffer이며 메모리 바이트 배열을 포함합니다.
  • 모듈: WebAssembly의 모듈은 컴파일된 실행 가능한 컴퓨터 코드입니다. 상태 비저장 형식으로 인해 웹 브라우저는 모듈을 컴파일하고 Windows와 작업자 간에 공유합니다. 또한 모듈은 함수, 테이블, 유형, 전역 및 메모리를 수용하는 것 외에도 가져오기 및 내보내기를 저장하고 선언합니다.
  • 테이블: 테이블은 크기 조정 가능한 유형 배열을 사용하는 모든 참조 및 함수로 구성됩니다. 이렇게 하면 메모리에 원시 바이트를 저장할 필요가 없습니다.
  • 인스턴스: WASM에서 인스턴스는 런타임 동안 모든 상태가 쌍을 이루는 모듈입니다. 이러한 상태에는 테이블, 메모리 및 기타 가져온 값 집합이 포함됩니다.
wasm-키-개념-1
WASM 주요 개념

웹 개발자는 JavaScript API를 사용하여 모듈, 테이블, 인스턴스 및 테이블을 호출하고 정의할 수 있습니다. 또한 JavaScript를 사용하여 JavaScript 함수 내에서 동기식으로 WASM 내보내기를 호출합니다. 따라서 WASM을 사용하여 웹 브라우저에서 고성능 애플리케이션을 작성할 수 있으므로 JavaScript는 WebAssembly와 잘 어울립니다.

WASM 개체

WebAssembly로 작업할 때 8개의 WASM 개체를 추적해야 합니다. 이러한 개체에는 다음이 포함됩니다.

  • WebAssembly.Global – Global 개체는 전역 변수 인스턴스입니다. WebAssembly.Module과 JavaScript 모두에서 액세스할 수 있습니다.
  • WebAssembly.Module – 여기에서 Module 개체에는 상태 비저장 WASM 코드가 포함되어 있습니다. 코드는 미리 컴파일됩니다.
  • WebAssembly.Instance – WebAssembly.Instance는 WebAssembly.Module의 실행 가능한 상태 저장 인스턴스입니다.
  • WebAssembly.Table – Table 개체에는 함수 참조가 포함되어 있으며 JavaScript 래퍼 역할을 합니다.
  • WebAssembly.CompileError – CompileError 개체에는 유효성 검사 및 디코딩 중에 발생하는 모든 오류가 포함됩니다.
  • WebAssembly.RuntimeError – 여기서 RuntimeError 개체는 모든 런타임 오류를 나열합니다.
  • WebAssembly.LinkError – LinkError 개체에는 모듈 인스턴스화 중에 발생하는 오류가 포함되어 있습니다.

WASM 사용 사례 및 프로젝트

우리는 WebAssembly가 웹 브라우저에서 네이티브와 같은 성능을 제공한다는 것을 이미 알고 있습니다. 그러나 어디에서 사용할 수 있는지 진정으로 이해하려면 사용 사례를 살펴봐야 합니다. 몇 가지 WASM 사용 사례를 아래에 나열해 보겠습니다.

WebAssembly 사용 사례는 브라우저 내부와 외부 모두에 걸쳐 있습니다. 예를 들어 브라우저에서 WASM을 사용하려는 경우 다음을 포함하여 많은 작업을 수행할 수 있습니다.

  • ffmpegwasm 프로젝트와 같은 비디오 또는 오디오 편집.
  • 이러한 고성능 게임과 같은 웹 브라우저의 비디오 게임.
  • 과학적 시각화 및 시뮬레이션
  • DOSBox, MAME 등의 플랫폼 에뮬레이션/시뮬레이션
  • 암호화
  • 원격 데스크탑
  • 개발자 도구

사용 사례

일반적인 관점에서 WebAssembly의 강력한 사용 사례는 다음과 같습니다.

  • 더 빠른 코드를 작성하는 기능은 기본 하드웨어를 활용할 수 있습니다.
  • 또한 클라이언트측 압축을 수행할 수도 있으므로 로딩 시간과 대역폭이 더 절약됩니다. 따라서 클라이언트의 CPU 또는 기본 하드웨어를 사용하여 압축 및 압축 해제를 수행한 다음 서버의 리소스를 사용합니다.
  • 또한 JavaScript를 사용하는 것 외에 다른 프로그래밍 언어를 사용하여 웹용 코드를 작성할 수 있습니다. 예를 들어 Rust, C 및 C++를 사용하여 웹 애플리케이션의 특정 측면에 대한 고성능 코드를 작성할 수 있습니다.

프로젝트

실제 사례로 이동하면 다음 프로젝트를 언급할 가치가 있습니다.

  • Figma 는 WebAssembly 사용으로 웹 앱 성능을 개선했습니다. 앱 초기화, 전체 디자인 렌더링, 디자인 파일 다운로드 시 로딩 시간을 줄였습니다. 앞에서 논의한 것처럼 WebAssembly는 압축에도 좋습니다. Figma는 다운로드 크기를 개선하기 위해 WASM을 구현하여 크기를 크게 줄였습니다.
  • Pyodide : 또 다른 흥미로운 WASM 프로젝트는 Mozilla에서 출시된 Pyodide 프로젝트입니다. 이를 통해 과학자들은 NumPy, SciPy, Scikit-learn 등을 포함한 Python 과학 스택을 WebAssembly로 컴파일하여 브라우저로 보낼 수 있습니다. Python과 JavaScript 간의 투명한 객체 변환을 제공합니다. 마지막으로 개발자가 Python을 사용하여 웹 API를 사용할 수도 있습니다.
  • Brazor WebAssembly : Brazor WebAssembly 프레임워크를 사용하면 개발자가 .NET을 사용하여 단일 페이지, 클라이언트 측 및 대화형 웹 앱을 빌드할 수 있습니다. WebAssembly 기반 .NET 런타임을 사용하여 이러한 앱을 브라우저에 호스팅할 수 있습니다. 여기에서 개발자는 WebAssembly의 JavaScript API를 통해 .NET 코드의 브라우저 기능에 액세스할 수 있습니다.
figma 웹어셈블리
출처: 피그마

다른 많은 유명하고 가치 있는 프로젝트에서 WebAssembly를 사용하고 있습니다. 이들은 Binaryen, Cheerp, Forest, Grain 등입니다.

마지막 생각들

WebAssembly는 초보자에게 친숙하지 않습니다. 그러나 사용 사례와 주요 개념을 연구하면 해당 기능을 명확하게 이해할 수 있습니다.

흥미로운 프로젝트가 시장에 나와 있으므로 특히 웹 개발에 종사하는 경우 WebAssembly를 배우기에 가장 좋은 시기입니다. 브라우저 외부에서 작동하는 WASM의 기능은 또한 성능 지향 개발을 위한 탁월한 선택입니다.