앱과 웹에서의 ‘애니메이션’

앱을 쓰면서 우리는 한 번 이상의 애니메이션을 접하게 됩니다. OS와 디바이스의 발전에 따라 애니메이션 역시 아주 간단한 것에서 시작해 최근에는 다양한 용도로 활용되고 있기 때문이죠. 로딩 시 노출되는 애니메이션은 물론이고 앱을 사용하는 과정 과정에 애니메이션을 적절히 활용한다면 정적이고 단조로운 앱을 생동감 있고 지루하지 않게 만들 수 있습니다. ‘지금 써보러 갑니다’를 통해서도 모바일 앱과 웹에서의 애니메이션과 관련된 내용을 몇 번 소개드린 적 있었는데요! 오늘은 에어비앤비(Airbnb)에서 공개한 ‘Lottie’를 활용해 만든 다양한 애니메이션을 한 곳에서 확인할 수 있는 라이브러리 사이트를 소개드릴까 합니다. 

 

‘Lottie’란?

‘Lottie’는 ‘Adobe’의 ‘After Effects’를 활용한 애니메이션을 실시간으로 랜더링 해주는 툴으로,  iOS와 Android는 물론 React Native에서 활용가능한 애니메이션 라이브러리를 제공해줍니다.보통은 화면 크기에 맞는 여러 이미지와 함께 수많은 코드를 작성해야 하는데, ‘Lottie’를 활용하면 오픈 소스를 활용하여 풍부한 애니메이션을 쉽게 적용할 수 있죠. ‘Lottie’에서 제공하는 라이브러리의 경우 ‘bodymovin’이라고 불리는 ‘After Effects’에 의해 출력된 ‘Json‘을 기반으로 구성되어 있으며, ‘shape layers, masks, alpha mattes, trim paths, dash patterns’ 등의 기능을 지원합니다. (자세한 내용 확인 : 이번주에 만난 매력적인 디자인 툴 4)

 

‘Lottie File’은 어떤 서비스?

‘Lottie File’은 ‘Lottie’를 통해 만들어진 애니메이션들을 한 곳에서 확인하고 파일로 다운로드 받을 수 있는 곳입니다. 사용자들이 제작한 파일을 직접 제출할 수도 있고, ‘Lottie File’에서 관리하는 애니메이션도 있죠. 기본적으로 검색을 통해 원하는 애니메이션을 찾거나 최근 / 인기순으로 볼 수 있도록 구성되어 있습니다. 위의 이미지는 메인페이지에서 최신순으로 애니메이션을 확인하는 모습이고요!

 

메인화면에 있는 검색창에서 ‘Star’라는 키워드를 넣어 확인한 결과입니다. 별이 포함되어 있는 애니메이션을 위와 같이 볼 수 있죠. 

 

검색결과든, 메인페이지에서 보는 리스트든! 원하는 내용을 하나 선택하면 상세 내용을 확인할 수 있는데요. 애니메이션을 자세히 살펴볼 수 있으며 Json 형태의 파일로 다운로드 받을 수 있습니다. 

 

배경색을 달리해서 애니메이션을 확인하는 것도 가능했고요. 개인적으로는 이 기능이 가장 마음에 들었습니다. 앱이든 웹이든 쓰이는 배경 컬러가 모두 다를 수 있기에, 특정 컬러로 구성된 애니메이션을 적용하면 어떤 모습인지 쉽게 확인할 수 있기 때문입니다.

 

상세페이지에서는 연관된 애니메이션을 함께 확인할 수 있어, 하나를 찾아놓으면 연달아 애니메이션을 볼 수 있습니다.

 

아직 iOS용 앱은 없지만, 구글 플레이 스토어를 통해 안드로이드 앱을 다운로드 받아 어떤식으로 앱에서 애니메이션이 보이는지를 확인하는 것도 가능하네요 🙂 (앱 다운로드는 이 곳에서)

 

위의 Gif는 실제 ‘Lottie File’에 등록된 것을 가져온 것인데요! 아직 초기라 등록된 애니메이션의 수가 많지는 않지만(110개 정도) 계속 업데이트가 되고 있으며 애니메이션의 퀄리티가 좋아 저도 이미 하나를 다운로드 받아 쓰고 있습니다. 모바일 앱에서 사용할 애니메이션을 보고 싶으시다면 지금 바로 ‘Lottie Files‘를 확인해보세요!

 

함께 보면 좋은 내용 

 

Comments are closed.