[Tip] Lottie와 ProtoPie를 사용한 UI 애니메이션 만들기
2024. 7. 24.
프로토타이핑은 디자인 과정에서 중요한 단계입니다. 프로토타입은 디자이너와 이해관계자가 아이디어의 타당성을 테스트하고 사용자 행동을 이해하며 개발자 핸드오프를 돕습니다.
코딩 기술 없이도 사실적인 프로토타입을 만들 수 있나요?라는 의문이 들 수 있지만, ProtoPie와 함께라면 가능합니다! ProtoPie는 키보드 입력, 카메라 입력, 음성 상호작용, 조건, 멀티터치 제스처 및 Lottie 애니메이션을 사용하여 고품질의 경험을 만들 수 있습니다. 간단하지만 강력한 툴 ProtoPie를 사용해보세요.
이 튜토리얼에서는 반려견 주인을 대신해 반려견을 산책시키는 펫케어 앱의 간단한 목업을 만듭니다. Lottie를 사용해 펫 시터를 고용하는 즐거운 경험을 만들어 보겠습니다.
1. 애니메이션 만들기
먼저, ProtoPie에서 사용할 애니메이션이 필요합니다. LottieFiles에서 무료 애니메이션을 다운로드하거나 마켓 플레이스에서 구매할 수 있습니다. Adobe After Effects에서 직접 만들 수도 있습니다. 시작하는 방법이 궁금하다면 이 튜토리얼이 도움이 될 것입니다.
이 프로토타입을 위해 개 캐릭터를 만들고 산책 주기를 키프레임으로 설정할 예정입니다. Duik이나 RubberHose와 같은 인기 있는 애프터 이펙트 플러그인을 사용하여 워크플로우 속도를 높일 수도 있습니다.
애니메이션을 완성한 후 LottieFiles 플러그인을 사용해 .json 파일로 내보냅니다. 내보내기 설정에서 모든 표현을 키프레임으로 변환하는 것을 잊지 마세요.
2. UI 디자인 및 ProtoPie로 내보내기
다음으로 귀여운 애니메이션을 배치할 UI가 필요합니다. ProtoPie에서 직접 디자인할 수 있습니다. 처음 사용하는 경우, 먼저 빠른 시작 가이드를 확인해보세요: [Figma와 ProtoPie로 인터랙티브 입력 만들기]
디자인은 Figma, Sketch 또는 Adobe XD에서도 가져올 수 있습니다. 레이어 이름을 제대로 정리하면 나중에 작업이 더 편해집니다.
3. 프로토타이핑 시작
버튼 컴포넌트 만들기
디자인에는 개의 크기를 선택하는 두 개의 버튼이 있습니다. 컴포넌트를 만들면 요소의 사용자 정의 동작을 설정하기가 더 쉬워집니다. 버튼 레이어를 선택하고 상단 도구 모음의 컴포넌트 아이콘을 클릭하세요.
하나의 버튼을 선택하면 다른 버튼이 선택 해제됩니다. 이를 위해 컴포넌트 내에서 Send 응답과 Receive 트리거를 사용할 수 있습니다.
배경 색상을 확인하는 조건과 함께 Tap 트리거를 버튼에 추가합니다. 회색이면 버튼이 선택된 상태입니다. 배경을 녹색으로, 글꼴 색상을 흰색으로 변경하고 그림자를 표시합니다. 현재 장면에 메시지를 보내 다른 버튼을 선택 해제합니다.
조건과 Send 응답을 컴포넌트에 추가합니다.
다음으로 “deselect” 메시지가 있는 Receive 트리거를 추가합니다. 컴포넌트가 이 메시지를 수신하면 버튼은 더 이상 선택된 상태가 아닙니다. 그런 다음 스타일을 선택 해제된 회색 버튼으로 변경합니다.
지금은 로직이 약간 잘못된 것을 알 수 있습니다. 이는 두 작업이 동시에 발생하기 때문입니다. 이를 해결하려면 조건 내 스타일링 응답에 0.01 지연을 추가하세요.
Lottie 파일 가져오기
버튼이 설정되면 Lottie 파일을 추가할 수 있습니다. Media/Lottie로 이동하여 .json 파일을 선택하세요. 오른쪽 패널 하단에서 "Play automatically" 및 "Looping" 옵션을 선택하세요.
Tap 트리거 설정
마지막으로 버튼을 애니메이션 캐릭터와 연결합니다. Tap 트리거를 사용하여 하나의 애니메이션을 뷰포트 밖으로 이동시키고 다른 애니메이션을 뷰로 가져올 수 있습니다. 미세 조정하여 마이크로 인터랙션의 완성도를 높일 수 있습니다.
최종 결과
클릭 가능한 프로토타입은 여기에서 확인할 수 있습니다.
ProtoPie는 디자이너가 고품질의 인터랙티브 프로토타입을 코드 한 줄도 작성하지 않고도 만들 수 있도록 도와줍니다. 지금 바로 고품질 프로토타입을 시작해보세요.
