Lottie란 무엇인가요?
Lottie는 JSON 기반의 애니메이션 파일이에요. 디자이너는 Lottie를 통해 애니메이션을 이미지만큼 쉽게 옮길 수 있습니다. 용량이 작지만 어떤 기기에서나 작동하고, 크기를 자유롭게 조정해도 해상도가 낮아지지 않아요.
왜 Lottie를 사용해야 할까요?
Lottie에는 다른 애니메이션 파일 형식보다 나은 몇 가지 장점이 있습니다.
작은 파일 크기
Lottie 애니메이션은 GIF나 MP4 같은 다른 형식에 비해 품질은 같으면서 훨씬 더 작아요.
자유로운 크기 조정
Lottie 애니메이션은 벡터에 기반하기 때문에 해상도의 영향을 받지 않고 확대하거나 축소할 수 있어요.
다양한 플랫폼 지원과 라이브러리
개발자에게 Lottie를 핸드오프하기 정말 쉬워요. Lottie 애니메이션을 iOS, 안드로이드, 웹, React Native에서 수정하지 않고 바로 사용할 수 있어요.
상호작용성
Lottie에는 애니메이션 요소가 드러나 있어 상호작용하도록 수정할 수 있고 스크롤링, 클릭, 호버링 같은 상호작용에 반응할 수 있어요. 상호작용 가이드에서 자세한 정보를 확인해보세요.
전 세계에서 사용하는 Lottie
Lottie는 전 세계 만개 이상의 기업과 여러분이 매일 사용하는 다양한 툴에서 사용됩니다.
Lottie를 사용하는 방법
Lottie 사용 방법을 소개하는 툴과 리소스를 확인해보세요.
1단계
Lottie를 찾거나 생성하기
Lottie 애니메이션을 찾으세요
이미 준비된 무료 애니메이션 라이브러리에서 애니메이션을 찾아보세요.
그다음 Color Palette 툴이나 Lottie Editor를 사용해 Lottie 애니메이션을 브랜드나 원하는 색상에 맞춰 커스터마이징합니다.
또는, Lottie 애니메이션을 새로 만들어 보세요
Adobe 플러그인으로 나만의 애니메이션을 만들어 보세요. 아니면, SVG to Lottie 변환기를 사용해 가져온 SVG 파일에 프리셋을 적용시켜 보세요.
2단계
Lottie 사용하기
Lottie는 다양한 디자인 툴 또는 플랫폼 과의 통합을 지원합니다
개발자를 위한 Lottie 라이브러리
Lottie는 여러 툴에서 기본으로 지원됩니다
LottieFiles를 시작할 준비되셨나요?
2010
Lottie가 등장하기 전, 모션 디자이너들은 자신이 제작한 애니메이션을 구현하려면 소프트웨어 개발자에게 전달해야 했습니다. 애니메이션을 구현할 제대로 된 방법이 많지 않았죠.
개발자들은 애니메이션 품질을 낮추어 내보내거나, 애니메이션 디자인을 처음부터 재구성하려고 최선을 다했어요. 하지만 이런 과정은 효율적이지 않았습니다. 최적화도 되어 있지 않은 상태에서 모션 디자이너의 의도에도 맞지 않은 애니메이션이 나올 때가 많았기 때문이죠.
Hernan Torrisi는 Adobe After Effects에서 애니메이션의 구성 요소를 내보내고, 구동 중에 애니메이션을 렌더링하는 방안을 구상했습니다. Torrisi는 Adobe After Effects의 스크립트 기능을 활용해 애니메이션 프로젝트를 배열했고, 애니메이션에 대한 설명을 JSON 포맷으로 내보내는 Adobe After Effects 플러그인 Bodymovin을 출시했어요.
Torrisi는 또한 브라우저에서 사용하는 Javascript 기반 플레이어를 활용해 JSON 포맷 렌더링 기계를 최초로 출시하기도 했어요.
2017
Airbnb의 소프트웨어 엔지니어 Brandon Withrow, Gabriel Peal, Leland Richardson은 JSON 기반 애니메이션의 잠재력과 이를 통해 해결할 수 있는 문제에 주목했습니다. 그들은 Airbnb의 선임 애니메이터 Salih Abdul-Karim과 힘을 합쳐 JSON 애니메이션 파일을 렌더링할 수 있는 iOS 및 Android 라이브러리를 개발하고 “Lottie”라는 이름을 붙였어요.
LottieFiles 출시
애니메이터와 개발자가 웹에서 애니메이션을 바로 테스트하고, 공유하고, 선보일 수 있는 플랫폼인 LottieFiles가 출시되었습니다.
Microsoft와 .Net Foundation은 Windows에서 Lottie를 렌더링할 수 있는 라이브러리를 출시했어요.
2019
Qt도 Lottie를 렌더링하는 데 필요한 QML API를 추가하며 Lottie를 지원했습니다.
Samsung은 플랫폼에 의존적이지 않는 C++ 기반 Lottie 렌더링 기계인 rLottie를 출시하고, Tizen에서 Lottie를 지원하기 시작했어요.
비로소 한 개 이상의 Lottie 애니메이션과 관련 리소스를 하나의 파일에 합칠 수 있는 오픈 소스 파일 형식인 dotLottie가 세상에 나오게 되었습니다. dotLottie는 애니메이션의 미래를 책임질 차세대 Lottie 파일이 될 거예요.
