Lottie란 무엇인가요?

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

왜 Lottie를 사용해야 할까요?

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

작은 파일 크기

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

자유로운 크기 조정

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

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

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

상호작용성

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

전 세계에서 사용하는 Lottie

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

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 Landing Page with Lottie Animation
Apple Logo
Apple Logo

랜딩 페이지

랜딩 페이지

랜딩 페이지

Duolingo with Lottie Animation
Duolingo with Lottie Animation
Duolingo Logo
Duolingo Logo

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

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

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

Telegram Stickers with Lottie Animation
Telegram Stickers with Lottie Animation
Telegram Logo
Telegram Logo

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

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

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

Samsung Watch with Lottie Animation
Samsung Watch with Lottie Animation
Samsung Logo
Samsung Logo

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

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

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

Interactive Infographics with Lottie Animation
Interactive Infographics with Lottie Animation
The Guardian Logo
The Guardian Logo

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

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

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

Product Walkthroughs with Lottie Animation
Product Walkthroughs with Lottie Animation
Google Logo
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는 여러 툴에서 기본으로 지원됩니다

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

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

Lottie의 탄생 스토리

Lottie의 탄생 스토리

Lottie의 탄생 스토리

Lottie의 탄생 스토리

Stylized pixellated flower
Stylized pixellated flower
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
JSON file
JSON file
Pencil with Lottie written out
Pencil with Lottie written out
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
Rocketship with LottieFiles logo
Rocketship with LottieFiles logo

LottieFiles 출시

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

2018

2018