Lottie는 애니메이션 벡터 그래픽스를 위한 오픈 포맷임

 (lottie.github.io)
2P by GN⁺ | ★ favorite | 댓글 1개
  • Lottie는 Adobe After Effects 애니메이션을 웹·모바일 등 여러 환경에서 재생하기 위해 2015년에 시작된 오픈소스 벡터 애니메이션 파일 포맷임
  • 애니메이션 데이터는 주로 JSON 기반 파일로 다뤄지며, 키프레임·이징 곡선·레이어 정보처럼 재생에 필요한 구조를 담음
  • 해상도 독립적인 벡터 그래픽과 트위닝을 바탕으로, 여러 플레이어·렌더러·제작 도구가 붙는 생태계가 형성돼 있음
  • Lottie Animation Community는 포맷을 안정적인 공식 명세로 다듬는 한편, 기존 플레이어에서 쓰이는 기능도 단계적으로 표준에 통합하고 있음
  • .lot, video/lottie+json, dotLottie(.lottie)처럼 인접한 확장자와 포맷 차이를 이해해야 구현과 배포에서 혼선을 줄일 수 있음

Lottie 포맷과 제작 흐름

  • Lottie는 애니메이션 벡터 그래픽을 위한 오픈소스 파일 포맷임
    • 2015년 Hernan Torrisi가 Adobe After Effects 애니메이션의 내보내기와 재생을 위한 포맷으로 처음 만듦
    • 현재 웹, 모바일 애플리케이션, 기타 시스템에서 쓰이며 여러 독립 렌더러 구현과 제작 지원이 있음
  • 제작 방식은 Adobe After Effects와 전용 플러그인을 활용하는 흐름이 널리 쓰임
    • 복잡한 애니메이션, 모션 그래픽, 인터랙티브 요소를 포함할 수 있음
    • 제작 후 Lottie JSON 파일로 내보낼 수 있음
    • JSON 파일에는 애니메이션 재현에 필요한 키프레임, 이징 곡선, 레이어 정보가 포함됨
  • 핵심 구성 요소는 파일 크기와 플랫폼 호환성을 함께 겨냥함
    • 벡터 그래픽: 픽셀 격자가 아니라 곡선과 선 같은 기하 도형으로 만든 해상도 독립 이미지
    • 트위닝: 애니메이터가 특정 키프레임의 도형 속성을 정의하면 중간 프레임을 자동 보간하는 애니메이션 방식
    • 생태계: 플레이어, 제작 도구, 라이브러리, 무료 에셋이 있으며 수천 개 회사가 사용자 경험 개선에 사용함
    • 오픈 파일 포맷: JSON 기반 오픈 표준으로, 웹 전송과 기존 도구를 통한 조작이 쉬움
  • 관련 문서

Lottie Animation Community와 표준화

  • Lottie Animation Community(LAC) 는 The Linux Foundation이 호스팅하는 비영리 오픈소스 프로젝트임
    • Lottie File Format을 효율적이고 확장 가능하며 크로스플랫폼인 애니메이션 벡터 그래픽 기술과 오픈 파일 포맷으로 확립하는 데 전념함
    • 렌더러와 도구 전반에서 구현할 수 있는 공식 Lottie 포맷 명세를 개발하려 함
    • Lottie File Format의 산업 표준화와 폭넓은 채택을 추진함
  • LAC는 Joint Development Foundation 거버넌스 아래 운영됨
    • 표준화 작업에서 개방적이고 협업적인 접근을 보장함
    • 포맷의 개발과 개선 과정에서 커뮤니티 구성원이 목소리를 낼 수 있도록 투명성을 중시함
  • 기존 기능과 공식 명세 사이에는 아직 간극이 남아 있음
    • Lottie는 LAC 설립 전부터 오랫동안 사용되며 커뮤니티가 만든 풍부한 기능 세트로 발전해 왔음
    • LAC는 기존 기능을 안정적인 공식 표준으로 다듬고 형식화하는 과정에서 점진적으로 명세에 통합함
    • 현재 플레이어에서 제공되는 Lottie 기능은 계속 사용할 수 있음
    • 공식 명세에 아직 포함되지 않은 기능은 Lottie format documentation from LottieFiles에서 확인할 수 있음

확장자와 dotLottie 구분

  • Lottie 파일 확장자는 .json 또는 .lot을 사용할 수 있음
    • .json은 역사적으로 널리 쓰였음
    • IANA는 .lot을 표준 파일 확장자로, video/lottie+json을 MIME 타입으로 공식 인정함
    • 공식 표준에 맞추기 위해 .lot 확장자 사용이 권장됨
  • dotLottie와 Lottie는 다른 포맷임
    • Lottie는 LAC가 표준화 중인 JSON 기반 오픈소스 애니메이션 포맷임
    • dotLottie(.lottie)는 LottieFiles가 개발한 상위 집합 포맷임
    • 핵심 Lottie JSON 파일과 이미지, 폰트 같은 에셋을 하나의 더 작은 압축 아카이브로 묶을 수 있음
    • 자세한 내용은 dotLottie specifications website에서 확인할 수 있음

커뮤니티 참여

  • LAC는 커뮤니티 누구나 참여할 수 있는 개방형 협업 프로젝트임
    • 명세 기여, 토론 참여, 도구 개선을 통해 Lottie의 향후 방향에 관여할 수 있음
    • 시작점은 contribution page임

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • Lottie는 개인적으로 슬픔에 가까움
    애니메이터가 이미 쓰는 도구에서 애니메이션을 생성한다는 발상은 정말 멋지지만, 구현은 실망스럽다. 형식부터 JSON이라 숫자 덩어리에 가까운 애니메이션에는 압축된 이진 형식이 훨씬 잘 맞았을 텐데, 외부 파일을 참조하거나 base64로 인라인하거나, 결국 폴더를 zip으로 묶은 .lottie 파일이 됨
    웹에서 쓰려면 크고 유지보수도 활발하지 않으며 크기 최적화도 부족한 SDK를 싣고, 애니메이션도 여러 파일로 나눠 받거나 JSON/base64/png/lottie/zip 같은 여러 파서를 여러 번 거쳐야 함. .lottie를 쓰면 JS 번들에 zip 압축 해제기도 넣어야 하고, .lottie 플레이어는 이유는 모르겠지만 2MB짜리 wasm blob도 씀
    우리 앱에서 이 난장판의 발자국을 줄이는 데 꽤 걸렸고, 핫패스에 쓰지 않아서 다행임. 특별한 순간에 얹는 작은 장식이어야 하는데 코드베이스에서 제일 무거운 부분이 됐고, 애니메이션을 수동으로 고치고 최적화기를 돌리고 경로/인라인 문제를 손보고, exporter가 벡터를 png로 바꾸는 문제까지 고쳐야 했음
    게다가 브라우저는 여러 개를 동시에 안정적으로 재생하지 못함. 특히 저사양 기기에서는 JS와 DOM으로 애니메이션을 돌리는 게 성능상 좋지 않다는 너무 당연한 사실이 드러남. 주말 프로젝트로 이것들을 최적화된 SVG 스프라이트로 바꾸고 CSS 전환으로 재생해 보면 좀 나아질지 시험해 보고 싶음

    • 전적으로 동의함. After Effects → Lottie 작업 흐름도 끔찍했고, 많은 레이어와 스타일이 내보내기에서 제대로 동작하지 않음
      모션 디자이너에게 어떤 기능은 써도 되고 어떤 기능은 안 된다고 설명해야 하는데, 대개 별로 좋아하지 않는다. 많은 경우 그냥 비디오로 렌더링하고 상호작용에 재생을 묶는 편이 Lottie보다 훨씬 가볍고 작업량도 적음
      Rive는 들어본 적이 있고, 선택들이 Lottie의 문제를 정확히 고치려는 것처럼 보임. 아직 직접 써 보진 않아서 결과는 다를 수 있음
    • 예전에 다닌 회사의 웹앱 번들이 8MB였고 압축 후에도 거의 2MB였음. 잠깐 살펴보니 lottie 라이브러리 약 2MB와 애니메이션 4개 때문이었고, 전부 첫 사용자에게만 보이는 것들이었음
      애니메이션 2개는 제거하고, 나머지 2개와 lottie 자체는 지연 로딩으로 옮겼다. 그래도 이긴 싸움이라기보다 진 싸움으로 봄. 디자이너나 다른 개발자에게 번들 8MB가 왜 나쁜지 제대로 설득하지 못했기 때문임
    • 지금 Lottie는 내게 경고 신호인데, 빨간색인지 노란색인지 판단 중임. 금요일에 디자이너 한 명이 Figma 디자인 안에 150x150짜리 작은 Lottie 애니메이션 아이콘을 잔뜩 넣어둔 걸 알게 됨
      처음엔 Lottie가 대체 뭔지 물었고, CDN에서 이 작은 아이콘들을 표시하려면 어떤 Javascript 앱을 임베드해야 한다는 설명을 들었다. 여기저기서 수상한 냄새가 남
      이게 얼마나 큰일인지 모르겠음. 이 Lottie들을 애니메이션 GIF 같은 걸로 변환할 수 있나? 작고 단순한 아이콘을 움직이려고 Javascript를 임베드하는 발상은 좋을 리 없고, 성능과 좋은 CWV를 위해 해온 작업을 망칠 것 같은 느낌임. 지금 애니메이션 GIF를 만들어 주는 무료 사이트를 검색하고 있다는 게 믿기지 않고, 2003년으로 돌아간 기분임. Lottie 생태계 전체를 누가 소유하거나 만들었는지, "Lottie Files" 같은 하위 브랜드가 뭔지도 모르는데 그들의 코드를 임베드하라고 기대받고 있음
    • 브라우저가 몇 개만 동시에 재생해도 안정적으로 버티지 못한다는 점이 인상적임
      세기 전환기 즈음에는 짜증 나는 Flash 광고로 가득 찬 웹페이지도 많았는데, 성가시긴 했어도 당시의 보통 단일 코어 CPU에서 충분히 돌아갔음
    • Lottie는 두 가지를 보여줌
      비기술 창작자가 쉽게 애니메이션을 만드는 Flash 같은 제품에 대한 수요는 여전히 엄청나고, 웹 표준으로 빌드/컴파일하는 방식은 매우 비효율적이라 애니메이션 전용 이진 형식이 필요함

  • 애니메이션을 위한 공통의 열린 형식이라는 발상은 좋음. 다만 꽤 많은 웹 개발자가 CSS/SVG 기반 애니메이션을 더 배우는 대신 Lottie를 선택하는데, 그러면 라이브러리/래퍼만으로 수백 KB가 추가되고 애니메이션마다 또 용량이 붙음
    CSS/SVG 애니메이션은 훨씬 작고 조정도 쉬울 수 있다. 그런 면에서 Lottie 메인 사이트가 GIF와 PNG하고만 비교하면서 작은 크기를 계속 자랑하고, SVG/CSS 애니메이션은 언급하지 않는 것도 마음에 들지 않음
    네이티브 모바일 앱에서는 잘 맞을 수 있다고 봄

    • 반대 의견으로, Flash는 Web 1.0에서 가장 좋았던 것 중 하나였음
      CSS와 여러 “표준”으로 강제로 옮겨간 뒤에도, Flash가 한때 제공하던 수준을 아직 따라잡지 못했다. Flash는 비디오 형식, 애니메이션 형식, 프로그래밍 환경, 비디오 플레이어, 상호작용 UI 시스템, 게임 프로그래밍 엔진, 멀티플레이어 MMO 개발 엔진, 인포그래픽 시스템이 한꺼번에 들어간 것이었고, 사실상 원하는 거의 모든 것이었음. 아이들도 쓸 수 있을 만큼 단순했다
      Adobe가 형식과 플레이어 등 모든 것을 공개했다면 지금도 살아 있는 엄청난 것이 됐을 수 있음. 이걸 다시 생각하고 새로 만들 여지가 있다고 봄. CSS, SVG, HTML, Javascript만이 유일한 길이라고 교조적으로 굴 필요는 없다. 거의 40년 동안 빛날 시간이 있었는데도 같은 문제로 고생하고 있음
      바퀴를 다시 발명해 볼 필요가 있음
    • Lottie의 목적은 CSS 전환 같은 단순 애니메이션이 아니라, 작은 움직임보다 만화에 가까운 복잡한 임의 애니메이션임
      좋은 예로 Telegram 메신저가 애니메이션 스티커 형식으로 Lottie를 씀. 예: https://tlgrm.eu/stickers/Princess 클릭하면 애니메이션이 재생됨
    • 실제로 강점이 드러나는 곳은 디자인 저작 도구의 대상 형식일 때임. 특히 After Effects가 대표적이고, 링크된 글의 앞부분에서도 라이브러리와 파일 형식의 원래 동기로 다뤄짐
      애초에 이런 걸 사람이 손으로 직접 작성하지는 않는다. 모바일 앱 개발자로 Lottie 애니메이션을 다뤄본 적은 있지만 직접 만든 적은 없음
    • Lottie 애니메이션을 SVG+JS로 컴파일하는 게 가능해야 하지 않나? 아직 빠져 있는 무언가일 수도 있음
    • SVG/CSS는 브라우저가 필요하다는 점이 결함임. SVG는 폰트 임베드를 허용하지 않고 CSS/JS를 포함할 수 있으며, 웹사이트에 임베드하기 위한 용도로만 설계된 느낌임
      네이티브 애플리케이션에서는 어떻게 표시해야 하는지 애매함

  • Lottie와 Rive를 둘 다 구현/임베드 측면에서 조금 써봤는데, 내 경험상 Rive가 확실히 더 좋았음
    앞으로 둘 중 하나를 골라야 한다면 Lottie에서 내가 놓친 장점이 있는지 궁금함

    • Rive를 직접 써 보진 않았지만 진행 상황은 지켜보고 있음. 눈에 띄는 점은 Lottie 창작자가 몇 년 전 Rive 팀에 합류했다는 것임. 이 분야 도구를 평가한다면 후보 목록에 넣을 만함
      개인적으로는 프로젝트에서 Lottie 사용을 막아온 편임. 우리 디자이너들이 원하던 종류의 애니메이션에는 파일 크기를 정당화하기가 매우 어려웠기 때문임. SVGator도 성공적으로 썼던 대안 중 하나였음
      특히 불만스러운 건 Webflow 같은 도구나 유명 기술 커뮤니티 인물들의 홍보에서 Lottie가 파일 크기 언급 없이 밀리는 경우가 많다는 점임. Lottie가 잘 맞는 지점은 분명 있겠지만, 대부분이 쓰는 용도에는 더 나은 선택지가 있다고 확신함

  • Lottie의 개념은 아주 멋지지만, 실제로 써 보면 다루기 매우 어렵다는 걸 알게 됨
    Rive는 Lottie의 많은 문제를 해결하려는 새 플랫폼임. 특히 Lottie에서는 동적 데이터 업데이트가 거의 불가능함
    그래도 Tracker.GG의 Valorant Backtrack, 일종의 Spotify Wrapped 같은 기능에서는 Lottie로 해냈음. 데모: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3...
    이를 위해 After Effects에서 만든 원본 파일의 이름 그대로 레이어에 접근하고 있음. 각 슬라이드는 별도 Lottie 파일이라, 파일 간 전환이 끊기지 않게 만드는 데 신경을 많이 써야 했다. 기억상 Lottie는 동적 레이어 접근을 기본 제공하지 않아서, Lottie 인스턴스를 다루는 두 번째 라이브러리를 쓰고 그 위에 더 나은 데이터 제어 계층을 만들어야 했음
    이 프로젝트는 디자인팀과 엔지니어링 사이에 엄청난 반복 작업이 필요했고, 프로세스 자체가 협업에 잘 맞지 않았다. 어떤 경우에는 레이어 속성을 실제 기본값, 예를 들면 색상 같은 다른 속성으로 찾아야 했음. 전혀 즐겁게 다룰 형식이 아니고, 앞으로는 Rive를 쓸 수 있기를 기대함

    • Rive는 확실히 유망해 보임. 더 성숙해졌을 때 기대만큼 해낼지 궁금함

  • 회사 UI 라이브러리는 스피너, 진행 표시줄 같은 애니메이션 컴포넌트에 lottie-web을 씀
    이 페이지: https://airbnb.io/lottie/#/community-showcase
    회사 지급 노트북을 완전히 달궈 버리는데, CSS로 만들었다면 이런 효과는 없었을 거라고 봄

    • 그 페이지에 있는 것들은 전부 애니메이션 GIF임

  • 우리 사이트 https://resonancy.io용 애니메이션을 만들고 싶어서 lottielab으로 제작했음. SVG를 실제로 다루는 괜찮은 편집기를 만든 점은 정말 훌륭하고, 지금까지 써본 온라인 도구 중 훨씬 나았음. 전체 경험도 매끄러웠다. 문제는 내보내기부터 시작됨
    이게 lottielab만의 문제인지 Lottie 형식의 문제인지는 모르겠지만, 자체 독점 최소화 호스팅을 쓰지 않으면 애니메이션이 너무 커서 랜딩 페이지에는 쓸모없다고 느껴짐. 큰 애니메이션 기준으로 그들의 압축은 평균 400% 정도 크기를 줄여줌. 결국 애니메이션 호스팅만 하려고 월 $30 구독을 냈는데, 마음이 편하진 않음. 대안을 찾아볼 생각이지만 다시 만드는 건 내키지 않음
    예전에는 다른 React 기반 애니메이션 라이브러리도 써봤는데, 애니메이션을 만드는 일이 너무 지루해서 복잡한 건 시도하고 싶지 않았다. lottielab에서는 상대적으로 쉽게 상상한 것을 가지고 놀며 만들 수 있음
    Rive는 아직 안 써봤고 확인해볼 예정임. Lottie 형식이나 관련 라이브러리를 더 잘 압축하는 방법이 있다면 제안이 있으면 좋겠음

  • 실제로 대부분의 UI에는 이미지 기반의 과한 애니메이션이 없고 CSS로 만들 수 있음. Lottie는 일회성 애니메이션 GIF 스타일에는 괜찮을 수 있지만, 그런 경우에도 SVG 애니메이션을 만드는 도구가 많은데 굳이 왜 쓰는지 의문임
    함께 일한 많은 디자이너가 Lottie 애니메이션에 매우 신나하지만, 보통은 성능이 더 좋고 다루기 쉬워서 CSS로 애니메이션을 만든다
    참고로 CSS 애니메이션은 @property 규칙 덕분에 훨씬 쉬워졌음. CSS 변수를 수정하기만 하면 애니메이션이 갱신됨

    • Lottie의 진짜 킬러 기능은 After Effects 플러그인이 Lottie JSON으로 내보내 준다는 점임
      특정 레이어의 AE 필터 같은 것에서는 항상 1:1로 동작하진 않지만, 잘 될 때는 시간을 엄청나게 아껴줌

  • PBS KIDS 브랜드의 특정 애니메이션에 Lottie를 수년째 쓰고 있고, 다른 형식보다 여러 장점이 있음. 2D 평면에서 런타임 렌더링을 하는 모든 것처럼 규모가 커지면 성능 타격은 있다
    Lottie는 게임, 앱, 비디오 등 우리 파이프라인과 작업 흐름에 잘 들어맞음. 여러 플랫폼의 홈 레이어에서 유휴 배경 애니메이션으로 돌리고, Roku처럼 지원하지 않는 기기에는 정적 경험을 제공함
    After Effects는 거대한 도구이고, 이 작업 흐름에서는 한 사람이 루프 애니메이션을 만든 뒤 Lottie/Bodymovin json, 방송 및 YouTube용 Mov, 저사양 사용자를 위한 단순화 SVG로 내보낼 수 있음
    Flash 이후의 훌륭한 임시 다리 역할도 해왔다. 지금은 Rive도 쓰고, 기존 json 애니메이션을 새 작업 흐름으로 가져올 수 있음. 이 애니메이션 분야의 핵심 인물들인 Hernan, Pixi의 Mat Groves, CloudKid의 Matt Karl 등과 직접 일해봤고, 모두 플러그인, 새 내보내기 형식, 수학으로 Flash 이후 전환기를 다뤘음
    이런 노력들은 각자 쓰일 곳이 있고, 대형 소프트웨어들이 타임라인 위에서 애니메이션을 구성하는 방식 때문에 서로 호환되지 않는 자체 형식을 가진다는 걸 배웠음. 싸움을 골라야 하고, 프로젝트에 맞는 도구를 선택해야 함

  • Rive가 Lottie의 경쟁자라면, 문제는 예술적으로 덜 만들어졌다는 점임
    연필이나 blob 도구로 그냥 그릴 수 없고, 정해진 방식으로 해야 하며 대체로 SVG를 가져와야 함. Flash처럼 UI 관점에서 단순하고 예술적인 느낌은 확실히 부족함. 흥미로운 기능이 없다는 뜻은 아니지만, Flash보다는 덜 직관적임

    • 래스터 이미지도 입력용 자산 형식으로 지원됨

  • 이게 Airbnb 형식 맞지 않나? Airbnb는 더 새로운 대안으로 갈아탔음. 유지보수와 개발을 그들에게 의존하던 것인지는 확실치 않지만, 그렇다면 다른 곳을 알아보기 시작하는 게 좋겠음

    • Airbnb 자체가 Lottie 사용과 아마 유지보수까지 중단했다는 뜻인가? 지금은 뭘 쓰는지 궁금함
      관련 뉴스나 블로그 글을 찾아보려 했는데 아무것도 못 찾겠음
      수정: Lava를 말한 것 같은데, 그건 벡터 애니메이션 형식이 아니라 비디오 형식임. Airbnb는 예전에 Lottie 애니메이션을 쓰던 일부 위치에서 지금 Lava 마이크로 비디오를 쓰고 있지만, Lava는 Flash에 대한 Lottie식 현대적 접근이라기보다 애니메이션 GIF에 대한 현대적 접근에 더 가까워 보임
      https://medium.com/@waldobear002/airbnbs-new-lava-icon-forma...
답변달기
GeekNews BeeBS 게시판 오픈! 자유로운 이야기와 소소한 일상을 함께 나눠보세요.