로티 :: lottie

로티

정의 : 애프터이팩트의 애니메이션 -> .json(자바스크립트 객체 : 코드화) 파일로 변환해주는 툴

디자인 작업을 하다보면 animation에 대한 욕구가 솓구칠 때가 있다. 
하지만 리소스를 많이 잡아먹으면 어떻하지?
개발자가 반대할텐데...
이런생각으로 포기할때가 많다. 

하지만 Airbnb에서 개발한 오픈소스 라이브러리가 있다. 

애프터이팩트 (이하, 애팩)에서 작업한 파일을 json로 추출해주는 방식인데 메모리에도 영향을 적게준다. 

자세히 알아보자. 

 

airbnb.design/lottie/

Lottie

 

특징

    1. 애팩의 solid, shape. layer, mask, path 등 다양한 효과가 사용가능.

    2. IOS, 안드로이드, 리액트네이티브 등 다양한 플랫폼에 사용.

    3. 코드로 애니메이션을 완전 분리. 

 

사용

    1. Gif 와같은 애니메이션으로 사용하기

    2. 프로그래스바로 사용하기. (안드로이드)

    3. 다이얼로그 프래그먼트로 사용하기. (안드로이드)

단계1. 그래픽 제작

    1. 일러스트로 소스를 만든다. (스케치의 경우도 SVG로 변환 후 ai파일로 저장)

    2. 애팩 플러그인 설치하기. (애팩을 시동하기 전에 설치)

github.com/airbnb/lottie-web

airbnb/lottie-web

After Effects의 window > Extension에 bodymovin에서 설치 확인

 

    3. 애팩에서 애니메이션 만들기

        a. AI 파일을 불러와서 shape으로 만들어 애니메이션을 만들어준다. (Layer>Create Shapes from Vector Layer)

        b. after effects의 Window > Extensions > Bodymovin 을 연다.

        c. 랜더링을하면 .json 파일이 생성된다. 

 

 

 

 

<=== 여기까지가 디자이너가 해야할 몫이다.===>

아래는 개념정도만 알아두도록 하자. 

사용법 (프로그래밍)

안드로이드

    1. build.gradle 에 디펜던시를 추가

    2. .json 파일을 asset폴더에 저장. 

    3. xml로 (자동재생, 무한반복, 시작과 끝) 등을 설정. 

 

 

로티파일

로티 애니메이션을 다운받을 수 있는 사이트

lottiefiles.com

LottieFiles - Free animation files built for Lottie

 

사실 디자인을 할때 화려한것은 유저에게 별 도움이 되지 못한다. 
하지만 로티의 경우는 심플한 정보를 가지고
인터랙션으로 유저에게 감성적인 부분을
자극 할 수 있다는 점에서 강점을 가진다. (물론 이것도 감각이 필요하겠지만...)

 

기업의 아이덴티티를 이러한 로티애니메이션으로 표현해보자.

잼있을것 같지 않은가??