Lottie: 개념, 애니메이션 및 모바일 플랫폼에서의 작동 방식

Lottie란 무엇이며 작동 방식

Lottie는 2015년 Airbnb가 만든 오픈 소스 라이브러리로, 실시간으로 벡터 애니메이션을 렌더링합니다. 개발자는 Adobe After Effects에서 애니메이션을 만들고 Bodymovin 플러그인을 통해 JSON으로 내보내면 Lottie가 대상 장치에서 레이어, 모양, 투명도 및 애니메이션 곡선을 해석하여 해당 JSON을 재생합니다.

비디오 파일이나 GIF와 달리 Lottie는 해상도에 독립적입니다 — 애니메이션이 벡터로 렌더링되며 모든 DPI의 장치에서 동일하게 보입니다. JSON 애니메이션은 평균적으로 동등한 GIF나 비디오보다 5~10배 작아 대역폭이 제한된 모바일 애플리케이션에 중요합니다.

Airbnb Engineering에 따르면, Lottie 도입으로 Precomposed 비디오 시퀀스와 비교하여 앱의 애니메이션 크기가 80% 감소했으며 모든 지원 장치에서 60FPS를 유지했습니다. 현재 Lottie는 iOS, Android, Flutter, React Native, Web(HTML Canvas 및 SVG) 및 데스크톱 플랫폼에서 지원됩니다.

Lottie의 성능은 네이티브 렌더링에서 비롯됩니다. iOS에서는 CALayer와 함께 Core Animation을 사용하고, Android에서는 JNI를 통해 C++로 자체 Canvas 렌더러를 사용합니다. 이는 중간급 장치에서도 수십 개의 레이어가 있는 복잡한 애니메이션을 프레임 드롭 없이 재생할 수 있게 합니다. WebView 기반 솔루션(GIF, APNG, 비디오)과 달리 Lottie는 렌더링을 위한 별도의 프로세스를 만들지 않으며 프레임 디코딩을 위해 추가 메모리를 소비하지 않습니다.

로딩 표시기, 마이크로 상호작용이 있는 아이콘, 온보딩 화면 및 부드러움과 작은 파일 크기가 중요한 프로모션 애니메이션에 Lottie를 사용하세요.

Lottie 생태계에는 8개 플랫폼용 공식 플레이어, 브라우저 미리보기용 LottieFiles 편집기 및 수천 개의 기성 애니메이션이 있는 마켓플레이스가 포함됩니다. 개발자는 JSON을 다운로드하여 프로젝트에 통합하고 After Effects를 열지 않고도 디자인 시스템에 맞게 색상과 속도를 조정할 수 있습니다. LottieFiles는 AIR 링크를 통해 애니메이션을 로드하는 기능으로 가속화된 통합을 위한 SDK도 제공하여 App Store 또는 Google Play에 앱의 새 버전을 게시하지 않고도 장치에서 애니메이션을 업데이트할 수 있습니다.

Lottie JSON 형식 및 Bodymovin

Lottie JSON 스키마는 벡터 애니메이션을 설명하기 위한 개방형 표준으로, 컴포지션, 레이어 및 모양의 세 가지 수준으로 구성됩니다. 컴포지션에는 메타데이터(캔버스 크기, 프레임 속도 및 기간)가 포함됩니다.

JSON 구조

루트 JSON 개체에는 layers 필드 — 애니메이션 레이어의 배열이 포함됩니다. 각 레이어는 Shape Layer, Image Layer, Text Layer 또는 PreComp Layer가 될 수 있습니다. 각 레이어에 대해 키프레임에 바인딩된 변환 속성(위치, 배율, 회전 및 불투명도)이 정의됩니다.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

키프레임은 타임스탬프, 값 및 보간을 위한 베지어 곡선이 있는 배열로 정의됩니다. Bodymovin은 After Effects 곡선을 자동으로 Lottie 호환 형식으로 변환하여 프레임 수준 정확도로 타이밍 및 이징 함수를 보존합니다.

Bodymovin — 내보내기 플러그인

Bodymovin은 컴포지션을 Lottie JSON 파일로 내보내는 Adobe After Effects 확장 프로그램입니다. 이 플러그인은 After Effects의 대부분의 기능(모양, 마스크, 효과, 텍스트 레이어 및 추적)을 지원합니다. 3D 레이어 및 일부 플러그인에는 제한 사항이 적용되며 내보내지지 않으므로 애니메이션을 2D로 단순화해야 합니다.

iOS에서 Lottie 통합

iOS에서 Lottie는 Swift Package Manager, CocoaPods 또는 Carthage를 통해 통합됩니다. 주요 클래스는 SwiftUI용 LottieView와 UIKit용 LottieAnimationView입니다. lottie-ios 패키지는 번들, 네트워크 및 Data 개체의 애니메이션을 지원합니다.

SwiftUI의 LottieView

LottieView는 번들의 JSON 파일 이름 또는 네트워크 로딩용 URL을 허용하는 SwiftUI용 View 구성 요소입니다. 애니메이션은 지정된 속도와 반복 횟수로 자동 재생됩니다.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

UIKit의 경우 LottieAnimationView가 사용되며 Interface Builder 또는 프로그래밍 방식으로 구성할 수 있습니다. 이 View는 play, pause, stop의 모든 애니메이션 상태와 데이터 로딩을 위한 진행률 표시줄을 지원합니다. LottieAnimationView는 목록의 애니메이션 아이콘을 위해 UITableViewCell 또는 UICollectionViewCell에 포함될 수 있습니다 — 스크롤 시 애니메이션이 일시 중지되고 셀이 화면에 나타나면 재개되어 CPU 및 GPU 리소스를 절약합니다.

최신 iOS 개발은 SwiftUI와 Lottie를 적극적으로 사용하여 애니메이션 온보딩 화면과 대화형 요소를 만듭니다. 스크롤 시 ScrollViewReader를 통해 애니메이션 진행률이 스크롤 위치와 동기화됩니다. 이는 애니메이션이 사용자의 손가락 움직임을 지속적으로 따라가는 패럴렉스 효과를 만들어 무거운 비디오 파일 없이 참여도를 높입니다.

재생 제어

iOS의 Lottie 플레이어는 특정 프레임에서 다른 프레임까지의 재생, KeyPaths를 통한 채우기/획 색상 변경 및 LottieAnimationDelegate를 통한 이벤트 수신을 위한 API를 제공합니다. 성능 최적화를 위해 스크롤 중에 애니메이션을 일시 중지하고 중지 시 재개할 수 있습니다.

Android에서 Lottie 통합

Android에서 Lottie는 Gradle 종속성 com.airbnb.android:lottie를 통해 추가됩니다. 주요 구성 요소는 LottieAnimationView로, XML 레이아웃에 일반 View로 배치하고 특성 또는 프로그래밍 방식으로 구성할 수 있습니다.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

XML 레이아웃에서 LottieAnimationView는 특성을 통해 구성됩니다: lottie_rawRes(res/raw의 JSON 참조), lottie_autoPlay, lottie_loop. 네트워크 로딩은 lottie_url 또는 프로그래밍 방식으로 setAnimationFromUrl을 통해 지원됩니다. Android 버전의 Lottie는 하드웨어 가속과 독립적인 자체 Canvas 렌더러를 사용합니다.

RawRes 및 네트워크에서 로딩

정적 애니메이션의 경우 JSON이 res/raw에 배치되고 RawRes를 통해 참조됩니다. 동적 애니메이션의 경우 Lottie는 URL 또는 Data 개체에서 JSON을 로드하며 다운로드 백분율을 보여주는 진행 콜백이 있습니다. Lottie 캐시는 로드된 애니메이션을 메모리에 자동으로 유지하여 반복 렌더링 시 재다운로드를 방지합니다.

Android용 Lottie는 목록 항목에 직접 포함된 LottieAnimationView를 통해 RecyclerView에서 애니메이션을 지원합니다. 성능 최적화를 위해 지연 로딩과 함께 setAnimation을 사용하고 RecyclerView.OnChildAttachStateChangeListener 콜백을 통해 화면 밖 요소의 애니메이션을 비활성화하는 것이 좋습니다. 이는 애니메이션 아이콘이 있는 긴 목록을 스크롤할 때 FPS 저하를 방지합니다.

Lottie 애니메이션 사용자 지정 및 제어

Lottie는 원본 After Effects 파일을 수정하지 않고 기성 애니메이션을 사용자 지정하기 위한 강력한 API를 제공합니다. 이를 통해 단일 애니메이션을 다양한 테마, 색상 및 앱 크기에 맞게 조정할 수 있습니다.

KeyPath를 통한 색상 변경

채우기 및 획 색상은 KeyPath(애니메이션 요소에 대한 문자열 경로)를 통해 런타임에 변경할 수 있습니다. 예를 들어, 장바구니 아이콘의 색상을 빨간색에서 파란색으로 변경하려면 KeyPath를 찾아 새 값을 적용하기만 하면 됩니다. 이렇게 하면 다양한 색상 구성표에 대해 동일한 애니메이션의 여러 버전을 저장할 필요가 없습니다.

속도 및 진행 제어

각 Lottie 애니메이션은 속도(animationSpeed), 진행(setProgress) 및 프레임 범위(play(fromFrame:toFrame:))로 제어할 수 있습니다. 진행 모드를 사용하면 애니메이션을 스크롤 제스처와 동기화할 수 있습니다. 화면을 더 많이 스크롤할수록 애니메이션이 더 진행됩니다 — 온보딩 및 패럴렉스 효과에 널리 사용되는 기술입니다.