사람들이 디지털 제품과 터치, 누르기, 제스처로만 상호작용하던 시대는 오래전에 지나갔습니다. 햅틱 피드백, 센서, 오디오 & 비디오, 텍스트 입력, 카메라 등과 같은 기술 덕분에 제품과 상호작용하는 경험은 이미 훨씬 더 풍부하고 몰입감 있게 되었습니다.
일상생활에 점점 스며들고 있는 또 다른 기술은 음성 기술입니다–Google Assistant는 이미 10억 대가 넘는 기기에서 사용할 수 있으며 Facebook은 자체 음성 비서를 개발하고 있습니다. 디지털 제품 전반에서 음성의 중요성이 점점 커지는 가운데, 우리는 첫날부터 걸어온 길을 계속 나아갑니다: 디자이너가 가장 높은 표현력으로 아이디어를 자유롭게 펼칠 수 있도록 돕는 것입니다.
오늘까지는 이미 매우 현실적인 프로토타입에 코딩 없이, 또는 엔지니어를 귀찮게 하지 않고는 음성을 쉽게 추가할 방법이 없었습니다. 새로워진 ProtoPie 5.1과 함께라면 이제 상호작용 디자인과 대화 디자인을 결합할 수 있습니다.
음성 프로토타이핑
ProtoPie 5.1로 상호작용에 목소리를 더해 보세요.
상호작용에 목소리를 더해 보세요.
매우 쉽습니다. 이미 상호작용을 만들어 온 방식과 같은 방식으로 프로토타입에 음성을 추가하면 됩니다. 그래서 이제 사용할 수 있는 1개의 새로운 트리거와 2개의 새로운 응답을 소개합니다.
프로토타입은 사용자가 말하는 내용을 듣고, 텍스트로 변환한 뒤, 응답을 트리거할 수 있습니다. 이것이 바로 음성-텍스트 변환입니다. 반대로 텍스트를 소리 내어 읽어 주는 텍스트-음성 변환도 있습니다. 프로토타입은 텍스트를 소리 내어 읽음으로써 응답으로 “말할” 수 있습니다.
자세히 알아보기 음성 프로토타이핑에 대해.
음성-텍스트 변환
음성-텍스트 변환에는 2가지 상호작용 요소가 있습니다.
듣기 응답
음성 명령 트리거
기본적으로 프로토타입은 어떤 음성도 인식하지 않습니다. 듣기 응답을 사용하면 프로토타입이 어떤 음성이든 듣기 시작합니다. 프로토타입이 음성 듣기를 중지하게 하려면 같은 응답을 다시 사용하면 됩니다.
듣기 응답을 사용하여 프로토타입이 듣도록 만드세요.
음성 명령 트리거를 사용하면 실제로 들어오는 음성을 기반으로 응답이 트리거되는 상호작용을 만들 수 있습니다.
음성 명령 트리거는 누군가 말하는 동안 또는 말하기를 마친 뒤에 작동하도록 설정할 수 있습니다. 옵션으로–여기서 진짜 재미가 시작됩니다–문구를 포함하거나 제외하는 명령을 넣을 수 있습니다.
음성 명령 트리거를 사용하여 들어오는 음성을 기반으로 응답을 트리거하세요.
위 예시에서는 타원을 탭하면 프로토타입이 듣기 시작합니다. 누군가 말하는 동안 “ProtoPie” 또는 “Prototyping Tool”이라고 말하면 ProtoPie 로고의 불투명도가 변경됩니다.
음성-텍스트 상호작용은 다음에서 작동합니다:
ProtoPie Studio의 미리보기 창
ProtoPie Player
ProtoPie Cloud(데스크톱의 Google Chrome & Android)
자세히 알아보기 ProtoPie의 음성-텍스트 변환에 대해.
텍스트-음성 변환
ProtoPie 5.1에서 우리가 도입한 또 다른 상호작용 요소가 하나 있습니다.
말하기 응답
프로토타입은 텍스트를 소리 내어 읽음으로써 “말할” 수 있습니다.
아래 예시에서는 ProtoPie 로고를 탭하면 프로토타입이 “ProtoPie는 프로토타입을 만들고 완성하는 데 가장 직관적인 도구입니다.”라는 텍스트를 소리 내어 읽으며 “말하게” 됩니다.
텍스트를 음성으로 변환하는 응답을 사용하여 텍스트를 음성으로 바꾸고 프로토타입이 “말하게” 만드세요.
텍스트-음성 변환 상호작용은 다음에서 작동합니다:
ProtoPie Studio의 미리보기 창
ProtoPie Player
자세히 알아보기 ProtoPie의 텍스트-음성 변환에 대해.
예시
예시 프로토타입들을 살펴보고 새로운 음성 프로토타이핑 기능으로 무엇을 구현할 수 있는지 확인해 보세요.
자신만의 음성 비서를 프로토타입으로 만들어 바로 테스트해 보세요.
이 예시 프로토타입을 사용해 보세요 ProtoPie Player에서.
한 단계 더 나아가 볼까요. 실제 리모컨을 사용하면서 스마트 TV 앱의 음성 검색을 프로토타이핑하는 것이 가능할까요? 정답은 예입니다. 아래를 보세요.
Tony Kim과 저는 음성을 위한 프로토타이핑–상호작용 & 대화 디자인의 결합.에서 더 흥미로운 음성 프로토타이핑 예시를 다뤘습니다.
워크숍
ProtoPie 강사 Leah가 이 워크숍에서 첫 음성 상호작용을 시작하는 방법을 보여 주었습니다.
여러 줄 텍스트 입력
이미 ProtoPie의 입력 레이어를 사용해 한 줄 텍스트를 입력할 수 있었습니다. 이제는 한 줄 입력과 여러 줄 텍스트 입력을 모두 사용할 수 있습니다.
평소처럼 입력 레이어는 물리 키보드나 iOS, iPadOS, Android의 기본 키보드와도 여전히 함께 작동합니다.
멀티라인 입력 레이어를 사용한 간단한 텍스트 작성기 프로토타입입니다. Writty에서 영감을 받았습니다. 이 예시 프로토타입을 사용해 보세요.
텍스트 레이어를 자동으로 크기 조정
지금까지 텍스트 레이어는 항상 고정된 크기만 가졌습니다. ProtoPie 5.1에서는 텍스트 레이어가 너비나 높이에 따라 자동으로 크기 조정되거나, 고정 크기로 설정될 수 있습니다.
더 이상 텍스트 레이어를 일일이 수동으로 크기 조정할 필요가 없습니다 :)
텍스트 레이어의 속성 패널에서 3가지 텍스트 크기 조정 옵션을 찾아보세요.
Option/Alt + 드래그로 레이어 복제
어떤 디자인 도구를 사용하든, 레이어를 복제할 때 생산성을 높여 주는 Option/Alt + 드래그 단축키는 익숙하실 겁니다. 이제 ProtoPie에서도 익숙한 방식으로 빠르게 레이어를 복제할 수 있습니다.
ProtoPie에서 레이어 복제를 더 빠르게 만들 때가 됐습니다.
기타 기능 및 개선 사항
컴포넌트 및 씬 다중 선택
SVG 레이어를 붙여넣을 때 밀도 조정
macOS에서 방화벽 창이 반복적으로 나타나던 문제를 수정했습니다
