Airbnb Lottie —최종

json 생성하고 개발자에게 넘겨주기

Bodymovin을 설치했다면 사실상 거의 90%는 했다고 보셔도 무방합니다.
이번 포스팅에서는 최종 bodymovin .json 파일을 뽑는것과 미리보는 법을 다루려고 합니다.

사실 Airbnb Lottie 자체가 bodymovin 에서 추출한 .json을 재생해주는 하나의 프레임워크 같은 것이기 때문에 추출한 .json 파일을 개발자에게 넘겨주기만 하면 끝나며 더이상 디자이너가 해야할 일은 없습니다.

제가 초반에 잘못 이해해서 Airbnb Lottie 도전이라고 했지만, “AffterEffect Bodymovin 을 이용하여 .json 추출하는 방법”이 포스팅 제목에 더 적합하지 않나 생각합니다.


작업파일 불러오기

Loading motion을 하나 제작했습니다. 학원에 다니면서 배우긴 하지만 이를 기반으로 새로운 것을 창조하거나 바이브레이션 하기가 참으로 어렵습니다. Youtube 강좌 찾아보면서 만들었는데, 허접해도 이해해주시라 믿습니다. 😀

애니메이션

우리가 .json 으로 내보낼 AfterEffcet 파일 입니다. 다음의 링크에서 패키지 파일을 다운받아 압축을 풀어주세요.


랜더링 전 세팅

우축의 Bodymovin에서 내보내고자 할 composition을 선택(1번)해주시고, 내보낼 디렉터리를 지정(2번)합니다.

Setting 을 눌렀을 때 나오는 설정화면

1번과 2번 사이에 있는 톱니바퀴(Setting)을 누르면 위와 같은 화면이 나타납니다. 원래는 Glyphs만 선택되있었는데 아예 나오질 않았고, 저는 PC에서 웹브라우저로 미리보기위해 Demo를 선택했습니다.

여러분은 아래와 같이 설정해주시면 됩니다.

Split Animation
Glyphs
HIDDEN
GUIDES
Extra Comps
Standalone
Demo

모든 세팅이 끝났으면 Render 을 눌러줍니다.

자, 위의 세팅을 모두 마쳤다면 맨 위에서 두번째 Render을 누르기만 하면 됩니다.

랜더링 완료 화면

뭔가 바쁘게 움직이다가, 위의 화면이 나타나면 성공입니다!

내보내기 한 디렉터리에 있는 .json 파일과 이미지를 사용하셨다면, 같은 디렉터리에 위치한 images 폴더를 포함하여 개발자에게 넘겨주시면 됩니다.


브라우저에서 테스트 해보기

(좌) 브라우저에서 미리보기 / (우) Repecter가 적용되지 않아, 흰색선이 하나만 나오는 모습

원래는 흰 화면이지만, 하얀색 이펙트가 보이지 않으므로 css에서 배경색을 조절했습니다. 잘 나왔지만 Repecter은 적용되지 않은 점이 아쉽습니다.

아무래도 필터나 각종 이펙트를 사용하기 보다는, 프레임 하나하나 노가다해야 잘 나오는것 같습니다.


마무리

꼭 mobile design에만 국한된 것이 아니라 web design에도 사용가능하다는 점에서 저에게는 좋은 경험이었던 것 같습니다.

요즘 SVG가 뜨는데, 그냥 SVG가 아닌 Animation이 적용된 SVG가 대세가 되어가는 분위기더라구요… Bodymovin은 SVG로도 내보낼 수 있으니 어려운 HTML Canvas에 대해 부담감을 내릴 수 있어서 좋은것 같습니다.

저도 계속해서 다양한 애니메이션 이펙트를 연습하면서 실력을 키워나가야 겠습니다.