Lottie 애니메이션 A to Z
로띠를 통해 프로덕트에 생동감을 더하는 애니메이션 구현하기
최근 참여하는 프로젝트에서 로띠 애니메이션을 구현해야 할 일이 생겼습니다. 전에 진행한 토이 프로젝트에서의 제작 경험이 있지만, 시간이 지나 잊어버린 부분도 있고 새로 업데이트 된 기능도 있어서 이번 기회에 새로 공부했습니다. 배우며 정리한 내용을 공유합니다.
"로딩 애니메이션 로띠로 만들어주세요"
약 1년 전, IT 동아리 개발자에게 위와 같은 말을 듣고 난감했던 기억이 떠오릅니다. 로딩 애니메이션의 존재와 더불어 로띠라는 생소한 단어 때문이었습니다.
Lottie?
이미지 출처 : LottiefilesLottie는 After Effects 애니메이션을 실시간으로 렌더링하는 iOS, Android 및 Web(React Native) 라이브러리입니다. 에어비앤비 개발자가 만들었으며 json 파일 형식의 애니메이션을 실시간으로 웹에서 렌더링 해줍니다. 쉽게 말하여 애프터이펙트에서 제작된 애니메이션을 코드로 변환하여 웹에서 미리 본다고 생각하면 됩니다. 기존에 사용되었던 mp4, gif 형식의 애니메이션에 비해 가벼운 용량과 고화질이 장점입니다. 이번 글에서는 로띠 애니메이션을 제작하는 방법과 주의사항에 대해 소개해드리고자 합니다.
1. 애니메이션 제작을 위한 준비물
1. 일러스트레이터, 포토샵 등 그래픽을 제작하기 위한 툴 (애프터이펙트에서 제작을 시작해도 됩니다.)
2. Extension 매니저 / ZXP 형식의 Lottie 플러그인
3. Lottie 홈페이지 계정 생성 https://lottiefiles.com/
4. Adobe After Effects
2. 플러그인 설치
약 1년 전에는 Bodymovin 이라는 플러그인을 사용하여 작업을 진행했습니다. Bodymovin은 애프터이펙트의 컴포지션을 json으로 변환해주는 플러그인이었고, 변환 후 json파일을 Lottie 웹 홈페이지에서 렌더링했습니다. 최근 업데이트 된 내용에서는 Lottie Plugin이라는 이름으로 플러그인을 제공하고 있습니다. 또한 애프터이펙트 내에서 프리뷰가 가능하도록 절차가 간소화되어 훨씬 편리하다고 느꼈습니다.
(1) ZXP 확장자의 Lottie 플러그인을 다운받습니다. zxp 형식의 플러그인은 Extension Manager를 통해 설치가 가능합니다. 다운로드 후 ae-plugin-0.1.20 파일을 실행합니다.
플러그인 다운로드
(2) Extension Manager 설치
https://lottiefiles.com/plugins/after-effects
(2) 파일을 실행하면 자동으로 Extension Manager가 로드됩니다. Move to Applications Folder에 응답하여 좌측 패널의 After Effects에 설치를 완료해주세요.
(3) 위 이미지처럼 보인다면 설치가 완료되었습니다. 애프터이펙트 내에서 Window - Extensions - Lottiefiles를 눌러 플러그인을 실행시켜 주세요. 설치 후 LottieFiles 사이트에 로그인해야 플러그인을 사용할 수 있습니다.
+ 플러그인 설치 후 에러메세지가 뜰 경우
플러그인 설치 후 [1]과 같은 오류창이 뜰 경우, [이미지2]와 같이 진행해보세요.
[1] Lottie 플러그인 에러화면
[2] After Effects - Preferences - Allow Scripts to Write Files and Access Network 에 체크표시를 해주시면 됩니다.3. 간단한 로딩 애니메이션 제작하기
(1) 애프터이펙트에서 실제 앱에 들어갈 사이즈와 동일하게 컴포지션을 제작합니다. 컴포지션은 애프터이펙트 내에서 아트보드 역할을 합니다. 사이즈, FPS, Duration은 다음과 같이 설정해주세요.
Size(대지 크기) : 48px / 48px
Frame Rate(FPS) : 60fps
Duration(전체길이) : 5초
(2) 간단한 로딩 애니메이션을 제작해보겠습니다. Shape Layer 를 사용해서 Stroke 두께값이 2px인 원을 만들어주세요. Ellipse path 속성을 열어 Size를 40px / 40px 로 변경해줍니다.
(3) Stroke값에 애니메이션을 주기 위해 Trim Path를 추가합니다.
(4) Trim Paths의 속성 중 Start와 End 값에 위 이미지와 동일하게 키프레임을 찍어주세요. 간격은 재생해보면서 적절한 값으로 맞춰주세요. 키프레임 간격이 넓어질수록 전체속도가 느려지며 가까워질수록 빨라집니다.
*Tip*
- 수치값이 0->100 으로 가게될 경우 라인 애니메이션이 시계 방향으로 움직입니다.
- 수치값이 100->0 으로 가게될 경우 라인 애니메이션이 반시계 방향으로 움직입니다.
- Start와 End 값의 차이가 클수록 선의 길이가 길어집니다.
(5) 애니메이션이 완성된 후 LottieFiles 패널로 이동해주세요. 작업한 컴포지션을 찾아 화살표 버튼을 눌러줍니다. 작업한 내용을 미리 볼 수 있으며 하단에서 용량을 확인할 수 있습니다.
(5) 프리뷰가 완료된 후 작업한 내용에 문제가 없다면 개발에 사용하기 위한 json 확장자 파일로 저장할 차례입니다. Save as 버튼을 눌러 Lottie JSON 을 클릭합니다. json 확장자로 추출하여 개발자분들에게 전달하면 됩니다.
(6) Upload를 누를 경우 Lottie 홈페이지의 대시보드에 올라가게 됩니다.
애프터이펙트 작업 시 주의사항
1. 키프레임이 곧 용량입니다. 불필요한 키프레임은 제거합니다.
웹, 앱의 속도는 사용자 경험에 있어 중요한 요소입니다. 복잡한 애니메이션은 상대적으로 무거우며 프로덕트 내에서 느리게 로딩될 수 있습니다. 따라서 불필요한 키프레임은 제거하고 간결하게 작업하는 것이 중요합니다.
2. Effect&Presets, Expression 은 일부만 지원합니다.
따라서 Effect는 지원되는 기능 아래 대체할 수 있는 내용을 찾아야 하며 Expression은 Export 전 키프레임으로 변환해야 합니다.
3. fps(Frame per second)는 60fps로 두고 작업하세요.
대부분의 기기에서 해당 fps를 사용합니다. 30fps로도 작동하긴 하나 안정적인 움직임을 원한다면 60fps를 권장합니다.
4. 간단한 로딩 애니메이션의 적정한 파일 크기는 5kb~10kb 정도입니다.
1번에서 언급한 내용과 동일한 맥락입니다. 무거운 애니메이션은 느리게 로딩되며 사용자 경험에 영향을 미칩니다. 간단한 로딩 애니메이션이 100kb를 초과한다면 키프레임 수와 레이어 길이를 검토해 볼 필요가 있습니다.
안되는게 꽤 많습니다
위 화면은 애프터이펙트 내 Shape Layer의 기능인 Merge path(일러스트레이터의 Pathfinder와 유사한 기능)를 사용하여 애니메이션을 만든 후 로띠 프리뷰로 확인하는 화면입니다. 머지한 레이어들이 모두 풀려보여서 당황했던 기억이 납니다. 이때는 해결방법을 찾지 못하고 쩔쩔매다 결국 gif 확장자로 파일을 바꾸어 개발자분께 전달드렸습니다.
애니메이션 제작을 자주 하시던 분이라면 애프터이펙트의 다양한 기능들을 능숙하게 사용하여 작업하는 과정을 생각하셨을 텐데요. 안타깝게도 지원되지 않는 기능들이 꽤 있습니다. 아래는 개발 환경 별로 사용 가능한 기능들을 정리한 사이트입니다. 안드로이드에서 가능한 기능이 iOS에서 불가능한 경우도 있으니 유념하여 작업하시길 바랍니다.
https://airbnb.io/lottie/#/supported-features
+ 현재 Merge path 기능은 Web, iOS 등에서는 불가능하고 Android는 Kitkat 이상부터 지원하고 있네요.
프로덕트에 생동감을 더하는 애니메이션
오늘날 다양한 프로덕트에서 사용자에게 피드백을 주기 위한 표현 방식으로 애니메이션을 적극 활용하고 있습니다. 적절하게 사용한다면 보다 효과적으로 사용자의 시선을 끄는 동시에 디테일한 피드백을 제공하는 장치가 될 수 있습니다. 로띠는 애니메이션을 통해 더 나은 사용자 경험을 구축하기 위한 효율적인 도구가 될 것입니다.
궁금하신 점은 편하게 댓글 달아주세요.
긴 글 읽어주셔서 감사합니다 �
