UX 디자인 배우기 #110
Today UX 아티클
Uxdesign.cc에 올라온 Ish Jindal의 글 How we went about creating Input UI Elements for our Chatbot Platform을 원저자의 허락을 받아 번역한 글입니다.
현재 챗봇은 인간 자연어를 이해할 수 있는 능력이 별로 없습니다. 그리고 이는 대부분의 메시지 앱(Messenger, Kik 등)에서 봇 플랫폼에 그래픽 UI와 텍스트 UI 조합해 사용하고 있는 이유 중 하나입니다. 텍스트 응답뿐만 아니라 버튼, 캐러셀, 이미지 카드 등을 활용하고 있는 걸 생각해보세요.
저희 Tars에서는 봇이 조작할 수 있는 챗봇 채팅 인터페이스를 만드는 데 브라우저를 플랫폼으로 사용하고 있습니다. 저희 챗봇을 한 번이라도 써보셨다면 그래픽 UI와 텍스트를 조합한 접근법을 강력히 지지하게 될 것입니다. 저희는 어려운 과정을 거쳐 다양한 사용자 인터랙션 및 상황을 지원할 수 있는 입력 인터페이스를 몇 가지 만들어냈습니다.
Messenger, Kik, Telegram은 개발자들이 하루에도 수백 가지 봇을 효율적으로 활용하고 있는 대규모 플랫폼입니다. 하지만 이러한 메시지 플랫폼들에서는 개발자들이 좋은 유저 인터랙션을 만들어내는 데 도움이 되는 프론트엔드 구성요소를 충분히 제공하지 못하고 있다고 생각합니다.
그래서 저희가 각각의 맞춤형 입력 UI를 어떻게 만들어냈고, 왜 각 UI가 적합한지, 이런 UI가 없으면 사용자 인터랙션에 어떤 악영향이 가는지 얘기해보고자 합니다.
시작해봅시다.
날짜 및 시간 스크롤러
언제 약속을 잡고 싶은지 유저에게 물어봐야 하는 시나리오 상황을 생각해보세요. 같은 정보를 전달받는 데도 여러 방법이 있을 겁니다.
25th Nov, 25th November, Nov 25th, 25/11, 25–11–2016, 11/25/16 모두 기본적으로 같은 것을 뜻하지만 머신이 날짜를 이해하게 만드는 것은 쉬운 일이 아닙니다.
때문에 저희는 유저가 다이얼을 돌려서 날짜를 선택할 수 있는 날짜 및 시간 스크롤러를 만들었습니다.
현재로선 이런 UI를 사용하고 있는 메시징 플랫폼은 보지 못했지만 유저에게 날짜 혹은 시간 입력을 요청할 때 반드시 이용해야 할 방법이라고 생각합니다.
세로로 나열한 버튼들
선택지 수가 제한적인 폼에서는 선택 옵션을 제공하는 것도 생각해볼 수 있습니다. 버튼을 누르는 것은 인터랙션을 빠르게 할 수 있게 해주며 대화의 범주를 제한적으로 유지할 수 있게 해줍니다.
버튼 기반 접근법은 채식 주의자용 피자와 비 채식 주의자용 피자 중 어떤 걸 선택할지 물어볼 때는 적합할 수 있습니다. 하지만 100가지 보험 중 무엇을 선택할 것인지 물어볼 때 쓰기 좋은 UI는 아닙니다.
세로로 나열한 버튼들로 또 할 수 있는 건 무엇이 일까요?
각 옵션 옆에 이미지를 추가하여 시각적으로 눈길을 끌게 만들 수 있습니다.
유저가 옵션을 탭 하면 선택이 보내지도록 만들거나 “보내기”를 누른 후에 선택이 보내지게 만들 수 있습니다. 후자는 유저가 옵션을 실수로 선택한 건 아닌지 재확인해야 할 때 도움이 될 수 있습니다. 챗 플로우에서는 뒤로 갈 방법이 없기 때문에 재확인을 할 것인지 잘 고려해봐야 합니다.
각 옵션마다 세부 정보를 볼 수 있는 ‘빠른 정보조회’ 메뉴를 추가하여 의사 결정 프로세스를 더 좋게 만들어 줄 수도 있습니다.
‘고급 얼굴 관리’와 ‘기본 얼굴 관리’ 사이의 차이를 모든 사람들이 알고 있는 건 아닙니다. 각각에 어떤 서비스가 제공되는지 가격은 어떤지 세부 정보를 제공하면 사용자 경험이 더 나아질 수 있습니다.
버튼 UI를 이용할 때 한 가지 더 중요한 것은 질문을 제대로 만들어야 한다는 겁니다. Leszek이 그의 글에서 설명했듯이 옵션의 범주를 제한하면서도, 개방형 질문보단 콘텍스트를 설정하는 방향으로 질문해야 합니다.
유저가 입력하는 내용 제한하기
저희 챗 인터페이스에 적용한 것 중 가장 잘 한 부분이라고 생각합니다. 그래픽으로 된 입력 UI(버튼, 캐러셀 등)를 제공할 때면 항상 유저가 아무것도 타이핑하지 못하게 만들었습니다.
왜 그랬을까요? 유저가 아무거나 입력할 수도 있는데 챗봇은 그에 대한 준비가 되지 않은 상태이기 때문입니다. 대화가 끊기는 것보다 간단하고 제한적으로라도 대화를 이어가는 것이 준비가 될 때까지는 더 좋습니다.
저희는 이렇게 만들었습니다.
이렇게 하지 않으면 다음과 같은 문제가 생깁니다.
완료 버튼과 패스 버튼
이 두 버튼은 작지만 큰 차이를 가져다주는 버튼을 사용하기로 결정을 내리게 된 이유는 스크립티드 챗봇(scripted chatbots)을 폼(form)의 진화된 형식으로 생각하기 때문입니다.
채팅 인터페이스에서 주소를 알려주거나 상세한 피드백을 줄 때는, 일반적으로 몇 단어를 쓰고 난 다음에 ‘보내기’ 버튼을 누르고 다음 문장을 쓰고 또 보내기를 반복하며 전체 3-4 문장을 답으로 보내게 됩니다. 이때 “완료(done)” 버튼이 있으면, 답을 전부 입력한 다음에 ‘완료’를 눌러서 답장을 전부 적었음을 알려줄 수 있습니다.
이런 옵션이 없게 되면 머신은 첫 문장만 보고 아직 유저의 응답을 다 받지 않은 상태에서 반응을 하게 됩니다.
유저가 질문에 대한 답을 안 하고 넘기고 싶을 때도 있을 겁니다. 이때는 “보내기(send)” 버튼 대신 “패스(pass)” 버튼을 사용하였습니다. 유저가 타이핑을 시작하면 패스 버튼이 보내기 버튼으로 바꿔주면 됩니다.
자동완성 단어 제안
구글 검색에서 타이핑을 시작하면 선택할 수 있는 옵션을 제안해 주는 자동완성 기능과 비슷한 기능입니다. 긴 옵션 리스트를 가지고 있거나 세로로 버튼을 나열해주는 것이 적절하지 않은 상황에서 특히 유용합니다. 예를 들어 지명 리스트, 자동차 모델명 리스트 등을 생각해보면 됩니다.
별점과 좋아요
유저에게 피드백이나 경험 등을 정량적으로 물어보고자 할 때 특히 유용합니다. 아이콘은 별, 좋아요, 하트, 이모티콘 등 중에서 상황에 맞는 걸로 선택하면 됩니다.
이미지 카드
여러 피스의 정보 보여줘야 하는 상황에서 유용한 방법입니다. 음식 주문 프로세스에서 버거를 보여주는 상황일 수도 있고 쇼핑 플로우에서 셔츠를 보여주는 상황이 될 수도 있습니다. 모든 카드가 쭉 펼쳐져 있으면 스크롤해서 모든 옵션을 확인할 수 있습니다.
이 UI 요소는 이미지, 타이틀, 설명, 푸터(footer) 4가지 부분으로 이뤄집니다. 여러분이 무엇을 보여주고자 하는지 그 상황에 따라 유연하게 바꿀 수 있습니다.
결론
위에서 언급한 모든 입력 UI 요소를 테스트해보고 싶으시다면 하나씩 테스트해볼 수 있는 챗봇 링크를 이용해 보세요.
말주머니와 텍스트 박스로만 구성된 미니멀리스트 챗봇 인터페이스는 별다른 능력을 발휘하지 못합니다.
기존에 존재하는 요소를 활용하고 챗 인터페이스에 새로운 것을 추가하여 챗봇을 강화하는 방법을 다시 고민해봐야 한다고 생각합니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성전자, SK텔레콤, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290