[FECONF25] 개발자를 위한 모션 그래픽 솔루션: Lottie의 기술 진화와 활용전략

 

feconf25에 참석해 세션을 들은 후 작성하는 후기 글입니다.

 

로띠 개발자와 디자이너의 세션을 직접 들을 수 있다니 완전 럭키비키자늠!!!

 

이 세션 후기를 우리 레브잇 올팜 디자이너 이솔비님께 바칩니다

---

 

2025.08.23. (토) FECONF25
세션5(15:20~16:20): 개발자를 위한 모션 그래픽 솔루션: Lottie의 기술 진화와 활용 전략
연사자1: Lottie Product Designer 우정아님, 링크드인
연사자2: Lottie Principal Engineer 박춘언님, 링크드인

 

 

---

파트1: Lottie에 대하여 - 우정아 Product Designer님

모션 그래픽의 중요성

1. 모션이 왜 필요할까?

- 애니메이션에 스토리텔링을 담아서 사용자의 참여를 유도한다

- 직관적으로 정보를 전달한다

  (예: 결제가 필요할 경우, 카드를 긁는 모션)

 

2. 사람의 시선은 움직이는 곳에서 머문다

- 사람의 진화 과정에서 발달한 위험 감지 본능

- 움직이는 곳에 시선이 가게 되어있다

 

잘 알려진 시선 패턴은 Z 패턴, F 패턴 등이 있는데,

이 패턴을 깨고 원하는 지점에 모션 그래픽을 입혀서 시선 패턴을 의도대로 유도할 수 있다.

 

3. better ux with motion

- 모션그래픽을 통해 ux를 개선할 수 있다.

1) 참여율 증가 - 흥미유발 및 교감, 효율적인 정보 전달

2) 높은 체류시간 - 유저 이탈 방지

3) 전환율 증가 - 몰입을 통해 빠르게 후속 액션 유도

 

 

이에 대한 예시로 kiwi라는 앱의 사례를 보여주셨다

 

 

앱 온보딩 과정에 lottie 애니메이션을 도입한 후 이탈율이 10% 감소하고, 전환율이 3배 증가했다.

 

4. 다양한 기업의 lottie 사용 사례

 

사실 알만한 기업들은 다 쓰고 있다

네이버, 카카오페이, 큐셀, 무신사, 토스 등...

 

5. lottie를 사용하며 단순화된 모션디자인 적용 과정

 

과거에는 모션디자인을 적용하기 위해 이런 과정을 거쳤다.

1) 디자이너가 모션 디자인

2) 디바이스 사이즈에 맞게 다시 제작 (눈물이 앞을 가림)

3) 개발자가 js/css/svg/canvas로 수작업 (진심 눈물이 앞을 가림)

4) 용량 최적화 / 디자인과 다른 부분 피드백 / 디바이스별로 다른 부분 피드백

5) 4번을 무한 반복하며 수정 및 다시 내보내기 (개발자와 디자이너 모두 눈물바다가 됨)

 

 

로띠는 이 과정을 줄여줬다

1. 로띠 파일즈에서 플러그인으로 모션 디자인을 가져오거나, 디자이너가 직접 로띠 파일을 디자인하기

2. 로띠 파일즈에 저장하기

3. 개발자에게 링크를 공유하기

 

그렇다고 한다

 

6. lottie creator 홍보

 

 

겸사겸사 lottie creator도 홍보하셨음

에펙의 난이도와 피그마의 구현 한계를 적당히 해결한 솔루션

 

https://lottiefiles.com/lottie-creator

Lottie Creator is a web-based animation tool

 

난 이 로띠 크리에이터를 우리 올팜팀 디자이너님께 건냈고... 강화된 디자이너로 다시 돌아오라고 했씀...ㅋㅋ

디자이너님: 엉엉

 

 

lottie creator로 용량 최적화도 가능한 듯 하다

아마 .lottie로 export하는 경우를 말하는 것 같기도 하고

그리고 뭔가 optimized 옵션도 있는 것 같았음

 

7. .lottie의 용량 최적화

 

gif와 비교했을 때 lottie가 압도적으로 가벼운 편이지만, .lottie는 그것보다 더 가볍다

 

lottie json을 조금 더 효율적으로 저장하고, 배포하기 위한 포맷이다

 

경량화된 압축 포맷이라 용량이 lottie보다 작아 웹사이트 성능 개선에 도움이 된다

theme 기능을 넣을 수 있어서 한 파일에 여러 옵션을 넣어 트리거할 수 있다

그리고, 한 파일에 여러 애니메이션을 넣을 수 있고, 이를 state 형태로 관리할 수 있다.

 

최근 올팜 팀에서는 rive 파일을 많이 쓰고 있는데, 뭔가 rive의 기능에서 봤던 기시감이 느껴졌다

누가 원조인지는 모르겠으나..?

 

 

그리고 .lottie가 생각보다 메모리 효율이랑 파일 크기가 괜찮았다

 

올팜팀 시니어 개발자 분이 .lottie 쓰면 용량이 줄어드는 대신에 메모리 많이 쓰는 걸로 알고 있다고 하셔서

이 슬라이드를 보여드렸더니 뭔가 옛날이랑 달라진 것 같기도 하다?는 평을 받았다

닷로띠가 그동안 성장한걸까?

(사실 본인은 로띠 쓴지 몇 달 안돼서 잘 모름)

 

 

---

 

로띠 엔지니어라니 진심 캡짱 멋있는 듯...

로띠가 돌아가는 내용을 직접 들을 일이 을매나 있겠어요 진심

 

근데 들으면서 나 대학 시절 문 교수님께 컴퓨터 그래픽스 듣던 시절이 스쳐지나갔슴.... ㅋㅋㅋㅋㅋㅋ

 

파트2: dotlottie 핵심 엔진 살펴보기

ThorVG: Lottie 기능 확장과 진화

 

모션 그래픽 기술 개요

 

사실 여기부터 약간 정신이 혼미했지만

 

1. 백터 그래픽

- 이미지를 만들어내는데 필요한 수식을 저장해둠

- 수학적 공식으로 그림을 그리기 때문에 확대/축소해도 화질에 문제가 없다

 

2. 백터 그래픽 엔진

- 백터 그래픽은 수학적 공식으로 표현되지만, 실제로 화면에 표시하려면 os나 프레임워크 차원에서 픽셀화(랜더링)하는 엔진이 필요함

- json 애니메이션 데이터를 엔진에서 픽셀로 그려줌

 

3. 로띠 애니메이션

- json 기반의 가볍고 표준화된 벡터 애니메이션 포멧으로, 여러 플랫폼에서 동일하게 동작한다

- 로띠는 모션 그래픽의 표준이라고 해도 될정도로 점점 영향력이 커지고 있고, airbnb, google 등과 협업하며 표준을 설립하고 있다

- 원래 after effect에 툴이 거의 국한되어 있었으나, user friendly한 자체 툴을 만들고자 했고 그게 lottie creator이다

 

ThorVG: 초경량, 이식성이 뛰어난 고성능 벡터 그래픽 엔진

 

 

로띠 애니메이션의 엔진 중 ThorVG에 대해 설명해주셨다

 

1. 현 개발 과정

- 순수 오픈소스여서 4명만 개발할 때도 있고 10명이 넘을 때도 있다고 하셨음

- WebGPU 기능을 강화하는데 집중하고 있는데, 그렇다고 웹에서만 동작하는 건 아니다

  WebGL을 사용해서 sw 랜더링이 가능하다

  (사실 이 부분 정확히 이해 못함. 컴그 수업 들은지 너무 오래됨)

 

2. 초소형 경량

- 하드웨어 제약 환경에서도 구동이 가능하다

- 바이너리 크기가 매우 작다: 150kb ~ 900kb (ThorVG 엔진을 빌드해서 나온 실행파일 크기...헐 개작은데??)

- 심지어 MCU 위에서 로띠가 돌아가는 모습도 보여주심 개충격적

 

3. 크로스 플랫폼 이식성

- RTOS, 임베디드, 모바일, 네이티브, 웹 등 다양한 os/환경에서 동작을 지원

   - RTOS: Real-time OS, 작은 iot 기기나 의료 기기처럼 실시간 제어용 os에서도 동작 가능

   - mcu, 라즈베리파이, 가전제품처럼 제한된 hw 환경에서도 실행 가능

- C/C++ APIs, 써드 파티 의존성 없음

   - 가장 범용적인 언어인 C/C++ 인터페이스 제공 - 여러 언어/플랫폼과 쉽게 연결 가능

   - 외부 라이브러리에 의존하지 않고 독립적으로 동작함. 불필요한 의존성이 줄어들어 빌드 크기가 줄어듦

- 웹어셈블리 지원

   - 브라우저에서 네이티브에 가까운 속도로 코드를 실행하는 기술을 지원

   - Emscripten: C/C++를 웹어셈블리로 변환해주는 툴체인. 동일한 엔진을 웹 브라우저에서 실행할 수 있다는 뜻

 

4. 성능 최적화

- CPU+SIMD

   - CPU 연산을 단순 반복이 아니라 병렬화해서 빠르게 처리 (SIMD = Single Instruction Multiple Data)

 

- GPU 가속: OpenGL/ES, WebGL, WebGPU 지원

   - 모바일, 웹, 차세대 GPU 환경에서 모두 동작 -> 렌더링 속도 대폭 향상

 

- 테스크 스케줄러 기반 병렬 프로세싱 (내장)

   - 엔진 내부에 작업 스케줄러를 내장해, 여러 스레드가 동시에 일을 나눠서 수행

   - 렌더링 성능 확장 지원

   - 스레드 자원 환경에 맞춰 자동 확장 가능

   - 100개 이상 lottie animation이 돌아가는 환경에서도 고성능 확보

 

- 부분렌더링을 통한 성능 확보

   - 변경되는 부분만 재연산, 불필요한 연산 줄여서 성능 확보

   - 지도, ui 같은 대규모 svg 데이터에서도 빠른 반응 가능

   - 위 이미지에 나온 Paris-30k SVG 지도 렌더링 case:
      apple m2, 1920*1660 해상도에서 랜더링 18ms, svg 파싱&선처리: 204ms (개빠름ㄷㄷ)

 

5. 호환성/확장성

- meson 빌드 시스템, 모듈 기반 구조

   - ThorVG는 Meson을 사용해 빌드됨 -> 가볍고 빠른 빌드 환경

   - 모듈 구조라서 필요없는 기능은 빼고, 필요한 기능만 선택해 컴파일 가능

   - messon은 Ninja라는 빌드 툴을 백엔드로 사용하는데 빌드 속도가 굉장히 빠르다고 함.
      그리고 필요한 기능만 모듈로 빼서 빌드하는 기능을 지원한다고 한다

 

- 필요 기능만 빌드/통합 가능

  - 예를 들어 png, jpg 로더가 필요 없으면 빼서 바이너리(실행파일) 크기를 줄이 ㄹ수 있음

  - 임베디드처럼 제한된 리소스 환경에서 유리

 

- ThorVG 빌딩 구조: 다양한 포맷을 읽을 수 있고, 다양한 하드웨어 가속 백엔드에 대응하는 범용 엔진이다

APIs
- C/C++ (네이티브)
- JS/TS (웹, WebAssembly 기반)

Core ThorVG
- Renderer (렌더링 엔진 본체)

Loaders (입력 포맷 지원)
- Lottie, SVG, TTF(Font), PNG, JPG, WebP, GIF

Backends (출력, 렌더링 백엔드)
- CPU, OpenGL/ES, WebGPU

 

 

- 웹뷰어를 통한 테스트 및 호환성 확인

  - thorVG에서 제공하는 온라인 viewer를 활용해 lottie 같은 리소스를 불러와서 실제 렌더링 동작을 바로 테스트할 수 있음 
  - https://www.thorvg.org/viewer

ThorVG Viewer | ThorVG

 

ThorVG: 적용 사례

 

- 시스템 통합: 시스템 수준에서 내장해서 애니메이션을 처리하는 경우

   - lottie 애니메이션 엔진으로 사용

 

- 제품 통합: ThorVG를 직접 내부 그래픽 엔진으로 통합해 ui/게임/미디어에 활용

   - 스마트기기 ui에서 벡터 기반 그래픽을 빠르게 효율적으로 표현

 

- Paragraphic Graphic Design

  - 대량의 벡터 데이터를 효율적으로 그림, 대규모 벡터 데이터/그래픽 디자인 툴에도 적용할 수 있음

 

 

ThorVG: 핵심 기술

- 위에서 설명한 내용과 유사한 내용인듯

 

1. WebGPU 가속

- 차세대 웹 그래픽 기술 지원

   - WebGPU는 WebGL의 후속으로, 브라우저와 네이티브 환경에서 GPU 자원을 효율적으로 활용할 수 있는 최신 API

   - ThorVG는 WebGPU를 지원해 성능 개선을 실현

- 무제한 엔진 성능

   - GPU 인스턴스를 활용 -> 수많은 객체를 동시에 렌더링 가능. 4k 해상도에서 120FPS까지 도달 가능 (<<???대박)

- 플랫폼 이식성 확보

   - wgpu-native 같은 구현체를 사용해서 다양한 플랫폼에서 동일하게 동작 보장

   - 브라우저, 네이티브 앱, 임베디드 환경에서 같은 성능을 기대할 수 있음

-  성능 최적화 진행 중

   - ThorVG 렌더링 기능을 WebGPU 파이프라인에 맞게 최적화

 

2. 내장 스케줄러

- 랜더링 작업의 런타임 성능 확장 지원: 스레드 자원을 활용해 성능 자동 확장

- 스케일 업 환경에서 활용 가능: 코어가 많을수록 렌더링 병렬화 가능

- 100개 이상 로티 애니메이션 동시 실행 상황에서도 고성능 유지

 

3. ThorVG 렌더링 파이프라인

1) Preparation (준비 단계)

- Path 생성, Decode, Trim, Split 등 -> GPU로 넘기기 전 데이터 전처리

- Triangluate: 벡터 데이터를 삼각형으로 쪼개서 GPU에서 처리 가능하게 변환

   (잠시만... 컴퓨터그래픽스 수업에서 무수히 많은 삼각형으로 3차원 토끼를 그린 기억이 있는데 혹시 그게...)

 - Uniform buffers, bind groups 설정

 

2) Render (랜더 단계)

- Shapes/Strokes, Gradient 같은 요소를 GPU render path로 처리

- 여러 개의 render path를 조합

 

3) Blit Stage (출력 단계)

- 오프스크린 버퍼 처리

- 픽셀 포맷 변환(화면에 맞게)

- surface buffer(화면)으로 최종 출력

 

 

스마트 렌더링

- 변경된 영역만 추적해서 부분 렌더링을 수행함

- 이전 프레임과 현재 프레임을 비교해서 달라진 부분만 다시 그림 (슬라이드 본문 구름/해 그림 참조)

- 불필요한 연산을 줄여서 복잡한 ui나 애니메이션에서도 랜더링 부하가 줄어듦 (sw 렌더링 환경에서 1.5~2배 개선)

- apple m2, 2k 해상도, gpu 가속 없음 환경에서 테스트했을 때 스마트 렌더링 적용한 경우 56fps->88fps로 개선됨

 

 

ThorVG: 강력한 로티 재생 엔진

1. 전 플랫폼 구동 가능 엔진

- 모바일, 데스크탑, 임베디드, 웹 전부 지원

- 동일한 코드 기반으로 어디서나 동일한 로티 애니메이션 경험 제공

- 하나의 애니메이션을 제작하면 모든 플랫폼에서 그대로 동작

 

2. 향상된 lottie 기능 지원

- theme:
   런타임에 lottie 레이어/프로퍼티를 동적으로 오버라이드 해서 색상, 선 두께, 그라디언트 등 비주얼 속성 바꿔치기
   다크/라이트 모드 전환, 브랜드 컬러 적용, 상태별 강조색 변경 등

 

- 상태 트위닝:

   - 단일 애니메이션 안에서 특정 구간에 '이름(마커)'를 붙여 상태를 정의

   - 우측 상단에 rect -> circle -> star 처럼 정의

   - 만약 rect에서 바로 star로 간다고 해도(비연속 구간) 보간 수행해서 자연스럽게 연결 가능

   - key frame 사이 information을 연산해서 전이 과정을 자연스럽게 보여줌

 

- 사용자 상호반응 애니메이션: 

  - 개별 비주얼 요소 단위 히트 감지 지원: 애니메이션 속 특정 오브젝트를 클릭/터치했을 때 반응 가능

  - 표현식(Expression) 지원:

     After Effect에서 지원하는 JS 기반 Expression 처럼, 애니메이션 동작을 코드로 제어 가능

     조건부 동작, 반복, 물리 기반 반응 등을 작성 가능

  - 동적 속상 조작 허용:

     - 런타임에서 속성을 직접 바꾸거나 제어 가능

     - 슬라이더 값에 따라 표정 변화, 버튼 클릭 시 색상 전환 등

     - 미리 exception 범위를 제한해서 그 범위 내에서만 사용자 입력 기반 동작(반응)이 나타나도록 할 수 있다

        예를 들어 풍선이 날아가는 애니메이션에서
         사용자는 날아가는 풍선을 잡아서 끌어내릴 수 있는데, 화면 끝부분에 가면 터치 동작이 안먹힌다

  

 

dotLottie: 고도화된 마이크로 인터랙션 Lottie

 

1. 핵심 기능

1) 구조화된 데이터 형식

   - 여러 애니메이션, 상태, 테마, 인터렉티브 제어 등을 하나의 컨테이너(.lottie) 파일로 관리

   - 기존에는 애니메이션별 Json을 따로 관리해야 했으나, dotLottie는 패키징된 구조 제공

   - 파일 포맷 구조에서 가독성 있는 텍스트 기반 데이터 형식으로 변경

2) 파일 크기 절감

   - 애니메이션 json+이미지 리소스를 zip 포캣으로 묶어서 파일 크기를 줄임

   - 본문 예시: 581kb->134kb 77% 줄어듦

3) 멀티 애니메이션, 상태 머신, 인터렉티비티 조작 기능 제공

   - 하나의 dotLottie 파일에 여러 애니메이션, 상태 전환, 테마 변경, 인터랙션 로직을 담을 수 있음

4) 제작 도구 지원

- Lottie Creator나 Easy Converter같은 툴로 쉽게 제작 가능

 

 

그냥 귀여워서 찍음

2. dotLottie Player

- 설계 목표: 성능+크로스 플랫폼 일관성

- ThorVG 기반 아키텍쳐 프레임워크 통합: 즉, ThorVG 엔진을 기반으로 dotLottie를 재생

- 여러 백엔드 지원: 웹 워커, Software, WebGL, WebGPU -> 환경에 맞게 최적화

 

---

 

거의 컴퓨터그래픽스 교수님 강의를 듣는 기분이었지만

회사 다니다가 이런 강의를 들으니까 강의 듣고 시험 공부하던 시절로 돌아간 것 같아서 넘 좋았음

역시 사람은 새로운 것을 계속 배워야 함

(팩트: 이 사람 졸업한지 1년도 안됨)

 

아무튼 우리 팀에서도 로띠 쓰고 있는데 로띠 디자이너와 엔지니어의 강의를 직접 들을 수 있어서 신기하고 좋았음

그리고 그래픽 엔진에 대해 새로운 것을 이것 저것 많이 배워서 좋았다!!

 

연사자분들께 1촌 신청했는데 받아주셔서 좋았음(ㅎㅎ)

 

---

 

이 세션 후기 글을 재밌게 읽으셨다면 레브잇 FE 개발자 심수연에게도 많은 관심을 부탁드립니다~^^

그럼 이만

 

2025/08/31