ProtoPie Sound 트리거를 활용한 AI Speaker UI Concept

Leuo
leuokim
Published in
3 min readSep 15, 2017

AI speaker UI concept prototype with ProtoPie

https://share.protopie.io/LduSsPMY1iV

프로토파이에서 지원하는 Sensor 트리거 중 하나인 Sound 트리거를 활용하면 데시벨 기준으로 반응하는 프로토타입 제작이 가능하다.

프로토타이핑이기 때문에 실제 AI처럼 사운드를 입력하지는 못하지만 입력되는 내용을 정해놓고 데시벨을 설정하면 구현되는 과정을 테스트 해볼 수 있다.

Flow

화면은 사운드 검색 홈/음성인식/실패/성공/재생 이렇게 5개, 특정 데시벨 기준치 이상이면 성공화면, 이하이면 실패화면으로 넘어가도록 구성하였다.

Practice

실패/성공을 분기하려면 데시벨의 기준을 얼마로 가져가야 할지 기준점에 대한 지식이 필요한데 일반적 수치를 인터넷 검색해서는 감을 잡기가 쉽지 않았다. 직접 폰으로 체크를 해보는 것이 정확할 듯 하여 연습삼아 아주 단순한 소음측정기(?)를 제작 ;ㅅ;

https://share.protopie.io/HHVWQPo1A1U

환경에 따라 조금씩 다르겠지만 아무도 없는 회사에서 가만히 폰을 두었을 때 잡히는 기본 데시벨은 50정도이고 말을 하기 시작하면 잡히는 수치는 70정도. 그러므로 성공/실패 분기되는 기준은 70DB으로 잡았다.

Jump to Fail Scene

우선 실패 씬으로의 이동은 따로 Range를 적용할 필요 없이 Start 트리거 밑에 Jump 걸어서 3초 뒤 실패 씬으로 이동하도록 설정했다.

Jump to Success Scene

Range 트리거를 활용해 70DB이상이면 성공 씬으로 이동하도록만 해주면 될 것 같은데… 현재 버전(3.4.2)에서 프로퍼티 목록을 열어보면 데시벨 기준은 찾아 볼 수 없다. 하지만 소리가 감지되는 모션을 줄 때 투명도를 사용했기 때문에 70DB 일때 Opacity 수치를 기준으로 씬을 넘겨줄 수 있다.

50–70 데시벨 사이 20–100 퍼센트의 투명도 적용
70DB 일 때 원의 투명도는 100%이므로 범위는 100이상으로 설정

이번 컨셉의 난점은 플로우에 그려진 그대로 범위설정을 이상, 이하 두 가지로 잡았던 것. 이하 범위에서 리스폰스가 먼저 일어나니 이상범위에 적용한 리스폰스가 적용이 될리가 없는데…; ㅅ ;… 주입식 교육에 길들여진 나의 머리의 오류였다.

https://dribbble.com/shots/3827423-AI-Speaker-UI-Concept

--

--