그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지│인프콘2024

발표자는 자신들이 포팅한 ThorVG를 소개한다. 벡터 드로잉·SVG 출력·복잡한 애니메이션 렌더링을 제공하는 초경량 벡터 그래픽스 엔진으로, C++로 작성돼 최소 150KB 바이너리를 출력할 수 있어 IoT 기기에 많이 탑재된다. 이 C++ 애니메이션 플레이어를 웹으로 포팅하려 한 동기는 웹에서 더 쉽고 빠르게 테스트하고, 라이브러리·컴포넌트로 제공해 누구나 쓰게 하기 위함이다. 이상적 인터페이스는 개발자가 긴 C++ 코드 대신 간략한 스크립트를 삽입하고 HTML 엘리먼트를 선언하는 것만으로 애니메이션이 출력되는 것이다. WASM으로 웹 컴포넌트를 개발하면 내부에서 JS·TS가 자체 이벤트 핸들러·이벤트 루프를 가지고 미리 정의된 타입·인터페이스 기반으로 WASM을 호출한다. WASM을 만드는 방법은 전용 언어 개발과 기존 C·C++ 포팅 두 가지이며, ThorVG는 이미 C++로 완성돼 있어 엠스크립튼(Emscripten) 컴파일러로 포팅하기로 한다. 엠스크립튼은 소스를 WASM IR을 거쳐 바이너리로 변환하면서 JS 글루 코드를 함께 만들어 준다.

포팅의 핵심은 바인딩 코드로, 엠스크립튼으로 JS 함수와 C++ 함수를 매핑한다. class·constructor·function 키워드로 네이티브 API를 JS에 바인딩하면 함수명·파라미터 타입을 그대로 유지한 채 변환되며, 배열·포인터 등 복잡한 타입은 val로 래핑한다. C++ 특성상 동적 할당과 원시 포인터는 명시적으로 해제해야 하고 스마트 포인터 사용을 권하며, 무거운 데이터는 복사 없이 타입드 메모리 뷰로 전달한다. emcc 명령으로 컴파일하면 WASM 바이너리와 JS 글루 코드가 생성되고, 개발자는 바이너리가 아니라 글루 코드를 임포트해 호출한다. WASM 모듈은 사용 후 delete로 반드시 해제하지 않으면 메모리 릭이 생긴다. UI 렌더링은 구글의 표준 웹 컴포넌트 키트 Lit으로 래핑한다. 디버깅 도구로 DWARF, Emscripten Sanitizer(ASan·UBSan), wasm-tools를 소개한다. 성과로 기존보다 작고 빠르며 npm 배포로 프론트엔드 개발자가 쓸 수 있는 새 로티 플레이어를 개발했고, 웹에서 C++ 테스트가 가능해져 GUI 테스트 자동화·헤드리스 브라우저·벤치마크까지 만들었다고 정리하며 마친다.