웹에서 WebAssembly를 1급 언어로 만들기

• WebAssembly는 2017년 첫 출시 이후 C/C++ 등 저수준 언어 실행을 지원하며 발전해 왔지만, 여전히 웹 플랫폼에서 2급 언어로 취급되고 있음
• JavaScript만이 웹 API와 직접 상호작용할 수 있고, WebAssembly는 이를 위해 복잡한 JS 바인딩 코드(glue code) 를 작성해야 함
• 이러한 구조는 로딩 절차의 복잡성, 성능 오버헤드, 언어별 툴체인 단절 등으로 이어져 개발자 경험을 저하시킴
• Mozilla는 이를 해결하기 위해 WebAssembly Component Model을 제안, JS 없이도 표준화된 방식으로 Web API 호출 및 모듈 로딩을 가능하게 함
• 이 모델이 정착되면 WebAssembly는 브라우저 내 1급 실행 환경으로 자리잡아, 일반 개발자도 쉽게 활용할 수 있는 기반이 마련될 전망임

WebAssembly가 2급 언어로 취급되는 이유

• WebAssembly는 JavaScript를 통해서만 웹 플랫폼 접근이 가능하며, 직접적인 Web API 호출 권한이 없음
  • JavaScript는 <script> 태그로 간단히 로드되지만, WebAssembly는 JS API를 통한 수동 로딩 과정이 필요
  • WebAssembly.instantiateStreaming() 등 복잡한 API 호출을 거쳐야 하며, 개발자가 이를 암기하거나 툴로 자동화해야 함
• esm-integration 제안은 JS 모듈 시스템을 통해 .wasm 파일을 직접 import할 수 있게 하여 로딩 절차를 단순화함
  • <script type="module" src="/module.wasm"></script> 형태로 직접 로드 가능

Web API 접근의 제약

• JavaScript에서는 console.log("hello, world") 한 줄로 가능한 작업이 WebAssembly에서는 JS 메모리 접근, 문자열 디코딩, 함수 래핑 등 복잡한 절차를 요구
  • WebAssembly는 console 객체나 DOM 접근이 불가능해, JS에서 메모리 공유 및 함수 import/export를 통해 간접 호출해야 함
• 이 과정에서 생성되는 바인딩 코드(glue code) 는 언어별로 다르며, embind, wasm-bindgen 같은 도구로 자동 생성됨
  • 그러나 빌드 복잡도 증가, 런타임 오버헤드, 언어별 비호환성 등의 문제가 발생

WebAssembly가 1급 언어가 되지 못한 기술적 원인

• 컴파일러 통합의 어려움: 각 언어의 컴파일러는 JS 및 웹 플랫폼 통합 코드를 별도로 생성해야 하며, 이는 재사용 불가능
• 표준 컴파일러의 비호환성: rustc --target=wasm으로 생성한 파일은 브라우저에서 바로 실행되지 않음
  • 플랫폼 통합을 구현한 비공식 툴체인을 별도로 설치해야 함
• 문서 생태계의 편향: MDN 등 웹 문서는 대부분 JavaScript 중심으로 작성되어, 다른 언어 사용자에게 진입 장벽이 높음
• 성능 문제: JS 바인딩을 거친 DOM 호출은 직접 호출 대비 45% 성능 저하 발생
  • Dodrio 프레임워크 실험에서 JS glue 제거 시 DOM 변경 적용 시간이 절반으로 감소
• JavaScript 의존성: WebAssembly를 실무에 활용하려면 결국 JS를 이해해야 하며, 이는 추상화 누수(leaky abstraction) 문제로 이어짐

WebAssembly Component Model의 등장

• WebAssembly Component Model은 여러 언어와 런타임에서 공통으로 사용할 수 있는 표준화된 실행 단위를 정의
  • Web API 접근, 모듈 로딩, 링크 과정을 JS 없이 직접 수행 가능
  • 다양한 언어에서 생성 가능하며, 브라우저나 Wasmtime 등 여러 런타임에서 실행 지원
• WIT(Interface Description Language) 를 통해 필요한 API를 선언하고, 이를 컴포넌트 내부에서 직접 호출 가능
  • 예: component { import std:web/console; } → Rust 코드에서 console::log("hello, world") 호출 가능
• 브라우저는 <script type="module" src="component.wasm"></script>로 컴포넌트를 직접 로드하고, JS 없이 Web API 바인딩 자동 처리

JavaScript와의 상호운용

• Component Model은 하이브리드 앱 구조도 지원
  • 예: 이미지 디코더를 WebAssembly로 작성하고, JS에서 import { Image } from "image-lib.wasm"; 형태로 호출 가능
  • JS는 WebAssembly 컴포넌트를 일반 모듈처럼 import/export하여 사용

향후 전망과 참여

• Mozilla는 WebAssembly CG와 협력해 Component Model 표준화 작업을 진행 중이며, Google도 검토 단계에 있음
• 개발자는 Jco나 Wasmtime을 통해 브라우저 또는 CLI에서 실험 가능
• 이 모델이 정착되면 WebAssembly는 “파워 유저용 기능”에서 일반 개발자도 활용 가능한 웹 기술로 확장될 가능성 있음