매력적인 사용자 경험을 위한 필살기, Lottie(1) 지난 1편에서는 로띠란 무엇이고 왜 사용해야 하는지 알아봄과 동시에 lottie 설치법에 대해 간단히 이야기 나누었고, 이번 2편의 내용은 애니메이션 제작 전 최적화에 대한 유의사항과 로띠가 json 으로 추출되는 과정에 필요한 작업 프로세스, 그리고 서비스에 적용했던 로띠 사례를 공유하고자 합니다. > 이건 알고 시작하자. 시작 전에 한번 숙지하는게 좋아요! 자, 이제 제작 최적화에 대한 팁까지 숙지를 했으니 Lottie 프레임 워크를 사용하여 애니메이션을 만드는 프로세스를 함께 살펴보도록 하겠습니다. > Lottie 제작 프로세스 1. After Effect로 가져올 리소스 준비(일러스트 or figma) 2. After Effect에서 애니메이션 제작 3. Bodymovin 플러그인을 통해 json 추출하기 4. Lottie Files 를 통해 플레이 확인 및 검수 > 1. After Effect로 가져 올 리소스 준비 로띠 제작에 있어 처음 해야할 일은 After Effect 로 가져 갈 애니메이션 리소스를 만드는 일입니다. 적용하려는 제품의 화면 및 상황을 고려하고 Lottie 사이즈와 노출시간 및 반복 요소 등을 대략적으로 설계한 뒤에 일러스트레이션(스케치/피그마 가능)에서 그래픽 작업을 마무리하고 저장한 일러스트 파일을 After Effect 로 가져가게 됩니다. 일러스트레이션 작업 부분에서 고려해야 할 사항은 레이어를 생성하여 요소를 구분하여 제작해야 하고 레이어의 네이밍 작성과 순서 또한 고려하여 작업해야 합니다. 그리고 한번 더 언급해야할 만큼 중요한 점은 일러스트레이션에서 그래픽 작업을 진행 시에 동작에 대한 설계에 맞게 레이어 정리가 필요합니다. 움직임이 필요한 요소 별로 레이어를 정리하자! > 2. After Effect에서 애니메이션 제작 이제 일러스트레이터에서 작업한 리소스를 After Effect 로 가져올 차례인데요, 프로젝트를 연 화면에 drag&drop으로 리소스를 열 수 있고 또 impot를 통해도 가능합니다. 또 파일을 열게 되면 선택해야되는 팝업이 뜨게 되는데요, import의 종류를 Footage 혹은 composition 으로 할 것인지와 리소스의 선택 영역 기준을 레이어 사이즈 기준으로 선택 되어질 것인지 또는 제작된 도큐멘트 사이즈로 선택 되어지게 할 것인지 결정하여 선택하면 됩니다. 제 작업을 기준으로는 Composition/Layer Size를 선택하고 작업을 진행 했습니다. Footage로 선택할 경우 모든 레이어가 통합 되어진 쉐입으로 import 되기에 Composition을 지정했고, 선택 영역 기준을 Layer Size로 지정한 이유는 Document Size로 지정 할 경우, 개체의 좌표값 기준으로 애니메이션을 적용하기 어려워지기 때문에 Layer Size 저장했습니다. 엇.. 작업한 이미지가 먼가 깨져 보이고 흐릿해 보이는건 왜그러지..? 설정 선택 후 프로젝트 화면을 보게 되면 기존 작업한 리소스가 깨져보이는 걸 확인

출처: https://dribbble.com/shots/6549207-Balloon-Slider-Control 애니메이션(움직임)은 서비스에서 사용자에게 많은 단서를 제공합니다. 효과적인 애니메이션은 사용자의 attention(행동,관심)을 유도하고, 지속적인 가이드를 통해 목표를 달성시킬 수 있는 길잡이와 역할과 함께, 사용자에게 기분 좋은 피드백을 줄 수 있는 가장 효과적인 방법 중 하나입니다. 테이블링 서비스에서도 매력적인 사용자 경험을 위해 만들기 위한 수단으로 Lottie 라는 플러그인을 사용하여 마이크로 애니메이션을 제작하고 있습니다. 이번 아티클 에서는 Lottie에 대한 간단한 안내와 사용법에 대해 설명 드리고, 다음 아티클 에서는 작업 프로세스와 최적화 팁, 그리고 서비스에서 적용한 애니메이션 사례들을 공유 하고자 합니다. 워크플로우의 변화는 LOTTIE 전과 후로 나뉜다. Lottie가 세상에 나온 지 벌써 67년이라는 시간이 지났는데(라떼는..) 그 이전에는 마이크로 애니메이션을 제품에 적용하기 위해서는 에팩에서 애니메이션 작업 후, 수십장의 이미지 시퀀스를 뽑아 그 무거운 용량을 앱에서 돌리거나 개발자님들이 각각의 객체에 Move, Rotation, Cubic Bezier 값 등 일일히 적용하는 복잡한 코딩으로 애니메이션을 만드는 비효율적인 프로세스를 거처야 짠내나는 애니메이션이 탄생하곤 했습니다. 또 그렇게 고생해서 나온 결과물은 결국 앱의 용량 이슈 등 안정화 문제로 스팩아웃 되거나 시간투자 대비 어색하고 만족스럽지 못한 결과물로 디자이너들의 멘탈을 흔들어 주곤 했습니다. 살려줘 이런 우여곡절 들이 Lottie를 적용한 이후부터 애니메이션을 코드화 해야되는 낭비를 줄여주고 원활한 협업과 만족스러운 결과물을 낼 수 있게 되었죠. LOTTIE는 무엇인가? 이미 너무 잘 알고 계시겠지만, Airbnb의 Lottie는 모션을 코드로 바로 적용할 수 있는 라이브러리입니다. Json 기반의 코딩베이스 파일 타입(벡터)으로 매우 작은 용량을 가지는 부분이 장점이고, 현재 iOS(macOS)와 Android, React Native 등 다양한 플랫폼에서 사용이 가능합니다. 공식 홈페이지: Lottie > 장점 * 가볍습니다. 벡터기반의 애니메이션 타입으로 사이즈를 확대해도 애니메이션의 해상도 손상이 없습니다. 용량이 작은게 장점! * 유연합니다. 1. 벡터기반의 애니메이션 타입으로 사이즈를 확대해도 애니메이션의 해상도 손상이 없습니다. 2. 작업이 완료된 로티 파일로 다양한 플랫폼에서 적용 가능합니다. (iOS/AOS/React Native/Windows) 3. Json파일을 통해 개발에서도 color, speed, size 등 코드로 속성 값의 변경이 가능합니다. * 편리합니다. 1. 간단한 애니메이션은 After effect를 통해 누구나 쉽게 만들고 Json 파일(Bodymovin)로 추출 가능합니다. 2. Lottie Files에서 제작한 Json 파일을 바로 확인할 수 있고 간편하게 공유할 수 있습니다. 3. Fram