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

INFCON 2024
https://www.inflearn.com/conf/infcon-2024/session-detail/867/

"웹 어셈블리"(이하 WASM)는 2017년에 공개된 새로운 웹 표준 기술이며, C/C++ 등의 저수준 언어를 웹 환경에서 빠르고 안전하게 구동할 수 있습니다.

저희 조직에서는 C++ 오픈소스를 WASM으로 전환하는 과정을 통해 복잡한 그래픽스 엔진을 웹으로 포팅하여 성공적으로 운용하고 있으며, C++ 네이티브 API로 구동되는 웹 표준 컴포넌트를 개발하여 사용자들이 손쉽게 이용할 수 있는 가볍고 빠른 Lottie 애니메이션 플레이어를 제공하고 있습니다.

WASM은 트렌디하며 굉장히 중요한 기술입니다. 본 세션에서는 WASM이 기존 웹 개발의 영역에서 어떠한 부분을 대체하고 개선할 수 있는지, 나아가 실제 포팅 사례를 더불어 저수준 SW를 WASM 전환하여 구동하는 전 과정에 대해 다루게 됩니다.

또한 단순한 포팅에 그치지 않고, WASM 기반의 웹 앱을 서비스하기 위해 필요한 디버깅 및 최적화 방법까지, 구체적이며 현실적인 운용 방법을 담을 예정입니다.

Transcript

1. LottieFiles 유진의 그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
2. 유진의 Jinny You 발표자 소개 • LottieFiles, SW 엔지니어 lottiefiles.com • Lottie 애니메이션을 지원하는 차세대 Universal Player 개발 • ThorVG Project 메인테이너 thorvg.org • 초경량 벡터 그래픽스 엔진 개발 • Email • jinny lottiefiles.com • GitHub • github.com/tinyjin • LinkedIn • linkedin.com/in/jinui
3. 세션 소개 1. WebAssembly의 개요 2. Lottie를 지원하는 초경량 벡터 그래픽스 엔진 3. WASM과 엠스크립튼 컴파일러 4. C + + 에서 WASM으로 포팅하기 5. WASM 웹 표준 컴포넌트 개발하기 6. WASM 디버깅 및 메모리 분석
4. 이런 경험을 공유하려고 해요 1. 초 트렌디 WASM 기술이 실무에서 어떻게 쓰이는지 궁금하지 않나요? • 주목받는 기술이지만 막상 국내에서 도입사례나 경험을 찾기가 힘들어요 • 웹 어셈블리를 선택하게 된 과정부터 WASM이 어떤 문제를 해결할 수 있는지 보여드릴게요 2. C/C + + 로 작성된 저수준 시스템을 어떻게 웹으로 옮길 수 있을까요? • C/C + + 언어를 웹에서 구동하는 핵심 과정을 알아볼까요? • 네이티브 언어로 돌아가는 웹 표준 컴포넌트를 만들어보아요 3. 포팅부터 디버깅, 최적화, 운영까지 : WASM 개발의 모든 과정을 담았어요 • 복잡한 WASM 기반 소프트웨어를 쉽게 운영할 수 있는 방법을 다루어요
5. 웹 어셈블리란?
6. WASM 웹 어셈블리 란 C/C + + 등으로 작성된 코드를 웹에서 네이티브에 가까운 속도로 실행하는 새로운 유형의 코드입니다.
7. WebAssembly의 역사 • 2017년 3월에 공개 • JavaScript의 느린 속도를 보완하기 위해 개발 • 샌드박스 환경에서 안전하게 실행
8. WebAssembly의 역사 W3C, Intel, Mozilla, Microsoft, Google, Apple에 의해 개발
9. WebAssembly의 화제성 월드 와이드 웹 컨소시엄 W3C 웹어셈블리는 HTML, CSS, JS를 잇는 웹의 4번째 공식 언어가 될 것 출처 : https://www.w3.org/press releases/2019/wasm/
10. WebAssembly의 화제성 이미 다수의 IT 비즈니스에서 차세대 웹 프로덕트 개발을 위한 효과적인 개발수단으로서 선택되며 신뢰성과 입지를 다지고 있습니다
11. WebAssembly의 화제성 Docker 창업자, Solomon Hykes 2008년에 WASM이 있었다면 Docker를 만들 필요가 없었을 것입니다. 그만큼 웹 어셈블리는 컴퓨팅의 미래입니다.
12. WebAssembly의 장점 • JS에 비해 사이즈가 작음 -> 로딩 속도가 향상 • 기계어에 가깝게 컴파일 -> 인터프리팅 과정이 생략되므로 성능이 향상
13. 웹 어셈블리의 목표
14. WebAssembly의 역사 1. 네이티브에 가까운 성능 2. 저수준 어셈블리 언어 3. C/C + + 등을 웹에서 구동
15. 쉽게 말해 저수준 언어로 작성된 프로그램을 변환하여 Web 환경에서 고성능으로 구동해주는 바이너리 포맷
16. WebAssembly의 개요 97 의 호환성. IE 및 구버전을 제외하면 대부분 지원
17. WebAssembly가 필요한 상황 1. C/C + + 로 개발된 프로그램을 웹에서도 사용하고 싶어요 2. 이미 만들어진 프로그램을 JS로 다시 작성하기 번거로워요 3. 컴팩트하면서 고성능인 웹 런타임이 필요해요
18. WebAssembly의 사례 Flutter 렌더링 엔진 Skia의 Canvas Kit이 WASM으로 구현 오픈소스 멀티미디어 프로세싱 라이브러리 WASM으로 Web API 지원 스마트 컨트랙트 런타임 EVM이 eWASM으로 전환
19. 그래서 무엇을 포팅했나요?
20. 벡터 그래픽스 렌더링을 지원하는 오픈소스 프로젝트 벡터 드로잉, SVG, 애니메이션 Lottie 지원
21. 전 세계적으로 활용되는 벡터 그래픽스 엔진으로 다수의 국내 개발진들에 의해, 한국에서 리드하고 있습니다 https://thorvg.org
22. ThorVG Project • C + + 로 작성 • 초경량 최소 150KB, IoT 기기에 탑재 • WASM 기반의 Web API 지원 • 플랫폼, OS에 관계없이 탑재가능 https://thorvg.org
23. ThorVG Project https://thorvg.org
24. ThorVG Project https://thorvg.org
25. C + + 로 작성된 애니메이션 Player • 웹 페이지에서 쉽고 빠르게 테스트해보고 싶어요 • 웹 라이브러리/컴포넌트로 확장하고 싶어요
26. WASM으로 포팅하기 렌더링 엔진을 웹으로 올려서 효과적으로 테스트 + + 안정성 ThorVG의 애니메이션 기능을 웹으로 확장 + + 호환성
27. WASM으로 포팅하기
28. WASM으로 포팅하기
29. WASM으로 포팅하기
30. WASM을 제작하는 방법 다양한 도구로 제작ㆍ컴파일이 가능 전용언어로 개발하거나 C/C + + 를 포팅
31. WASM을 제작하는 방법 C/C + + 로 이미 작성된 프로그램을 WASM으로 변환할 때는 Emscripten 컴파일러를 이용
32. WASM을 제작하는 방법 네이티브 환경 Web 환경
33. WebAssembly의 매커니즘 < C 소스코드 > < 웹 어셈블리 IR > < WASM 바이너리 >
34. WASM을 제작하는 방법 이미지 출처 : https://developer.mozilla.org/ko/docs/WebAssembly/Concepts
35. C + + 오픈소스 엔진을 WASM으로 포팅해봅시다
36. Emscripten 바인딩 코드 작성하기 https://github.com/thorvg/thorvg/blob/main/src/bindings/wasm/tvgWasmLottieAnimation.cpp JS Function과 C + + 함수를 맵핑하는 바인딩 코드 • class : JS 클래스 선언 • constructor : 클래스 생성자 • function : JS function에 함수를 바인딩
37. Emscripten 바인딩 코드 작성하기
38. Emscripten 바인딩 코드 작성하기 C + + 타입은 컴파일 과정에서 적절한 JavaScript 타입으로 변경됩니다 지원하지 않는 built in conversion은 emscripten::val로 래핑하여 지원 가능 배열, 포인터, 가변 데이터 타입 등
39. Emscripten 바인딩 코드 작성하기 바인딩 클래스에서 메모리 이슈가 발생하지 않도록 동적 메모리 할당에 대한 세심한 관리가 필요합니다 원시 포인터는 명시적인 할당 해제가 필요 스마트 포인터를 사용하면 메모리 안정성을 쉽게 보장할 수 있음
40. Emscripten 바인딩 코드 작성하기 전달하려는 데이터가 무거운 경우 복사 없이, 메모리 그대로 전달하여 불필요한 컴퓨팅 연산을 막을 수 있습니다. 무거운 데이터 이미지 Buffer 등 는 typed memory view로 빠르게 전달
41. Emscripten으로 WASM 컴파일 • Emscripten을 컴파일러로 활용 • CMAKE, Meson, Ninja 등 다양한 C + + 빌드 시스템을 지원 • em 명령어로 빌드 시스템없이 컴파일도 가능
42. Emscripten으로 WASM 컴파일 ThorVG는 Meson/Ninja 빌드 시스템을 이용 1. 설정에서 SDK 경로를 지정하고 2. 최적화 옵션을 부여한 뒤 3. WASM으로의 컴파일을 진행
43. Emscripten으로 WASM 컴파일 기본적으로 2가지의 파일을 생성 • WASM 바이너리 파일 : C + + 파일을 컴파일한 바이너리 • JS 글루코드 • WASM을 좀 더 쉽게 사용할 수 있도록 제공 • 바이너리를 직접 로드하지 않고, 해당 JS 파일을 import 하는 것으로 WASM 호출이 가능 * 글루 코드 Glue Code : 서로 다른 언어를 접착시키는 언어, 호환성을 위해 제공된다.
44. Emscripten으로 WASM 컴파일 WASM 바이너리는 글루코드에 의해 Module 형태로 import 가능 글루코드는 WASM을 가리킴
45. Emscripten으로 WASM 컴파일 작성한 바인딩 함수의 구조에 맞게 JS에서 C + + API 호출이 가능 < C + + Emscripten 바인딩 > < JS 코드 >
46. Emscripten으로 WASM 컴파일 WASM 모듈은 사용이 끝나면 반드시 명시적인 할당해제 필요 delete 함수는 컴파일 단에서 자동으로 바인딩 -> 호출하지 않을시 Memory Leak WASM 인스턴스를 free하는 Built in 함수
47. 효과적인 WASM 운용 글루코드 및 WASM 바이너리를 바로 호출하여 사용하기 보다는 라이브러리 형태로 한 번 래핑하여 운용하는 것이 효과적입니다.
48. 효과적인 WASM 운용 단순 함수 호출이 필요 유틸성 → NPM 패키지로 번들 화면에 렌더링이 필요 UI 인터랙션 → 웹 컴포넌트 형태로 제작
49. Web Component로 WASM 래핑하기 적은 양의 코드로 웹 표준 컴포넌트 개발을 도와주는 라이브러리 https://lit.dev
50. Web Component로 WASM 래핑하기 lit에서 제공되는 인터페이스에 Class 및 메소드를 구현하면 HTML에서 엘리먼트 태그로 쉽게 렌더링이 가능
51. Web Component로 WASM 래핑하기 LitElement의 클래스 구조에 맞추어 필요한 인터페이스를 정의
52. Web Component로 WASM 래핑하기 컴포넌트 메소드의 구현에서는 그래픽 연산을 C + + 가 처리하고 JS에서 값을 받아, UI 및 Canvas에 렌더링 결과를 그리도록 처리
53. 결과 Lit Element Class 애니메이션 콜백 tvg::render ; thorvg.play ;
54. 결과 앞에서는 Web Component로 WASM을 손쉽게 이용 뒤에서는 네이티브 코드가 무거운 연산을 처리
55. 하나의 코드에 증가하는 복잡성 1. 네이티브와 웹을 동시에 이해해야하고 2. 디버깅 도 잘 해야하며 3. 메모리 관리 는 더욱 철저해야 함.
56. WASM으로 웹 컴포넌트를 만든다는 것 • C + + 와 JavaScript 를 동시에 최적화해야하고 • 버그가 생기면 문제 지점을 찾기가 비교적 까다로움 Core 문제인지 JS 문제인지로 항상 시작해야 함 • C + + 는 GC가 없기 때문에, 메모리 이슈에 신경써야한다 메모리 누수가 생기기 쉽고, 보안 문제로 이어질 수도 있음
57. WASM 디버깅을 도와주는 툴 • DWARF 런타임 이슈를 추적하고, C + + 코드 상의 문제 지점을 알려줌 • Emscripten Sanitizer Asan 또는 Ubsan 보고를 웹 콘솔로 받을 수 있음 • wasm tools 심볼을 제거하거나, 맹글링된 함수 정보 등을 추적할 수 있음
58. DWARF Chrome 확장 프로그램 형식의 WASM 디버거
59. DWARF 런타임에서 JS/C + + 관계없이 호출된 Call Stack 확인이 가능
60. DWARF JS 뿐만 아니라 C + + 코드에서도 문제가 되는 코드 라인을 정확하게 짚어줌
61. DWARF 오류 시점 스택의 변수, 파라미터 정보 확인가능
62. Emscripten Sanitizer Sanitizer란? Google에서 개발한 C/C + + 용 메모리 오류 감지기이며, 오픈소스입니다. Address Sanitizer ASAN 잘못된 주소 참조로 인한 메모리 이슈, 메모리 누수를 탐지 Undefined Behavior Sanitizer UBSAN 오버플로우, 잘못된 포인터 사용에 기인한 오류를 탐지
63. Emscripten Sanitizer WASM 빌드시 Sanitizer를 활성화하면 메모리 문제가 일어나는 시점에 웹 콘솔을 통해 보고됨 WASM 디버그 빌드에서는 함수 이름이 노출되지만 프로덕션 빌드에서 함수명이 맹글링된 경우에는 wasm tools를 이용해 디맹글링 가능
64. WASM 포팅의 성과 1 C + + 환경에만 제한되지 않고, Web으로의 확장 • 작고 빠른 웹 환경의 또 다른 Lottie 플레이어 • 웹 컴포넌트 형태로 NPM에 배포 https://npmjs.com/package/ thorvg/lottie player
65. WASM 포팅의 성과 2 웹 환경에서 C + + 렌더러의 테스트가 가능 -> 웹에서 지원이 된다? • 모바일 페이지로 이동하면서도 확인 할 수 있고 • 테스트 접근성이 증가하니, 결국 SW 품질 향상 https://thorvg.org/viewer
66. WASM 포팅의 성과 3 생산성이 좋은 JS/TS로 자동화 툴 제작 • 웹 페이지로 GUI를 지원하고 • Headless 브라우저로 CLI까지 제작 https://thorvg test automation.vercel.app
67. WASM 포팅의 성과 3 벤치마크 도구까지 다양하며 무한한 확장 https://thorvg perf test.vercel.app 저수준 SW의 개발 영역에서도 웹 개발자의 참여를 이끌어낼 수 있다
68. 정리하기 1. 웹 개발 : 더 이상 NPM만이 우리의 생태계가 아니다 • 효과적인 C/C + + 패키지들도 이제 웹에서 활용해보세요 • Rust나 Swift를 웹으로 전환하는 케이스들도 적지 않게 있고 • 내가 필요한 툴이 Web에 없다면, 포팅해서 쓸 수 있음 2. 프론트엔드에서 유용하게 활용 • 필요한 패키지는 WASM으로 포팅하고 • 웹 컴포넌트 및 NPM 라이브러리로 제작하여 재사용가능 3. C/C + + 개발에서도 웹 개발의 생태계를 적극 활용 • 웹 개발자의 참여를 이끌고, JS 및 Web 생태계로 확장하여 개발가능 ThorVG Web
69. 감사합니다. • jinny lottiefiles.com • linkedin.com/in/jinui • thorvg.org