로티 (파일 형식)

위키백과, 우리 모두의 백과사전.

Lottie
파일 확장자json
개발에르난 토리시 (Hernan Torrisi)
발표일2015
포맷 종류벡터 애니메이션
다음으로부터 확장JSON, Adobe After Effects
다음으로 확장dotLottie
웹사이트https://airbnb.io/lottie
A white woman holding paper and a writing implement while looking at a table with drawings and silhouettes.
1939년의 로테 라이니거

로티(Lottie)는 벡터 그래픽 애니메이션을 위한 파일 형식으로, 독일 실루엣 애니메이션의 선구자인 Charlotte "Lotte" Reiniger의 이름에서 따와 명명되었다.[1]

설명[편집]

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

플레이어 구현에 따라, CPU, GPU 및 메모리 사용량에 차이가 존재할 수 있다.[3]

역사[편집]

2015년 - 에르난 토리시는 애니메이션 데이터를 JSON으로 직렬화하여 런타임에 렌더링하는 애니메이션 소프트웨어 Adobe After Effects 용 Bodymovin[4] 이라는 플러그인을 개발했다. After Effects 내부 형식의 주요 기능을 지원한다.[5] 또한 에르난 토리시는 최신 브라우저용 JavaScript 기반 플레이어가 포함된 형식의 렌더러를 출시했다.[2][6]

2017년 - 엔지니어 브랜든 위드로우(Brandon Withrow)가 iOS, 가브리엘 필(Gabriel Peal)은[7] 안드로이드, 리랜드 리처드슨(Leland Richardson)은 리엑트 네이티브 전용 로티 플레이어 개발에 참여했고 AirBnB의 수석 애니메이터 살리 푸둘 카림(Salih Abdul-Karim)과 함께 첫 번째 Lottie 라이브러리를 만들었다.[8] 이로 인해 다양한 플랫폼에서 로티 애니메이션을 지원하기 시작했다.[9]

또한 다른 회사들의 노력으로 더 많은 플랫폼을 지원하기 시작했다.[2]

2018년 - 마이크로소프트 와 . NET Foundation은 Windows 전용의 로티 렌더링 라이브러리[10]를 출시했다.

2019년 - 로티 렌더링을 위한 QML API를 추가하면서 Qt[11] 에서 로티 애니메이션 지원을 시작했다. 같은 해 후반에 삼성전자는 플랫폼 독립적인 C++ 기반 렌더러인 rLottie[12]를 출시하고 타이젠에 로티 지원을 추가했다. 이 형식을 사용하는 Python 프레임워크도 올해 출시되었다.[13]

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

2023년 - 벡터 그래픽 라이브러리인 토르 벡터 그래픽스가 자체 엔진을 기반으로 로티 렌더링 기능을 지원하기 시작했다.[14]

Example of a rendered lottie

{
    "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
                }
            ]
        }
    ]
}

dotLottie 파일 형식[편집]

dotLottie
파일 확장자.lottie
발표일2020
포맷 종류벡터 애니메이션
다음의 컨테이너로티
다음으로부터 확장Zip file
웹사이트https://dotlottie.io/

2020년에는 Lottie 파일을 다른 리소스와 함께 압축하는 표준 방법으로 dotLottie 파일 형식이 제안되었다. 파일은 실제로 deflate 방법으로 압축된 zip 파일이다. 여기에는 매니페스트 파일 과 미리보기 이미지가 포함되어 있어 파일을 쉽게 조작할 수 있다.[15]

참고자료[편집]

  1. ↑ “What is a Lottie animation? - LottieFiles”. 《lottiefiles.com》 (영어). 2022년 1월 11일에 확인함. 
  2. ↑ 가 나 다 “What is a Lottie animation? - LottieFiles”. 《lottiefiles.com》 (영어). 2022년 1월 11일에 확인함. 
  3. ↑ Biørn-Hansen, Andreas; Grønli, Tor-Morten; Ghinea, Gheorghita (2019년 5월 5일). “Animations in Cross-Platform Mobile Applications: An Evaluation of Tools, Metrics and Performance”. 《Sensors》 (영어) 19 (9): 2081. Bibcode:2019Senso..19.2081B. doi:10.3390/s19092081. PMC 6539844. PMID 31060290. 
  4. ↑ Torrisi, Hernan (2021년 12월 15일). “bodymovin-extension” (영어). GitHub. 2022년 1월 11일에 확인함. 
  5. ↑ “Introducing dotLottie”. 《dotlottie.io》 (영어). 2022년 1월 11일에 확인함. 
  6. ↑ “bodymovin-extension”. 2021년 12월 15일. 
  7. ↑ 《Behind the Creation of Lottie》 
  8. ↑ “Lottie Docs”. 《airbnb.io》. 2021년 12월 14일에 확인함. 
  9. ↑ “Lottie”. 《Lottie》 (영어). AirBnB. 2022년 1월 11일에 확인함. 
  10. ↑ “Lottie-Windows”. 2021년 12월 15일. 
  11. ↑ “Announcing QtLottie”. 《www.qt.io》. 
  12. ↑ “rlottie: A New Approach to Motion Graphics”. 
  13. ↑ “python-lottie Changelog”. 
  14. ↑ “thorvg 0.10.0 release note”. 
  15. ↑ “Introducing dotLottie”. 《dotlottie.io》 (영어). 2022년 1월 11일에 확인함. 

외부 링크[편집]

원본 주소 "https://ko.wikipedia.org/w/index.php?title=로티_(파일_형식)&oldid=36542451"