Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
Search
Jinny You
July 12, 2024
Design
140
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
LottieFiles로 시작하는 빠르고 효율적인 애니메이션 핸드오프
Jinny You
July 12, 2024
More Decks by Jinny You
See All by Jinny You
나의 오픈소스 이야기 : 한 줄의 코드에서 글로벌 애니메이션 엔진까지
tinyjin
0
44
Next Gen Lottie: Powering Motion Graphics Across the Apple Ecosystem
tinyjin
0
34
디자이너와 개발자가 자주 겪는 Lottie 핸드오프 FAQ - Figma Config Watch Party Seoul
tinyjin
0
160
인디 앱 개발자와 Flutter
tinyjin
0
570
모던 웹 기술로 C++ 렌더링 엔진 테스트 자동화하기
tinyjin
0
110
그래픽 엔진 포팅 사례로 배우는 웹어셈블리 웹 컴포넌트 개발부터 디버깅, 최적화까지
tinyjin
0
560
韩国的打卡地:你喜欢海边吗?
tinyjin
0
130
エンジニアが見つめるLottieアニメーション
tinyjin
0
160
ThorVG's Lottie Model in Action
tinyjin
0
370
Other Decks in Design
See All in Design
自社プロダクトのUIをAIが再現するデザインビルドシステム
toy1618
0
1.4k
いいUIとは?初心者向けに事例をもとにUIデザインを分解
yuichi_hara7
13
7.4k
デザインレビューを「他者へのおすそわけ」に再定義し、たのしい場にする試み
webnaut
2
180
AIが作るデザインの レビューコストと向き合って分かったこと. -正社員デザイナー1人の組織でデザインハーネスを立ち上げた話-
hidekiietaka
1
390
Saving_the_King_-_Storyboard.pdf
terencebasart
0
410
日経電子版を支えていく Kasane Design System
taitotnk
0
590
富山デザイン勉強会_生成AIを使ったデザイン制作2026最新版.pdf
keita_yoshikawa
0
210
HeartLanguage - DesignProcess
heartlanguage
0
410
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
chiemitaki
1
520
ロゴマークは「象徴」だ! 〜JAWS FESTA in AKITA 2026のロゴマークに寄せて〜
hachihcah
0
270
少人数チームで_使われるプロダクトにたどり着くための_デザインハーネス.pdf
nishame
1
1.6k
みんながデザインを担う組織へ。急加速する開発組織でのデザイナーの戦略
mukai_takeru
0
410
Featured
See All Featured
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
820
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
520
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
350
Fantastic passwords and where to find them - at NoRuKo
philnash
53
4k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
310
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
1
600
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.9k
How GitHub (no longer) Works
holman
316
150k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Bash Introduction
62gerente
615
220k
The Invisible Side of Design
smashingmag
301
52k
Unsuck your backbone
ammeep
672
58k
Transcript
로 시작하는 빠르고 효율적인 애니메이션 핸드오프 Jinny You, LottieFiles
[email protected]
1
Agenda 1. 2. 3. 4. 5. 자기소개 개발자에게 필요한 Lottie
애니메이션 Lottie로 빠르게 애니메이션 개발하기 개발자와 Lottie로 협업하기 신규 Runtime & 지원정보 2
자기소개 • • • Jinny You (유진의) Software Engineer, LottieFiles
Lottie를 구동하는 그래픽스 엔진 개발 차세대 유니버셜 Lottie Player 프로젝트 참여 50건 이상의 웹/앱 프로덕트 개발 경험 (Web, React, Vue, Android, iOS, Flutter, ReactNative) 3
개발자에게 필요한 Lottie 애니메이션 4
개발자에게 Lottie란? 애니메이션이 필요한 순간 5
CSS나 JS로 일일이 개발… 개발자에게 Lottie란? 6
키워드로 쉽게 애니메이션을 찾아 개발자에게 Lottie란? 7
단 몇줄의 코드로 애니메이션을 구현! 개발자에게 Lottie란? 8
디자이너로부터 "이런 애니메이션 가능하죠?"라고 요청받아도 개발자에게 Lottie란? 9
"이걸 내가 어떻게 만들지…" (디자이너도 아니고…) “Lottie로 전달주세요!” 개발자에게 Lottie란?
10
그 누구보다도 개발자들에게 Lottie가 필요합니다 개발자에게 Lottie란? 11
그래서 Lottie로 얼마나 쉽게 애니메이션을 추가하고 "핸드오프"할 수 있을까요? 12
Lottie로 빠르게 애니메이션 개발하기 13
필요한 곳에 어디든지, We can Lottie Anroid iOS 스플래시 Web
14
정적인 페이지에 역동감이 필요하신가요? 15
필요한 애니메이션을 찾거나 전달받으세요 lottiefiles.com/featured 16
1。 2。 3。 17
18
어떠한 프로젝트이든 1분이면 Lottie 추가! 19
"Lottie" 써보면 개발자들이 더 좋아할걸요? 20
단 몇줄의 코드, Lottie 안 쓸 이유가 없겠죠? 21
Lottie로 Web 또는 App 환경에서 필요로하는 애니메이션을 단.번.에 추가할 수
있어요 22
개발자와 Lottie로 협업하기 23
혹시 Lottie를 도입하려고해도 개발자들이 부담스러워할까봐 걱정이신가요? 개발자와 Lottie로 협업하기 24
• • • • • 매번 눈대중으로 코딩해야하고 코드라인수가 심하게
길어짐 디자이너랑 개발자간의 갈등심화는 기본 GIF, MP4 기존 방식은 성능이 떨어져요 성능이 떨어지니 유지보수에 더 많은 시간이 들죠 기존 방식으로 애니메이션을 추가한다는건… 25
Lottie를 쓴다는 것은 개발자의 시간을 아껴주는 것이기도 해요 개발자와 Lottie로
협업하기 26
그래서 개발자에게 어떤 정보를 전달해보면 좋을까요? 개발자와 Lottie로 협업하기 27
Runtime과 지원정보 28
LottieFiles에서는 더 나은 Lottie 사용을 위해 Dev Portal을 통해 여러
정보들을 제공하고 있어요 https://developers.lottiefiles.com 29
어디서든 사용가 능한 무수한 Library • • • • •
Web Android iOS React Native Flutter 30
모든 플랫폼 호환 더욱 빠르고 가벼운 새로운 플레이어 Runtime 31
Lottie와 관련된 모든 개발정보는 DevPortal에서 확인하실 수 있습니다 (FAQ, 라이브러리,
통합/시작하기, 지원정보…) https://developers.lottiefiles.com 32
정리하기 33
정리하기 복잡한 애니메이션은 이제 ✔️ Lottie로 빠르게 개발자에게 핸드오 프
Lottie 관련 개발정보가 필요하다 면 ✔️ Dev Portal을 통해 정보를 확인하세요 👈🎨디자이너 개발자 👩💻👉 34
Lottie와 관련된 모든 개발질문은 열려있어요 • • • Jinny You
(유진의) Software Engineer, LottieFiles linkedin.com/in/jinui github.com/tinyjin speakerdeck.com/tinyjin 35