[SwiftUI] Lottie 사용하기

Lottie가 뭐죠?

Lottie는 에어비앤비에서 개발한 JSON 기반의 애니메이션 라이브러리다. 아마 로티를 사용해 보면 정말 자연스럽고 부드럽고 귀엽게(?) 애니메이션이 팡팡 터지는 것을 경험할 것이다. Lottie에 대한 간단한 설명과 이것을 어떻게 사용할 수 있을지 알아보자.

PNG, GIF, Lottie?

위는 PNG, GIF, Lottie의 크기 차이를 설명한 것이다. PNG, GIF는 픽셀이 보여서 만들어지기 때문에 계단현상과 깨짐 현상이 발생하게 된다. 그리고 픽셀 하나당 색상이 있어서 용량도 무거워진다. 하지만 Lottie는 JSON을 기반으로 하여 벡터 기반(선분, 면)으로 이루어져 있어서 깨지지 않는다.

PNG(Portable Network Graphics)와 SVG(Scalable Vector Graphics)차이를 나중에 제대로 정리해 보록 하겠다! 

JSON 이 뭐죠?

제이슨? 누구 이름인가? 간단하게 이야기하면 JavaScript Object Notation의 파일 형식을 말한다. 그런데 보통 제이슨파일 이라고 하는 것 같다. JSON파일을 사용하여 애니메이션 데이터를 텍스트로 저장하고 로티에서는 이것을 사용한다! 정도만 알고있어도 좋을 것 같다.. 일단 그림이 문자로 저장되기 때문에 용량이 당연히 가볍다!

Lottie 사용해보기

드디어 본론이다! 사용방법은 너~무나도 간단하다. 우선 Xcode를 킨다.

나의 프로젝트로 들어가 준다. 편의상 LottieAnimation 프로젝트를 만들어주었다.

메뉴를 보면 Package Dependencies 가 있을 것이다. 코코아팟을 사용하여 import를 할 수도 있겠지만 아래의 방법이 좀 더 쉬운 것 같다.

Swift Packages 에서 하단의 + 버튼을 눌러준다. lottie를 검색해 주면 아래와 같이 패키지를 추가할 수 있다. (대문자 안 돼요)

아래와 같이 패키지가 추가된 것을 확인할 수 있다!

내 프로젝트에 애니메이션 추가하기

이제 패키지를 받았으니 Lottie 애니메이션을 적용해 보자! 우선 JSON으로 변환된 애니메이션 파일이 필요하다. Lottie에서 제공하는 LottieFiles의 애니메이션을 사용해 보자.

Featured animations from our community

원하는 애니메이션을 선택한 후 상단의 다운로드를 눌러 Lottie JSON 으로 파일을 받아준다. 다운로드하여준 파일을 프로젝트 파일에 끌어다 넣어준다.

준비 완료! 이제부터 코딩 시간... 다운로드된 JSON 파일을 재생하기 위한 코드를 작성해야 한다.

아래와 같이 작성해 주면 위와 같은 protocol을 따라야 한다고 나오는데 Fix를 해주면 아래와 같이 뜬다.

type에 UIView를 입력한 후 다시 Fix 해주면!

역시 알아서 잘해주는 SwiftUI이다. 이제 이곳에 코드를 입력하면 되겠다. 두 함수가 이름 그대로의 기능을 해준다. 우리는 update 할 필요는 없다. makeUIView에 코드를 추가해 주면..!

import SwiftUI
// import Lottie!!
import Lottie

struct LottieView: UIViewRepresentable {
    // 입력받을 파일명과 loopMode
    let fileName: String
    let loopMode : LottieLoopMode
    
    func makeUIView(context: Context) -> Lottie.LottieAnimationView {
        let animationView = LottieAnimationView(name: fileName)
        // 입력한 loopMode로 재생
        animationView.loopMode = loopMode
        animationView.play()
        
        return animationView
    }
    
    func updateUIView(_ uiView: LottieAnimationView, context: Context) {
    }
}

참 간단하죠? 만들어준 LottieView를 사용해 준다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            LottieView(fileName: "glass-of-water", loopMode: .loop)
            Text("Lottie Animation")
        }
    }
}

아주 부드럽고 깔끔한 애니메이션이 작동되는 것을 확인할 수 있다!