Lottie 실무 블로그
모바일·웹 프로덕트에서 Lottie를 다루며 정리한 실무 노하우입니다. 에셋 검수는 뷰어에서 바로 할 수 있습니다.
FORMATLottie vs GIF vs 동영상 — UI 모션 포맷, 뭘 써야 할까
같은 모션을 세 포맷으로 만들었을 때의 용량·품질·제어력 차이와 상황별 선택 기준.
FORMATdotLottie(.lottie) 완벽 정리 — JSON을 언제 갈아탈까
컨테이너 구조, 압축률 실측, 런타임 지원 현황, 마이그레이션 시 주의점.
WEB웹에 Lottie 넣는 3가지 방법 — lottie-web부터 dotlottie-wc까지
스크립트 한 줄 임베드, npm 통합, 웹 컴포넌트 방식의 장단점과 성능 팁.
iOSiOS에서 Lottie 사용하기 — SwiftUI 시대의 lottie-ios 가이드
SPM 설치부터 LottieView, 재생 모드, 다크모드 색상 대응까지 실전 코드.
ANDROIDAndroid에서 Lottie 사용하기 — XML부터 Compose까지
lottie-android 설치, LottieAnimationView와 Compose API, 성능 체크포인트.
PERFORMANCELottie 파일 용량 줄이는 7가지 방법 (실측 포함)
312KB짜리 파일을 44KB로 만든 과정 — 원인 진단부터 단계별 최적화까지.
WORKFLOWAfter Effects → Lottie 내보내기 체크리스트
내보내기 전에 확인해야 할 지원 기능 경계와 자주 깨지는 패턴 정리.
DEBUGLottie가 안 움직일 때 — 단계별 디버깅 체크리스트
"내 기기에서만 안 나와요"의 원인 90%는 이 목록 안에 있습니다.
WORKFLOW디자이너–개발자 Lottie 핸드오프 규칙 만들기
규격·네이밍·검수 기준을 합의하면 모션 QA 시간이 절반으로 줄어듭니다.
WORKFLOW앱 빌드 없이 Lottie 미리보기 — iOS 개발자의 워크플로
파일 확인하려고 매번 Xcode 빌드? 빌드 0회로 검수 왕복을 끝내는 단계별 워크플로.
REACT NATIVEReact Native에서 Lottie 사용하기 — lottie-react-native 실전
설치, ref 재생 제어, 제스처 진행률 바인딩, New Architecture 주의점.
FLUTTERFlutter에서 Lottie 사용하기 — lottie 패키지 실전
AnimationController 연동, ValueDelegate 색상 교체, renderCache 성능 팁.
INTERACTION스크롤·제스처에 반응하는 Lottie 인터랙션 만들기
진행률을 입력값에 바인딩하는 순간 애니메이션은 UI가 됩니다 — 패턴별 구현.
RESOURCE무료 Lottie 에셋 구하는 곳과 라이선스 주의점
대표 소스 비교, 상업 프로젝트 라이선스 체크 4가지, 받은 에셋 손보는 법.
ACCESSIBILITYLottie와 모션 접근성 — 멀미 나지 않는 애니메이션
prefers-reduced-motion 대응, WCAG 자동재생 기준, 깜빡임 안전 규칙.