로티(Lottie) 애니메이션을 사용한 앱서비스 디자인

해커톤에서 디자이너가 경험할 수 있는 것은 참 많다!

기획자 및 개발자와 소통하기 위해 사용하는 언어들, 바라보는 시각도 각각 꽤나 다름을 느꼈고 개발 가능한 디자인, 즉 3주안에 구현 가능한 핏으로 고도화해 나가는 과정 속에서 스스로의 성장을 체감할 수도 있다.

하지만 또 재밌는 일은 실무에서는 가능할까 싶은 다소 실험적인 디자인을 마음껏 해볼 수 있는 점이다.

 

2020년 7월, 3주동안 진행되었던 해커톤에서 개발한 Booster는 대학생을 위한 사전 출력 서비스로

대학가 주변 인쇄소와의 연계를 통해 인쇄물 출력을 예약하고 픽업해갈 수 있는 핵심 기능을 지니고 있다.

5개의 파트(기획/디자인/서버/안드로이드/iOS) 총 14명의 팀원이 함께했는데

그 중 디자인은 해커톤에 입문한지 얼마 안되었던 나를 포함해 3명의 디자이너가 즐겁게 작업했다!

 

 

로티 (Lottie) 애니메이션 사용법 요약

그 중, 오늘은 Splash와 Home View에 사용한 로티(Lottie) 애니메이션 사용법에 대해 작성해보려고 한다.

작업할 당시 한글로 설명이 된 글들이 거의 없어서 개발자와 함께 영어로 된 글들을 읽으며 오류를 해결해야 했는데, 그 과정 속에서 깨달은 나름의 꿀팁도 있다!

 

Lottie는 마이크로 인터랙션 등에서 사용한 가능한 라이브러리로, 피드백을 애니메이션으로 보여주는 것이 가능하다. 애니메이션이라면 gif를 사용하면 되지 않을까-하는 막연한 생각을 가지고 있었는데 개발자와의 협업을 통해 gif는 굉장히 무겁고 리소스를 많이 잡아먹을 수 있음을 알게 되었다.

 

그럼 로티 사용법을 적어보자면 아래의 단계와 같다.

 

0. Lottie, 왜? 어떻게?

1. Bodymovin 플러그인 설치

2. 그래픽 작업 후 애프터 이펙트로 가져오는 경우

   2-1. 애프터 이펙트에서 바로 작업하는 경우

   2-2. 애니메이션 gif로 불러오기

3. Bodymovin을 활용한 json 파일로 내보내기

4. 정상 작동 테스트하기

5. json 파일 개발자에게 넘겨주기

---

0. Lottie, 왜? 어떻게?

늘 어떤 일을 하기에 앞서 중요한 것은 정의를 내리는 것이다. 디자인 과정의 일부인 로티 사용에도 우리가 왜, 어떤 방식으로 구현을 할 것인지를 먼저 분명히 해주는 것이 좋다.

쉽게 말해 해당 View에서 제공되어야 하는 기능이 로티로 표현이 되었을 때 더 효과적인지, 왜 애니메이션으로 구현되어야 하는지 팀원 모두를 설득할 수 있는 디자인이어야 한다.

 

"왜?"

당시 우리는 홈 화면에 제공되어야 하는 기능을 재구축한 후, 이를 가장 효과적으로 전달할 수 있는 방법을 찾기 위해 정말 많은 와이어프레임을 그렸었다. 그 중 버려진 뷰들의 이유는 공통적으로 "홈화면에 이렇게 많은 기능이 필요하지 않은데, 비어보인다는 이유로 억지로 더 채웠다"는 것이다.

 

3주만의 개발이 가능한 핏으로 구현되다 보니 기능이 많은 편도 아닐 뿐더러, 탭바에서 모두 접근이 가능한 기능들을 굳이 홈에서 배치하는 것이 적절치않다고 판단해 약 2주 가까이 홈 뷰를 픽스하지 못했었다. 그래서 고안한 것이 "그냥 다 빼고 보여줄 것만 보여주자, 대신 그래픽으로!" 하는 의견을 내었고 팀원들을 설득할 수 있었다.

 

"어떻게?"

우선 애니메이션으로 사용될 그래픽이 우리 서비스의 정체성을 보여주어야 하며, 2D 또는 3D 중 어떤 것이 우리 서비스와 디자인의 무드에 잘 어울리는지 결정해야 했다. 홈뷰를 제외한 대부분의 GUI는 작업 중인 상태였기에 판단 근거는 우리의 작업물이었다. 인쇄 서비스다 보니 자연스럽게 프린터기/복합기라는 실제 프로덕트를 떠올렸고, 2D와 3D 형태로 모두 작업해본 결과 3D로 최종 결정했다.

 

---

1. Bodymovin 플러그인 설치

로티(Lottie)를 사용하기 위해서는 애프터 이펙트 플러그인을 설치해주어야 한다.

플러그인 이름은 Bodymovin으로, 아래 사이트에서 무료로 설치 가능하다. (택 1)

Bodymovin

airbnb/lottie-web

 

정상적으로 설치했다면 애프터 이펙트의 Window > Extensions > Bodymovin 에서 확인이 가능하다.

Bodymovin을 클릭해보면 두 번째 사진과 같은 창이 뜬다면 정상적으로 설치가 된 것이다.

간혹 설치하고 Bodymovin을 실행시켰는데 창이 안뜨거나 먹통인 경우가 있는데, 그럴 땐 아예 플러그인은 말끔히 삭제하고 다시 설치하는 편이 빠르다.

 

 

---

2. 그래픽 작업 후 애프터 이펙트로 가져오기

2-1. 애프터 이펙트에서 바로 작업하는 경우

 

 

먼저 이 작업은 앞서 소개한 Boster가 아닌, 2021년 1월 PM으로 참여한 해커톤 작업물, Housing이다.

로고와 모든 뷰는 팀 디자이너들이 작업했으며, 나는 스플래쉬 작업만 진행했다.

 

해당 영상 초입에 볼 수 있는 스플래쉬는 애펙에서 바로 작업해 로티로 변환한 것이다.

로고 ai 파일을 가져와서 shape layer로 변환 후 애니메이션을 적용해도 되지만

개인적으로는 선에 애니메이션을 넣을 때는 애펙에서 선을 그리고 애니메이션을 주는 것이 더 편했다.

 

만약 ai 파일을 가져와서 작업을 하려고 한다면 아래 단계를 거치면 된다.
1. 일러스트레이터(AI)에서 소스를 만든 후 해당 파일을 애프터 이펙트로 가져온다.
2. 모양 레이어로 변환해준다. [Layer] > [Create] > [Create Shape from Vector Layer]
3. 원하는 모션 제작

 

 

2-2. 애니메이션 gif로 불러오는 경우

C4D로만 작업을 진행했었기 때문에 설명은 C4D 사용 기준이다.

만약 3D로 작업한 것을 로티 애니메이션으로 불러오고 싶다면 먼저 png 시퀀스 레이어로 추출해주어야 한다. 추출할 때 배경까지 함께 뽑을지, 개체만 뽑을지는 디자이너가 선택하면 된다. 우리는 배경과 개체를 함께 추출했고, 다양한 해상도에 쉽게 대응하기 위해서 애초에 세로로 긴 사이즈로 내보내주었다.

 

 

그리고 이 파일을 애펙으로 불러올 때 놓쳐서는 안되는 포인트가 여기서 등장한다.

실제로 해커톤 당시 작업할 때, 이 사실을 몰라서 하루동안 이것만 잡고 있었다. T-T

 

먼저 컴포지션을 만들어주어야 한다. 그리고 해상도 비율에 맞게 사이즈를 입력하고, 가장 중요한 것은 "Duration"이다. 이 곳에는 본인이 png 시퀀스로 뽑은 레이어 개수를 적어주면 된다. (단, C4D에서는 시퀀스가 추출될 때 0부터 시작되기 때문에 맨 마지막 시퀀스 레이어 파일 이름이 dooropen100.png 라면 Duration에는 100에서 +1 한 101을 적어주어야 한다.)

 

컴포지션을 생성했다면 C4D에서 추출했던 png 파일들을 모두 불러오면 되는데, 이 때 PNG Sequence에 체크가 되어있지 않아야 된다.

 

 

그 후 불러온 레이어들을 이전에 만들었던 컴포지션에 추가해준다. 그리고 또 중요한 부분은 레이어들을 선택할 때 "마지막 프레임"부터 시작해서 "첫번째 프레임" 순으로 잡아주어야 한다는 점이다. 쉽게 말해 dooropen00 ~ dooropen101 프레임이 있다고 가정하면, dooropen101을 먼저 선택한 후, shift를 누른채 dooropen00을 선택해주어야 한다!

프레임을 잘 잡아주었다면 [우클릭] > [Keyframe Assistant > Sequence Layers...]를 선택한다. 그러면 시퀀스 레이어 창이 뜨는데, 이 경우 나는 overlap을 활성화해준 뒤, Base에 적혀진 숫자에 맞게 Duration을 입력해주었다.

 

그렇게 되면 애니메이션은 우선 완성이다! 글이 살짝 복잡하거나 어렵게 느낄 수도 있기 때문에, 한창 헤매고 있을 때 내게 도움을 주었던 원본 글도 함께 첨부한다. 글 속 이미지를 보면, 마지막에 시퀀스가 정렬된 모습이 나와 살짝 다른데, 애니메이션과 로티 구현에는 전혀 지장이 없었다.

 

How to make image sequences with Lottie in Android (Easy)

 

 

 

---

3. Bodymovin을 활용한 json 파일로 내보내기

이제는 설치한 Bodymovin 플러그인을 활용해 json 파일을 내보내줄 차례다!

굉장히 간단하지만, 위 단계를 제대로 거치지 않거나 하면 텅 빈 json 파일을 만나게 될 수 있다.

 

1번 단계에서와 동일하게 애펙에서 Bodymovin을 열어준다. 그 후 내가 작업했던 컴포지션 파일을 선택해주고 연두색 ... 아이콘을 눌러 경로를 지정해준다. 설정도 가능한데, 딱히 건들이지 않고 기본으로 추출하는 경우가 많았다. (간혹 json 파일이 정상적으로 만들어지지 않으면 괜히 세팅에서 이것저것 바꿔보기도 했는데 큰 차이를 모르겠다.)

 

그리고 SAVE를 누르면 json 파일 생성 완료!

 

 

---

4. 정상 작동 테스트하기

로티를 처음 만들 때는 json 파일도 제대로 만들지 못해 위 과정을 정말 많이 반복했었는데, 덕분에 json 파일이 제대로 생성되었는지를 눈치챌 수 있는 방법이 생겼다. 바로 json 파일 미리보기에 글자들이 차있으면 거의 96%의 확률로 성공한거다.

 

 

 

이제 이 파일을 개발자에게 넘겨주기 전에, 디자이너가 먼저 정상 작동하는지 점검할 필요가 있다. 아래 사이트에 접속해 만들어둔 json 파일을 업로드하면 업로딩 후 직접 확인할 수 있다. QR코드, 링크로 공유도 가능하며 필요할 경우 gif로 전환이 가능하다. (gif 전환은 정사각형 사이즈로만 추출되는 것 같다.)

 

Preview & Test Lottie Animations on Web, iOS and Android

 

 

 

---

5. json 파일 개발자에게 넘겨주기

정상 확인이 되었다면 파일을 압축한 후 개발자에게 넘겨주면 끝이다! 아래는 실제 로티를 적용한 구현 영상과 로티로 제작한 애니메이션 파일들이다. 텍스트나 탭바는 에셋으로 넘겨주어 개발자들이 로티 위에 에셋을 얹었던 것으로 기억한다.

 

글을 쓰고 보니 과정이 다소 복잡해보이지만, 몇 번씩 작업을 하다보면 생각보다 간단하니, 마이크로 인터랙션이나 애니메이션을 통한 재미요소를 사용해보고 싶다면 로티를 활용하는 것도 좋은 방법이다.

 

 

경험했던 과정을 토대로 작성한 글이다 보니 다른 부분들이 있을 수 있지만 조금이라도 과정에 도움이 되길 바라며, 만약 로티 오류가 생기면 한글보다는 구글에 영어로 검색해보는 것을 추천한다!