아티클

로티(lottie)로 애니메이션 코드화하기

이기복| 2022.05.04

로티(lottie)는 무엇인가요?


로티(lottie)는 어도비의 에프터이펙트로 만든 애니메이션을 구문분석하여 코드로 이루어진 JSON파일로 내보내주는 플러그인(Plug-in) 프로그램입니다. 이 툴 덕분에 Android, iOS, Web에서 .gif가 아닌 코드로써 유려한 트렌지션을 보여줄 수 있게 되었습니다.


로티홈페이지 https://lottiefiles.com


어떻게 활용했었나요?


ktCloudBiz 팀에서 서비스의 장점들을 나타낸 아이콘을 모션으로 보여줬으면 좋겠다는 니즈가있었고, 아웃라인 애니메이션을 컨셉으로 디자인 진행하였었습니다. 에프터이펙트로 작업한 후 Bodymovin을 활용, JSON파일을 개발자분께 전달드려 단시간에 적용할 수 있었습니다. ( 홈페이지 들어가 확인해보니 애니메이션 속도는.. 아주 느리게 수정되어있네요 .. ㅠ )

이런 단순 애니메이션 뿐만아니라, 버튼의 액션, 화면의 전환 등 다양한 애니메이션 효과를 줄 수 있으니머릿속에 떠오르는 움직임들을 표현하고 JSON파일로 만드는 걸 도전해보세요!


JSON 파일로 전달한 After Effect 애니메이션 _ kt Cloud Biz . project

로티 설치와 실행


그렇다면 로티는 어떻게 설치하고 실행할까? 저는 구글에서 영문으로 된 링크를 따라서 설치를 했었어요. 기존 방식대로 파일을 다운받고 실행하는 것과는 조금 달라 조금 애를 먹었었습니다. 한번 애를 먹은 것들은 다음에 또 그 번거로움을 피하기위해 적어두는 편이에요. 제가 적어드린대로만 하시면 쉽게 하실 수 있을거에요 :)


01. 설치하기


1단계

깃헙주소로 접속 https://github.com/airbnb/lott...
build > extension > bodymovin.zxp 다운로드
*그냥 실행하면 실행이 안될꺼에요. 확장자 .zxp를 풀어줄 프로그램 (다음단계) 필요


2단계

압축을 풀어줄 ZXP인스톨러 다운로드
https://aescripts.com/learn/zx...


3단계

ZXP인스톨러(준비2)를 실행하고 bodymovin.zxp를 열어 설치완료하기


02. 사용하기

Bodymovin을 켠 화면, 왼쪽에 보이는 Selected를 선택후 오른쪽 '...' 으로 폴더지정, 마지막으로 렌더를 하면 끝!

마무리


모션과 트렌지션을 통해 좀 더 생동감 있는 서비스를 제공할 수 있지만 역시나 남용은 금물, 모션 뒤의 화면을 오매불망 기다리고 있는 사용자가 있다는 것을 꼭 기억해야 합니다. 잠깐의 시간으로 생각할 수 있지만 쌓이고 쌓여 테스크수행을 방해할 수 있기 때문이죠.

어쨌든 로티(lottie)라는 아주 편리한 도구가 생겼으니, 디자이너는 조금 더 자유롭게 디자인 할 수 있고 적용할 수 있게 되었습니다. 로티 홈페이지에서는 최근 '마켓플레이스' 서비스를 시작하여 창작자에게는 금전적 보상을, 구매자에게는 이미 만들어진 모션으로 디자인시간을 단축시킬 수 있도록 하고있습니다. 물론 무료로 개인이 업로드한 파일들도 많고요.

아직 결제와 금액책정 및 금전적인 부분은 아무것도 모르지만, 저 또한 마켓에 여러가지 아이콘과 아이디어들을 모션으로 조금씩 만들어 올려까합니다. (말부터 해야 몸이 움직인다죠?)
그럼 부지런한 저를 기대하며, 로티 커뮤니티에서도 뵈어요~


좋아요 1
공유하기

이기복

서비스에 가치를 만들어나가고 싶은 프로덕트 디자이너, 익힌 것과 생각하는 것들을 나누고싶습니다.
목록으로

TOP