-Today's Learning Content-
- Lottie
1. Lottie
내용정리
최종프로젝트의 런치스크린에 애니메이션을 추가하기 위해
Lottie라이브러리를 활용하는 방법을 알아보자
1) Lottie란?
Lottie는 애니메이션을 효율적으로 앱과 웹에 통합하기 위한 오픈소스 라이브러리이다. Adobe After Effects로 제작한 애니메이션을 JSON 형식으로 내보내는 Bodymovin 플러그인과 함께 사용된다.
JSON 파일을 앱에서 렌더링하여 애니메이션을 구현할 수 있다.
2) Lottie의 주요 특징
Lottie의 주요 특징을 정리하면 아래와 같다.
-
효율성
- JSON 파일로 애니메이션을 저장하므로, GIF 또는 비디오에 비해 파일 크기가 매우 작음.
- 벡터 기반 애니메이션을 지원하여 고해상도 화면에서도 품질 저하 없이 사용 가능.
-
크로스플랫폼 지원
- iOS, Android, React Native, Flutter, Web 등 여러 플랫폼에서 사용 가능.
-
다양한 애니메이션 가능
- 복잡한 애니메이션을 포함하여 모션 그래픽을 자연스럽게 구현할 수 있음.
- UI 트랜지션, 버튼 애니메이션, 로딩 스피너 등에 적합.
-
직관적인 통합
- iOS에서는 Lottie-iOS 라이브러리를 사용하며, 애니메이션을 쉽게 추가 가능.
- 애니메이션 파일을 단순히 로드하고 뷰에 추가하면 즉시 사용 가능.
3) Lottie의 장점
- 가벼운 애니메이션: JSON 데이터로 처리되므로 빠르고 최적화된 애니메이션 제공.
- 개발자와 디자이너의 협업 강화: 디자이너는 After Effects로 애니메이션을 제작하고 JSON 파일로 내보내기만 하면 개발자가 쉽게 통합 가능.
- 높은 커스터마이징 가능성: JSON 데이터의 특정 요소를 수정하여 애니메이션 속도, 색상, 레이아웃 등을 변경할 수 있음.
4) Lottie 사용 방법
Lottie 라이브러리를 사용하기 위해서는 우선 프로젝트에 SPM이나 cocoapods 등을 통해 Lottie 라이브러리를 추가해준다.
그리고 디자이너 등이 준비한 Lottie에서 사용할 JSON 파일을 프로젝트에 직접 추가한다.
마지막으로 아래와 같은 코드를 입력하여 Lottie를 실행시켜주면 된다.
import Lottie
let animationView = LottieAnimationView(name: "animationName")
animationView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
animationView.contentMode = .scaleAspectFit
animationView.loopMode = .loop // 애니메이션 반복 여부
view.addSubview(animationView)
animationView.play() // 애니메이션 실행5) Lottie로 런치 스크린 구현하기
위에서 학습한 내용을 기반으로 최종프로젝트에 Lottie를 이용하여 런치 스크린을 구현해보려고 한다.
우선 Lottie를 통해 재생할 애니메이션 JSON 파일이 필요한데... 여기서무료로 JSON 형식의 Lottie 애니메이션을 구현할 수 있어서 직접 만들었다.
(잘 안보이지만 비행기다)
그리고 프로젝트에서 SPM을 사용하여 Lottie 라이브러리를 추가해 주었다.
Lottie 이미지의 배경으로 사용할 배경 이미지도 생성해주고...
이제 메인 뷰 컨트롤러에 Lottie를 사용하여 런치 스크린을 구현할 것이다.
Xcode에서 지원하는 LaunchScreen.storyboard 파일에서는 Lottie 애니메이션을 재생할 수 없기 때문에, 메인 뷰 컨트롤러에서 띄워주고 조건에 따라 pop 되는 형식으로 구현한다.
먼저 아까 만든 JSON 파일을 프로젝트에 추가해준다.
그리고 메인 뷰 컨트롤러에 새로운 UI 컴포넌츠를 구현해준다.
import UIKit
import Lottie
import Then
/// TripLog 앱의 메인 뷰 컨트롤러
class MainViewController: UIViewController {
// MARK: - UI Compnents
private lazy var lottieAnimationView = LottieAnimationView(name: "triplog").then {
$0.frame = view.bounds
$0.center = view.center
$0.alpha = 1
$0.loopMode = .repeat(3) // 애니메이션 재생 횟수
}
private lazy var launchImageView = UIImageView().then {
$0.contentMode = .scaleAspectFit
$0.backgroundColor = .clear
$0.image = UIImage(named: "launchImage")
$0.frame = view.bounds
$0.center = view.center
$0.alpha = 1
}
// ...
}이제 두 UI를 메인 뷰 컨트롤러의 뷰에 추가해주고, Lottie의 play() 메소드를 사용하면 구현이 완료된다.
/// Lottie 애니메이션 실행 메소드
func playLottie() {
lottieAnimationView.play { _ in
// lottie 애니메이션 재생 완료 후 동작
UIView.animate(withDuration: 0.3, animations: {
self.lottieAnimationView.alpha = 0
self.launchImageView.alpha = 0
// view 애니메이션 종료 후 동작
}, completion: { _ in
self.lottieAnimationView.isHidden = true
self.launchImageView.isHidden = true
self.lottieAnimationView.removeFromSuperview()
self.launchImageView.removeFromSuperview()
})
}
}위에서 Lottie의 재생횟수를 3회로 지정했기 때문에, 애니메이션이 3회 재생이 되면 위의 메소드에서 지정한 로직이 실행되며 Lottie로 구현한 뷰가 화면에서 사라지게 된다.
구현 결과물
6) 결론
Lottie는 iOS 뿐 아니라 안드로이드, 웹 등 다양한 플랫폼을 지원하기 때문에 여러 환경에서 동일한 JSON 파일을 사용 가능하여 유연성이 크다.
그리고 화려하고 부드러운 애니메이션을 지원하는데 파일 크기가 작기 때문에 사용자 경험을 강화하면서도 리소스도 최소화할 수 있는 장점을 가지고 있다.
앞으로도 Lottie를 적극 활용하여 더 예쁘고 화려한 앱을 구현해 보도록 하자.
-Today's Lesson Review-
내가 디자이너인지 개발자인지... 