Lottie란 무엇인가

롯데가 아닌 로티입니다. 🙄....다들 에어비앤비는 들어보셨을 텐데요. 바로 에어비앤비에서 개발한 라이브러리입니다. 간단하게 벡터 애니메이션을 웹, 앱에 적용할 수 있게 만들어주는데요. 이번 아티클에서는 Lottie(이하 로티)의 특징과 장, 단점들을 경험에 비추어 작성해보겠습니다.

 

공식 홈페이지 - https://airbnb.design/lottie/

Lottie

먼저 로티의 특징을 설명하기 전에 벡터의 개념을 설명해야 제대로 로티를 이해하거나 사용할수 있습니다. 주로 웹에 사용되는 이미지는 래스터(Raster)와 벡터(Vector)로 구분되는데요. 간단하게 설명하면 래스터는 픽셀 개념이며, 벡터는 수학 방정식을 기반으로 점, 선, 곡선 등을 그리는 개념으로 생각하시면 됩니다. 래스터는 주로 사진 이미지에 적합하고, 벡터는 기호나 단순한 형태, 거대한 크기로 인쇄가 필요할 때 사용됩니다. 사용자에게 친숙한 확장자로 구분하자면 래스터는 jpg, png 등이 있고, 벡터는 ai, svg 등이 있습니다.

 

로티의 특징

로티에 사용되는 파일은 쉽게 말해서 svg의 애니메이션 버전이라고 생각하시면 됩니다. 그말은 바로 로티는 벡터 기반의 애니메이션이라는 의미입니다. 그럼 애니메이션은 어디서 작업하느냐.... 바로 애프터 이펙트(After effect)라는 어플리케이션에서 작업을 합니다. 애프터 이펙트는 주로 모션 그래픽에 사용되는 툴인데요. 개인적으로 애프터 이펙트에서 벡터 소스로 작업은 굉장히 불편하지만 대체품이 없다고 생각하시면 됩니다. 간단하게 로티의 특징을 정리하자면 아래와 같습니다.

• 벡터 기반의 애니메이션

• 애프터 이펙트에서 작업

 

대체품이 없어서 막나가는 애프터 이펙트 - 이미지 출처(giphy)

 

로티의 장점

• 벡터 기반이라 용량이 적다 - 제작을 정상적으로 했다면 보통은 용량이 굉장히 작게 나옵니다

• 벡터 기반이라 크기에 의한 해상도 저하가 없다

• 적용이 간단하다

• 사용자의 행동에 반응하는 인터랙션 애니메이션이 가능하다

 

로티의 단점

• 제작하는데 애프터 이펙트의 숙련도가 필요하다

• 애프터 이펙트의 기본적인 기능들만 적용가능하다 - http://airbnb.io/lottie/#/supported-features

 

애니메이션의 형태마다 다르겠지만 간단하게 말해서 제작하는데 난이도가 높은 편입니다. 특히 용량을 최적화하는 과정이 생각보다 복잡하며, 현실적인 방법은 애니메이션을 미리 만들고 트레이싱으로 패스를 따라 만드는 거 같습니다. 이런 방식은 수정이 힘들다는 건데 애니메이션 작업에 능숙하지 않다면 시간을 굉장히 많이 잡아먹습니다. 또한 UI/UX에서 애니메이션은 절제해서 적재적소에 사용되어야 합니다. 그렇기 때문에 어떻게 보면 로티는 사치처럼 느껴질 수도 있습니다. 혹시나 본인이 결정권자라면 로티를 적용하는 데에 있어서 신중해야 한다고 생각합니다.

 

마치며

저는 원래 모션그래픽 디자이너로 일했기때문에 UI/UX 디자이너를 시작하는 단계에서부터 로티를 접하고 사용했지만 실제 프로덕트에서는 적용하기가 현실적으로 어려웠고 적극적으로 사용하는 걸 반대하는 입장입니다. MVP단계에서는 사용을 하지 않거나 최소한으로 하는 걸 권장합니다. 물론 프로덕트의 톤 앤 매너에 맞춰서 필요 여부를 파악하는 게 우선입니다. 참고로 로티에도 래스터 이미지가 적용가능하지만....그러면 그냥 GIF를 쓰는게 낫습니다. 래스터 이미지로 시퀸스를 넣으면 용량이 무지막지하게 나옵니다. 한마디로 사용하는 의미를 잃어버립니다.