-
Lottie 사용법 총정리재미있는 디자인 2025. 12. 15. 19:12
링크는 꼭 보세요!
카카오뱅크 애니메이션 카피 내용 정리
1. Lottiefiles와 Lottie 파일 형식
2. Adobe After effects는 꼭 써야 하는가? (추천)
3. Lottiefiles에서 쓰는 Lottie 자체 editer
4. Figma에서 쓰이는 Lottie 플러그인
5. 3d Icon 사용 시 Png 시퀀스로 제작하는 법 (추천)
5-1. iOS, AOS에서 사용 시 발생했던 일 (추천)
1. Lottiefiles와 Lottie 파일 형식
개념 정리
- 에펙에서 제작된 애니메이션을 코드로 변환하여 웹에서 미리 보는 것특징
- 에어비엔비 개발자가 제작함- json 파일 형식의 애니메이션을 실시간으로 웹에서 렌더링하는 것- mp4, gif 형식의 애니메이션에 비해 가벼운 용량, 고화질2. Adobe After effects는 꼭 써야 하는가? (추천)
아카이브
1. 로티 사용설명서2. 에펙 작업 시 주의사항3. 구현되는 애니메이션, 안되는 애니메이션(iOS, 웹, Android)3. Lottiefiles에서 쓰는 Lottie 자체 editer
배우고 싶을 때 추천하는 강의들
- 인프런 강의 (에펙에서 출력하는 법, 자바 스크립트)- 디자인 베이스(월 4,990원 / 에프터이펙트, 자바스크립트)결론 ******* Adobe 에프터이펙트 강의 듣기를 추천!
https://designbase.co.kr/category/after-effects-course피그마에서 쓴다면, 결론 ******
- 피그마에서 만든 도형을 '피그마에 설치한 lottiefiles 플러그인'을 사용하고,
(각각 다른 도형들이 있으면 애니메이션 효과가 시간차로/동일하게 적용되는 정도)
lottifiles 사이트에 있는 자체 editer에서 컬러 등을 간단하게 수정하고, json 파일로 다운받을 수 있다.
- 피그마에서 플로우로 작업한 효과를 그대로 적용도 가능합니다.4. Figma에서 쓰이는 Lottie 플러그인
[피그마 사용 관련] 아카이브
- 피그마 애니메이션 기능 심화 버전- 피그마 프로토타입 기본 설명*파일 업로드 갯수 제한 10개까지5. 3d Icon 사용 시 Png 시퀀스로 제작하는 법 (추천)
[피그마 사용 관련] gif로 깔끔하게 추출하는 방법
- lottifiles 사이트로 피그마 플러그인으로 보내기 -> lottiefiles 사이트에서 다운받기5-1. iOS, AOS에서 사용 시 발생했던 일 (추천)
[1] 비트맵 이미지가 연속 시퀀스로 적용되는 3D Icon의 경우
1) iOS이미지 한 파일당 6~8kb -> 보다 높은 화질 수급 위함, lottiefiles 사이트 json파일 iOS 앱 내 문제 없음.2) AOS'Bodymovin 플러그인 이슈' 및 사용으로이미지 용량 모두 포함하므로 4kb로 낮춰 진행함.PNG Sequence 작업할 때, 바디 무빈 플러그인 사용 방법
Scripting & Expressions - Allow Scripts to Write Files and Access Network 체크되었는지 확인하기바디무빈 플러그인 - Apply Settings - 나머지 다 해제 - Assets / Include in json 만 체크했는지 확인하기 - Export Modes / Standard 만 체크하기 (Split 해제) - 마지막 Audio까지 열어서 체크해제되었는지 확인하기 - 주소창이나 파일명은 한글말고 영어로 되었는지 확인하기- 파일의 크기가 너무 클 경우1) 이미지 크기 조절2) 이미지 압축*중요! 거꾸로 하면 안됩니다.[2] 3D Icon 중에서 ai 파일의 경우
1. 일러스트레이터에서 사용하면, (이게 제일 용량문제가 없음, 가장 추천, png 지양) 필요없는 레이어들은 모두 삭제.2. 우클릭 - Create - Create Shapes from Vector Layer*이렇게 했을 때, 그라데이션이 깨지는 레이어는 삭제하는 게 제일 베스트 ㅠㅠ*다행히 adjustment layer는 사용 가능3. 만든 레이어에 효과 적용하기4. 에펙 효과 위에 마우스오버해놓고, - 우클릭 - Keyframe Assistant - Convert Expression to Keyframes참고
로띠의 새로운 기능(주로 유료버전)
로띠로 애니메이션 만들기
https://blog.naver.com/nick8888/223276254826
토스의 로띠 활용
피그마 플러그인 추천
https://blog.naver.com/kokko2/223203979420
'재미있는 디자인' 카테고리의 다른 글
일상 속 UI/UX디자인(병원 내부 많음) (0) 2025.12.23 금융 UI 디자인 (0) 2025.12.03 디자인 레퍼런스 - 한국(1) (0) 2025.11.18 UX(User eXperience)는 왜 필요할까 (0) 2025.10.23 [끄젹] 소프트웨어는 실체가 없다. (0) 2025.04.29