안드로이드 개발자들을 위한 수준 있는 독립 컨퍼런스인 Droid Knights에서 “안드로이드 앱에 인터렉티브한 애니메이션 구현하기”라는 주제로 많은 호응을 받은 강연입니다.

데모의 소스 코드는 GitHub에서, Lottie 안드로이드 라이브러리는 GitHub에서 만나볼 수 있습니다.

소개

프로젝트를 진행하면서 종종 발생하는 케이스를 예를 들어 이야기해보겠습니다. 디자이너는 종종 앱에 엄청난 효과의 애니메이션을 넣고 싶어 하죠. 그러면 개발자는 OOM 등 메모리 이슈나 애니메이션 개발의 어려움을 말하면서 안된다고 거절하곤 합니다. 하지만 개발자가 아무리 잘 설명해도 둘 사이의 간극은 좁혀지지 않습니다.

Facebook Keyframes v.s. airbnb Lottie

페이스북에서는 위 이미지처럼 좋아요 버튼을 길게 눌렀을 때 아이콘들이 움직이는 효과 등에 Keyframes를 사용합니다. 이런 애니메이션을 기본 안드로이드 개발 방법인 프레임 애니메이션으로 만들려면 자원이 얼마나 필요할까요? 일단 초당 24프레임 이상이 필요하며 화면 전체의 크기 애니메이션을 초당 24장으로 2초 분량을 만든다면 장당 750 * 1334 * 4로 계산해서 4Mb 메모리가 필요하므로 가용 메모리 총량은 192Mb, 약 200Mb가 필요하게 됩니다. 일반적인 저사양 안드로이드 기기에서는 OOM이 발생하게 되겠죠.

이런 현상을 해결하는 안드로이드의 애니메이션 적용 방법에 대해 2016년 10월에 AndroidIconAnimator라는 Medium 포스트가 인기가 있었고, 2016년 11월에 페이스북에서 Keyframes가 나왔습니다. 그리고 가장 최근인 2017년 2월에 airbnb에서 Lottie를 출시했습니다.

Keyframes은 적은 용량으로 애니메이션을 구현하려는 목적에 맞게 만들다 보니 스펙이 제한적이었습니다. 한편 Lottie는 실제 After Effect에서 사용하는 다양한 효과들을 대부분 지원합니다. 따라서 더욱 많은 기능을 가진 Lottie로 인터렉티브 애니메이션을 구현하는 방법을 알려드리겠습니다.

Lottie

Lottie를 적용하려면 최소 ICS, 즉 API 14 이상의 안드로이드 버전이 필요하므로 적용 폭이 넓은 편입니다. 대신 저사양의 기기에는 OOM이 발생할 수 있는 확률이 아직 있습니다.

사용 방법

사용 방법은 간단합니다. 레이아웃 XML의 애트리뷰트 설정을 통해 간단하게 사용할 수 있고, 코드상에서 직접 설정할 수도 있습니다.

또한 비동기 사용 등 다양한 사용 방법을 지원합니다. 애니메이션이 재생되는 형태를 확인할 수 있도록 리스너를 추가해서 상황에 맞게 적용하거나 제어할 수도 있습니다. 자세한 내용은 GitHub에서 확인하세요.

필요 사항

Lottie 라이브러리를 사용하려면 애니메이션을 만들어야 합니다. 여기에는 Adobe의 After Effects, 플러그인을 설치하기 위한 ZXP Installer, 애니메이션을 JSON으로 변환하는 플러그인인 Bodymovin이 필수입니다.

데모

After Effects를 사용한 애니메이션을 안드로이드 앱에 직접 적용하는 데모는 동영상을 확인해 주세요.

응용 데모

활용 방법에 대해 좀 더 말씀드리자면 간단하게 stepper 형태의 UI를 구현하는 Android Material Stepper라는 라이브러리와 같은 화면을 인터렉티브하게 구현할 수 있습니다.

정지된 이미지를 추가하는 형태로 제공하던 사용자 UX를 애니메이션을 활용해서 인터렉티브하게 구성할 수 있습니다. 맨 밑에 액티비티나 프래그먼트가 있고, 그 위에 애니메이션을 재생할 수 있는 LottieAnimationView가 있으며, 그 위에 배경이 투명한 StepperLayout이 있습니다. StepperLayout에서 화면이 넘어가는 이벤트를 잡아서 LottieAnimationView에서 원하는 프레임까지 재생하도록 할 수 있습니다.

After Effects에서 마커를 추가해서 어디까지 재생할지 파악한 후 위 그림과 같은 코드에서 ANIMATION_TIMES의 float으로 다음 버튼을 누르면 어디까지 재생을 할지 결정해주었습니다. 예제의 경우 5초짜리 애니메이션이고 초당 60프레임이므로 100%가 1f가 되도록 변환해서 넣으면 됩니다.

메모리 이슈

애니메이션을 재생하면서 메모리 문제가 있을 수 있습니다. 처음 메모리는 0.33Mb의 프리 메모리와 5.43Mb의 할당 메모리가 있으며, 애니메이션을 로드하면 약 13Mb 정도의 메모리가 할당되며, 뷰가 사라지거나 visibility를 none으로 하면 바로 가비지 컬렉팅이 돼서 사라지는 것을 확인할 수 있습니다.

정리

최근 개발자와 디자이너의 간극을 줄일 수 있는 많은 라이브러리와 기술이 발표되고 있습니다. 개발 언어 이외에 새로운 기술이나 도구를 익히는 것에는 학습 곡선이 있을 수 있지만 원활한 협업과 인터렉티브한 화면 구현을 위해 투자할 가치가 있다고 생각합니다. 물론 After Effects로 애니메이션을 디자이너가 만들어 줄 수 있는 환경이면 가장 좋겠죠.

마지막으로 LottieFiles에서 Lottie로 만든 JSON을 공유하고 있으므로 활용하면 많은 도움이 될 것 같습니다.

QnA

• Q: After Effects에는 많은 기능이 있는데 어디까지 지원하나요?

• A: 현재 Lottie는 아직 개발 중인 상태로 계속 지원하는 범위가 올라갈 것으로 보이며, 일반적으로 비트맵을 로드할 수 있습니다. 현재 면을 칠하는 경우 단색은 가능하지만 그러데이션은 지원하지 않으므로 제약조건을 잘 확인하시기 바랍니다.

• Q: Facebook의 Keyframes의 경우 많은 플랫폼을 지원하는데 Lottie도 그런가요?

• A: 둘 다 iOS, 안드로이드, 리액트 네이티브, 웹까지 모두 지원합니다.

• Q: 해상도 때문에 이미지가 바뀌지는 않나요?

• A: Facebook의 경우에도 해상도 때문에 이미지가 바뀌는 것을 방지하고자 벡터를 사용하기 위해 JSON을 사용했습니다. 따라서 그렇지는 않을 겁니다.

• Q: 저희는 Lottie를 사용하려다가 포기했는데 OOM을 겪은 경험은 없으신가요?
• A: 처음에 큰 애니메이션을 Lottie로 만들어서 프리 메모리 용량이 적은 경우 애니메이션을 다 올릴 수 없어 OOM이 발생하고는 하는데요. 저희는 실질적으로 1초 이내의 짧은 애니메이션만 적용하고 있습니다. 또한, 화면 전체에 애니메이션을 올리는 것도 메모리가 많이 필요하므로 작은 크기를 사용하고 있습니다. 그리고 SDK 버전이 18이나 20인 경우에만 애니메이션이 재생되고 낮은 기기의 경우 이미지만 보이도록 대처하고 있습니다.

본 영상과 글은 Droid Knights의 비디오 스폰서인 Realm에서 제공합니다. 모바일 개발자가 더 나은 앱을 더 빠르게 만들도록 돕는 Realm 모바일 데이터베이스와 Realm 모바일 플랫폼을 통해 핵심 로직에 집중하고 개발 효율을 높여 보세요! 공식 문서에서 단 몇 분 만에 시작할 수 있습니다. 또한 Realm 홈페이지에서는 모바일 개발자를 위한 다양한 최신 기술 뉴스와 튜토리얼을 제공하고 있으니 즐겨찾기하고 자주 들러 주세요!