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