음성 경험을 프로토타입으로 만들어 보고 싶었던 적이 있다면, 예를 들어 디지털 비서나 차량 내 핸즈프리 음성 시스템 같은 것을 말이죠, 잘 찾아오셨습니다! ProtoPie의 뛰어난 기능 중 하나는 음성 상호작용을 만들 수 있다는 점입니다. 음성은 우리의 일상적인 기술 상호작용에서 보편화되었으며, 접근성 측면에서도 매우 중요합니다. 이 튜토리얼에서는 단 몇 분 만에 멋진 나만의 음성 상호작용을 만드는 방법을 배우게 됩니다. 이 작업이 얼마나 쉽고 빠른지 놀라실 거예요!
준비물
이 튜토리얼을 따라 하려면 다음 샘플 Pie를 다운로드하세요:
배울 내용
이 튜토리얼을 마치면 다음을 할 수 있게 됩니다:
말하기 응답을 사용해 ProtoPie가 원하는 텍스트를 말하게 하기
듣기 응답을 사용해 ProtoPie가 사용자의 음성 입력을 듣게 하기
음성 명령 트리거를 사용해 ProtoPie가 특정 음성 단어와 구문에 응답하게 하기
완료 시간: ≤15분
1단계: ProtoPie가 말하게 해 봅시다!
위에서 다운로드한 샘플 Pie를 Studio에서 여세요. 상호작용이 시작될 때 ProtoPie가 여러분에게 인사하게 해 봅시다.
Start 트리거를 추가합니다
Speak 응답을 Start 트리거에 추가합니다.
이미 화면에 있는 텍스트를 ProtoPie가 말하게 해 봅시다.
pieText 1.이라는 이름의 텍스트 레이어 내용을 복사하세요.
이 텍스트를 Speak 응답의 속성 패널에 있는 "Content" 상자에 붙여넣으세요.
말해질 텍스트가 어떻게 들릴지 미리 들어볼 수 있습니다. Voiced By 드롭다운에서 남성 또는 여성 음성을 선택할 수 있습니다. 음성 속성을 변경하면 새 음성으로 텍스트가 말해지는 미리보기를 들을 수 있습니다.
참고로 ProtoPie는 포용성과 접근성을 매우 중요하게 생각합니다. 그래서 40가지 서로 다른 언어로 ProtoPie가 말하게 할 수 있습니다. 지역화된 경험을 만드는 데도 좋고, 시각 장애가 있는 사람들을 위해 상호작용을 맞춤화하는 데도 더 좋습니다. Language 드롭다운에서 사용할 수 있는 언어를 확인해 보세요.
...그리고 더 많은 기능도!
Pie를 미리보기 해 보세요. ProtoPie가 "안녕하세요, 저는 ProtoPie입니다. 오늘 무엇을 도와드릴까요?"라고 말하며 여러분을 맞이할 것입니다.
2단계: 듣기 시작하기
이제 ProtoPie가 여러분의 응답을 듣기 시작하도록 해 봅시다. 마이크 아이콘을 탭하면 ProtoPie가 듣기를 시작하도록 만들겠습니다.
mic_on레이어에 Tap 트리거를 추가합니다.Tap 트리거에 Listen 응답을 추가합니다.
ProtoPie가 듣기를 시작해야 하므로 속성 패널에서 Start가 선택되어 있는지 확인하세요.
기본적으로 ProtoPie는 여러분이 말하기를 마치면 듣기를 멈춥니다. 그러나 말이 잠깐 멈춘 뒤에도 ProtoPie가 계속 듣게 하고 싶다면 Continuous 옆의 체크박스를 선택하면 됩니다. 여기서는 음성 명령이 짧을 것이므로 이 옵션은 선택하지 않겠습니다.
지금 미리보기 해 보면 별로 달라진 것처럼 보이지 않을 수 있습니다. 하지만 마이크 아이콘을 클릭하면 작은 차이를 볼 수 있습니다.
Preview 상태 표시줄 왼쪽 아래에 작은 깜박이는 마이크 아이콘이 나타납니다. 이것이 ProtoPie가 여러분의 음성 입력을 듣고 있다는 뜻입니다.
아무 말이나 해 보세요. 그리고 말을 멈추면 이 아이콘이 깜박임을 멈추는 것을 볼 수 있습니다.
3단계: 음성 명령 추가하기
이제 재미있는 부분이 시작됩니다! 음성 명령을 만들어 봅시다. "음성과 말로 상호작용을 만들 수 있나요?"와 같은 질문으로 ProtoPie의 음성 프로토타이핑 기능에 대해 묻고 싶다고 해 봅시다.
Voice Command 트리거를 추가합니다.
Trigger Point 제목 아래에서 두 가지 옵션이 보일 것입니다:
While Speaking은 말하는 도중이라도 단어나 구문이 인식되는 즉시 ProtoPie가 응답하도록 합니다
After Speaking은 말이 끝날 때까지 기다린 후 ProtoPie가 응답하도록 합니다.
여기서는 ProtoPie가 질문을 다 마칠 때까지 정중하게 기다리길 원하므로 After Speaking을 선택하겠습니다.
Command 상자에는 인식할 텍스트를 입력할 수 있습니다. 위에서 설명한 대로 질문 전체를 입력할 수도 있지만, 꼭 그럴 필요는 없습니다. ProtoPie는 다양한 방식으로 질문이 표현될 수 있도록 유연하게 대응할 수 있습니다. 여기서 실제로 중요한 단어는 voice와 speech.이므로, 이 둘 중 어느 것이든 응답하도록 이 트리거를 설정할 수 있습니다.
트리거가 응답하길 원하는 각 단어나 구문을 별도의 줄에 입력하세요.
저는 talk라는 단어와 spoken command라는 구문을 이 트리거가 인식할 단어 및 구문 목록에 추가했습니다. 그러면 "말로 된 명령에 응답할 수 있나요?" 또는 "제가 말하는 걸 들을 수 있나요?"와 같은 질문에 대응할 수 있습니다.
이제 트리거를 설정했으니, ProtoPie가 명령을 인식했을 때 실행될 응답을 추가해 봅시다.
ProtoPie가 응답을 말하게 합시다. Speak 응답을 추가하고 다음 텍스트로 설정합니다:
물론이죠! 입력한 텍스트를 읽거나 들어오는 음성에 응답하는 방식으로 사실적인 음성 상호작용을 만들 수 있습니다. 더 말할 필요가 있을까요? 저는 프로토타이핑 천재입니다! 하하하!
모든 소리가 일관되게 들리도록 1단계에서 사용한 것과 같은 음성을 선택하세요.
말하는 동안 화면에도 ProtoPie의 응답이 표시되도록 합시다. Text 응답을 추가하세요. 대상 레이어로
pieText 1을 선택하고 위와 같은 텍스트로 업데이트합니다.
이제 미리보기 해 봅시다. 상호작용은 ProtoPie의 인사로 시작될 것입니다. 마이크 아이콘을 클릭하고 질문을 해 보세요. speech 또는 voice.와 관련된 어떤 변형의 질문이든 시도해 보세요. 질문에 Voice Command 트리거에 지정한 단어나 구문 중 최소 하나가 포함되어 있는 한 ProtoPie가 응답할 것입니다.
4단계: 피드백 추가하기
이제 상호작용은 작동하지만, 화면에 실제로 말한 내용을 그대로 반영할 수 있으면 더 좋을 것입니다. ProtoPie에는 $voiceTranscript라는 미리 정의된 변수가 있는데, ProtoPie가 듣고 있는 동안 말하는 모든 단어를 기록합니다. 이를 사용해 화면에 여러분이 말한 질문을 표시할 수 있습니다.
다른 Voice Command 트리거를 추가합니다. 동시에 하나 이상의 Voice Command를 활성화해 두어도 괜찮습니다. 사실 이것이 견고한 음성 상호작용을 만드는 핵심입니다. 서로 다른 상황마다 별도의 Voice Command 트리거를 만드세요.
이번에는 여러분이 말하는 내용을 화면에 표시하고 싶으므로, Trigger Point로 While Speaking을 선택합니다.
또한 이 트리거는 특정 명령을 듣기 위한 것이 아닙니다. 무엇을 말했는지와 상관없이 이 트리거가 작동하길 원합니다. 따라서 Command 옆의 체크박스는 선택 해제하세요.
이제 Text 응답을 추가합니다. 대상 레이어로
userTest 1을 선택하세요.Content 아래에서 Formula를 선택하고, 아래 상자에 $voiceTranscript를 입력합니다.
이제 미리보기 해 보세요. 마이크 아이콘을 클릭하면 말하는 내용이 말하는 동안 화면에 나타나는 것을 볼 수 있습니다.
정말 식은 죽 먹기죠!
ProtoPie로 음성 상호작용을 만드는 것은 정말 이렇게 간단합니다. 몇 가지 쉬운 단계만으로 Speak 및 Listen 응답을 사용해 ProtoPie가 여러분의 음성 입력에 대해 말하고 듣게 하는 방법을 배웠습니다. 그런 다음 Voice Command 트리거를 사용해 특정 음성 단어와 구문에 응답하게 했습니다. 마지막으로 미리 정의된 변수 $voiceTranscript를 사용해 화면에 말한 내용을 정확히 표시했습니다. 그리고 그것조차 전혀 오래 걸리지 않았습니다!
마무리하기 전에 짧은 참고 사항
ProtoPie의 음성 기능은 아직 베타입니다. 따라서 일부 기능은 예상대로 작동하지 않을 수 있습니다. 예를 들어 Pie를 클라우드에 게시하면 Speak 트리거는 웹 브라우저 미리보기에서 작동하지 않습니다. 따라서 Speak 트리거를 사용하려면 ProtoPie Studio 또는 기기용 ProtoPie Player 앱을 사용해야 합니다. 또한 음성 인식이 작동하려면 활성 인터넷 연결이 필요합니다. 자세한 내용은 여기에서 확인하세요.
리소스
음성 프로토타이핑 예시: 여러 작동 예시가 포함된 음성 프로토타이핑에 관한 블로그 글
차량 내 음성 제어 프로토타입을 만드는 방법**: **음성 프로토타이핑과 하드웨어 통합 기능을 사용해 음성으로 제어되는 차량 내 경험을 설계하는 방법을 살펴보세요.
