{{위키데이터 속성 추적}}
{{파일 포맷 정보|name=Lottie|icon=|extension=json|mime=|developer=에르난 토리시 (Hernan Torrisi)|type=벡터 애니메이션|url=https://airbnb.io/lottie|iconcaption=|screenshot=|caption=|uniform_type=|conforms_to=|magic=|released=2015|latest_release_version=|latest_release_date=|extended_from=[[JSON]], [[Adobe After Effects]]|extended_to=dotLottie|standard=|free=|type_code=}}
[[파일:Lotte_Reiniger_1939.jpg|대체글=A white woman holding paper and a writing implement while looking at a table with drawings and silhouettes.|섬네일| 1939년의 로테 라이니거]]
'''로티(Lottie)'''는 벡터 그래픽 애니메이션을 위한 파일 형식으로, 독일 실루엣 애니메이션의 선구자인 Charlotte "Lotte" Reiniger의 이름에서 따와 명명되었다.<ref>{{웹 인용|url=https://lottiefiles.com/what-is-lottie|제목=What is a Lottie animation? - LottieFiles|웹사이트=lottiefiles.com|언어=en|확인날짜=11 January 2022}}</ref>

== 설명 ==
Lottie는 [[JSON|JSON을]] 기반으로 하지만 Lottie 파일은 길이가 1~2자의 키를 사용하며 사람이 읽을 수 없다. 웹, 모바일 및 데스크탑 애플리케이션에서 사용하기 위해 [[GIF|애니메이션 GIF]] 및 [[APNG]] 파일에 대한 더 가벼운 대안으로 만들어졌다. 벡터형이므로 장치 해상도와 무관하다. [[래스터 그래픽스|래스터 그래픽]] 요소도 포함될 수 있다. 프로그래밍이 가능하고 상호 작용 기능을 추가할 수 있다.<ref name="What"/>

플레이어 구현에 따라, CPU, GPU 및 메모리 사용량에 차이가 존재할 수 있다.<ref name="Sensors">{{저널 인용|제목=Animations in Cross-Platform Mobile Applications: An Evaluation of Tools, Metrics and Performance|저널=Sensors|성=Biørn-Hansen|이름=Andreas|성2=Grønli|이름2=Tor-Morten|날짜=5 May 2019|권=19|호=9|쪽=2081|언어=en|bibcode=2019Senso..19.2081B|doi=10.3390/s19092081|pmc=6539844|pmid=31060290|성3=Ghinea|이름3=Gheorghita}}</ref>

== 역사 ==
2015년 - 에르난 토리시는 애니메이션 데이터를 JSON으로 직렬화하여 런타임에 렌더링하는 애니메이션 소프트웨어 Adobe [[어도비 애프터 이펙트|After Effects]] 용 ''Bodymovin''<ref name="bodymovin">{{웹 인용|url=https://github.com/bodymovin/bodymovin-extension|제목=bodymovin-extension|성=Torrisi|이름=Hernan|날짜=15 December 2021|출판사=GitHub|언어=en|확인날짜=11 January 2022}}</ref> 이라는 플러그인을 개발했다. After Effects 내부 형식의 주요 기능을 지원한다.<ref>{{웹 인용|url=https://dotlottie.io/intro/|제목=Introducing dotLottie|웹사이트=dotlottie.io|언어=en|확인날짜=11 January 2022}}</ref> 또한 에르난 토리시는 최신 브라우저용 [[자바스크립트|JavaScript]] 기반 플레이어가 포함된 형식의 렌더러를 출시했다.<ref name="What"/><ref>{{웹 인용|url=https://github.com/bodymovin/bodymovin-extension|제목=bodymovin-extension|날짜=December 15, 2021}}</ref>

2017년 - 엔지니어 브랜든 위드로우(Brandon Withrow)가 iOS, 가브리엘 필(Gabriel Peal)은<ref>{{인용|제목=Behind the Creation of Lottie|url=https://www.youtube.com/watch?v=I2zhX4NuV_I언어=en}}</ref> 안드로이드, 리랜드 리처드슨(Leland Richardson)은 리엑트 네이티브 전용 로티 플레이어 개발에 참여했고 [[에어비앤비|AirBnB]]의 수석 애니메이터 살리 푸둘 카림(Salih Abdul-Karim)과 함께 첫 번째 Lottie 라이브러리를 만들었다.<ref>{{웹 인용|url=https://airbnb.io/lottie/|제목=Lottie Docs|웹사이트=airbnb.io|확인날짜=2021-12-14}}</ref> 이로 인해 다양한 플랫폼에서 로티 애니메이션을 지원하기 시작했다.<ref name="AirBnB">{{웹 인용|url=https://airbnb.design/lottie/|제목=Lottie|웹사이트=Lottie|출판사=AirBnB|언어=en|확인날짜=11 January 2022|archive-date=2020-10-29|archive-url=https://web.archive.org/web/20201029092644/https://airbnb.design/lottie/|url-status=}}</ref>

또한 다른 회사들의 노력으로 더 많은 플랫폼을 지원하기 시작했다.<ref name="What">{{웹 인용|url=https://lottiefiles.com/what-is-lottie|제목=What is a Lottie animation? - LottieFiles|웹사이트=lottiefiles.com|언어=en|확인날짜=11 January 2022}}</ref>

2018년 - [[마이크로소프트]] 와 [[닷넷 파운데이션|.]] [[닷넷 파운데이션|NET Foundation은]] [[마이크로소프트 윈도우|Windows]] 전용의 로티 렌더링 라이브러리<ref>{{웹 인용|url=https://github.com/CommunityToolkit/Lottie-Windows|제목=Lottie-Windows|날짜=December 15, 2021}}</ref>를 출시했다.

2019년 - 로티 렌더링을 위한 QML API를 추가하면서 Qt<ref>{{웹 인용|url=https://www.qt.io/blog/2019/03/08/announcing-qtlottie|제목=Announcing QtLottie|웹사이트=www.qt.io}}</ref> 에서 로티 애니메이션 지원을 시작했다. 같은 해 후반에 [[삼성전자]]는 플랫폼 독립적인 C++ 기반 렌더러인 [[rLottie]]<ref>{{웹 인용|url=https://www.youtube.com/watch?v=Q2c7Hj_Sa1o|제목=rlottie: A New Approach to Motion Graphics}}</ref>를 출시하고 [[타이젠]]에 로티 지원을 추가했다. 이 형식을 사용하는 [[파이썬|Python]] 프레임워크도 올해 출시되었다.<ref>{{웹 인용|url=https://gitlab.com/mattbas/python-lottie/-/blob/master/CHANGELOG.md|제목=python-lottie Changelog}}</ref>

2020년 - dotLottie가 탄생했다. 이 오픈 소스 파일 형식은 여러 로티 파일과 모든 지원 리소스를 단일 파일로 결합한다.

2023년 - 벡터 그래픽 라이브러리인 [[토르 벡터 그래픽스]]가 자체 엔진을 기반으로 로티 렌더링 기능을 지원하기 시작했다.<ref>{{웹 인용|url=https://github.com/thorvg/thorvg/releases/tag/v0.10.0|제목=thorvg 0.10.0 release note}}</ref>

[[파일:Lottie_basic_example.png|대체글=Example of a rendered lottie|렌더링된 로트의 예]]<syntaxhighlight lang="json">
{
    "v": "5.7.1",
    "ip": 0,
    "op": 180,
    "nm": "Animation",
    "fr": 60,
    "w": 512,
    "h": 512,
    "layers": [
        {
            "ddd": 0,
            "ty": 4,
            "ind": 0,
            "st": 0,
            "ip": 0,
            "op": 180,
            "nm": "Layer",
            "ks": {
                "a": {
                    "a": 0,
                    "k": [
                        256,
                        256
                    ]
                },
                "p": {
                    "a": 0,
                    "k": [
                        256,
                        256
                    ]
                },
                "s": {
                    "a": 0,
                    "k": [
                        100,
                        100
                    ]
                },
                "r": {
                    "a": 0,
                    "k": 0
                },
                "o": {
                    "a": 0,
                    "k": 100
                }
            },
            "shapes": [
                {
                    "ty": "el",
                    "nm": "Ellipse",
                    "d": 1,
                    "p": {
                        "a": 0,
                        "k": [
                            256,
                            256
                        ]
                    },
                    "s": {
                        "a": 0,
                        "k": [
                            256,
                            256
                        ]
                    }
                },
                {
                    "ty": "st",
                    "nm": "Stroke",
                    "o": {
                        "a": 0,
                        "k": 100
                    },
                    "c": {
                        "a": 0,
                        "k": [
                            0.114,
                            0.157,
                            0.282
                        ]
                    },
                    "lc": 2,
                    "lj": 2,
                    "ml": 0,
                    "w": {
                        "a": 0,
                        "k": 20
                    }
                },
                {
                    "ty": "fl",
                    "nm": "Fill",
                    "o": {
                        "a": 0,
                        "k": 100
                    },
                    "c": {
                        "a": 0,
                        "k": [
                            0.196,
                            0.314,
                            0.690
                        ]
                    },
                    "r": 1
                }
            ]
        }
    ]
}
</syntaxhighlight>

== dotLottie 파일 형식 ==
{{파일 포맷 정보|name=dotLottie|icon=|extension=.lottie|mime=|developer=|type=벡터 애니메이션|url=https://dotlottie.io/|iconcaption=|screenshot=|caption=|uniform_type=|conforms_to=|magic=|released=2020|latest_release_version=|latest_release_date=|container_for=로티|extended_from=[[Zip file]]|standard=|free=|type_code=}}
2020년에는 Lottie 파일을 다른 리소스와 함께 [[디지털 컨테이너 포맷|압축하는 표준 방법]]으로 dotLottie 파일 형식이 제안되었다. 파일은 실제로 [[DEFLATE|deflate]] 방법으로 압축된 zip 파일이다. 여기에는 [[매니페스트 파일]] 과 미리보기 이미지가 포함되어 있어 파일을 쉽게 조작할 수 있다.<ref name="dotLottie">{{웹 인용|url=https://dotlottie.io/intro/|제목=Introducing dotLottie|웹사이트=dotlottie.io|언어=en|확인날짜=11 January 2022}}</ref>

== 각주 ==
{{각주}}

== 외부 링크 ==
* {{공식 웹사이트|https://github.com/lottie-animation-community/docs/blob/main/Lottie_Specification.md|Lottie specification}} by the Lottie animation communities
* [https://lottiefiles.github.io/lottie-docs/ A Human's guide to the Lottie format] Extensive documentation of the format

[[분류:JSON]]
[[분류:어도비 소프트웨어]]
[[분류:벡터 그래픽스 파일 포맷]]
[[분류:2차원 애니메이션 소프트웨어]]