로티(Lottie)를 이용한 앱 애니메이션 구현하기, 마이크로 인터랙션

안녕하세요. 맥가입니다. 지난번에 카페에 로티(Lottie) 관련 질문글을 올렸었는데요. 열심히 찾아서 실무에 적용 후 이를 정리해서 올려봅니다. 사내 실무 도입은 작년부터 쭉 거론되어왔지만, 다들 정해진 일정도 있고 개발팀에 적용 여부 판단이 살짝 지연되어 이제야 실행했습니다. 내부 리액트 네이티브 프로젝트에 적용했으며, 안드로이드와 아이폰에서 이상 없이 작동하는 것을 확인했습니다.

로티를 활용하면 좋은 품질의 애니메이션을 쉽고 빠르게 앱에 적용 가능합니다.

'로티'라는 녀석이 생소할 수 있는데요. 로티는 우리가 잘 알고 있는 숙박 공유 서비스인 에어비앤비(airbnb)에서 개발한 애니메이션 관련 라이브러리입니다. iOS와 Android, 그리고 리액트 네이티브를 지원합니다. 기존에 위와 같은 애니메이션을 앱상에서 구현하려면 GIF, SVG, PNG 스프라이트 방식을 통해 가능했었는데요. 용량이 많아지거나 품질이 떨어지고 또 코드가 복잡해져서 효율이 좋지 못한다는 단점을 지니고 있었습니다.

이제 로티를 통해 에프터이펙트(이하 에펙)에서 제작한 애니메이션을 JSON*형태의 코드로 개발자에게 쉽게 전달할 수 있으며, 해당 라이브러리로 제작한 애니메이션 제어도 가능해졌습니다. 국내 몇 분의 선구자 같은 디자이너분들께서 해당 내용을 먼저 각종 블로그에 포스팅해주셨으나 시작부터 끝까지 정리된 최신 글은 찾지 못해 해외 관련 글을 섞어서 다시 정리해봤습니다. 약 3일 넘게 찾아봤습니다.

*JSON(JavaScript Object Notation) - 경량의 데이터를 교환하는 형식으로 보통 실무에서 '제이슨'이라 부릅니다. 호환성이 좋아 종이 다른 개발언어 간 데이터를 전달할 때, 여러 개의 데이터 뭉치를 묶어서 전달할 때 자주 사용되며 OPEN API에서 쉽게 접할 수 있습니다.

아래부터는 로티를 활용하는 작업 프로세스를 개인적으로 정리한 내용입니다. 현재 로티 라이브러리가 에펙만 지원하고 있어 에펙을 필수적으로 사용해야 하고 좋은 품질의 결과물을 제작하기 위해 어도비의 일러스트레이터를 활용합니다. 요이땅!

LottieFiles의 에펙 익스텐션 다운받기

먼저 https://lottiefiles.com/plugins/after-effects에 접속해 로티 익스텐션을 설치합니다. 에펙이 설치되어 있지 않다면 에펙부터 설치해주세요. 좌측은 수동으로 설치가능한 ZXP형태고 우측의 VIA ADOBE EXCHANGE는 Adobe CC를 통해 바로 설치되는 버튼입니다. 우측 버튼으로 설치해주세요. 조금 시간이 걸립니다.

먼저 일러스트레이터에서 작업합니다.

모든 요소를 벡터 기반으로 에펙에 전달할 겁니다. 인쇄 목적이 아닌 앱에 활용해야 하니 도큐먼트를 RGB 그리고 출력하고자하는 디바이스의 기본 해상도로 열어주세요. 저는 안드로이드 720*1280(2 배수) 해상도의 스플래시 스크린을 제작했습니다. 중요한 부분은 애니메이션 적용할 부분을 각각 레이어로 분리해줘야 한다는 겁니다. 제작이 모두 완료되면 AI파일로 저장해주세요.

아쉽긴 하지만 일러스트레이터에서 생성한 그라데이션은 에펙으로 임포트 하는 과정에서 바르게 출력되지 않습니다. 아마도 그라데이션을 구현하는 방식이 서로 달라 문제가 생기는 듯하며 이를 컨버팅 해주는 플러그인이 유료로 판매되고 있는 걸 확인했습니다. 가급적 그라데이션이나 쉐도우 각종 이펙트를 제외한 플랫한 형태로 제작해주세요.

근 10년만에 여는 에펙. 

에펙을 실행해 좌측 프로젝트 화면에서 우클릭으로 'Import > File'을 눌러주고 아까 일러스트레이터에서 저장했던 AI파일을 선택해주세요.

창이 하나 뜰 겁니다. 들여오기 방식을 'Composition'으로 변경해주세요. 그리해야 AI파일의 각 레이어가 분리된 형태로 임포트 됩니다.

프로젝트에 우리가 만든 요소들이 잘 임포트 되었습니다. Composition타입(필름 모양 아이콘)을 더블 클릭해주시면 속해있는 레이어별로 하단 타임라인 배치됩니다.

단축키 'Ctrl + K'를 눌러 Composition 설정을 연 뒤 재생시간을 1초로 설정합니다. 1초 이상이 되어도 됩니다만 UI작업자인 우리는 대게 마이크로 인터랙션을 구현할 목적으로 이 같은 과정을 반복할 테니 모든 애니메이션은 1초 이내로 하는 게 바람직하다 생각합니다.

그 뒤 불러온 AI요소들을 벡터로 변환해주어야 합니다. 이상태로 애니메이션을 걸어 로티로 출력하면 비트맵 방식으로 진행됩니다. log관련 오류도 뿜어냅니다. 좌측 하단 타임라인의 레이어들을 모두 선택해주고 'Create Shapes from Vector Layer'를 눌러 변환해주세요. 기존 AI레이어가 모두 숨김 처리되고 새로운 레이어들이 생겨납니다.

자 이제 불러왔던 AI 관련 레이어들은 필요 없습니다. 용량만 차지하니 프로젝트 그리고 타임라인에서 AI 관련 레이어들은 모두 지워주세요. 벡터로 변환된 레이어만 가지고 작업할 겁니다.

기존에 에펙을 사용해보셨다면 마음껏 모션을 걸어주세요. 로티에서 에펙의 어떤 부분까지 활용할 수 있는지도 시험해보세요. 기초적인 부분을 전달하는 글이고 저는 심플한 스플래시 제작이 목적이라 간단한 형태로 제작했습니다. 완료되면 상단 메뉴바 'window > Extensions > LottieFiles'를 눌러 로티를 실행합니다. 윈도우 보안창과 에펙의 경고창이 하나 뜰 겁니다. 이에 대한 해결 방법은 따로 해결해보시거나 댓글로 말씀드리겠습니다.

로티 창이 실행되면 먼저 로티 사이트에 회원가입을 하시고, 그 뒤 상단에 몇 개의 버튼들이 보입니다. 좌측 버튼으로 PC에 바로 저장할 수 있지만 우측 버튼을 눌러 업로드해보세요.

렌더링과 업로드가 완료되면 버튼이 바뀝니다. 지구본 모양의 버튼을 누르면 브라우저에 로티 창이 뜹니다.

제작했던 결과물이 로티 페이지에 업로드되었습니다. 모바일 로티 애플리케이션을 설치해 QR코드로 모바일에서 결과물을 확인할 수 있고, 각 레이어의 컬러 변경. 배속과 배경색 변경이 가능합니다. 그리고 가장 중요한 해당 페이지 링크 공유와 빨간 박스의 우측 링크를 공유해 JSON형태의 결과물을 개발자에게 전달할 수 있습니다.

해당 페이지의 URL에서 직접 확인해보세요.

 

LottieFiles - Free animation files built for Lottie

막상 해보면 얼마 걸리지 않는 작업인데 글로 적다 보니 많이 길어 보이네요. 어렵지 않습니다. 에펙 모션에 관련한 부분은 기초적인 좋은 강좌가 많으니 이참에 공부 해보시는 것도 좋다고 생각합니다. 각종 앱의 버튼과 아이콘 등에 위와 같은 기술을 적용할 수 있습니다. 디자인과 개발에서 로티는 꽤 최신 기술입니다. 숙달되면 인터랙션 관련 애니메이션까지 가능한 강력한 UI 디자이너로 성장할 수 있습니다.

그리고 올드비 여러분. 아마 플래시가 가능하신 분들 꽤 되시는 걸로 압니다. 공식 사이트를 통해 조만간 어도비 애니메이트(플래시)에도 로티 익스텐션을 지원하겠다는 공지가 올라왔습니다. 그간 쓸 곳이 없어 잠시 잊고 있던 플래시 스킬을 뽐낼 시간이 다가왔습니다. OB 여러분의 저력을 보여주세요.

오늘도 긴 글 읽어주셔서 감사합니다.

-

좋은 정보 공유해주신 Misoon Jang님께 정말 감사드립니다.

 

맥가의 브런치