음성 활성화 기기와 매끄러운 크로스 디바이스 경험의 시대에, 음성과 크로스 디바이스 상호작용을 프로토타입하는 기술을 익히는 것은 디자이너에게 필수가 되었습니다.
이 글에서는 Google Home 앱에 연결된 Google 세탁기를 만들어 음성과 크로스 디바이스 상호작용을 프로토타입하는 방법을 보여드리겠습니다. 모두 ProtoPie Connect의 힘을 사용합니다.
아래 데모 영상에서 완성된 프로토타입을 확인해 보세요.
배울 내용
이 단계별 튜토리얼에서는 다음을 배웁니다:
음성 명령으로 작동하는 프로토타입을 만드는 방법
Send 및 Receive 트리거를 사용해 크로스 디바이스 상호작용을 만드는 방법
시작해 봅시다!
1. 시작하기
세탁기와 Google Home 앱을 위해 두 개의 별도 프로토타입을 사용하므로, 먼저 ProtoPie에서 두 개의 프로토타입(Pies)을 만들고 로컬 또는 클라우드에 저장하세요.
다음으로, 그것들을 ProtoPie Connect로 가져와 그곳에서 여세요. 그러면 두 Pie 사이에서 Send and Receive 트리거를 사용할 수 있습니다.
데모를 재현하고 싶다면 Figma에서 디자인을 가져오거나, 세탁기와 휴대폰용 완성된 ProtoPie 파일을 다운로드할 수 있습니다.
2. Start 트리거를 사용해 애니메이션 시작하기
우리는 Pie를 실행했을 때 시작되는 세탁기의 간단한 애니메이션으로 데모를 시작합니다.
우리는 Start trigger를 사용해 점들을 즉시 이동시키고 회전시킨 다음, 원래 위치와 크기로 다시 애니메이션합니다. 이렇게 하면 서로 다른 회전 및 스케일 범위를 훨씬 더 쉽게 탐색할 수 있습니다. 또한 각 점에 컨테이너를 사용하면 같은 위치에 도달하면서도 개별 회전을 더 쉽게 적용할 수 있습니다.
3. Listen 응답 만들기
우리는 어시스턴트를 탭하여 앱에서 여정을 시작합니다. 그러면 타일이 확대되고, 프로토타입이 “안녕하세요, 무엇을 도와드릴까요?”라고 말한 뒤 응답을 듣기 시작합니다.
그것은 처음에 변수 "state"를 "idle"로 설정한 뒤, 2.4초 후 말하기를 마치면 변수를 "listening"으로 바꿉니다.
4. 루프 애니메이션 사이에 애니메이션을 위한 상태 변수 사용하기
우리는 Google 어시스턴트가 할 수 있는 다양한 루프 애니메이션 사이를 전환하기 위해 state 변수를 사용합니다.
예를 들어, "idle" 상태에서는 점들이 천천히 위아래로 움직이고, "listening" 상태에서는 수평으로 정렬되어 소리 신호에 반응합니다.
부드러운 애니메이션 전환을 보장하려면, 새 애니메이션을 시작하기 전에 진행 중인 애니메이션을 먼저 중지하는 것이 중요합니다. 이렇게 하면 간섭을 방지하고 원하는 애니메이션이 즉시 시작됩니다.
5. 여러 음성 명령 쌓기
이제 Pie가 사용자가 무언가 말하길 기다리고 있으므로, Command의 일부를 수신할 때마다 텍스트를 바꾸도록 여러 음성 명령을 서로 옆에 쌓아둘 수 있습니다.
우리 예시에서는 이미 텍스트를 다음으로 바꿉니다:
“start”를 들으면 “Start”,
“start my”를 들으면 “Start my”,
그리고 당연히 “start my laundry”라는 문장을 들으면 “Start my laundry”로 바꿉니다.
이를 통해 음성 명령을 사용하는 동안 더 많은 피드백을 제공할 수 있습니다. 사용자가 문장을 완전히 말한 뒤에만 피드백을 받는 것은 어색하게 느껴질 수 있으므로, 문장이 끝나기 전에 이미 텍스트가 표시되는 편이 더 좋습니다.
다음으로, “Start my laundry”라고 말하면 프로토타입이 듣기를 멈추고 state를 “loading”으로 바꿉니다. 그러면 네 개의 점이 잠시 "생각하는" 애니메이션을 시작합니다.
5초 후에는 state를 다시 “idle”로 되돌리고 “작은 색상 세탁물이 감지되었습니다. 30 에코 프로그램을 추천합니다. 시작할까요?”라고 말합니다.
말하기를 마치면 다시 듣기를 시작하고 state를 “listening”으로 다시 설정합니다. 이렇게 여러 음성 명령을 쌓아둔 것입니다.
이 튜토리얼을 넘어 음성 프로토타이핑을 더 깊이 익히고 싶다면 ProtoPie의 음성 어시스턴트 프로토타이핑 마스터클래스를 확인해 보세요.
6. 소리에 반응하는 애니메이션 만들기
Sound 트리거 안에서, state 변수가 “listening”과 같은지, 그리고 파란 점의 width가 20과 같은지 확인하는 Condition을 만듭니다. 이는 점의 크기와 위치 애니메이션이 모두 끝났음을 의미합니다.
그 값이 참이면, 점들의 height를 확대하는 애니메이션을 시작해 점들이 사용자의 목소리에 반응하는 listening 애니메이션을 만듭니다.
다양한 dB 범위를 자유롭게 조절해 볼 수 있습니다. 이 예시에서는 점마다 서로 다른 범위를 사용해 각기 다르게 반응하고 더 생동감 있게 보이도록 합니다.
7. ProtoPie Connect로 메시지 보내기
사용자가 “Yes”라고 응답하면 프로토타입은 듣기를 멈추고, 타일 크기를 조정한 뒤 ProtoPie Connect로 “start laundry” 메시지를 보냅니다.
8. 수신 트리거로 메시지 받기
우리 세탁기 Pie에서는 “start laundry” 메시지에 Receive trigger를 사용할 수 있습니다. 그러면 어시스턴트가 사라지고, 진행률 바가 나타나며, 진행률 바의 회전이 시작됩니다.
ProtoPie에서 원형 진행률 바를 구현하려면 마스크를 활용하는 몇 가지 영리한 트릭이 필요하며, 이는 Chain trigger에서 볼 수 있습니다.
진행률 바가 회전할 때 Detect로 트리거할 수 있습니다. 그러면 타이머의 텍스트가 75 - round(progress.rotation / 360 * 75)로 업데이트되고, 값 progress.rotation / 360을 가진 “laundry progress”를 ProtoPie Connect로 보냅니다. 0에서 1까지의 이 변수는 앱에서 진행 상황을 표시하는 데 사용할 수 있습니다.
마지막으로, **Condition **을 사용해 progress의 회전값이 359보다 큰지 확인할 수 있습니다. 이는 한 바퀴를 모두 돌았다는 뜻입니다. 그 값이 참이면 어시스턴트를 다시 나타나게 하고 간단한 축하 효과음을 재생합니다.
우리 앱에서는 ProtoPie Studio의 Receive trigger를 사용해 “laundry progress”를 수신하고, 이를 “progress”라는 변수에 할당할 수 있습니다.
그다음 Text response를 사용해 세탁기 타일의 남은 시간을 75 - round(progress * 75) + " minutes left"로 업데이트할 수 있습니다.
완료입니다! 🥧
ProtoPie Connect에서 Pies를 열어 프로토타입이 살아 움직이는 모습을 확인해 보세요. 물론 휴대폰, 태블릿, 심지어 스마트워치에서도 실행할 수 있습니다!
나만의 음성 및 크로스 디바이스 프로토타입 만들기
이 튜토리얼에서는 몰입감 있는 프로토타이핑 경험을 만들기 위해 사용할 수 있는 여러 ProtoPie 및 ProtoPie Connect 기능을 살펴보았습니다. 이를 통해 우리의 디자인을 탐색하고, 반복하고, 검증할 수 있습니다.
직접 한 번 시도해 보시겠어요? 시작하고 ProtoPie를 무료로 사용해 보세요!
음성 프로토타이핑에 대해 더 알고 싶다면, 이 음성 어시스턴트 프로토타이핑 무료 마스터클래스를 확인해 보세요!
즐거운 프로토타이핑 되세요!
