사용자 인터페이스를 프로토타이핑하는 것은 디자인 과정에서 매우 중요하며, 디자이너가 아이디어를 테스트하고 사용자 행동을 이해할 수 있게 해줍니다. ProtoPie는 키보드 타이핑, 카메라 입력, 음성 상호작용, 조건, 멀티터치 제스처, 그리고 Lottie 애니메이션을 코드 없이 사용해 고품질 UI 애니메이션과 경험을 만들 수 있게 해주어 이를 간소화합니다.
이 튜토리얼에서는 Lottie와 ProtoPie를 사용해 반려동물 돌봄 앱 목업에서 간단한 UI 애니메이션을 만드는 방법을 보여드리며, 반려동물 돌보미를 구할 때 재미있는 경험을 제공합니다.
개요
1. UI 애니메이션 만들기
2. UI 디자인 만들기 및 ProtoPie로 내보내기
3. 프로토타이핑 시작하기
4. 최종 프로토타입
1. UI 애니메이션 만들기
먼저 ProtoPie에서 사용할 수 있도록 몇 가지 UI 애니메이션을 준비해야 합니다. LottieFiles에서 무료 애니메이션을 다운로드하거나 마켓플레이스에서 구매할 수도 있습니다. Adobe After Effects에서 직접 만들 수도 있습니다. 어디서부터 시작해야 할지 모르겠다면 이 튜토리얼이 도움이 될 수 있습니다.
이 프로토타입에서는 강아지 캐릭터의 리그를 만들고 걷기 사이클을 키프레임으로 설정할 예정입니다. Duik나 RubberHose 같은 인기 있는 After Effects 플러그인을 사용해 작업 속도를 높일 수도 있습니다.
After Effects의 걷기 사이클 애니메이션.
애니메이션이 만족스럽게 완성되면 LottieFiles 플러그인을 사용해 .json 파일로 내보내세요. 내보내기 설정에서 모든 표현식을 키프레임으로 변환해야 합니다.
2. UI 디자인 만들기 및 ProtoPie로 내보내기
다음으로, 귀여운 애니메이션을 배치할 UI가 필요합니다. ProtoPie에서 직접 디자인할 수 있습니다. 아직 사용해 보지 않았다면 먼저 이 빠른 시작 가이드인 Figma와 ProtoPie로 인터랙티브 입력을 만드는 방법을 확인해 보세요.
디자인은 Figma, Sketch 또는 Adobe XD에서 가져올 수도 있습니다. 나중에 번거로움을 덜기 위해 레이어 이름을 제대로 지정하는 것만 기억하세요.
Figma에서 디자인한 사용자 인터페이스.
3. 프로토타이핑 시작하기
버튼 컴포넌트 만들기
우리 디자인에는 강아지의 크기를 선택하는 두 개의 버튼이 있습니다. 컴포넌트를 만들면 요소의 사용자 지정 동작을 더 쉽게 설정할 수 있습니다. 이를 위해 버튼 레이어를 선택한 다음 상단 툴바의 컴포넌트 아이콘을 클릭하세요.
ProtoPie Studio에서 컴포넌트 만들기.
세트에서 하나의 버튼을 선택하면 다른 버튼은 선택 해제됩니다. 이를 위해 컴포넌트 안에서 Send response와 Receive 트리거를 사용할 수 있습니다.
Tap 트리거를 버튼에 추가하고 배경색을 확인하는 조건을 설정하세요. 회색일 때는 버튼이 선택된 상태임을 의미합니다. 배경을 초록색으로 바꾸고, 글자색을 흰색으로 변경한 뒤 그림자를 표시하세요. 다른 버튼의 선택을 해제하기 위해 현재 씬에 메시지를 보내세요.
컴포넌트에 조건과 Send response 추가하기.
다음으로 “deselect” 메시지와 함께 Receive 트리거를 추가하세요. 컴포넌트가 이 메시지를 받으면 버튼은 더 이상 선택된 상태가 아니게 됩니다. 그런 다음 선택 해제된 회색 버튼 스타일로 변경하세요.
지금은 여기서 로직이 약간 어긋나 있다는 것을 알 수 있을 것입니다. 이는 두 동작이 동시에 발생하기 때문입니다. 이를 작동시키려면 조건 안의 스타일 응답에 0.01초 지연을 추가하세요.
Receive 트리거 설정하기.
Lottie 파일 가져오기
버튼 설정이 끝나면 Lottie를 추가할 수 있습니다. Media/Lottie로 이동해 .json 파일을 선택하세요. 오른쪽 패널 하단에서 “Play automatically”와 “Looping” 옵션을 선택하는 것을 잊지 마세요.
ProtoPie로 Lottie 파일 가져오기.
Tap 트리거 설정하기
마지막으로 버튼을 애니메이션 캐릭터와 연결하세요. Tap 트리거를 사용하면 한 애니메이션을 뷰포트 밖으로 이동시키고 다른 애니메이션을 화면 안으로 가져올 수 있습니다. 마이크로인터랙션의 이징과 지속 시간은 원하는 대로 조정하세요.
버튼에 Tap 트리거 추가하기.
4. 최종 프로토타입
완성된 마이크로인터랙션.
ProtoPie는 디자이너가 고품질 인터랙티브 프로토타입 형태로 아이디어를 현실로 만들 수 있도록 도와줍니다. 오늘 바로 코드 한 줄 작성하지 않고도 자신만의 초고충실도 프로토타입 만들기를 시작하세요.
