Flutter에서 Lottie를 써야 하는 이유

Lottie 동작 구조

Adobe After Effects
        ↓
Bodymovin 플러그인
        ↓
JSON 파일 생성
        ↓
Flutter Lottie 패키지로 렌더링

에펙에서 만든 모션을
JSON으로 변환해서
앱에서 그대로 렌더링하는 방식

왜 Lottie가 중요한가?

👩‍🎨 디자이너 협업 관점

기존 방식:
디자이너 → 에펙 파일 or 영상 전달
개발자 → 영상을 보고 “비슷하게” 구현
결과 → 느낌이 다름 (타이밍, 이징, 디테일 차이)

Lottie 방식

에펙에서 제작
JSON으로 export
앱에서 그대로 렌더링
✔ 모션 차이 최소화
✔ 타이밍, 이징 그대로 유지
✔ 협업 스트레스 감소

GIF 제작 방식의 문제점

에펙 → 영상 → GIF 변환 → 앱 적용
리소스 변환 과정 필요
이미지 품질 저하
해상도 고정
용량 증가

Lottie는 이런 과정이 불필요함

비용적인 관점에서의 장점

복잡한 애니메이션 코드를 작성하지 않아도 됨
GIF보다 작은 용량
벡터 기반 → 크기 제약 없음 (확대해도 안 깨짐)
플랫폼 독립적 → 동일 JSON 파일 사용 가능 (iOS / Android / Web)

Flutter 애니메이션 vs GIF vs Lottie 비교

1. Flutter 애니메이션

Flutter가 직접 위젯 트리 기반으로 애니메이션을 계산하고 그리는 방식

✅ 장점

성능 우수 (잘 설계된 경우)
완전한 제어 가능
사용자 입력
스크롤
제스처
동적 값 변경 가능
코드 기반 → 유지보수 쉬움

❌ 단점

복잡한 디자인 모션 구현 어려움
디자이너 협업 어려움
코드 양 증가

🎯 추천 상황

버튼 크기 변화
화면 전환
투명도 변화
사용자 인터랙션 기반 애니메이션

2. GIF

이미 렌더링된 비트맵 애니메이션 이미지

✅ 장점

구현 쉬움
플랫폼 무관 동일 동작

❌ 단점

해상도 고정 (확대 시 깨짐)
용량 큼
재생 제어 거의 불가능
색상 제한

🎯 추천 상황

아주 단순한 반복 애니메이션
프로토타이핑

3. Lottie

벡터 기반 JSON 애니메이션 렌더링

✅ 장점

디자이너 협업 최적화
에펙 모션 그대로 사용
디자인 구현 차이 최소화
코드 없이 복잡한 애니메이션 구현 가능
확대해도 깨지지 않음
재생 / 정지 / 반복 제어 가능

❌ 단점

• JSON 크기 커지면 성능 저하
  초기 로딩 지연
  프레임 드랍
• 많은 레이어, 복잡한 벡터, 큰 이미지 포함 시 무거움
• 에펙의 모든 기능 지원하지 않음
• 제스처/스크롤 기반 세밀한 인터랙션 적용 어려움
• 과도하게 사용 시 앱 용량 및 메모리 증가
• 디자이너 의존도 증가
• 수정 시 에펙 필요
  개발자가 즉시 수정하기 어려움
  

언제 Lottie를 쓰는 게 좋을까?

브랜드 중심 애니메이션

브랜드 로고 모션
스플래시 화면
로딩 애니메이션

피드백 애니메이션

좋아요
결제 완료
송금 완료
성공 / 에러 안내

Lottie는 “애니메이션 구현 도구”라기보다
디자이너-개발자 협업을 연결하는 포맷