[과제] 3주차) ThorVG 활용사례 조사 채다희

[chae-dahee]

Lottie Creator

Create production-ready Lottie animations in your browser.
Lottie Creator is your full-featured, web-based animation tool for creating lightweight, interactive motion. Create, animate and export Lottie or dotLottie with AI-powered tools, plus State Machines and Motion Tokens in dotLottie. No After Effects required.
Lottie Creator leverages ThorVG to power its Canvas engine with fast, scalable vector rendering for interactive animations.

2025 오픈소스 페스타의 ThorVG 발표에서 소개된 활용 사례인 Lottie Creator를 조사한다.

LottieFiles에서 제공하는 웹 기반 애니메이션 편집 도구

• 벡터 그래픽 제작부터 애니메이션 적용까지 도입하는 통합 도구
• 완성된 작업을 Lottie JSON, dotLottie 등의 형식으로 출력한다.
  공식 Lottie Creator 문서

여기에서 ThorVG는 Lottie Creator의 벡터 그래픽 출력을 처리하는 엔진으로 사용된다.
Canvas engine: 편집 화면의 벡터 그래픽 렌더링을 담당한다.
Artboard output: Artboard에 표시되는 벡터 그래픽을 화면에 출력한다.
이를 설명하는 공식자료는 아래와 같다.
ThorVG v1.0: What This Release Means for Developers, Teams & the Products They Build - LottieFiles blog

ThorVG 가 모션 디자인에 필요한 이유

Lottie Creator에는 편집 내용을 실시간으로 화면에 표시할 수 있는 벡터 그래픽 엔진이 필요하다.
벡터 기반 디자인(도형, 경로, 텍스트, 애니메이션)을 화면상의 픽셀로 변환하는 시스템

• 가벼운 크기
• 빠른 벡터 렌더링
• 크기 변경에도 품질이 유지되는 출력
• 부드러운 모션과 반응성, 상호작용적
• 다양한 플랫폼과 그래픽 백엔드 지원

LottieFiles는 ThorVG가 다양한 하드웨어 환경에서 렌더링 정확성과 시각적 일관성을 제공한다고 설명한다. 이러한 특성은 실시간 편집과 크로스 플랫폼 출력을 요구하는 Lottie Creator에 적합하다.

브라우저에서 관찰한 배포 구조

Lottie Creator의 내부 소스 코드는 공개되어 있지 않다.
따라서 브라우저 개발자 도구를 이용해 실제로 내려받고 실행하는 리소스를 확인했다.

1. ThorVG WebAssembly

Network 탭에서 WASM 파일을 확인했다.

조사 시점에는 thorvg_bg-BIwBujB_.wasm 파일이 확인되었다. 파일명의 해시 부분은 배포 버전에 따라 변경될 수 있다.
https://creator.lottiefiles.com/assets/thorvg_bg-BIwBujB_.wasm
해당 파일은 Lottie Creator의 JavaScript 번들에서 요청된다. 이를 통해 Lottie Creator가 브라우저에서 ThorVG의 WebAssembly 빌드를 로드한다는 사실을 확인할 수 있다.

2. dotLottie Player

브라우저에서 @lottiefiles/dotlottie-web 패키지의 dotlottie-player.wasm도 확인했다.
cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web@0.78.2/dist/dotlottie-player.wasm

Lottie Creator는 미리보기와 재생을 위해 dotlottie-player.wasm도 별도로 로드한다. dotLottie Web 역시 ThorVG를 렌더러로 사용하지만, 편집 Canvas에서 확인한 thorvg_bg-*.wasm과는 별개의 실행 모듈이다.

3. Canvas 요소

Console에서 Canvas 요소를 조회했다.

[...document.querySelectorAll('canvas')]

canvas#canvas.relative
canvas#snap-canvas.absolute.inset-0.pointer-events-none

canvas#canvas는 주 편집 화면, canvas#snap-canvas는 스냅 가이드와 같은 편집 보조 출력을 위한 Canvas로 추정된다.

4. 렌더링 백엔드

주 편집 Canvas의 렌더링 컨텍스트를 확인했다.

const canvas = document.querySelector('#canvas');

({
  canvas2d: canvas.getContext('2d'),
  webgl: canvas.getContext('webgl'),
  webgl2: canvas.getContext('webgl2'),
  webgpu: canvas.getContext('webgpu'),
});

실행 결과 webgl2에서 WebGL2RenderingContext가 반환되었으며 나머지 컨텍스트는 null이었다.

canvas2d: null
webgl: null
webgl2: WebGL2RenderingContext
webgpu: null

이를 통해 현재 브라우저 환경에서 Lottie Creator의 주 편집 Canvas가 WebGL2를 렌더링 백엔드로 사용한다는 사실을 확인했다.

관찰 결과를 바탕으로 예상한 구조

브라우저에서 확인한 리소스를 기준으로 구조를 단순화하면 다음과 같다.

Lottie Creator
      │
      │  JavaScript에서 WebAssembly 모듈 로드
      ▼
ThorVG WASM
      │
      ▼
ThorVG 렌더링 엔진
      │
      │  WebGL2 백엔드 사용
      ▼
WebGL2RenderingContext
      │
      ▼
canvas#canvas → 주 그래픽·Artboard 렌더링 영역

canvas#snap-canvas  → 스냅 가이드 등의 편집 보조 오버레이로 추정

확인하지 못한 부분

브라우저 관찰만으로는 다음 내용을 확인하지 못했다.

• Lottie Creator가 사용하는 ThorVG의 정확한 버전
• thorvg.web 또는 @thorvg/webcanvas 패키지의 직접 사용 여부
• JavaScript와 ThorVG WASM 사이의 구체적인 API 호출 방식

JavaScript 기반 편집 계층과 ThorVG WASM 사이에 데이터 전달 과정이 존재한다고 판단할 수 있다. 다만 정확한 API와 내부 데이터 구조는 확인하지 못했으므로 위 구조는 관찰 결과를 바탕으로 단순화한 예상이다.