Lottie란 무엇인가요?

Lottie란 무엇인가요?

Lottie란 무엇인가요?

로티를 사용하기 위한 오피셜 가이드

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

Lottie의 오픈 소스와 무료 Lottie 플레이어는 , iOS, 안드로이드, 윈도우, QT, Tizen 등 다양한 플랫폼에서 사용할 수 있습니다.

Lottie 사용법

Lottie를 사용하는 방법은 아주 간단합니다. LottieFiles를 통해 Lottie 애니메이션을 불러오고 미리 볼 수 있어요. 이때 LottieFiles는 애니메이션을 생성하는 코드를 작성합니다. 커뮤니티와 마켓플레이스에서 Lottie 애니메이션을 다운로드할 수도 있어요.

Lottie 사용법

Lottie를 사용하는 방법은 아주 간단합니다. LottieFiles를 통해 Lottie 애니메이션을 불러오고 미리 볼 수 있어요. 이때 LottieFiles는 애니메이션을 생성하는 코드를 작성합니다. 커뮤니티와 마켓플레이스에서 Lottie 애니메이션을 다운로드할 수도 있어요.

Lottie 사용법

Lottie를 사용하는 방법은 아주 간단합니다. LottieFiles를 통해 Lottie 애니메이션을 불러오고 미리 볼 수 있어요. 이때 LottieFiles는 애니메이션을 생성하는 코드를 작성합니다. 커뮤니티와 마켓플레이스에서 Lottie 애니메이션을 다운로드할 수도 있어요.

Lottie는 어디에 쓰이나요?

웹과 모바일을 가리지 않고 기본적으로 어떤 플랫폼에서든지 사용할 수 있습니다. 즉, 앱이나 웹페이지 관계없이 Lottie를 연동할 수 있다는 뜻이죠. Lottie 애니메이션은 메신저 플랫폼에서 스티커로도 쓸 수 있습니다. 웹이나 모바일 환경에서 기술적인 제한은 없고 데스크톱 앱과 일부 스마트 워치에서도 사용할 수 있습니다.

Lottie는 어디에 쓰이나요?

웹과 모바일을 가리지 않고 기본적으로 어떤 플랫폼에서든지 사용할 수 있습니다. 즉, 앱이나 웹페이지 관계없이 Lottie를 연동할 수 있다는 뜻이죠. Lottie 애니메이션은 메신저 플랫폼에서 스티커로도 쓸 수 있습니다. 웹이나 모바일 환경에서 기술적인 제한은 없고 데스크톱 앱과 일부 스마트 워치에서도 사용할 수 있습니다.

Lottie는 어디에 쓰이나요?

웹과 모바일을 가리지 않고 기본적으로 어떤 플랫폼에서든지 사용할 수 있습니다. 즉, 앱이나 웹페이지 관계없이 Lottie를 연동할 수 있다는 뜻이죠. Lottie 애니메이션은 메신저 플랫폼에서 스티커로도 쓸 수 있습니다. 웹이나 모바일 환경에서 기술적인 제한은 없고 데스크톱 앱과 일부 스마트 워치에서도 사용할 수 있습니다.

Lottie로 무엇을 할 수 있나요?

Lottie 애니메이션은 웹이나 모바일 기기에서 고품질 애니메이션을 재생할 수 있습니다. 또한, 스마트 설정으로 인터랙티브 기능을 넣을 수도 있어요.

Lottie로 무엇을 할 수 있나요?

Lottie 애니메이션은 웹이나 모바일 기기에서 고품질 애니메이션을 재생할 수 있습니다. 또한, 스마트 설정으로 인터랙티브 기능을 넣을 수도 있어요.

Lottie로 무엇을 할 수 있나요?

Lottie 애니메이션은 웹이나 모바일 기기에서 고품질 애니메이션을 재생할 수 있습니다. 또한, 스마트 설정으로 인터랙티브 기능을 넣을 수도 있어요.

Lottie의 용량은?

알기 쉽게 그림으로 설명해 볼게요. PNG가 티라노사우루스라면, GIF는 코끼리고, Lottie는 강아지 정도의 크기라고 할 수 있습니다.

이렇게 작은 Lottie 파일로 다운로드 속도는 높이고, 사용하는 디스크 공간은 획기적으로 줄일 수 있어요.

Lottie의 용량은?

알기 쉽게 그림으로 설명해 볼게요. PNG가 티라노사우루스라면, GIF는 코끼리고, Lottie는 강아지 정도의 크기라고 할 수 있습니다.

이렇게 작은 Lottie 파일로 다운로드 속도는 높이고, 사용하는 디스크 공간은 획기적으로 줄일 수 있어요.

Lottie를 사용해야 하는 이유

Lottie를 사용해야 하는 이유

Lottie를 사용해야 하는 이유

다른 서비스와 비교할 때, 어떤 차별성을 지니고 있나요?

다른 서비스와 비교할 때, 어떤 차별성을 지니고 있나요?

1.

Lottie는 다양한 플랫폼에서 사용할 수 있어요. iOS, 안드로이드, 웹 그리고 React Native에서 수정 없이 바로 쓸 수 있습니다.

1.

Lottie는 다양한 플랫폼에서 사용할 수 있어요. iOS, 안드로이드, 웹 그리고 React Native에서 수정 없이 바로 쓸 수 있습니다.

2.

해상도에 영향을 주지 않고 구동 중에도 크기를 자유롭게 조절할 수 있어요.

2.

해상도에 영향을 주지 않고 구동 중에도 크기를 자유롭게 조절할 수 있어요.

3.

파일 크기가 엄청나게 작아요.

3.

파일 크기가 엄청나게 작아요.

4.

벡터와 래스터 요소를 혼합하고 구동 중에 변동 사항을 적용해서, 여러 플랫폼과 해상도에서 고품질 애니메이션을 재생할 수 있어요.

4.

벡터와 래스터 요소를 혼합하고 구동 중에 변동 사항을 적용해서, 여러 플랫폼과 해상도에서 고품질 애니메이션을 재생할 수 있어요.

5.

애니메이션 요소와 파라미터를 타깃팅 요소로 쓸 수 있기 때문에 애니메이션을 보면서 실시간으로 수정이 가능합니다.

5.

애니메이션 요소와 파라미터를 타깃팅 요소로 쓸 수 있기 때문에 애니메이션을 보면서 실시간으로 수정이 가능합니다.

Lottie의 탄생 스토리

Lottie의 탄생 스토리

Lottie의 탄생 스토리

2010

2010

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


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

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


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

2015

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


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

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


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

2015

2017

2017

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

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

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

Get started — It's Free

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

Get started — It's Free

2017

2018

2018

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

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

2019

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

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

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

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

2019

2020

2020

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

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

Lottie가 가진 이름의 의미

독일의 영화감독이자 실루엣 애니메이션을 개척한 인물, Charlotte ‘Lotte’ Reiniger의 이름에서 영감을 얻었습니다.

Lottie가 가진 이름의 의미

독일의 영화감독이자 실루엣 애니메이션을 개척한 인물, Charlotte ‘Lotte’ Reiniger의 이름에서 영감을 얻었습니다.

Lottie가 가진 이름의 의미

독일의 영화감독이자 실루엣 애니메이션을 개척한 인물, Charlotte ‘Lotte’ Reiniger의 이름에서 영감을 얻었습니다.

Lottie의 세상

Lottie의 세상

Lottie의 세상

Lottie 라이브러리와 플러그인을 무료로 사용해보세요.

창작 도구

창작 도구

창작 도구

창작 도구

실행 도구

실행 도구

실행 도구

실행 도구

LottieFiles란?

LottieFiles란?

LottieFiles란?

LottieFiles는 주로 애니메이터, 디자이너, 개발자 그리고 엔지니어들이 편리하게 애니메이션 작업을 테스트하고, 협업하고, 발굴할 수 있는 플랫폼입니다. (사실 누구나 사용할 수 있어요!)


LottieFiles 플랫폼은 더 쉽고 효율적으로 Lottie 애니메이션을 발굴하고, 창작하고, 구현하게 해주는 여러 가지 도구와 기능을 제공하고 있습니다. 또한, 애니메이션 파일을 Lottie 포맷으로 변환하는 After Effects용 LottieFiles 플러그인을 만드는 역할도 하고 있어요.

Lottie와 LottieFiles의 차이는 무엇인가요?

Lottie’s 일종의 애니메이션 파일이고, LottieFiles는 애니메이터와 개발자가 로티 애니메이션을 즉시 테스트하고, 공유하며, 편집하고, 퍼블리싱 하는 등 로티와 관련된 모든 것을 제공하는 플랫폼이다.

Lottie와 LottieFiles의 차이는 무엇인가요?

Lottie’s 일종의 애니메이션 파일이고, LottieFiles는 애니메이터와 개발자가 로티 애니메이션을 즉시 테스트하고, 공유하며, 편집하고, 퍼블리싱 하는 등 로티와 관련된 모든 것을 제공하는 플랫폼이다.

Lottie와 LottieFiles의 차이는 무엇인가요?

Lottie’s 일종의 애니메이션 파일이고, LottieFiles는 애니메이터와 개발자가 로티 애니메이션을 즉시 테스트하고, 공유하며, 편집하고, 퍼블리싱 하는 등 로티와 관련된 모든 것을 제공하는 플랫폼이다.

LottieFiles는 Airbnb에서 만든 건가요?

LottieFiles와 Airbnb는 달라요. 하지만 LottieFiles의 기능들은 제작 당시 에어비앤비에서 일했던 개발자들에 의해 만들어진 라이브러리에서 작동됩니다. 이곳에서 LottieFiles를 만든 팀을 만나 보세요.

LottieFiles는 Airbnb에서 만든 건가요?

LottieFiles와 Airbnb는 달라요. 하지만 LottieFiles의 기능들은 제작 당시 에어비앤비에서 일했던 개발자들에 의해 만들어진 라이브러리에서 작동됩니다. 이곳에서 LottieFiles를 만든 팀을 만나 보세요.

LottieFiles는 Airbnb에서 만든 건가요?

LottieFiles와 Airbnb는 달라요. 하지만 LottieFiles의 기능들은 제작 당시 에어비앤비에서 일했던 개발자들에 의해 만들어진 라이브러리에서 작동됩니다. 이곳에서 LottieFiles를 만든 팀을 만나 보세요.