Airbnb Lottie

1. 배경

스마트 폰 앱, 웹뿐 아니라 PC 웹사이트에서도 적재적소에 사용하는 마이크로인터렉션 요소들은 사이트의 퀄리티를 높이고 방문자의 흥미를 유발하는데 큰 역할을 합니다. 하지만 디자이너의 역량을 필요로 하는 결과물을 효율적으로 프로젝트에 적용시키기 위해서는 여러 난제들을 극복해야 하는데 기술적인 문제와 더불어 소통의 문제도 무시 할 수 없는 요소입니다. 디자이너와 개발자 간의 간극을 줄이고 수준 높은 결과물을 얻기 위한 방법이나 어플리케이션의 필요성은 늘 제기되어 왔습니다. 이러한 분야에 관심을 가지고 리서치 한 결과 Airbnb에서 자체 개발한 어플리케이션을 접하게 되었습니다.

l 프로젝트 진행 시 인터렉션 모션 구현이 어려운 이유

• 개발자의 입장에서 원하는 모션그래픽을 만들기 위해서는 전문 디자인 툴을 사용해야 하는데 제대로 쓰기 위해 상당히 많은 시간이 요구됨

• 디자이너가 가장 유사한 모션그래픽 레퍼런스를 찾아 개발자에게 샘플로 제시하고 구현해달라고 요구하더라도 대부분 코딩으로는 구현이 불가함

• 디자이너가 만들어준 GIF파일을 코드에 삽입하더라도 GIF는 태생적으로 한계를 가진 포맷이고 용량, 디바이스해상도 대응 등 단점이 있음
• UI에 모션을 넣는 애니메이션 작업은 팀 전체 관점에서 효율적인 작업이 아니라고 판단, 구현 우선 순위가 낮을 수 밖에 없음

l 극복해야 할 점

• 디자이너가 구현하고자 하는 모션을 개발단계에서 거의 구현이 가능하여야 함
• 디자이너의 구체적인 결과물을 개발자가 디자인 툴에 대한 이해가 없어도 프로젝트에 적용 가능해야 함.
• 완성된 모션 라이브러리는 수정 및 변형이 용이해야 하며 확장성이 있어야 함

l 대안으로서 Lottie

• 디자이너가 AE(모션그래픽 툴)로 만든 모션을 바로 JSON파일로 Export하고 그것을 다시 개발 코드에 삽입 가능
• 디자이너와 개발자 간 업무상 조율이 거의 필요 없음
• 프로젝트에 이미 적용된 모션이더라도 디자이너 단계에서 수정, 변경이 가능 (개발자는 코드에 적용만 하면 됨)
• Bodymovin 이라는 AE 플러그인의 지속적인 업데이트가 필요 (플러그인 기능 및 성능의 향상)

2. Lottie란?

Lottie는 모션 제작 툴 AfterEffects에서 디자이너가 작업한 모션그래픽을 Bodymovin 플러그인을 사용하여 json파일 형태로 내보내고 이를 파싱하여 모바일 및 웹에서 네이티브로 렌더링하는 Android 및 iOS용 모바일 라이브러리입니다. AfterEffects에서 제작된 결과물이 엔지니어링의 추가 작업 없이 디자이너 혹은 모션 제작자의 의도대로 웹이나 앱에서 렌더링되어 보여집니다.

l Keyframes vs Airbnb Lottie

아이콘 등의 부드러운 모션을 표현하기 위해서 기본 안드로이드 개발 방법인 프레임 애니메이션으로 만들려면 초당 24프레임 이상이 필요하며 2초 분량의 애니메이션을 만든다면 장당 750*1334*4로 계산해서 4Mb 메모리가 필요하므로 가용 메모리 총량은 192Mb. 약 200Mb가 필요하게 됩니다. 일반적인 저 사양 안드로이드 기기에서는 메모리 과부하가 발생하게 됩니다.

이런 현상을 해결하는 안드로이드의 애니메이션 적용 방법에 대해 2016년 10월에 AndroidconAnimator라는 Medium 포스트가 인기가 있었고 2016년 11월에 페이스북에서 Keyframes가 나왔습니다. 그리고 2017년 2월에 airbnb에서 Lottie를 출시하였습니다.

Keyframes은 적은 용량으로 애니메이션을 구현하려는 목적에 맞게 만들다 보니 스펙이 제한적이었습니다. 한편 Lottie는 실제 After Effect에서 사용하는 다양한 효과들을 대부분 지원합니다. 따라서 Airbnb Lottie가 Keyframes보다 성능이 우수하다고 할 수 있습니다.

※ 참고 : Lottie로 안드로이드 앱에 인터렉티브한 애니메이션 구현하기

https://academy.realm.io/kr/posts/lottie-for-android-interactive-animation/

l 특징

• 유연한 애니메이션 구현 : After Effects에서 지원하는 솔리드, 모양 레이어, 마스크, 알파매트, 트림 패스 및 대시 패턴 효과는 지원하며 지속적으로 기능 추가 예정

• 자유로운 애니메이션 조작 : 애니메이션 모션 내용의 변경이나 수정이 필요할 경우 After Effects 원본파일만 수정하면 개발자의 업무 추가 없이 서비스에 적용 가능

• 작은 파일 용량 : 여러 치수 또는 대용량 파일 크기에 상관 없이 앱 내에서 벡터 애니메이션을 결합 또는 JSON API에서 애니메이션 파일을 분리 할 수 있음

    l Bodymovin

     Lottie를 사용하기 전 이해해야 할 개념이 있습니다. 모션 그래픽 툴인 After Effects의 플러그인 프로그램 bodymovin입니다. 디자인 툴을 통해 디자이너가 작업한 모션 파일을 JSON 파일로 렌더링 할 수 있도록 해주는 플러그인입니다.

     After Effects로 모션 그래픽 작업을 하게 되면 저장되는 파일 확장자는 .aep 이지만 gif나 mov로 저장 할 수 있습니다. Bodymovin은 그 움직임을 json 파일로 변환하여 내려줍니다. 이 bodymovin에는 플레이어가 존재하는데 웹에서 돌려볼 수 있도록 bodymovin.js를 제공합니다. 예를 들어 data.json이라는 형태로 변환을 해서 아래와 같이 코드를 짜면 실행시켜 볼 수 있습니다.

     

3. 세팅하기

     디자이너들이 작업하는 환경이 그래픽 위주라면, 개발자들이 디자이너들이 원하는 결과를 적용하기 위해선 그래픽이 아닌 수치값 등의 실질적인 코드가 필요한데, 그래픽 환경에서 제작된 결과물을 코드화 시켜주는 환경 세팅이 필요합니다.

l Bodymovin 다운로드

     Lottie 공식 홈페이지에 접속, Get Started 버튼이나 화면 아래의 BodyMovin 링크를 클릭, GitHub 프로젝트에 접하여 파일 목록 중 build를 클릭하여 플러그인을 다운로드 합니다.

l Bodymovin 인스톨

     BodyMovin GitHub 프로젝트 페이지 메인으로 돌아가 “Option1”에서 ZXP installer를 다운로드 한 후, 다운로드 디렉토리로 돌아와 ZXP Installer을 실행합니다.

l After Effects 에서 활성화

     AfterEffect을 실행한 후, Window > Extensions 으로 들어가 BodyMovin이 나와 있는지 확인 한 후 클릭해 활성화 시키고 우측 패널창에 BodyMovin이 나타나면 Lottie를 사용하기 위한 기본 세팅이 모두 끝났습니다.

※ 참조 : Airbnb Lottie-기초세팅

https://medium.com/guleum/airbnb-lottie-%EA%B8%B0%EC%B4%88-%EC%84%B8%ED%8C%85-95896297786d

4. 활용하기

     Lottie를 사용하기 위해서는 공개되어 있는 샘플파일을 다운받아 사용하거나 AfterEffect 툴을 통해 직접 모션을 작업하여 사용하는 방법이 있습니다.

 

l 공개된 소스의 활용 (Lottie Files : http://www.lottiefiles.com)

     공개된 소스를 활용 할 경우 AfterEffects 툴을 익힐 필요 없이 개발자가 곧바로 활용이 가능하지만 정확하게 원하는 모션을 얻기가 어렵습니다. 하지만 지속적으로 더 많은 샘플이 추가되고 있으므로 선택의 폭이 더 넓어질거라 생각됩니다.

§   AE로 작업된 모션 소스를 제공하는 사이트, 모션 샘플을 보고 곧바로 다운로드 가능

§   대부분 json파일을 제공하지만 “AEP”탭에 있는 모션들은 AfterEffect 편집 파일까지 함께 제공함

§   지속적으로 새로운 모션이 업데이트 되고 있음

§   Json파일을 사이트의 브라우저에 drag & drop하면 동작 샘플을 바로 확인 가능

§   왼쪽 하단의 색상 팔레트를 클릭하면 배경색 변환 가능

l 모션 직접 제작

     그래픽 작업자가 After Effects를 통해 원하는 모션을 제작한 후 json파일을 추출, 개발자에게 전달하는 방법입니다. 원하는 컨셉 대로 구현될 수 있지만 After Effects툴을 익혀야 하기 때문에 진입장벽이 다소 높다고 할 수 있습니다.

     이러한 문제를 극복하기 위해 필요한 주요 모션 리스트를 작성하고 디자이너들이 해당 리스트에 해당하는 모션 그래픽 작업을 틈틈히 작업하여 json파일 형태로 라이브러리화 하여 활용도를 높이는 방법이 있습니다.

 

l 버그? (알아두면 좋은 점)

     버그라고 해야 할지 조금 애매한 부분도 있지만(특히 세번째 경우) 다음과 같은 단점을 지적하는 포스팅도 있었습니다. 참고하면 유용할 것 같습니다.

§   레이어 그룹해제 : 작업 소스로 활용하기 위해 일러스트레이터를 임포트할 때 해당 레이어 내부에 group되어있는 부분을 전부 단일 레이어로 만들어야 함. (그룹이 모두 해제되어있는 상태여야 함)

§   마스크는 레이어당 하나만 : 하나의 shape 레이어에서 마스크를 동시에 2개를 사용시 둘 중 하나만 인식이 됨. 개선 전까지는 마스크를 한 레이어당 하나만 사용하면서 모션을 잡아야 함

§   많은 레이어와 긴 시간의 모션은 스크립트도 용량이 크게 나옴. loop되는 애니메이션으로 작업하여 용량을 줄이는 것이 좋음

참고 : Airbnb-Lottie-bodymovin웹에서 사용해보기 https://feel5ny.github.io/2018/02/25/interaction_01/