Lottie Animation 만들기(1)
Bodymovin plugin 과 after effect 로 JSON파일 추출하기
프레이머 자체에서도 모션 구현이 가능하지만 더욱 정교하고 엣지 있는 애니메이션을 만들어 넣어보는 것도 괜찮을 것이다. 이번에는 Lottie Animation에 대해서 글을 써 보려 한다.
Lottie 란?
Lottie란 오픈소스 모바일 라이브러리다. json data파일을 만들어낼 수 있도록 도와주는 플랫폼이다. 독일 영화 감독이자 실루엣 애니메이션의 선구자인 로띠 라이네거(Lotte Reiniger)의 이름을 따서 지어졌다고 한다. 가장 잘 알려 진 그녀의 영화로는 가장 오래된 장편 영화인 ‘아흐메드 왕자의 모험’이 있는데, 이 영화는 월트 디즈니의 장편 백설 공주와 일곱 난쟁이를 10년 넘게 앞선다고 한다.
앱이나 웹에서 아래와 같이 애니메이션을 이용한 피드백이 많아졌다.
- 트위터에서 좋아요를 눌렀을 때 뽁 터지는 하트
- 인스타에서 좋아요를 눌렀을 때 띠용~하는 하트
- 페이스북에서 ‘축하해’라는 텍스트를 입력했을 때 빵 터지는 폭죽과 스르륵 올라가는 풍선들
- 카카오페이로 송금했을 때 동전이 촤라랑 떨어지는 애니메이션
이런 애니메이션은 어떻게 제작 되었을까? 여러 회사들의 애니메이션 제작 방법이 궁금하기 전에, 지금 내가 다니는 회사에서는 움직이는 이미지를 gif로 제작한다. 몇십 장의 이미지를 만들어 그 시퀀스를 순서대로 재생하는 방식으로 애니메이션을 표현한다. 굉장한 리소스를 잡아먹는다는 치명적인 단점이 있다. 레퍼런스를 찾으면서 벡터의 느낌이 물씬 풍기는 자연스럽고 부드러운 애니메이션에 대해서 너무나도 궁금했었는데, 때마침 lottie는 정말 반가운 정보가 아닐 수 없었다.
Lottie는 Android와 iOS, 웹에서 Adobe After Effects에서 작업한 애니메이션을 Bodymovin이라는 플러그인을 사용하여, 영상 파일 대신 json이라는 데이터 파일을 생성하도록 지원한다. 아래 링크를 타고 들어가면 많은 사람들이 만들어놓은 애니메이션의 샘플을 확인할 수 있다.
Lottie애니메이션의 장점
gif 애니메이션보다 훨씬 작은 용량으로 제작되어 리소스를 대폭으로 줄일 수 있다.
- gif는 용량이 무거울 뿐 아니라, 고정된 크기로 렌더링 되기 때문에 해상도 대응이 어렵다.
- json data파일로 제작하면 해상도에 구애받지 않는다는 큰 장점이 있다.
- 디자이너가 개발자에게 정교한 애니메이션을 요구하지 않고도 애니메이션을 만들어 제작할 수 있다.
- 에펙에서 플러그인을 사용하여 랜더링 버튼 클릭만으로 json파일로 내보낼 수 있다.
- gif로 만들어진 애니메이션을 수정할 때 처음부터 scene로 일일이 수정할 필요가 없다. 기본적으로 에펙의 작업 파일을 가지고 있으니, 수정 후 다시 한 번 랜더링을 거치면 끝이다.
- 이건 개인적으로 생각하는 가장 큰 장점. 에펙의 기초 기능만 알고 있다면, 디자이너가 만들어도 동작이 어설프지 않다.
- 개발자와 작업해 본 결과, 개발자가 매우 좋아했고 오류가 나는 부분에 대해서도 적극적으로 연구해 상용화가 가능했다.
Lottie애니메이션의 단점
안드로이드 저사양 단말에서는 Lottie로 애니메이션을 구현할 수 없다고 한다. 그러나 저사양 단말에서는 협의를 통해 움직이는 이미지 대신 정적인 이미지를 넣는 등, 사양에 맞게 분기 설정을 하면 될 것이다.
JSON형식의 파일을 처음 받아 본 개발자와 약간은 부딪혔지만, 개발자도 곧 이점을 더 많이 느꼈다고 한다.
animation json파일 만들기
우선 아래의 준비물이 필요하다.
- Lottie를 플랫폼으로 하는 Bodymovin ae plugin
- 리소스를 만들 Adobe illustrator
- 애니메이션을 제작할 Adobe After Effects
다음으로, 애니메이션의 소스를 만든다.
간단하게 star.ai를 만들어 보았다. 소스를 만들 때는 기본적으로 ai파일을 제작할 Adobe illustrator가 필요하며, sketch를 사용하는 경우에는 작업한 파일을 SVG로 내보내기 한 다음 다시 illustrator로 불러와 ai파일로 만들어야 한다. 최종 산출물로 ai파일을 소스로 준비한다.
Adobe After Effects 를 켜기 전에 Bodymovin 플러그인을 설치한다.
설치할 플러그인의 경로는 아래와 같다.
After Effects의 window > Extension에 bodymovin 메뉴가 보이면 설치가 완료 된 것이다.
Adobe After Effects에 제작한 ai파일을 불러온 후, 컴포지션을 생성한다.
생성은 컴포지션 아이콘으로 스윽 드래그 한다.
컴포지션으로 만들어 준 벡터 레이어를 shape로 만들어준다.
shape로 변환을 해야 실질적인 애니메이션 작업이 가능하다.
이제 재미있고 신나게 애니메이션을 제작한다.
airbnb에서는 뷰티풀한 매직을 하라고 써 있었던 것으로 기억한다.
나는 그냥 가볍게 별이 마구 돌도록 만들어주었다.
after effects의 Window > Extensions > Bodymovin 을 연다.
랜더링 할 경로를 지정한 뒤 rander버튼을 클릭한다.
프로그레스 바가 채워지기를 기다리기도 전에 랜더링이 끝난다.
지정한 경로를 확인하여, json파일이 생성 되었다면 디자인 완료!
2KB짜리 애니메이션이 만들어졌다. 행복.
json이 도대체 뭐냐? 생소한 말이다. 하지만 혹시 그거 아닌가? 스케치의 크래프트를 사용하면 거기에 json data를 활용하는 기능이 있다. bodymovin을 사용하여 만들어진 json을 열어보면 아래와 같은 복잡 미묘한 숫자들이 나온다. 이걸 읽으며 애니메이션이 표현되는 듯하다. 개발자 분도 뭔가 비슷한 설명을 해 주셨던 것 같은데 역시 나는 디자이너기에 무슨 말씀인지 잘 모르겠고…..
json파일을 개발자 분에게 전달 후 화면 테스트한다.
회사에서 애니메이션을 만들어 개발자에게 테스트를 부탁 하였는데, “한마디로 ‘이미지’넣을 자리에 ‘json’을 넣는 거라고 보면 돼요” 라는 답변을 얻었다. 몹시 명쾌한 답변 주셔서 대단히 감사합니다. 앱 내에서 아주 부드럽게 잘 돌아가는 애니메이션 아이콘을 확인할 수 있었다. gif가 아닌, 위와 같은 좌표값을 가진 애니메이션이다. 파일을 확인해보면, 용량이 매우 작음을 알 수 있다.
이 페이지는 내가 실제로 애니메이션 작업을 하면서 참고한 위 페이지를 해석하여 간략하게 정리한 것이다.
도움말이나 샘플 등, 자세한 설명은 아래 링크에서 확인 가능하다.
위 주소에서 앱을 다운로드 하면 Lottie로 만든 애니메이션 파일이 돌아가는 모습을 미리 확인 가능하다. 사이트 내에서도 json파일을 드래그해 확인할 수 있다. 또한 로티 뷰어 앱을 다운로드 받을수도 있다.
이 글 다음으로는 내가 lottie를 이용해 만든 버튼과, 버튼을 눌렀을 때의 피드백을 프레이머에서 구현해 본 이야기를 적어 보도록 하겠다.
로띠를 지원하는 툴로 Adobe After Effects 외에도 Haiku라는 툴이 있다고 한다. 에펙보다는 훨씬 간편해보이긴 하는데 이런 툴들을 다 사용하기는 어려우니, 선택해서 사용하면 될 것 같다.
Lotti Animation 관련 다음 글
LottieFiles Plugin이 출시되면서 BodyMovin Plugin 을 대체하게 되었습니다. 아래 글은 Lottie Animation의 대략적인 특징과 작업 방법이며, 아래 링크는 새로운 플러그인에 대한 글입니다. 참고하셔서 읽어주시면 감사하겠습니다.
