Lottie vs WebP Animation

안녕하세요. 그린입니다 🍏

이번 포스팅에서는 iOS 앱에서 애니메이션을 표현할 때 사용하는 Lottie와 WebP의 성능 차이와 선택 기준들에 대해 정리해보려고 합니다 🙋🏻

---

애니메이션 포맷 선택, 왜 중요할까?

모바일 앱에서 애니메이션은 UI/UX를 풍부하게 만드는 핵심 요소입니다.

하지만 성능, 용량, 디코딩 방식, 구현 편의성 등의 요소에 따라 포맷 선택은 앱의 사용자 경험과 직결됩니다.

 

그래서 이번 포스팅에서는 iOS에서 많이 사용하는 Lottie와 WebP 애니메이션을 비교하고, 실제 앱에 적용할 때 고려할 성능적 측면을 집중적으로 다뤄보겠습니다 💡

 

---

Lottie vs WebP 애니메이션 포맷 비교

포맷	타입	압축	CPU 사용량	메모리 사용량	재생 유연성	용량	장점	단점
Lottie	JSON벡터	벡터 압축	낮음	매우 낮음	자유로운 제어 (frame, loop 등)	적당함	고해상도에서도 품질 유지, 제어 가능	복잡한 애니메이션 구현 한계
WebP (애니메이션)	이미지 시퀀스	프레임 압축 (손실/무손실)	중간 ~ 높음	높음	제한적 (단순 loop)	작지만 프레임 수 따라 증가	비트맵 기반의 자연스러운 표현	디코딩 부하, 제어 불가

 

 

결론부터 말하면, Lottie는 벡터 기반의 저사양 친화적 표현에, WebP는 프레임 기반의 화려한 시각 표현에 적합합니다.

 

 

---

Lottie란?

Lottie는 Airbnb가 만든 JSON 기반의 벡터 애니메이션 포맷으로, After Effects에서 Bodymovin 플러그인을 사용해 내보낼 수 있습니다.

• 장점
  • 벡터 기반이라 고해상도에서도 깨지지 않음
  • 코드로 프레임 제어 가능 (loop, speed, pause, segment 등)
  • UIKit / SwiftUI 모두 지원 (LottieAnimationView)
  • 경량이며 CPU 부담이 거의 없음
• 단점
  • 애니메이션 복잡도에 제한 (복잡한 비트맵 표현 어려움)
  • After Effects와 연동 필요 (디자인-개발 협업 필수)

 

특히 UI 동작 피드백, 온보딩, 로딩 뷰 등에 이상적입니다.

 

---

WebP 애니메이션이란?

WebP는 Google에서 개발한 이미지 포맷으로, 애니메이션도 지원합니다.

• 프레임 기반으로 구성된 이미지 시퀀스를 압축해서 표현합니다.
• 무손실/손실 압축 모두 가능하며, 투명도(알파)도 지원합니다.
• 장점
  • 정교하고 화려한 비트맵 애니메이션 구현 가능
  • 파일 용량이 GIF 대비 30% 이상 작음
  • UIImageView나 SDWebImage에서 쉽게 사용 가능
• 단점
  • 디코딩 부담 큼 (특히 무손실 + 알파 + 다프레임 조합일 때)
  • 프레임 제어 불가 (pause/resume/frame sync 등)
  • CPU 사용량이 높아 스크롤 뷰 내 삽입 시 프레임 드랍 발생 가능

 

WebP는 시각적으로 풍부한 배너, 광고 영역 등 단순 반복 재생에 적합합니다.

---

실제 성능 비교 (iOS 기준)

항목	Lottie	WebP (애니메이션)
디코딩 시간	매우 빠름	중간 ~ 느림
CPU 부하	매우 낮음	높음 (특히 연속 재생 시)
메모리 사용량	매우 낮음	중간 ~ 높음
프레임 제어	지원 (segment, speed 등)	미지원
UIKit 연동	LottieAnimationView	UIImageView + SDWebImage
벡터/비트맵	벡터	비트맵
파일 용량	적당 (5~200KB 수준)	작음 (프레임 압축 기준)

 

 

특히 UICollectionView / UITableView에서 Lottie는 문제 없이 동작하지만, WebP는 셀 reuse가 잦은 구조에서는 디코딩 병목이 발생할 수 있어요.

 

 

---

성능 실험 시나리오

테스트	디바이스	Lottie 결과	WebP 결과
스크롤 중 애니메이션 10개 재생	iPhone 13	60fps 유지	40~50fps (드랍 발생)
메모리 프로파일링	iPhone SE2	~30MB 증가	~120MB 증가
CPU 프로파일링	iPhone 13	3~5%	12~20%

 

WebP 애니메이션은 특히 프레임 수가 많을수록 메모리와 CPU 부담이 커집니다.

---

어떤 상황에서 어떤 포맷을 써야 할까?

상황	권장 포맷	이유
고정된 시각적 효과, 광고성 배너	WebP	정교한 프레임 기반 표현 가능
UI 피드백 (로딩, 체크 애니메이션)	Lottie	경량, 성능 우수, 코드 제어 가능
반복 재생이 잦은 리스트 UI	Lottie	낮은 CPU/메모리, 재사용 최적
애니메이션 품질이 중요한 마케팅 뷰	WebP	자연스럽고 매끄러운 표현 가능
다크모드/색상 동적 변경 필요	Lottie	색상, 구성 요소 코드로 제어 가능

 

---

주의 사항

• Lottie는 내부에서 CALayer를 사용해 애니메이션을 구성하며, 비동기 렌더링과 CADisplayLink로 성능을 유지합니다.
• WebP는 libwebp로 디코딩되며, iOS 14 이상에서만 기본 지원됩니다. 하위 버전은 SDWebImageWebPCoder와 같은 플러그인이 필요합니다.
• WebP 애니메이션은 많은 프레임을 렌더링할 때 GC/ARC 압박이 올 수 있어 주의해야 합니다.

---

Conclusion

애니메이션 포맷 선택은 단순한 포맷의 문제가 아닌, 성능, 렌더링 전략, 사용 시나리오에 따라 달라져야 합니다.

• UI 반응성 중심 → Lottie
• 시각적 화려함 중심 → WebP

 

적재적소에 맞는 포맷을 선택해, 앱의 UX와 성능을 모두 챙겨보세요 😎

 

---

References

GitHub - SDWebImage/SDWebImageWebPCoder: A WebP coder plugin for SDWebImage, use libwebp

웹용 이미지 형식  |  WebP  |  Google for Developers

GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations