개요편집이의 제기
로티(Lottie)는 벡터 그래픽 애니메이션을 위한 파일 형식이다. JSON을 기반으로 하지만 키 길이가 1~2자에 불과해 사람이 직접 읽기 어렵다. 독일의 실루엣 애니메이션 선구자인 샬롯 "로테" 라이니거(Charlotte "Lotte" Reiniger)의 이름에서 따왔다. 웹, 모바일, 데스크톱 애플리케이션에서 애니메이션 GIF와 APNG 파일을 대체할 더 가벼운 대안으로 만들어졌다. 벡터 기반이므로 장치 해상도에 구애받지 않고 확대·축소할 수 있으며, 래스터 그래픽 요소도 포함할 수 있다. 프로그래밍이 가능하고 상호작용 기능을 추가할 수 있다. 플레이어 구현에 따라 CPU, GPU, 메모리 사용량에 차이가 있다.[1][2][3]
역사편집이의 제기
2015년: Bodymovin 플러그인과 초기 렌더러
에르난 토리시(Hernan Torrisi)가 어도비 애프터 이펙트(Adobe After Effects)용 플러그인 '보디무빈(Bodymovin)'을 개발해 애니메이션 데이터를 JSON으로 직렬화하고 런타임에 렌더링할 수 있게 했다. 애프터 이펙트 내부 형식의 주요 기능을 지원했으나 모든 기능을 다루지는 않았다. 또한 최신 브라우저에서 동작하는 자바스크립트 기반 플레이어를 포함한 렌더러를 공개했다.[2][3]
2017년: 에어비앤비 주도의 멀티플랫폼 라이브러리 탄생
에어비앤비(Airbnb)의 수석 애니메이터 살리 푸둘 카림(Salih Abdul-Karim)과 엔지니어 브랜든 위드로우(Brandon Withrow, iOS), 가브리엘 필(Gabriel Peal, 안드로이드), 리랜드 리처드슨(Leland Richardson, 리액트 네이티브)이 협업해 최초의 로티 라이브러리를 만들었다. 이로써 iOS, 안드로이드, 리액트 네이티브 등 다양한 플랫폼에서 로티 애니메이션을 렌더링할 수 있게 되었다. 다른 기업들도 추가 플랫폼 지원에 나섰다.[2][3]
2018년: 마이크로소프트와 .NET 재단의 윈도우 지원
마이크로소프트(Microsoft)와 .NET 재단이 윈도우 전용 로티 렌더링 라이브러리를 출시했다.[2][3]
2019년: Qt, 삼성 rLottie, 파이썬 프레임워크
Qt가 QML API를 추가해 로티 애니메이션 렌더링을 지원하기 시작했다. 같은 해 후반 삼성전자는 플랫폼 독립적인 C++ 기반 렌더러인 rLottie를 공개하고 타이젠(Tizen)에 로티 지원을 추가했다. 이 형식을 다루는 파이썬(Python) 프레임워크도 출시되었다.[2][3]
2020년: dotLottie 파일 형식 등장
여러 로티 파일과 관련 리소스를 단일 파일로 묶는 오픈소스 파일 형식인 dotLottie가 탄생했다. 실제로는 디플레이트(deflate) 방식으로 압축된 ZIP 파일이며, 매니페스트 파일과 미리보기 이미지를 포함해 파일 조작을 용이하게 한다.[2][3]
2023년: 토르 벡터 그래픽스(ThorVG) 지원
토르 벡터 그래픽스(ThorVG)가 자체 엔진을 기반으로 로티 렌더링 기능을 지원하기 시작했다.[2][3]
2024년: 표준화 커뮤니티 설립과 보안 사고
로티 애니메이션 커뮤니티(Lottie Animation Community)가 설립되어 파일 형식 표준화에 나섰다. 같은 해 npm 패키지 'lottie-player'가 일시적으로 해킹되어 암호화폐 보유자를 노리는 코드가 삽입되는 보안 사고가 발생했다.[3]
기능과 사용법 개요편집이의 제기
무엇을 만들 수 있는가
벡터 기반 애니메이션을 JSON 직렬화 형태로 저장해 웹, 모바일, 데스크톱 환경에서 해상도 독립적으로 재생할 수 있다. 래스터 이미지·오디오 등 비벡터 리소스도 포함 가능하며, 인터랙티브 요소를 추가해 사용자 입력에 반응하는 애니메이션을 구현할 수 있다. dotLottie를 쓰면 여러 애니메이션과 리소스를 하나의 압축 파일로 배포할 수 있다.[2][3]
대상 사용자
애프터 이펙트로 모션 그래픽을 제작하는 디자이너, 네이티브·웹 애플리케이션에 가벼운 애니메이션을 임베드하려는 개발자, 크로스플랫폼 UI 라이브러리 제작자, 게임·앱·웹사이트에 인터랙티브 벡터 애니메이션을 넣으려는 기획자 등이 주요 사용층이다.[2][3]
생태계·커뮤니티편집이의 제기
주요 플레이어·렌더러
웹: 보디무빈 기반 자바스크립트 플레이어, lottie-web
iOS: 에어비앤비 lottie-ios
안드로이드: 에어비앤비 lottie-android
리액트 네이티브: lottie-react-native
윈도우: 마이크로소프트·.NET 재단 라이브러리
Qt/QML: Qt 공식 QML API
C++ 크로스플랫폼: 삼성 rLottie
파이썬: 로티 파싱·생성 프레임워크
ThorVG: 토르 벡터 그래픽스 엔진 내장 렌더러[2][3]
표준화와 커뮤니티
2024년 로티 애니메이션 커뮤니티가 결성되어 명세 표준화, 문서화, 플레이어 상호운용성 테스트를 주도한다. 공식 사이트(lottiefiles.com 등)에서 명세 문서, 'A Human's Guide to the Lottie Format' 같은 상세 가이드, 플레이어 호환성 표를 제공한다.[2][3][4]
dotLottie 생태계
dotLottie는 매니페스트(manifest.json)와 썸네일 프리뷰를 내장해 에디터·마켓플레이스·버전 관리 시스템에서 파일을 식별·검색·미리보기하기 쉽게 한다. 주요 저작 도구와 플레이어가 dotLottie 입출력을 지원한다.[2][3]
사용 사례·작품편집이의 제기
자료에 구체적인 작품명이나 프로젝트 사례는 명시되지 않았으나, 에어비앤비·마이크로소프트·삼성·Qt 등 대형 플랫폼이 네이티브 지원을 추가한 점으로 보아 모바일 앱 온보딩 애니메이션, 웹사이트 마이크로 인터랙션, 데스크톱 UI 트랜지션, 임베디드·TV·차량용 인터페이스 등 다양한 상용 서비스에 채택된 것으로 보인다.[2][3]
평가편집이의 제기
장점
벡터 기반이라 해상도 독립적이며 파일 크기가 래스터 애니메이션(GIF, APNG)보다 작다.
JSON 직렬화로 텍스트 기반 버전 관리·난독화·동적 생성이 가능하다.
주요 플랫폼(iOS, 안드로이드, 웹, 윈도우, Qt, 타이젠, 리액트 네이티브)에 네이티브 렌더러가 존재한다.
인터랙티브·프로그래머블 애니메이션을 지원한다.
dotLottie로 리소스 번들링·배포가 단순해진다.[2][3]
한계·주의점
JSON 키가 1~2자라 사람이 직접 읽고 편집하기 어렵다.
플레이어 구현마다 지원하는 애프터 이펙트 기능 세트와 성능(CPU/GPU/메모리) 특성이 달라 크로스플랫폼 테스트가 필요하다.
2024년 lottie-player 공급망 공격 사례처럼 서드파티 패키지 의존성 보안에 유의해야 한다.[2][3]
dotLottie 파일 형식 상세편집이의 제기
dotLottie는 로티 애니메이션과 연관 리소스(이미지, 폰트, 오디오 등)를 단일 파일로 패키징하는 표준이다. 내부적으로 디플레이트 압축된 ZIP 아카이브이며, 다음을 포함한다.
manifest.json: 애니메이션 메타데이터, 버전, 진입점, 리소스 목록
preview 이미지: 썸네일·포스터 프레임으로 에디터·마켓플레이스에서 즉시 미리보기 가능
로티 JSON 파일(하나 이상) 및 참조 리소스 파일
이 구조 덕분에 파일 단위 복사·전송·버전 관리가 용이하며, 플레이어는 압축 해제 없이 스트리밍 방식으로 필요한 리소스를 로드할 수 있다.[2][3]
보안 이슈: 2024년 lottie-player 공급망 공격편집이의 제기
2024년 npm 레지스트리에 배포된 'lottie-player' 패키지가 변조되어 암호화폐 지갑 정보를 탈취하는 악성 코드가 삽입된 채로 일정 기간 유포되었다. 이는 로티 생태계가 npm 등 패키지 관리자에 의존하는 현실에서 공급망 보안의 중요성을 환기시킨 사례로 기록된다.[3]
이 문서는 GGWiki AI가 공개 자료(아래 출처)를 조사해 새로 쓴 초안입니다. 틀린 내용은 편집하거나 이의 제기로 알려 주세요.
