Lottie란 무엇인가요?

Lottie는 JSON 기반의 애니메이션 파일이에요. 디자이너는 Lottie를 통해 애니메이션을 이미지만큼 쉽게 옮길 수 있습니다. 용량이 작지만 어떤 기기에서나 작동하고, 크기를 자유롭게 조정해도 해상도가 낮아지지 않아요.

왜 Lottie를 사용해야 할까요?

Lottie에는 다른 애니메이션 파일 형식보다 나은 몇 가지 장점이 있습니다.

작은 파일 크기

Lottie 애니메이션은 GIF나 MP4 같은 다른 형식에 비해 품질은 같으면서 훨씬 더 작아요.

자유로운 크기 조정

Lottie 애니메이션은 벡터에 기반하기 때문에 해상도의 영향을 받지 않고 확대하거나 축소할 수 있어요.

다양한 플랫폼 지원과 라이브러리

개발자에게 Lottie를 핸드오프하기 정말 쉬워요. Lottie 애니메이션을 iOS, 안드로이드, 웹, React Native에서 수정하지 않고 바로 사용할 수 있어요.

상호작용성

Lottie에는 애니메이션 요소가 드러나 있어 상호작용하도록 수정할 수 있고 스크롤링, 클릭, 호버링 같은 상호작용에 반응할 수 있어요. 상호작용 가이드에서 자세한 정보를 확인해보세요.

전 세계에서 사용하는 Lottie

Lottie는 전 세계 250,000개 이상의 기업과 여러분이 매일 사용하는 다양한 툴에서 사용됩니다.

A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
A collage of logos from various design, code and productivity companies
Apple Landing Page with Lottie Animation
Apple Logo

랜딩 페이지

랜딩 페이지

랜딩 페이지

Duolingo with Lottie Animation
Duolingo Logo

디지털 경험에 기쁨을 더하다

디지털 경험에 기쁨을 더하다

디지털 경험에 기쁨을 더하다

Telegram Stickers with Lottie Animation
Telegram Logo

메세지 속 애니메이션 스티커

메세지 속 애니메이션 스티커

메세지 속 애니메이션 스티커

Samsung Watch with Lottie Animation
Samsung Logo

스마트와치, TV, 전자기기를 위한 시스템 애니메이션

스마트와치, TV, 전자기기를 위한 시스템 애니메이션

스마트와치, TV, 전자기기를 위한 시스템 애니메이션

Interactive Infographics with Lottie Animation
The Guardian Logo

상호작용 가능한 인포그래픽

상호작용 가능한 인포그래픽

상호작용 가능한 인포그래픽

Product Walkthroughs with Lottie Animation
Google Logo

제품 설명 스크린

제품 설명 스크린

제품 설명 스크린

디자인의 미래인 모션

…LottieFiles와 함께하면 더 쉽습니다.

Lottie를 사용하는 방법

Lottie 사용 방법을 소개하는 툴과 리소스를 확인해보세요.

1단계

Lottie를 찾거나 생성하기

Lottie 애니메이션을 찾으세요

이미 준비된 무료 애니메이션 라이브러리에서 애니메이션을 찾아보세요.

그다음 Color Palette 툴이나 Lottie Editor를 사용해 Lottie 애니메이션을 브랜드나 원하는 색상에 맞춰 커스터마이징합니다.

LottieFiles featured animations page
LottieFiles featured animations page
LottieFiles featured animations page

또는, Lottie 애니메이션을 새로 만들어 보세요

Adobe 플러그인으로 나만의 애니메이션을 만들어 보세요. 아니면, SVG to Lottie 변환기를 사용해 가져온 SVG 파일에 프리셋을 적용시켜 보세요.

2단계

Lottie 사용하기

Lottie는 다양한 디자인 툴 또는 플랫폼 과의 통합을 지원합니다

개발자를 위한 Lottie 라이브러리

Lottie는 여러 툴에서 기본으로 지원됩니다

Various company logos
Various company logos
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles
Get started with LottieFiles

LottieFiles를 시작할 준비되셨나요?

Lottie의 탄생 스토리

Lottie의 탄생 스토리

Lottie의 탄생 스토리

Lottie의 탄생 스토리

Stylized pixellated flower

2010

Lottie가 등장하기 전, 모션 디자이너들은 자신이 제작한 애니메이션을 구현하려면 소프트웨어 개발자에게 전달해야 했습니다. 애니메이션을 구현할 제대로 된 방법이 많지 않았죠.

개발자들은 애니메이션 품질을 낮추어 내보내거나, 애니메이션 디자인을 처음부터 재구성하려고 최선을 다했어요. 하지만 이런 과정은 효율적이지 않았습니다. 최적화도 되어 있지 않은 상태에서 모션 디자이너의 의도에도 맞지 않은 애니메이션이 나올 때가 많았기 때문이죠.

2015

2015

Hernan Torrisi는 Adobe After Effects에서 애니메이션의 구성 요소를 내보내고, 구동 중에 애니메이션을 렌더링하는 방안을 구상했습니다. Torrisi는 Adobe After Effects의 스크립트 기능을 활용해 애니메이션 프로젝트를 배열했고, 애니메이션에 대한 설명을 JSON 포맷으로 내보내는 Adobe After Effects 플러그인 Bodymovin을 출시했어요.

Torrisi는 또한 브라우저에서 사용하는 Javascript 기반 플레이어를 활용해 JSON 포맷 렌더링 기계를 최초로 출시하기도 했어요.

JSON file
Pencil with Lottie written out

2017

Airbnb의 소프트웨어 엔지니어 Brandon Withrow, Gabriel Peal, Leland Richardson은 JSON 기반 애니메이션의 잠재력과 이를 통해 해결할 수 있는 문제에 주목했습니다. 그들은 Airbnb의 선임 애니메이터 Salih Abdul-Karim과 힘을 합쳐 JSON 애니메이션 파일을 렌더링할 수 있는 iOS 및 Android 라이브러리를 개발하고 “Lottie”라는 이름을 붙였어요.

Rocketship with LottieFiles logo

LottieFiles 출시

애니메이터와 개발자가 웹에서 애니메이션을 바로 테스트하고, 공유하고, 선보일 수 있는 플랫폼인 LottieFiles가 출시되었습니다.

2018

2018

Microsoft와 .Net Foundation은 Windows에서 Lottie를 렌더링할 수 있는 라이브러리를 출시했어요.

Window with flowerpot
Hamster wheel with a Qt file running on it

2019

Qt도 Lottie를 렌더링하는 데 필요한 QML API를 추가하며 Lottie를 지원했습니다.

Samsung은 플랫폼에 의존적이지 않는 C++ 기반 Lottie 렌더링 기계인 rLottie를 출시하고, Tizen에서 Lottie를 지원하기 시작했어요.

2020

2020

비로소 한 개 이상의 Lottie 애니메이션과 관련 리소스를 하나의 파일에 합칠 수 있는 오픈 소스 파일 형식인 dotLottie가 세상에 나오게 되었습니다. dotLottie는 애니메이션의 미래를 책임질 차세대 Lottie 파일이 될 거예요.

Lottie illustration

자주 묻는 질문

자주 묻는 질문

Lottie 애니메이션이란 무엇인가요?

Lottie는 JSON 기반의 애니메이션 파일 형식입니다. 어떤 플랫폼에서든 정적 에셋을 전달하는 것만큼 쉽게 애니메이션을 전달할 수 있죠. 파일 크기가 작아 어떤 기기에서나 동작하고, 확대하거나 축소해도 픽셀이 보이지 않아요.

Lottie가 SVG보다 나은가요?

그럼 GIF와 비교하면 어떤가요?

Lottie는 어떻게 사용하나요?

Lottie는 어떻게 제작하나요?

Lottie를 사용해야 하는 이유는 무엇인가요?

LottieFiles는 누가 사용하나요?

Lottie 애니메이션에 관한 자세한 정보는 어디에서 확인할 수 있나요?

Lottie 애니메이션은 어떻게 편집하나요?

디자인의 미래인 모션

디자인의 미래인 모션

…LottieFiles와 함께하면 더 쉽습니다.

…LottieFiles와 함께하면 더 쉽습니다.

랜딩 페이지

디지털 경험에 기쁨을 더하다

메세지 속 애니메이션 스티커

스마트와치, TV, 전자기기를 위한 시스템 애니메이션

다른 Lottie 창작자, 디자이너, 개발자를 만나 보세요

제품 설명 스크린

직접 만들고, 함께 협업하며, 쉽게 전달하기.

일상적인 디자인에 쉽게 모션을 넣으세요.

직접 만들고, 함께 협업하며, 쉽게 전달하기.

일상적인 디자인에 쉽게 모션을 넣으세요.

직접 만들고, 함께 협업하며, 쉽게 전달하기.

일상적인 디자인에 쉽게 모션을 넣으세요.

직접 만들고, 함께 협업하며, 쉽게 전달하기.

일상적인 디자인에 쉽게 모션을 넣으세요.