Lottie - 앱에 애니메이션을 추가하는 방법

스터디 진행 중에 흥미로운 라이브러리인 "Lottie"를 발견하고 앱에 애니메이션을 추가해 보고 이에 따라 발생했던 에러에 대한 해결법을 한번 정리해 보자!

 

---

1. Lottie가 무엇인가요? 

Lottie는 개발자가 모바일 및 웹 애플리케이션에 고품질의 대화형 애니메이션을 추가할 수 있도록 Airbnb에서 만든 오픈 소스 애니메이션 도구이다. Adobe After Effects에서 JSON 파일로 내보낸 벡터 기반 애니메이션을 사용하여 모바일 및 웹 플랫폼에서 기본적으로 애니메이션을 렌더링 하는Android, iOS, 웹 및 Windows용 라이브러리이다. 

 

 

 

 

 

그럼 여기서 궁금한 것은 애니메이션과 관련된 오픈소스 및 라이브러리는 많은데 왜 굳이 Lottie??라고 생각할 수 있을 것 같다. 주요 차이점은 제작 및 렌더링 방식이다. 기존 애니메이션은 일반적으로 이미지 또는 비디오 파일로 다뤄지는 반면에 Lottie는 벡터 기반이고 확장이 손쉬우며 앱에 쉽게 통합할 수 있다는 것이다. 이제 얼마나 좋은지 확인해보자! 

---

 

2. 설치법

 

2. 1. 코코아팟

Podfile를 이용해서 설치하는 방법은 다른 라이브러리들과 크게 다르지 않다. 터미널에서 자신의 작업 환경으로 접근한 이후에 아래 코드를 입력해주자!

 

포드에 추가

pod 'lottie-ios'

 

pod 설치

pod install

 

이렇게 작업이 모두 끝나면 정상적으로 아래 그림처럼 Podfile 파일들이 생성된 것을 확인할 수 있다. 여기서 기존의 작업을 하던. xcodeproj가 아니라 이제는. xcworkspace에서 작업을 시작해야 한다. 이 정도는 다들 아시죠~?

 

 

2.2 Apple Swift Packages

위와 같이 코코아팟으로도 설치하는 방법이 있지만 Apple Swift Packages을 이용하여 설치할 수도 있다. 

 

 

https://github.com/airbnb/lottie-ios/

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

 

해당 링크는 통해 Packages에 추가하여 프로젝트에 추가해보는 방법도 있다.

 

설치는 모두가 손쉽게 할 수 있을 정도 매우 간단하다. 이제 실질적으로 사용하는 방법을 확인해보자.

 

 

---

 

3. Lottie 사용

 

Lottie는 JSON 형식을 이용한다는 것은 이미 알았고, 설치도 다했는데... 어떻게 써야 하지? 본인이 사용하고 싶은 애니메이션을 가져와야 한다. 가끔 앱 내부에 이미지 파일을 사용할 때 flaticon을 사용할 때가 있는데 Lottie도 마찬가지로 이미 많은 사람들이 디자인해둔 애니메이션을 가져올 수 있다! 

 

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

 

 

여기서 본인이 원하는 애니메이션 자료를 검색하고 다운로드하여 보면 되는데.. 각각의 자료는 저작권 문제가 굉장히 복잡하게 엮어져 있을 수 있으니 그런 부분은 잘 확인하고 사용하도록 하면 좋을 것 같다. 

 

일단 파일을 JSON 형식으로 다운로드하였다면 해당 파일을 바로 본인의 프로젝트에 삽입해주면 이제 진짜 시작이다!!

 

json 파일 코드

 

 

아래쪽에서 한 번 더 언급하겠지만, 아마 아래 코드를 작성해 보면 Xcode에서 오류가 나는 것을 확인할 수 있을 것이다.  왜 그런지는 마지막에 언급하겠다.

let starAnimationView = AnimationView(name: "StarAnimation")

 

 

 

ViewController에 지금처럼 AnimationView에 방금 우리가 다운로드하였던 JSON파일의 이름을 입력해주면 된다.

그리고 View에서의 크기 및 정렬을 설정해 주고 메서드를 추가할 수 있는데. 아마 저상태로 실행을 해보면 왜 추가 해야하는지 알게 될것이다. 애니메이션이 아니라 이미지처럼 멈춰있다...내가 원한건 그런것이 아니였기 때문에 당황하지 않고 더 찾아보니 당연하게도 메소드를 추가해 주면 달라지는 것들이 많이 있었다. 

 

 

animationView.loopMode

애니메이션을 어떻게 반복할 건지를 지정해 주는 메서드이다. 

// 무한으로 실행
starAnimationView.loopMode = .loop

// 1번만 실행
starAnimationView.loopMode = .playOnce
        
// 2번 실행하고 종료
starAnimationView.loopMode = .repeat(2)
        
// 애니메이션을 실행한 뒤, 실행한 애니메이션을 거꾸로 다시 실행
starAnimationView.loopMode = .repeatBackwards(1)
        
// 애니메이션을 실행한 뒤, 실행한 애니메이션을 거꾸로 다시 실행 (무한 반복)
starAnimationView.loopMode = .autoReverse

 

더 자세한 사용법은 아래 공식 링크를 통해 확인할 수 있다.

https://airbnb.io/lottie/#/ios? id=installing-lottie

Lottie Docs

 

그리고 이를 내 프로젝트에서 실행해 본 코드 및 시뮬레이터 결과이다.

import UIKit
import Lottie

class ViewController: UIViewController {
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let animationView: LottieAnimationView = .init(name: "loading")
        self.view.addSubview(animationView)
        
        
        
        animationView.frame = self.view.bounds
        animationView.center = self.view.center
        animationView.contentMode = .scaleAspectFit
        animationView.loopMode = .loop
        animationView.play()
    }
}

잘 작동한다~

끝난 것 같지만, 아직 끝나지 않았다..문제 없이 끝난것 같지만, 앞서 예고했던 대로 공식 문서에 나와 있는 대로 코드를 작성하면 Xcode에서 오류가 나는데 아직까지 왜 그런지 정확하게 파악이 되진 않았다. 나만 그런 줄 알고 있었지만, 스터디날 확인 해보니 모든 인원이 같은 에러와 만났다고 한다..

 

 

---

 

 

4. Lottie 사용 중 만난 에러 친구들

 

 

앞서 Lottie를 사용하기 위해 애니메이션뷰를 사용한 것을 기억할 것이다.

let starAnimationView = AnimationView(name: "StarAnimation")

그런데 이렇게 하면 바로 오류가 난다. 

 

 

이 문제는 이미 Stackoverflow에서도 등장한 문제로 아래 링크에서 해결 방법도 확인할 수 있으니 직접 확인하자!

https://github.com/airbnb/lottie-ios/issues/1891

Lottie 4.0.1 issue under iOS 16.2 in SwiftUI · Issue #1891 · airbnb/lottie-ios

 

 

Stackoverflow에서는 AnimationView에 대한 부분을 LottieAnimationView라고 변경하라고 한다. 다른 버전에서도 그런지 확인해보니 Lottie 3.5.0에서 컴파일할 때 폐기 되었다고 한다. 따라서 이제는 LottieAnimationView를 사용하면 될 것 같다. 대부분의 블로그 혹은 공식 문서에서 조차도 아직 저 부분은 변경하지 않아서 많은 어려움이 있었는데 그래도 찾아내서 다행이다...

 

진작에 Stackoverflow에서 찾아볼걸....

 

 

그래서 결론은 이제부터는 변경된 점을 확인하고 잘 사용해서 에러를 안 만났으면 좋겠다~혹시나 저런 오류가 나온다면 참고해보셔도 좋을 것 같습니다~

 

AnimationView --> LottieAnimationView