고객의 이목을 끌어야 성공하는 현대 사회에서, 성공을 위해 가장 중요한 건 최소 비용으로 가장 큰 성과를 이끌어낼 수 있는 능력입니다. 저화질 유저 인터페이스는 이목을 집중하지 못하지만, 고화질 그래픽은 고객의 눈길을 사로잡죠. 그러나 고화질 그래픽을 활용할 때 저장, 전송 및 렌더링 비용을 균형 있게 조정해야 하는 문제는 쭉 이어져 왔습니다. Lottie와 함께하기 이전까지는 말이죠!

이제 Lottie와 함께해보세요. Lottie가 제공하는 가벼운 애니메이션 그래픽 형식이 이 문제를 해결해 주니까요. Lottie는 기존 그래픽 형식에서는 불가능했던, 여러 동적 기능으로 어플리케이션을 더 가볍고 견고하게 만들어줄 겁니다.

Lottie는 웹과 모바일 플랫폼, IoT뿐만 아니라 데스크톱과 노트북에서도 별도의 소프트웨어 없이 재생할 수 있는 애니메이션 포맷입니다. LottieFiles를 지금 켜보시면, 페이지에서 바로 애니메이션이 재생되는 걸 확인할 수 있을 거예요.

Lottie, 또 어떤 강점이 있나요?

Lottie가 어디서나 재생 가능한 이유는 무엇일까요? Lottie가 발표 자료의 퀄리티를 높이는 동시에 제작 비용을 아낄 수 있는 방법은 무엇인지 궁금하지 않으세요? 지금 함께 알아봐요.

어디서든 재생되죠.

Lottie 웹 플레이어는 최신 버전의 자바스크립트가 지원되는 어디에서나 작동합니다. 현재 버전의 브라우저라면 모두 재생된다는 의미이기도 하죠. 또한, 이건 모든 데스크톱과 노트북 응용 프로그램에서 간소화된 Lottie 파일의 배치를 사용할 수 있다는 뜻이기도 해요. 대부분의 최신 소프트웨어 개발 키트가 동적 웹 콘텐츠를 지원하기 때문입니다.

또한 Lottie 라이브러리를 제공하고 있어요. iOS와 안드로이드, 타이젠까지 다양한 환경의 모바일과 태블릿 응용 프로그램에서 Lottie를 재생할 수 있도록 말이죠. 큰 브랜드는 모바일 프론트엔드를 강화하기 위해, 스타트업은 제품을 차별화하기 위해 Lottie를 빠르게 도입하고 있답니다.

휴대성과 지속가능성 (Portable and Maintainable)

Lottie는 일반 텍스트 형식으로 저장되기 때문에 사람이 읽을 수 있는 형태입니다. 그래서 응용 프로그램용 인터페이스를 개발할 때 Lottie를 사용하면, 디버깅 시간과 배포까지의 전체 업무 진행 시간을 줄일 수 있습니다. 일반 텍스트 Lottie 파일 역시 특수한 소프트웨어를 사용하지 않고도 쉽게 유지 관리하고 섬세하게 조정할 수 있습니다.

Lottie 애니메이션의 텍스트 데이터는 JSON으로 구성되어 있고, 이건 JSON을 지원하는 응용 프로그램 개발 환경이나 자바스크립트라면 Lottie를 언제 어디서든 활용할 수 있단 걸 뜻하죠. 바로 이 점이 Lottie를 세상에서 가장 휴대하기 쉬운 애니메이션 그래픽 포맷으로 만들어 줍니다.

역동성 (Dynamic)

Lottie 데이터는 JSON 형식이므로 분수부터 많은 양의 오브젝트까지, 다양한 단계의 세분화에서 콘텐츠를 손쉽게 변경하거나 대체할 수 있습니다. 또한, 어느 위치에서나 대체하는 콘텐츠를 역동적으로 불러올 수 있죠. 이것이 Lottie가 현재 가장 역동적이고 인기 있는 애니메이션 그래픽 형식인 이유예요.

Lottie를 활용한 인터페이스는 데이터 과학과 통계에도 적용할 수 있어요. 실시간 데이터를 그때그때 Lottie 애니메이션에 직접 연결해 깔끔하게 전환되는 데이터 세트를 표현할 수 있죠. 이러한 데이터 세트에는 시간을 시각적으로 표현하는 간단한 타임 스탬프나 주식 시장의 상황을 보여주는 복잡한 금융 데이터가 해당될 수 있어요.

확장성 (Scalable)

최신 통신 기술을 통해 기업이 데이터 저장 및 검색의 과정을 혁신하는 과정은 데이터 볼륨이 확장되는 것을 동반합니다. 기존 그래픽 콘텐츠의 용량이 컸기 때문에, 기업들은 응용 프로그램 내 유저 인터페이스를 개발하는데 있어서 그래픽 용량을 잘 계산해서 써야 했죠. 그래픽을 너무 많이 쓰면 저장 공간을 감당할 수 없고, 어마어마한 금액을 내야 했으니까요. 특히, 데이터를 문맥적으로 검색하고 정리하는 부분에서 말이에요.

큰 규모의 솔루션에서 Lottie 파일을 사용한다면, 그래픽 콘텐츠를 맥락에 따라 나누거나 검색하고 저장하는 비용을 줄일 수 있습니다. 또, Lottie 특유의 유연성으로 데이터 전송 비용도 아낄 수 있죠. 응용 프로그램이 언제나 업데이트할 수 있는 Lottie 애니메이션 구성 요소만 전송하면 되니까요.

최고의 품질 (Ultimate Quality)

Lottie 애니메이션은 기하학적 도형의 차원을 정의하는 벡터뿐만 아니라 애니메이션이 어떻게 움직이고 변화하는지 결정하는 다양한 시도를 통해 그려집니다. Lottie 플레이어는 재생 중인 화면의 기본 해상도에서 이 렌더링을 수행하죠. 정리하자면, Lottie 애니메이션이 항상 사용자의 기기에서 최고의 품질로 제공된다는 걸 의미합니다.

사용자가 Lottie 애니메이션을 확대하면, 플레이어는 다시 확대한 콘텐츠를 기본 해상도로 보여줍니다. 그래서 Lottie 애니메이션은 픽셀로 깨지지 않죠. Lottie 애니메이션을 얼마나 확대하는지와 관계 없이, 똑같은 형태로 남아 있답니다.

직관적인 콘텐츠 워크플로우 (Intuitive Content Workflow)

Lottie는 Adobe After Effects에서 제작한 애니메이션을 Lottie 파일로 내보내서 만들어집니다. 기존에 Adobe After Effects를 사용하고 있었던 분들은 LottieFiles Plugin을 사용해서 Lottie 컨텐츠 작성을 바로 시작할 수 있다는 이야기죠. Adobe After Effects에 익숙하지 않아도 괜찮아요. 여기에 익숙하지 않은 디자이너들이라면 에디터 활용 가이드를 활용해서 금세 Lottie 콘텐츠를 만들어낼 수 있으니까요.

Lottie를 만들고 나면, Lottie 에디터에 업로드해서 확인해보고 수정할 수 있습니다. 에디터를 활용하면 콘텐츠 형식을 바꾸지 않고도 Lottie 내에서 몇 가지 새로운 형식으로 애니메이션을 내보낼 수도 있죠.

Lottie에서 콘텐츠를 만들고, 마음에 든다면 응용 프로그램 내에 콘텐츠를 넣는 작업을 시작하면 됩니다. LottieFiles는 최신 Lottie 파일의 링크를 제공하기 때문에, 운영 시간 내에도 응용 프로그램에 콘텐츠를 넣을 수도 있답니다.

여러분의 Lottie를 시작하세요.

Lottie를 활용해 응용 프로그램을 구성하면, 빠르고 역동적이며 아름다운 사용자 인터페이스를 만들 수 있습니다. 앱에서 필요로 하는 저장 공간이 확 줄어, 고객이 부담하는 정보량도 줄기 때문이죠.

제작부터 렌더링까지, 여러분이 콘텐츠를 제작하는 동안 그래픽의 수정이 사용자의 기기에 바로바로 적용됩니다. 나중에 여러분이 응용 프로그램을 수정할 때 동일한 Lottie로 복잡하지 않게 간단한 수정을 거치면 된다는 의미이기도 하죠.

여러분이 사용자 인터페이스 관련 업무를 맡고 계시다면, Lottie를 살펴보시는 건 어떠세요? 앱에 넣을 그래픽 콘텐츠를 정하기 전에 말이에요. Lottie를 활용한 콘텐츠 제작이 직관적일 뿐만 아니라, 응용 프로그램을 개발하는 데 있어 쉽게 활용할 수 있기 때문에 배우는데 드는 시간을 줄일 수 있을 거예요.

여러분이 디자이너라면, LottieFiles plugin을 살펴보세요. 최근 Lottie 콘텐츠 제작 도구를 한번 사용해보기 위해서요. Lottie Editor를 활용해서 여러분이 만든 콘텐츠를 테스트하고 수정하는 것도 잊지 마세요.

여러분이 안드로이드, iOS 나 윈도우 응용 프로그램을 개발하고 있다면, GitHub에서 Java 라이브러리를 살펴보세요.

여러분이 IOS 또는 macOS를 개발하고 있다면, 경우 GitHub을 방문하여 Swift 라이브러리를 살펴보세요.