thorvg.flutter

Flutter Korea 2025 행사(10.25. 토)에서 발표한 자료입니다.

Transcript

1. thorvg.flutter를 소개합니다! lottie에서 thorvg로, 사용자에서 기여자로 권태형 고려대학교 / Flutter Seoul
2. 목차 1 연사자 소개 2 ThorVG 프로젝트 3 thorvg.flutter 프로젝트 4 lottie에서 thorvg로 전환, 그리고 기여 5 오픈소스 사용자에서 기여자로 전환 6 마치며 @TaeBbong Flutter Korea 2025
3. 연사자 소개 @TaeBbong Flutter Korea 2025 권태형 @TaeBbong 고려대학교 정보보호학부 졸업 보안 업계에 7년 근무 계약(5년 완료) 인프런에 무료 플러터 강의를 올려 대략 1.8만명 수강 책 두 권 집필 플러터는 2019년부터 알았지만, 점점 더 친해지는 중 요즘엔 오픈소스 기여, 플러터 코어에 제일 몰입 중 불의의 사고로 흑역사에 가까운
4. @TaeBbong Flutter Korea 2025 lottie 파일 : JSON 포맷으로 작성된 벡터 기반 lottie : 플러터에서 lottie 파일을 재생하기 위한 기존 애니메이션 파일 패키지 intro : 용어 정리
5. 벡터 그래픽스 들어보셨나요? @TaeBbong Flutter Korea 2025
6. intro : 벡터 그래픽스란?? @TaeBbong Flutter Korea 2025 흔히 알고 있는 “ 이미지 포맷” 깨지지 않는
7. intro : 벡터 그래픽스란?? @TaeBbong Flutter Korea 2025 흔히 알고 있는 “ 이미지 포맷” 깨지지 않는
8. intro : 벡터 그래픽스란?? @TaeBbong Flutter Korea 2025 기하학적 요소를 시각적 이미지로 생성
9. intro : 벡터 그래픽스란?? @TaeBbong Flutter Korea 2025 벡터 그래픽스 : 수식(벡터)으로 표현한 렌더링 : 수식을 계산하여 그림을 그림 그리는 것
10. intro : 2D 그래픽스 렌더링 엔진 @TaeBbong Flutter Korea 2025 벡터, 래스터 등 2D 그래픽을 렌더링하는 엔진 Impeller
11. intro : 2D 그래픽스 렌더링 엔진 @TaeBbong Flutter Korea 2025 벡터, 래스터 등 2D 그래픽을 렌더링하는 엔진
12. ThorVG 프로젝트 초경량 크로스 플랫폼 벡터 그래픽 렌더링 엔진 최소 로 탑재 가능한 경량 엔진 IoT, RTOS 등 저사양 기기에서도 구동 써드파티 의존성 X 다양한 방식의 지원 드로잉부터 등 다양한 산업표준 렌더링 지원 150KB 하드웨어 가속 Lottie, SVG @TaeBbong Flutter Korea 2025
13. ThorVG 프로젝트 @TaeBbong Flutter Korea 2025 언젠가 플러터 가 되고 싶다 → 유사 역할 렌더링 엔진인 기여로 이해 확장 → 이후 플러터 엔진 분석까지 이어서 → 도 체계적으로 배우기 코어 엔진 기여자 ThorVG 오픈소스 기여
14. thorvg.flutter를 소개합니다! @TaeBbong Flutter Korea 2025 크로스 플랫폼 엔진으로, Windows, MacOS, Linux, Web(WASM), Embedded, Android, iOS, 를 지원 중 Flutter
15. thorvg.flutter를 소개합니다! @TaeBbong Flutter Korea 2025 Flutter 성장 중 에서는 Lottie 애니메이션 
 렌더링 기능을 우선 지원 중 시작된지 1년 정도 된, 빠르게 인 오픈소스 프로젝트
16. thorvg.flutter를 소개합니다! @TaeBbong Flutter Korea 2025 Lottie 파일이란? JSON 포맷으로 작성된 벡터 방식의 애니메이션 파일
17. thorvg.flutter를 소개합니다! @TaeBbong Flutter Korea 2025 그동안 에서는? 를 설치해서 사용 flutter lottie 패키지
18. thorvg.flutter를 소개합니다! @TaeBbong Flutter Korea 2025 lottie에서 thorvg로의 전환은, “새로운 엔진인 로도 lottie 파일을 재생할 수 있다는 것!” 패키지 사용의 전환 thorvg
19. 사용자로 시작하기 @TaeBbong Flutter Korea 2025
20. thorvg.flutter 설치하기 @TaeBbong Flutter Korea 2025 패키지 추가만 간단히 하면 됩니다!
21. thorvg.flutter 적용하기 @TaeBbong Flutter Korea 2025 lottie thorvg 패키지 import
22. thorvg.flutter 적용하기 @TaeBbong Flutter Korea 2025 lottie (거의) 동일한 인터페이스 제공 thorvg
23. thorvg.flutter 적용하기 @TaeBbong Flutter Korea 2025 lottie thorvg
24. Lottie vs 비교해보기 ThorVG @TaeBbong Flutter Korea 2025
25. lottie vs thorvg - 동작 방식 비교 @TaeBbong Flutter Korea 2025 lottie.json lottie.json Parsed JSON drawPath drawImage saveLayer ThorVG lottie thorvg Flutter Framework Device Flutter Framework(App) Canvas Rendering Engine Rendering Engine CustomPainter FFI Skia/Impeller App Widget
26. lottie vs thorvg - 동작 방식 비교 @TaeBbong Flutter Korea 2025 lottie.json lottie.json Parsed JSON drawPath drawImage saveLayer ThorVG CustomPainter FFI Skia/Impeller Dart VM GC가 메모리 관리 vs C++로 수동 메모리 관리
27. 기여자가 될 준비하기 @TaeBbong Flutter Korea 2025
28. thorvg.flutter - 개발환경 분석, 셋팅 @TaeBbong Flutter Korea 2025
29. thorvg.flutter - 개발환경 분석, 셋팅 thorvg : 엔진 repo를 로 연결 src/ : 엔진 코드에서 Lottie만 가져다 쓰기 위한 submodule 연결(binding) 코드 @TaeBbong Flutter Korea 2025
30. thorvg.flutter - 개발환경 분석, 셋팅 엔진 빌드 → 기반 빌드 환경 필요 플랫폼마다 빌드 스크립트 사전 정의 meson, ninja @TaeBbong Flutter Korea 2025
31. thorvg.flutter - 개발환경 분석, 셋팅 엔진 빌드 → 필요 플랫폼마다 빌드 스크립트 사전 정의 meson, ninja 기반 빌드 환경 @TaeBbong Flutter Korea 2025 웬만하면 환경 권장... Linux, Mac
32. thorvg.flutter - 개발환경 분석, 셋팅 ffi는 C++ 기반 를 플러터에서 사용할 수 있도록 하는 기능 네이티브 라이브러리 @TaeBbong Flutter Korea 2025
33. thorvg.flutter - 개발환경 분석, 셋팅 @TaeBbong Flutter Korea 2025 Dart/Flutter 영역 (Managed) 네이티브 영역 (Native) 1) Dart 코드 (사용자 코드) Struct/Pointer 준비, 타입 정의 (typedef) 2) dart:ffi 바인딩 (FFI Binding) • DynamicLibrary.open(...) 로딩 • lookup<NativeFunction<T>> → Dart 함수 포인터로 래핑 3) 메모리/타입 마샬링 (Marshalling) • calloc / malloc 포인터 할당 및 해제 • Dart ↔ C 타입 매핑 (int, double, Utf8, Struct 등) A) 네이티브 라이브러리 (C/C++/Rust 등) 공개 심볼: extern "C" 함수, ABI 고정 B) 스레드/상태 관리 • 재진입성 / 스레드-세이프 고려 • 콜백 시 메인 Isolate로의 전파 설계 C) OS/시스템 호출 • 파일/네트워크/그래픽/디바이스 API • 플랫폼별 빌드(.so/.dll/.dylib) 함수 호출 (Call) 심볼 조회/바인딩 포인터/버퍼 전달 리턴 값/에러 코드 네이티브 → Dart 콜백 (Native → Dart callback) 콜백은 포인터로 등록하고, Isolate 경계/스레드 안전성 주의
34. thorvg.flutter - 개발환경 분석, 셋팅 ffi, ffigen 기반 C++ 라이브러리 연결 설정 @TaeBbong Flutter Korea 2025
35. thorvg.flutter - 개발환경 분석, 셋팅 빌드된 엔진 라이브러리를 동적으로 불러와 사용 @TaeBbong Flutter Korea 2025
36. 기여자로 전환하기 @TaeBbong Flutter Korea 2025
37. thorvg.flutter - PR #25(첫번째 기여) 처음 프로젝트 셋팅하면서 기여했던 PR 꽤 범용적으로 쓰이는 과, 안드로이드 앱 실행시 생기는 을 .gitignore로 추가하는 PR fvm 관련 파일 .cxx 파일 @TaeBbong Flutter Korea 2025
38. thorvg.flutter - PR #25(첫번째 기여) @TaeBbong Flutter Korea 2025 글로벌 오픈소스라 모든 메시지는 영어로 작성합니다(눈치껏 )
39. thorvg.flutter - PR #25(첫번째 기여) @TaeBbong Flutter Korea 2025 생각보다 별거 없네?! 약간 생기면서 도 생김 자신감 욕심
40. thorvg.flutter - Issue #26(첫번째 실수) 기여할 만한 부분 없나 찾아보다가 을 지원하면 좋겠다 생각 dotlottie 파일 포맷 @TaeBbong Flutter Korea 2025
41. thorvg.flutter - Issue #26(첫번째 실수) 프로젝트 방향성에 맞지 않았고, 에 적절치 못한 커뮤니케이션 오픈소스 문화 @TaeBbong Flutter Korea 2025
42. thorvg.flutter - Issue #26(첫번째 실수) 흔한 신입사원/뉴비들의 실수 기존 와 타임라인을 하고, 작은 일도 의미 없는 일이 아니다 업무 프로세스 존중 @TaeBbong Flutter Korea 2025
43. thorvg.flutter - PR #27(두번째 작은 기여) example 앱을 실행하다 에러를 발견 android example 앱에서 namespace가 통일되지 않아 Activity를 찾을 수 없는 이슈 시켜 해결 (org.thorvg.example) namespace를 통일 @TaeBbong Flutter Korea 2025
44. thorvg.flutter - Issue #22(첫번째 실패) 프로젝트 타임라인, 시급한 이슈 중 해볼만한, 유의미한 기여 포인트라고 생각하여 시작 @TaeBbong Flutter Korea 2025
45. thorvg.flutter - Issue #22(첫번째 실패) iOS 환경에서 를 넣어 배포할 수 없으며, arm64 아키텍처 기반 iOS 시뮬레이터에서는 동적 라이브러리 지원 준비가 안되어 있던 이슈 동적 라이브러리 @TaeBbong Flutter Korea 2025
46. thorvg.flutter - Issue #22(첫번째 실패) podspec에 소스파일 등록 정적 링킹간 코드 유실되지 않도록 설정 @TaeBbong Flutter Korea 2025
47. thorvg.flutter - Issue #22(첫번째 실패) lib 파일 연결 시 process()를 사용하여 정적 링킹 시도 @TaeBbong Flutter Korea 2025
48. thorvg.flutter - Issue #22(첫번째 실패) 심볼을 찾지 못하는 에러가 발생 뭐 어떻게 해야 하지..? @TaeBbong Flutter Korea 2025
49. thorvg.flutter - Issue #22(첫번째 실패) C++ 개발과 iOS 네이티브 개발 양쪽에 경험이 없어 매우 어려웠음 좀 더 공부하고 시도해보겠다 선언(도망) @TaeBbong Flutter Korea 2025
50. thorvg.flutter - PR #31(내 장점을 살린 기여) @TaeBbong Flutter Korea 2025
51. thorvg.flutter - PR #31(내 장점을 살린 기여) @TaeBbong Flutter Korea 2025 Lottie 위젯 크기를 설정하지 않고, 부모 위젯에서 크기를 지정할 때 문제 발생
52. thorvg.flutter - PR #31(내 장점을 살린 기여) @TaeBbong Flutter Korea 2025 Lottie 위젯 사이즈를 계산하는 로직에서 부모 제약(constraints)을 고려 X
53. thorvg.flutter - PR #31(내 장점을 살린 기여) @TaeBbong Flutter Korea 2025 이슈를 먼저 등록하고, 좋은 반응과 을 얻고 시작 공감대 형성
54. thorvg.flutter - PR #31(내 장점을 살린 기여) @TaeBbong Flutter Korea 2025 LayoutBuilder를 사용해 부모 constraints 받아오기 RenderBox를 상속받아 레이아웃 로직 직접 구현하기 context.findRenderObject()로 계산된 크기 가져오기
55. thorvg.flutter - PR #31(내 장점을 살린 기여) context.findRenderObject()를 통해 최종 계산된 위젯 크기를 받아와, 2번째 프레임부터 그리기 @TaeBbong Flutter Korea 2025
56. thorvg.flutter - PR #31(내 장점을 살린 기여) @TaeBbong Flutter Korea 2025
57. thorvg.flutter - PR #31(내 장점을 살린 기여) @TaeBbong Flutter Korea 2025 프로젝트에 를 발견했고, 이슈로 먼저 공유하여 하며, 내가 가진 (플러터 파이프라인)을 활용할 수 있는 기여 해결이 필요한 문제 공감대를 형성 배경지식
58. 마치며 @TaeBbong Flutter Korea 2025
59. 마치며 @TaeBbong Flutter Korea 2025 플러터에서의 lottie 플레이어로써, 는 새로운 선택지 thorvg
60. 마치며 @TaeBbong Flutter Korea 2025 사용자에서 로 전환, 처음은 언제나 어렵지만 누구나 할 수 있다 기여자
61. 마치며 @TaeBbong Flutter Korea 2025 오픈소스 프로젝트는 바로 옆에 사람은 없지만 사실 수 많은 사람들과 함께 일하는 이 중요 협업 커뮤니케이션 능력
62. 마치며 @TaeBbong Flutter Korea 2025 기여를 위한 기여보단, 프로젝트의 과 내 역량의 을 위해 성장 발전
63. 마치며 @TaeBbong Flutter Korea 2025 우리 모두 각자 잘하는게 있으니 내 능력으로 찾아보자 기여할 수 있는 걸
64. 감사합니다! @TaeBbong