터치스크린 프로토타이핑의 힘을 활용해 디자인 아이디어를 개발자와 경영진에게 효과적으로 전달해 보세요.
이 튜토리얼에서는 터치스크린 상호작용을 사용한 완전히 작동하는 셀프 서비스 키오스크 프로토타입을 만들어 청중의 시선을 사로잡는 방법을 안내합니다. 아래 데모를 확인해 전체 프로토타입이 실제로 작동하는 모습을 보세요.
이 프로토타입을 완전히 재현하고 여러 기기 간 커뮤니케이션을 활성화하려면, Pro 또는 Enterprise 플랜의 ProtoPie Connect에 액세스해야 합니다.
준비되셨나요? 시작해 봅시다!
요약
1단계: Figma에서 ProtoPie로 디자인 내보내기
2단계: 터치스크린 상호작용 만들기
3단계: 결제 프로세스 프로토타이핑
4단계: 손쉬운 인계를 위한 상호작용 녹화 만들기
1단계: Figma에서 ProtoPie로 디자인 내보내기
Figma에서 ProtoPie로 디자인 내보내기
먼저, 우리는 Figma에서 모든 UI를 만들고 Figma용 ProtoPie 플러그인을 사용해 ProtoPie Studio로 내보냈습니다. 이 플러그인은 Figma 디자인을 인터랙티브 프로토타입으로 매우 쉽게 변환할 수 있게 해 줍니다.
ProtoPie와 Figma의 차이점과 고급 프로토타이핑을 위해 각 도구를 어떻게 활용할 수 있는지 자세히 알아보세요.
이 프로토타입을 재현하고 싶다면 아래에서 완성된 Pie 파일을 확인해 보세요.
2단계: 터치스크린 상호작용 만들기
이 프로토타입은 매우 단순한 상호작용들로 구성되어 있지만, 이들을 결합하면 결과는 매우 현실적입니다.
ProtoPie는 풀, 드래그, 핀치 등 다양한 제스처 상호작용을 지원하며, 이러한 모든 터치스크린 상호작용은 프로토타입을 고충실도 작품으로 바꿔 줍니다.
우리의 키오스크 프로토타입에서는 화면을 가볍게 스와이프하여 옵션을 전환하는 상호작용을 구현했습니다.
이를 위해 주로 체인 트리거를 사용하고, 선택한 측면과 음료를 강조하기 위해 크기 조정 및 불투명도 반응을 함께 활용했습니다.
💡 재미있는 사실: 보안이 걱정되신다면, 이 프로토타입은 독립형 솔루션이며 완전히 오프라인으로 실행할 수 있으므로 네트워크 연결이 필요 없습니다.
이 프로토타입을 실제 제품과 구분할 수 없게 만드는 목표를 달성하기 위해 ProtoPie Connect를 사용했습니다. ProtoPie Connect는 프로토타입과 모든 하드웨어, API, 또는 앱 사이의 간극을 메워 줍니다.
노트북 화면에서 보시다시피, 각 항목이 선택되면 해당 정보가 ProtoPie Connect로 공유되며, 그곳에서 이 정보는 여러 기기에서 활용될 수 있습니다
무료 온라인 강좌에서 ProtoPie Connect 사용법을 배워보세요.
3단계: 결제 프로세스 프로토타이핑
마이크로인터랙션과 다른 애니메이션도 쉽게 구현할 수 있습니다. 영상에서 보시다시피, 결제 과정을 시뮬레이션하기 위해 Scale 반응이 있는 Start 트리거와 Move 및 Rotate 반응이 있는 Detect 트리거를 사용해 간단한 영수증 애니메이션을 만들었습니다.
모바일 기기에서는 길게 누르기 제스처로 지문 인식 효과를 쉽게 시뮬레이션할 수 있습니다.
길게 누르기 또한 ProtoPie가 지원하는 제스처 트리거 중 하나이며, 현대적인 터치스크린 디자인에서 폭넓게 활용할 수 있습니다.
4단계: 손쉬운 인계를 위한 상호작용 녹화 만들기
팀과 함께 작업한다면 ProtoPie Cloud를 통해 Pie를 공유하고 상호작용을 기록하여 추측 없이 개발팀에 원활하게 인계할 수 있습니다.
인계 기능과 이를 사용해 디자인 아이디어를 효율적으로 전달하는 방법에 대해 자세히 알아보세요.
끝입니다!
잘하셨습니다! 이제 터치스크린 프로토타이핑을 사용해 직접 키오스크 프로토타입을 만드는 방법을 익히셨기를 바랍니다.
ProtoPie Connect 사용에 대해 더 도움이 필요하시다면, ProtoPie Guru Jeff가 진행하는 이 무료 ProtoPie Connect 강좌를 놓치지 마세요.
ProtoPie로 인터랙티브 터치스크린 프로토타입 만들기
ProtoPie는 인터랙티브 터치스크린 프로토타입을 제작하기에 완벽한 도구로, 디자인 아이디어를 효과적으로 보여 주는 데 도움이 됩니다. 무료로 시작하기를 눌러 자신만의 터치스크린 상호작용을 만들어 보세요.
#MadeWithProtoPie로 태그를 달아 여러분의 작품을 공유해 주세요. 여러분이 어떤 결과물을 만들어낼지 정말 기대됩니다. 즐거운 프로토타이핑 되세요!
