로티 (파일 형식)
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
로티는 JSON을 기반으로 하는 애니메이션 파일 형식으로, 웹, 모바일, 데스크톱 애플리케이션에서 GIF, APNG 파일의 대안으로 사용된다. 벡터 기반이므로 해상도에 영향을 받지 않으며 래스터 그래픽 요소도 포함할 수 있고, 프로그래밍을 통해 상호 작용 기능을 추가할 수 있다. 2015년 에어비앤비의 엔지니어에 의해 처음 개발되었으며, 2020년에는 여러 로티 파일과 리소스를 묶는 dotLottie 파일 형식이 제안되었다.
더 읽어볼만한 페이지
- 벡터 그래픽스 파일 포맷 - 거버 포맷
거버 포맷은 인쇄 회로 기판 설계 정보를 제조 현장에 전달하는 표준 데이터 형식으로, 조셉 거버가 개발하여 컴퓨터 지원 제조 시스템에 채택되면서 업계 표준이 되었으며, RS-274X 등 다양한 버전이 존재하고 PCB 제조 공정 및 자동 광학 검사 등에 활용된다. - 2차원 애니메이션 소프트웨어 - 어도비 애니메이트
어도비 애니메이트는 2D 벡터 애니메이션 제작 프로그램으로, 퓨처스플래시 애니메이터에서 매크로미디어 플래시를 거쳐 현재의 이름으로 변경되었으며, 웹 애니메이션 제작에서 시작하여 다양한 플랫폼을 지원하며 활용 범위를 넓혀가고 있다. - 2차원 애니메이션 소프트웨어 - 펜슬2D
펜슬2D는 2D 애니메이션 제작을 위한 오픈 소스 소프트웨어로, 2005년 Pencil이라는 이름으로 개발된 후 여러 개발자들의 기여를 통해 기능 개선 및 호환성 확장을 거쳐 현재까지 발전해왔다. - JSON - JSON 웹 토큰
JSON 웹 토큰(JWT)은 헤더, 페이로드, 서명으로 구성되어 정보를 안전하게 전송하는 개방형 표준으로, 사용자 인증 및 권한 부여에 주로 사용되지만 알고리즘 관련 취약점, 키 관리, 토큰 무효화 등의 문제점도 존재한다. - JSON - JSON-LD
JSON-LD는 JSON 데이터를 RDF 모델로 표현하는 직렬화 방법으로, 컨텍스트를 활용해 JSON 속성을 온톨로지 개념에 연결하며 SEO, 의료 정보학, IoT 등 다양한 분야에서 활용되고 Schema.org, 구글 지식 그래프 등에서 중요한 역할을 한다.
| 로티 (파일 형식) - [IT 관련 정보]에 관한 문서 | |
|---|---|
| 기본 정보 | |
| 유형 | 벡터 애니메이션 |
| 확장자 | json |
| 개발자 | 에르난 토리시 |
| 발표일 | 2015년 |
| 확장 대상 | JSON, Adobe After Effects |
| 확장 | dotLottie |
| 웹사이트 | Lottie 공식 웹사이트 |
2. 설명
로티(Lottie)는 JSON을 기반으로 하는 애니메이션 파일 형식이다.[1][24] 웹, 모바일, 데스크톱 애플리케이션 등 다양한 환경에서 기존의 애니메이션 GIF나 APNG 파일을 대체하기 위한 가벼운 대안으로 개발되었다.[1][24] 기본적으로 벡터 그래픽 방식을 사용하여 기기의 해상도에 영향을 받지 않고 선명하게 표현될 수 있으며, 필요에 따라 래스터 그래픽 요소를 포함할 수도 있다.[1][24] 또한 프로그래밍을 통해 상호작용 기능을 추가하는 것이 가능하다.[1][24] 다만, 로티 파일을 재생하는 방식에 따라 CPU, GPU, 메모리 사용량에는 차이가 있을 수 있다.[2][17]
2. 1. JSON 기반
로티(Lottie)는 JSON 형식을 기반으로 하는 애니메이션 파일 형식이다.[1][24] 하지만 파일 크기를 줄이기 위해 일반적으로 길이가 1~2자인 짧은 키(key)를 사용하므로, 사람이 직접 코드를 읽기는 어렵다.[1][24] 이러한 구조 덕분에 애니메이션 GIF나 APNG 파일보다 가벼운 대안으로 웹, 모바일, 데스크톱 애플리케이션 환경에서 사용된다.[1][24] 로티는 기본적으로 벡터 그래픽 기반이므로 해상도에 관계없이 선명하게 표현될 수 있으며, 필요에 따라 래스터 그래픽 요소를 포함하는 것도 가능하다.[1][24] 또한, 프로그래밍을 통해 애니메이션을 제어하거나 사용자와 상호작용하는 기능을 추가할 수 있다.[1][24] 다만, 로티 파일을 재생하는 플레이어 구현 방식에 따라 CPU, GPU, 메모리 사용량에는 차이가 있을 수 있다.[2][17]2. 2. 장점
로티는 웹, 모바일 및 데스크탑 애플리케이션에서 사용하기 위해 애니메이션 GIF 및 APNG 파일에 대한 더 가벼운 대안으로 만들어졌다.[24][1] 벡터 형식을 기반으로 하므로 장치 해상도와 무관하다는 장점이 있다.[24][1] 또한 필요에 따라 래스터 그래픽 요소를 포함하는 것도 가능하다.[24][1] 프로그래밍을 통해 상호 작용 기능을 추가할 수 있다는 점도 중요한 특징이다.[24][1]다만, 로티 파일을 재생하는 플레이어의 구현 방식에 따라 중앙 처리 장치(CPU), 그래픽 처리 장치(GPU), 메모리 사용량에는 차이가 존재할 수 있다.[17][2]
2. 3. 렌더링 방식
로티 파일을 화면에 표시하는 플레이어(Player)를 어떻게 구현하는지에 따라 CPU, GPU, 메모리 사용량에 차이가 있을 수 있다.[17] 다양한 플레이어 구현 방식들은 각각 CPU, GPU, 메모리 사용량 사이에서 서로 영향을 주고받는 트레이드오프(trade-off) 관계를 가진다.[2]3. 역사
로티 파일 형식은 2015년 에르난 토리시가 개발한 어도비 애프터 이펙트용 플러그인 ''Bodymovin''[3]에서 시작되었다. 이는 애니메이션 데이터를 JSON 형식으로 내보내 웹이나 앱에서 런타임에 렌더링할 수 있게 한 초기 시도였다.[15] 2017년에는 에어비앤비 엔지니어들이 iOS, 안드로이드, 리액트 네이티브 등 다양한 플랫폼을 지원하는 로티 라이브러리를 개발 및 출시하면서[6] 본격적으로 확산되었다.[7]
이후 마이크로소프트[8], 삼성전자[10], Qt[9] 등 여러 기업과 개발 커뮤니티의 참여로 지원 플랫폼이 확대되고 기능이 개선되었다.[1] 2019년에는 파이썬 프레임워크가 출시되었고,[11] 2020년에는 여러 로티 파일과 리소스를 하나로 묶는 dotLottie 형식이 등장했다. 2023년에는 토르 벡터 그래픽스(ThorVG)가 로티 렌더링 지원을 추가했으며,[12] 2024년에는 파일 형식 표준화를 위한 커뮤니티가 설립되는 등[13] 지속적으로 발전하고 있다. 같은 해 웹 플레이어 관련 보안 문제가 발생하기도 했다.[14]
3. 1. 2015년: Bodymovin
2015년, 에르난 토리시(Hernan Torrisi)는 애니메이션 데이터를 JSON으로 직렬화하여 런타임에 렌더링하는 어도비 애프터 이펙트(Adobe After Effects)용 플러그인 Bodymovin[3]을 개발했다. 이 플러그인은 애프터 이펙트 내부 형식의 주요 기능을 지원한다.[15] 또한 토리시는 최신 브라우저용 자바스크립트(JavaScript) 기반 플레이어가 포함된 렌더러도 출시했다.[1][4]3. 2. 2017년: 에어비앤비의 로티 라이브러리
2017년, 에어비앤비(AirBnB)의 엔지니어들과 수석 애니메이터 살리 푸둘 카림(Salih Abdul-Karim)이 협력하여 여러 플랫폼에서 로티 애니메이션을 렌더링할 수 있는 최초의 로티 라이브러리[6]를 개발했다.[7] 이 개발에는 iOS 담당 브랜든 위드로우(Brandon Withrow), 안드로이드 담당 가브리엘 필(Gabriel Peal)[5], 리액트 네이티브 담당 리랜드 리처드슨(Leland Richardson) 엔지니어가 참여했다. 이 라이브러리의 개발로 다양한 플랫폼에서 로티 애니메이션을 지원하는 길이 열렸으며,[23] 이후 다른 회사들의 노력으로 더 많은 플랫폼을 지원하기 시작했다.[1]3. 3. 2018년: 마이크로소프트의 지원
마이크로소프트와 .NET Foundation은 Windows에서 로티를 렌더링하기 위한 라이브러리[8][25]를 출시했다.3. 4. 2019년: 삼성전자와 Qt의 지원
Qt[9]는 로티 렌더링을 위한 QML API를 출시하여 로티에 대한 추가적인 지원을 제공했다. 같은 해 삼성은 로티를 위한 플랫폼 독립적인 C++ 기반 렌더러인 rLottie[10]를 출시하고 타이젠(Tizen)에 로티 지원을 추가했다. 또한 이 해에 이 형식을 사용하기 위한 파이썬(Python) 프레임워크도 출시되었다.[11]3. 5. 2020년: dotLottie 파일 형식
2020년에는 dotLottie라는 새로운 파일 형식이 등장했다. dotLottie는 오픈 소스 파일 형식으로, 여러 개의 로티 파일과 관련 리소스들을 하나의 단일 파일로 통합하는 기능을 제공한다.3. 6. 2023년: ThorVG
2023년, 벡터 그래픽 라이브러리인 토르 벡터 그래픽스가 자체 엔진을 기반으로 로티 렌더링 기능을 지원하기 시작했다.[29]3. 7. 2024년: 표준화 노력 및 보안 문제
2024년에는 로티 파일 형식의 발전을 위한 중요한 움직임이 있었다. 로티 애니메이션 커뮤니티가 파일 형식을 표준화하기 위해 설립되었다.[13] 이는 다양한 플랫폼과 도구에서 로티 파일의 호환성을 높이고 안정적인 사용 환경을 구축하려는 노력의 일환으로 볼 수 있다.한편, 같은 해에 보안 문제도 발생했다. 웹 페이지에서 로티 애니메이션을 재생하는 데 사용되는 npm 패키지인 ''lottie-player''가 일시적으로 해킹 공격을 받아 악성 코드가 삽입되는 사건이 있었다. 이 악성 코드는 암호화폐 사용자를 표적으로 삼았다.[14] 이 사건은 오픈 소스 생태계의 보안 취약점과 관리의 중요성을 다시 한번 상기시키는 계기가 되었다.
4. dotLottie 파일 형식
2020년에 Lottie 파일을 다른 리소스와 함께 표준 방식으로 묶기 위해 제안된 파일 형식이다.[30][15]
4. 1. 구조
2020년에 Lottie 파일을 다른 리소스와 함께 표준 방식으로 묶는 방법으로 dotLottie 파일 형식이 제안되었다. 이 파일은 실제로는 deflate 방식으로 압축된 ZIP 파일이다. 파일 조작을 용이하게 하기 위해 매니페스트 파일과 미리보기 이미지를 포함한다.[30][15]4. 2. 장점
2020년에 로티(Lottie) 파일을 다른 관련 자료들과 함께 표준적인 방식으로 묶는 dotLottie 파일 형식이 제안되었다. 이 파일 형식은 실제로는 deflate 압축 방식을 사용한 zip 파일이다. dotLottie 파일 안에는 매니페스트 파일과 미리보기 이미지가 포함되어 있어, 사용자가 파일을 더 쉽게 관리하고 조작할 수 있다.[15]5. 예제
아래 코드는 위 그림과 같이 파란색 원을 표시하는 간단한 로티 애니메이션의 예시이다. 이 JSON 코드는 가로, 세로 각각 512픽셀 크기의 애니메이션을 정의한다.
{
"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
}
]
}
]
}
참조
[1]
웹사이트
What is a Lottie animation? - LottieFiles
https://lottiefiles.[...]
2022-01-11
[2]
간행물
Animations in Cross-Platform Mobile Applications: An Evaluation of Tools, Metrics and Performance
2019-05-05
[3]
웹사이트
bodymovin-extension
https://github.com/b[...]
GitHub
2021-12-15
[4]
웹사이트
bodymovin-extension
https://github.com/b[...]
2021-12-15
[5]
Youtube
Behind the Creation of Lottie
https://www.youtube.[...]
2022-02-17
[6]
웹사이트
Lottie Docs
https://airbnb.io/lo[...]
2021-12-14
[7]
웹사이트
Lottie
https://airbnb.desig[...]
AirBnB
2022-01-11
[8]
웹사이트
Lottie-Windows
https://github.com/C[...]
2021-12-15
[9]
웹사이트
Announcing QtLottie
https://www.qt.io/bl[...]
[10]
Youtube
rlottie: A New Approach to Motion Graphics
https://www.youtube.[...]
[11]
웹사이트
python-lottie Changelog
https://gitlab.com/m[...]
2023-12-24
[12]
웹사이트
thorvg 0.10.0 release note
https://github.com/t[...]
[13]
웹사이트
Lottie as a standard with Lottie Animation Community (LAC) format specification body
https://lottie.githu[...]
[14]
뉴스
LottieFiles Issues Warning About Compromised "lottie-player" npm Package
https://thehackernew[...]
2024-10-31
[15]
웹사이트
Introducing dotLottie
https://dotlottie.io[...]
2022-01-11
[16]
웹인용
What is a Lottie animation? - LottieFiles
https://lottiefiles.[...]
2022-01-11
[17]
간행물
Animations in Cross-Platform Mobile Applications: An Evaluation of Tools, Metrics and Performance
2019-05-05
[18]
웹인용
bodymovin-extension
https://github.com/b[...]
GitHub
2022-01-11
[19]
웹인용
Introducing dotLottie
https://dotlottie.io[...]
2022-01-11
[20]
웹인용
bodymovin-extension
https://github.com/b[...]
2021-12-15
[21]
인용
Behind the Creation of Lottie
https://www.youtube.[...]
[22]
웹인용
Lottie Docs
https://airbnb.io/lo[...]
2021-12-14
[23]
웹인용
Lottie
https://airbnb.desig[...]
AirBnB
2022-01-11
[24]
웹인용
What is a Lottie animation? - LottieFiles
https://lottiefiles.[...]
2022-01-11
[25]
웹인용
Lottie-Windows
https://github.com/C[...]
2021-12-15
[26]
웹인용
Announcing QtLottie
https://www.qt.io/bl[...]
[27]
웹인용
rlottie: A New Approach to Motion Graphics
https://www.youtube.[...]
[28]
웹인용
python-lottie Changelog
https://gitlab.com/m[...]
[29]
웹인용
thorvg 0.10.0 release note
https://github.com/t[...]
[30]
웹인용
Introducing dotLottie
https://dotlottie.io[...]
2022-01-11
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com