로티(lottie)로 애니메이션
코드화하기
에프터이펙트 모션을 웹에 올려보자 - 로티 설치부터 활용방법까지
로티(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/lottie-web
build > extension > bodymovin.zxp 다운로드
*그냥 실행하면 실행이 안될꺼에요. 확장자 .zxp를 풀어줄 프로그램 (다음단계) 필요
2단계
압축을 풀어줄 ZXP인스톨러 다운로드
https://aescripts.com/learn/zxp-installer
3단계
ZXP인스톨러(준비2)를 실행하고 bodymovin.zxp를 열어 설치완료하기
02. 사용하기
에펙에서 Window > Extention > Bodymovin
컴포지션 선택 후, 생성할 폴더 설정
렌더(RENDER)클릭
Bodymovin을 켠 화면, 왼쪽에 보이는 Selected를 선택후 오른쪽 '...' 으로 폴더지정, 마지막으로 렌더를 하면 끝!마무리
모션과 트렌지션을 통해 좀 더 생동감 있는 서비스를 제공할 수 있지만 역시나 남용은 금물, 모션 뒤의 화면을 오매불망 기다리고 있는 사용자가 있다는 것을 꼭 기억해야 합니다.
잠깐의 시간으로 생각할 수 있지만 쌓이고 쌓여 테스크수행을 방해할 수 있기 때문이죠.
어쨌든 로티(lottie)라는 아주 편리한 도구가 생겼으니, 디자이너는 조금 더 자유롭게 디자인 할 수 있고 적용할 수 있게 되었습니다. 로티 홈페이지에서는 최근 '마켓플레이스' 서비스를 시작하여 창작자에게는 금전적 보상을, 구매자에게는 이미 만들어진 모션으로 디자인시간을 단축시킬 수 있도록 하고있습니다. 물론 무료로 개인이 업로드한 파일들도 많고요.
아직 결제와 금액책정 및 금전적인 부분은 아무것도 모르지만, 저 또한 마켓에 여러가지 아이콘과 아이디어들을 모션으로 조금씩 만들어 올려까합니다. (말부터 해야 몸이 움직인다죠? � )
그럼 부지런한 저를 기대하며, 로티 커뮤니티에서도 뵈어요~
