Lottie로 애니메이션 구현
실용적을 넘어서 매력적인 앱으로 구현
애니메이션은 앱을 실용적을 넘어서 매력적인 앱이라고 느끼게 할 수 있는 큰 장점을 가지고 있습니다. 예를 들면 트위터에서 Heart를 클릭하거나 페이스북에서 좋아요를 클릭할 때 내가 해당 기능을 사용하였구나라고 좀 더 확실하게 느낌을 받으며 애니메이션이라는 사소한 차이로 사용자가 앱을 사용할 때 조금 더 즐겁게 사용하여 해당 앱을 매력적으로 느끼게 만들 수 있습니다.
이것들은 사용자의 입장이고 이제 디자이너의 입장에서 바라봅시다. 저도 어디서부터 어떻게 적용을 해야 되고 어떠한 것들을 준비해야 되지...? 개발자가 아닌데 코딩을 더 배워야 하는 건가? 또 개발자들에게는 어떻게 전달해야 되지? 하는 생각들 때문에 매우 막막하였습니다.
인터렉션을 적용하는 방법은 크게 3가지로 사용되고 있었습니다. 일단 코딩을 할 줄 알아서 코딩으로 직접 만드는 방법과 GIF 이미지를 넣는 방법 그리고 오늘 소개해드릴 Airbnb에서 개발한 오픈소스 라이브러리인 Lottie에 대해서 소개해드리려 합니다.
Lottie 란?
일단 왜 GIF보다 Lottie를 사용하여 JSON파일로 만드는 게 왜 좋은지 이유부터 알고 가는 게 좋습니다. 일단 GIF는 비트맵 방식으로 이미지를 연속적으로 배치하는 이미지이기 때문에 용량을 많이 차지하며 해상도에 따라서 깨지는 현상이 발생할 수 있습니다.
반면 Lottie는 After Effects를 활용하여 JSON파일로 변환하는 오픈 소스 텍스트 및 벡터 기반 파일 형식으로 해상도 대응이나 용량을 대폭 줄여서 적용 가능하기 때문에 GIF보다 매력적인 방법으로 많은 디자이너와 개발자들이 선호하고 있습니다.
사진 출처 - lottiefiles.comLottiefiles 공식 홈페이지에서는 GIF나 PNG보다 600% 용량이 적어지고 10배 빠른 전송속도를 가진다고 설명하고 있으며 좋은 예로 트위터와 구글 그리고 삼성의 예시를 들으며 앱스토어 상위 500개의 앱에서 Lottie를 사용한다고 설명하고 있습니다.
Lottie 사용방법
로티를 사용하기 위해서는 일단 준비물이 많이 필요한데 기본적으로 Lottie는 After Effects의 애니메이션을 실시간으로 렌더링 하는 라이브러리이므로 After Effects툴이 필요합니다. After Effects가 준비되었다면 리소스를 가져올 그래픽 툴인 Illustrator 나 Sketch 또는 Figma 툴이 필요합니다.
툴이 모두 준비되었다면 각 툴들을 연결하거나 JSON파일을 추출해줄 플러그인들이 필요합니다. After Effects에서 필요한 플러그인은 Lottie나 Bodymovin이 필요하며 Illustartor를 사용하면 같은 Adobe툴이기 때문에 리소스를 바로 가져올 수 있어서 두 개의 플러그인만 필요하지만 Sketch나 Figma를 사용한다면 After Effects에 연결해줄 AEUX 플러그인이 필요합니다. 툴 설치는 매우 간단하지만 플러그인 설치방법은 간단하지 않아서 플러그인 설치 방법을 알려드립니다.
ZXP Installer
일단 Lottie파일이나 Bodymovin, AEUX 모두 ZXP파일로 설치를 하기 위해선 해당 인스톨러가 필요합니다. 저도 처음 봤으니 당황하지 마시고 하단의 링크를 타고 일단 설치해줍니다.
설치를 하면 위 이미지와 같이 ZXP Installer가 실행이 되는데 그냥 ZXP파일을 드래그 앤 드롭해주시면 알아서 해당 프로그램 아이콘이 생기면서 설치가 완료됩니다.
https://aescripts.com/learn/zxp-installer/
LottieFiles
이제 After Effects를 들어가 주면 됩니다. AE에서는 Lottie를 실행하는 방법이 두 가지 있는데 'Bodymovin'과 'LottieFiles' 이렇게 두 가지 플러그인이 존재하는데 둘 중 하나만 사용해도 됩니다. 그중에서 추천드리는 플러그인은 'LottieFiles'입니다.
LottieFiles 플러그인은 기존의 Bodymovin보다 기능 구현을 더 빠르고 효율적으로 미리 보기 해주며 플러그인창에서 애니메이션을 검색하고 AE파일을 다운로드할 수 있으며 자신의 대시보드에 있는 애니메이션을 볼 수 있기 때문입니다.
일단 하단의 첨부해드린 링크에서 Lottiefiles를 들어가서 Adobe Creative Cloud 유저라면 VIA ADOBE EXCHANGE를 클릭하시면 쉽게 설치가 가능하며 클라우드 유저가 아니라면 Download Plugin(ZXP) 파일을 설치해줍니다.
그다음 ZXP파일을 ZXP Installer에 드래그 앤 드롭하시고 난 후 After Effects를 실행하고 Window > Extensions 창에 들어가면 LottieFiles가 설치되어 있는 화면을 볼 수 있습니다.
분명 아무런 설정을 하지 않은 After Effects에서 LottieFiles를 실행하면 위와 같은 에러 파일이 뜰 것입니다. 그러면 당황하지 않고 Preferences > Scripting & Expressions에서 Allow Scripts to Write Files and Access Network를 체크해줍니다. 또한 영문으로 설정해줘야 한다는 이야기도 있으니 After Effects를 영문판으로 설치를 권장드립니다.
그러면 위의 이미지와 같이 LottieFiles가 실행됩니다. 3번째 나침반 아이콘은 무료 AE파일이나 JSON파일을 다운로드할 수 있는 창이며 두 번째 눈 아이콘은 자신의 대시보드에 있는 애니메이션을 보여줍니다.
첫 번째 아이콘을 클릭하면 자신이 작업한 컴포지션이 뜨게 되며 초록색의 오른쪽 화살표를 클릭하면 자신의 대시보드에 업로드할 것인지 컴퓨터로 저장할 것인지 배경은 어떻게 처리할 것인지 설정할 수 있습니다.
https://lottiefiles.com/plugins/after-effects
AEUX_Sketch
스케치나 피그마로 오브젝트 작업하였다면 그걸 EPS파일로 내보내서 After Effects에 넣기는 사실 너무 귀찮은 일입니다. 그렇기 때문에 나온 플러그인이 바로 AEUX라는 플러그인입니다.
일단 스케치에서는 하단의 링크를 들어가 버전에 맞게 다운로드하신 후 압축을 해제하면 스케치 파일의 플러그인이 보입니다. 설치해주시면 바로 스케치에 플러그인이 추가되며 실행시키시면 AEUX창이 뜨게 되는데 아트보드를 선택 후 Send selection to AE를 클릭하시면 됩니다.
그러면 After Effects에서 AEUX라는 폴더에 컴포지션이 추가되며 에셋들도 모두 삽입된 상태로 넘어오게 되며 손쉽게 스케치 파일을 에펙에서 작업하시면 됩니다.
https://aeux.io/guide/download.html
AEUX_Figma
피그마에서는 Lottie라는 플러그인이 존재하지만 이 플러그인은 JSON파일을 불러와 GIF 이미지를 추가하거나 나의 Priview 또는 무료 애니메이션을 보거나 GIF 이미지로 아트보드에 삽입하여 피그마 내에서 Present를 실행하여 미리 로딩되는 화면을 볼 수 있는 플러그인이지 에펙으로 연결을 시키거나 하는 역할을 하지 않습니다.
에펙 작업이 되지 않은 단순한 오브젝트를 AE파일로 넘기려면 피그마도 AEUX 플러그인을 사용해야 합니다. AEUX는 아직 플러그인 커뮤니티에 게시되지 않았으므로 설치 프로세스가 예상보다 약간 더 복잡합니다.
스케치와 마찬가지로 하단의 링크를 통해 파일을 다운로드하고 압축을 해제하면 AEUX Figma라는 파일이 있습니다. 다운을 받으신 후 피그마에서 마우스 오른쪽 클릭을 하여서 Plugins > Development > New Plugin을 클릭해줍니다.
위와 같은 창이 뜨게 되면 하단의 Link existing plugin이라는 칸을 클릭해주고 다운로드한 'manifest.json'파일을 넣어줍니다. 그러면 플러그인에서 Development칸을 확인해보시면 AEUX플러그인이 생성된 거를 볼 수 있습니다. 다운로드하신 파일을 지우게 되면 피그마에서 오류가 뜨기 때문에 유지해두셔야 합니다.
https://aeux.io/guide/download.html
Lottie 주의사항
안드로이드 저사양 단말에서는 Lottie로 애니메이션을 구현할 수 없습니다. 그래서 움직이지 않는 정적인 이미지를 별도로 준비해두셔야 합니다. 또한 에펙 작업 시 개발환경에 주의하여서 작업해야 합니다. 열심히 작업을 하였는데 Lottie Preview에서 제대로 구현이 안된다면 시간낭비만 한 것이 되기 때문입니다.
하단의 링크를 들어가 보시면 각 운영체제별로 구현되는 부분과 구현이 되지 않는 부분을 확인할 수 있습니다. 웬만한 효과는 거의 적용이 되니 크게 걱정을 하지 않으셔도 됩니다.
결국 써야 하는 툴이 늘었다...
디자이너중 사용해야 하는 툴이 가장 많은 디자이너는 아무래도 UI 디자이너가 아닌가 싶습니다. 결국은 Lottie를 활용하기 위해선 After Effects를 사용해야 하기 때문입니다. 에펙의 기초만 알아도 활용할 수 있다고 하지만 말은 쉽죠...
처음에는 Lottie의 무료 애니메이션을 활용해서 작업해보는 것을 권해드립니다. 저도 에펙은 배우는 단계라 실무에서 활용하기는 어려운 부분이 많은데 이럴 때는 무료 애니메이션을 JSON파일을 다운로드한 후 LottieFiles 웹안의 Eidtor에 드래그 앤 드롭하신 후 컬러를 프로젝트에 맞게 바꾸고 Duration이나 Rate값을 조절하여서 사용하는 방법도 나름의 방법이라고 생각합니다. 유료 애니메이션도 많으니 좀 더 퀄리티 높은 작업물을 사용하고 싶으시면 결제하여서 적용하는 방안도 추천드립니다.
https://lottiefiles.com/editor
