brunch

You can make anything
by writing

C.S.Lewis

by 연구원케이 Aug 24. 2016

구글 UX디자이너가 사이트 챗봇화로 배운 교훈

ㅡ 미디엄 / 번역




*챗봇이란?


챗봇은 사람이 아닌 일종의 인공지능이라고 할 수 있는 ‘(로)봇’이 자동으로 이용자에게 메시지를 보내고 이에 대한 이용자의 질문에 실시간으로 응답 하면서 다양한 기능 활용을 유도한다. 이용자의 질문을 분석해 자동으로 답변을 제시하는 방식으로 작동하는 챗봇은 메신저 플랫폼을 활용한 일종의 가상 비서라고도 할 수 있다.

(챗봇, 혁신적 저널리즘 출구될까? / 블로터 뉴스 중에서 http://www.bloter.net/archives/258321)







대화형 디자인의 기술과 사회적 도전

는 대화형 웹사이트를 만들었으며 이를 통해 배운 점을 소개하고자 합니다.



저는 몇 달 전부터 제 웹 사이트를 챗봇화하는 실험을 진행했습니다. 이 짧은 시간 동안 많은 의견을 받았고 매스컴에서 뉴스에 소개해주기도 했었습니다. 공개한지 24시간 동안 300여 통의 편지도 받았습니다. 많은 분들이 제 웹사이트와 대화해 준 것 같아 먼저 정말로 감사드립니다. 


몇몇 분들이 이번 시도에 관한 인사이트에 관심을 가져주셨기 때문에, 이에 대한 이야기를 조금 하고 싶습니다.  이번에는 "대화"라는 것에 대해 다루고 싶은데요.


그럼 시작해볼까요? 




저희 어머니는 매일 상투적으로 "실패를 두려워해선 아무것도 시작되지 않고, 실패를 많이 경험하는 것만으로도 큰 무기가 된다."고 말씀하셨습니다. 실패를 극복함으로써 자신을 크게 바꿀 성장을 이룰 수 있다는 것입니다. 제가 대화형 웹사이트를 만든 계기는 몇 주전, 트위터와 링크드인에서 어느 질문을 한 경험으로부터 시작됩니다.



혹시 bot이 우리들 디자이너의 직업을 빼았는다면 당신은 어떻게 하시겠습니까?

농담으로 물었었는데, 이 때 설마 다음과 같은 직설적인 답변을 받을 거라곤 생각치 않았습니다.



당신을 자를 것입니다! ㅡ 구글 제품개발부장,  Raphael Leiteritz

라파엘은 굉장히 좋은 사람입니다. 물론 그가 농담으로 말한 것이겠지만(라면 좋겠지만...) 이 말을 듣고 전 이렇게 생각했습니다.


bot 등 대화의 시대에서 나같은 디자이너는 어떻게 살아남아야 하는 걸까?

오히려 중요한 점은 bot이 UX디자인 전체에 미치는 영향이 무엇인지? 이 움직임은 대기업에만 관련되어있는 것인지? 혹은 누구나 참여할 수 있는 것인가? 지난 수년간의 앱 공지에 관한 논쟁이 대화형 인터페이스에 관한 논의로 정말로 이어지는 것인가? 의문은 늘어만 갈 뿐입니다.


그래서 저는 손쉬운 실험을 진행하는 것으로 이 막연한 두려움에 맞설 것을 결심했습니다. 제 웹사이트를 '대화형 웹사이트'로 개선하는 것입니다. 실제 사이트는 여기서 볼 수 있습니다.


이번 실험을 통해 얻은 9가지 발견에 대해 소개합니다.





1. 지금까지보다 훨씬 더 라이팅(Writing)이 중요하게 되었다.


이 실험을 실행하는데 앞서, bot디자인과 프로그래밍에 가장 많은 시간을 보낼거라 생각했었는데, 해보니 그건 큰 착각이었습니다. 문장 라이팅이 디자인과 프로그래밍을 합친 시간보다도 훨씬 걸렸더라고요. 대화 실험을 하는 점에 있어 가장 중요한 점은, 그 대화의 내용입니다. 즉, 단어입니다. 그래서 bot 문장을 쓰는데에 반드시 시간이 걸린다는 점을 우선 놀라지 말아주셨으면 합니다. iA Writer 대화 초안을 봐주세요.


초기 단계에서의 초안


저는 여기서 '대화의 갈피'를 만들었습니다. 채팅에서의 짧은 문장, 또한 다른 문장을 불러오는 트리거를 만들어 제가 원하는 형태의 대화로 점점 가까이 다가게 했습니다. 하지만, 이것은 아직 시작입니다.




2. 단편적인 메시지는 인간 다움을 잃어버린다.


현실 세계에서 사람과 이야기할 때, 대화가 어떻게 시작했고 어떻게 발전시켜나갔는지에 따라 대화의 내용이 달라지게 됩니다. 종종 같은 주제를 반복하는 것은 이상하겠죠. 일단 날씨에 대해 얘기를 나눴다면 다음으론 보다 상대가 관심갖는 주제로 바꾸어나가는 것이 일반적일 것이고, 날씨 이야기는 이미 했기 때문에 피하는 것이 일반적일것입니다.

전형적인 로봇과 같은 시시한 대화를 피하기 위해 전 원래 해왔던 테스트 방법을 바꿀 필요가 있었습니다. 기능적인 관점에서 링크가 제대로 연결되어 있는지를 추적해나갈뿐만 아니라, 개별 대화도 원 클릭씩 추적해 보다 인간사회적인 관점에서 확인해나갔습니다.


이 작업이 큰 차이를 낳았습다.


잘 살펴보았더니 미묘하게 반복되는 내용과 약간 이어지는 내용에 위화감이 드는 대화 등, 대화가 잘 이루어지지 않았던 케이스를 많이 찾아 볼 수 있었습니다. 하나 하나 단편적인 메시지를 쌓아 올리는 것만으로는 이것을 대화라고 부를 수 없습니다. 자연스러운 대화를 만들어내는 것은 전체적인 흐름 그 자체인 것입니다.




3. 디테일을 재밌게 만들어야 한다.


재밌는 디테일로 유저와 장난을 쳐봅시다.

세심한 라이팅과 기술을 합치면 사람들의 관심을 끄는 대화가 만들어집니다. 예를 들면, 페이지를 업데이트하면 bot의 대화가 바뀐다고 해봅시다. 이는 좋은 걸까요? 매번 '안녕하세요'하고 말하기보다 '어서와!'라고 말하는 쪽에 흥미를 끌어당기겠지요. 경우에 따라서는 대화의 맥락도 달라지겠는데 이 점에 대해서는 뒤에서 다시 논하겠습니다.


이 때 무슨 일이 일어나는가


처음 위와 같은 기능을 보았을 때 사용자는 반드시 상상한 것 이상으로 bot의 머리가 좋다는 사실을 알게될 것입니다. 인터페이스에 대한 인상이 달라지는 것입니다. 그리고 나면


다음엔 무슨 일이 일어날까?

하고 흥미진진하게 생각할 것입니다.


이번 실험적인 bot을 개발하며 깨달은 점이 있습니다. 사람들은 실제로 이것저것 bot을 만지작거리며 장난치는 일들도 시작했습니다. 이번에 하나의 목표로써 이 대화에서, 기존의 연락처 양식에 심리스하게 바꾸고 싶은 것이 있었습니다. "Get in Touch(연락)"라고 표시된 버튼을 누르면 사용자가 임의로 메시지를 작성할 수 있습니다.



"Get in Touch!"를 탭한 다음의 화면


이것이 실패의 시작이었습니다.

야한 이야기나 장난을 쓰는 사용자는 물론이고 잘못된 이메일주소를 보내는 사용자들도 끊이지 않았습니다. 이 bot은 어디까지나 대화형으로 디자인되었을뿐 장난의 구실점(씨앗)은 아닙니다. 저는 해결책을 모색해야만 했습니다.  그래서 우선은 메일 주소가 유효한지 체크하는 기능을 구현했습니다.

"입력된 메일 주소는 똥 이모티콘을 연상시키는군요. 뭔가 재밌는 것 같네요 ...."



메일 주소 대신 "너 좀 촌스러 / You suck"이라 쓰인 경우



이 대화에서의 인증방식은 사용자들이 기뻐했으며 트위터 등에도 올라왔습니다. "장난쳤으니 끝났겠지"라고 생각했었던 그들은 "어라 깜쪽같이 당했네"라고 생각했겠죠. 즉, 사용자가 자신의 인터페이스에서 장난을 치기 시작한다면, 똑같이 되돌려줍시다. 이 점이 자연스러운 유저와의 교제법입니다. 실제로 유저와 어떻게 즐겼는지는 언젠가 당신이 자신의 눈으로 확인해 주세요.




4. 문맥에 따라 화제를 만드는 방식이 바뀐다


당신이 디자이너이며, 근사한 칵테일 파티에 갔다고 합시다. 만약 여기에 초대 된 사람들 모두가 디자이너라고 한다면 누군가와 이야기할때 화제를 만들어가는 법에 영향이 있을 것이라 생각하나요? 대부분 사람들에게 영향이 있을 것입니다.


"안녕하세요 여기 바나나쉐이크 맛있겠는데요" 등 누구에게나 하는 듯한 질문으로 시작하고, "당신도 디자이너시죠?" "어떤 일을 하세요?" 등 단도직입적으로 물어보겠죠. 후자 쪽이 원래 '디자이너의' 파티라는 문맥에 따르고 있으며, 바나나 세이크 이야기보다 훨씬 흥미를 불러일으킵니다.


감정을 동반한 본질적인 질문인 쪽이 훨씬 인상깊은 대화가 될 것임을 알고 있으면서도 많은 사람들이 개성없는 질문으로 대화를 시작합니다. "네트워킹"행사에 가본적이 있는 사람이라면 그날의 가장 큰 화제가 "날씨"였던 경험이 있거나 하진 않았는가요?


그래서 저는 이 문맥에 따른 대화법을 이번 체험에  담아내야겠다고 생각했습니다. 문맥을 이해하는 것은 대화가 흘러가는 방식을 크게 개선할 수 있습니다. 예를 들면 미디엄 또는 트위터에서 제 사이트를 방문하신 분들이 높은 확률로 디자인에 관심있다는 점을 알 수 있습니다. 그들은 트윗과 기사, 또는 기타 소스를 통해서도 알 수 있으니 다음과 같은 대화를 담아보았습니다.



문맥을 기반으로 한 대화


Kenny Chen씨의 UX newsletter를 통해 제 사이트에 온 사람들도 마찬가지로 "Kenny씨의 Newsletter를 통해 온 것 같은데, 어쩌면 당신도 디자인에 관심있는거 맞죠?"하고 매우 놀래킬 수 있었습니다. 이 작은 조율은 대화의 흐름과 인간다움을 연출할뿐만 아니라 기능이나 콘텐츠를 보다 쉽게 찾게 합니다.




5. 문맥에 따라 콘텐츠가 보이거나 숨겨진다.


제 Web 사이트에서는 Quartz라는 미디어의 인터페이스와 유사한 형태로 UX기사를 추천할 수 있는데, 사용자가 UX에 관심없다면 함부로 권하지 않습니다. 그렇지 않으면 이상하겠죠. 길에서 전혀 모르는 사람에게 모바일 디자인에서 햄버거 메뉴를 없애야한다고 논쟁을 시작하는 것과도 같으니까요. 미디엄을 통해 온 사용자라는 사실을 알면 다음과 같은 상황에 맞는 질문을 심리스하게 풀어낼 수 있습니다.


당신도 UX 쪽 사람인가요?

이 질문에 대해 "예"라고 대답함을 시작으로 UX 아티클이나 제 개인적인 생각 등을 bot에게 말하게 할 수 있었습니다. 물론 전날과의 반복을 피하기 위해 같은 기사를 두 번 추천하지 않았습니다.


기사에 관한 대화가 이어지는 모습


일단 시작된 UX기사 논의에서 어떻게 벗어나게 할 것인가 또한 큰 과제점입니다. 하지만 그 논의는 조금 뒤에 하겠습니다.




6. 타이밍에 따라 발언의 해석이 달라진다


제가 이전에 말했던 프레젠테이션에서는 '시간의 길이(듀레이션)이 우리의 행동과 환경, 지각에 큰 의미를 갖게 한다는 점을 설명했습니다. 시간이라는 개념은 애니메이션과 기타 모든 것을 초월해버립니다. 시간은 보편적이며 소셜 다이내믹스 관점에서도 굉장히 관련성이 높습니다.


예를 들어 당신이 방금 굉장히 좋아한다고 생각할 수 있는 사람과 만났다고 해봅시다. 연락처도 주고받았고, 또 그 사람을 만날 것을 참기 힘든 상태입니다. 그럴 때 어느 타이밍에 메시지를 보내면 좋을까요? 바로 메시지를 보내는 것이 좋을까요 아니면 잠시후? 그럼 얼마나 기다리면 될까요?


예를 들어 아까 그 사람이 애나라는 여자였다고 합시다. 그녀에게 이런 메시지를 보냈다고 합시다.


애나씨, 만나서 반가웠습니다! - 밥

그럼 여기서 밥은 어떠한 답변을 기대하고 있을까요? 즉답일까요 아니면 3일 이내로 오는 답변일까요?

밥이 어떻게 하고 싶을지는 별개로, 한가지 확실한 점은 답변에 걸리는 시간이 해석에 영향을 준다는 점입니다.

 즉답이라면 긍정적인 인상을 주겠고, 늦게오는 답변이라면 '기대감'이라는 마법의 양념을 더하게 될지도 모르겠습니다. 기대감과 지연은 우리들의 대화의 질과 고마움과 같은 종류에 크게 영향을 줍니다. 대화에 걸리는 시간의 구분법은 네 가지 단계가 있다고 봅니다.



대화의 타이밍


Instantaneous : 10 초 이하


즉시 답변 받을 경우 현재 상태의 '대화'라 할 수 있습니다.



... : 30 초 이상


조금 생각하고 답변을 받는 경우. 상사와의 대화중 '왜 오늘은 아침에 늦었어?'라고 질문받았을 때 반드시 당신은 멋진 변명을 생각하는 데에 이 정도 시간은 걸리겠죠. 만약 대화에 타이밍 등의 행동이 관련된 경우 실제 대화 이외의 다이내믹스가 많이 추가될테지만 디지털 영역에서는 종종 전해지지 않는 경우가 많습니다.



Break : 1 시간 이상


많은 경우, 그 사람이 대화를 중단할 수 밖에 없는 상황에 있으며, 다시 뒤에 연락하고자 합니다. 바쁘다는 것을 암시하며, 오늘날엔 비즈니스나 사생활 모두 중요한 '짬 취하기 법'입니다.  



Catching up : 3 일 이상


대화가 중단돼 버리며, 어느쪽이 늦어진 점에 대해 사과로부터 다시 시작하거나 혹은 완전히 새로운 대화로 다시 시작하는 경우입니다.



이번 사이트에서의 실험은 간단한 것으로, 가장 처음 카테고리에 대해서만 도입해보았습니다. 사이트에는 하기 요소에 따라 지연 시간이 바뀌는 것 같은 타입의 애니메이션을 삽입해보았습니다.


ㅡ 메시지의 길이

ㅡ 화면을 차지하는 공간의 양


이들은 주로 두가지를 고려하는데, 하나는 역시 이렇게 하는 것이 사람다워 보이며 보다 긴 메시지에 대해서는 긴 시간이 걸립니다.


다른 하나는 상호작용하는 측면, 즉 유저가 각 메시지를 제대로 소화할 수 있다는 점입니다. bot이 동영상을 삽입하면 화면 대부분을 차지하는데, 동영상과 긴 텍스트 모두 짧은 시간에 전송되는 순간, 아마 스팸같은 체험으로 바뀌거 버려 도중에 bot같은 bot(*역자주: 사람이 아닌 로봇같은 bot)과 말하는 기분이 되어버릴 것입니다.


연언어처리 등을 도입한 더욱 복잡한 채팅 인터페이스라면 '당황'과 같은 심리학적 요소를 넣는 것도 가능할 것입니다.


"Hey Siri 오늘 밤 데이트할래?"

"···"(타이핑이 멈춘다)

"···"

"어쩌지"




7. 애니메이션은 대화의 일부가 된다


모션(동작/움직임)은 우리가 인터페이스를 느끼는 방식에 크게 영향을 끼칩니다. 인터랙션 등 지금까지의 정보설계에서는 할 수 없었던 방식으로 유저와의 관계를 구축할 수 있습니다.


저는 모션 조정 곡선을 다듬고 애니메이션을 미세하게 다듬는 데에 시간을 보냈습니다. 이 실험이 호평이었던 가장 큰 이유도 아마 이 애니메이션 때문이 아닐런지 생각합니다.


애니메이션없이 대화는 성립되지 않는다

라고 단언해도 좋을 정도입니다. 왜 이렇게까지 단언할 수 있는지를 살펴보겠습니다.


먼저, 애니메이션은 인터페이스에 활력(강약)을 제공합니다. 대화 자체의 캐릭터 부여도 되는 듯한 강약입니다. 약간 튀는 것처럼 "뒤로가기"애니메이션은 만화에서의 말풍선 같은 장난치는 이미지를 나타냈습니다. (만화 종류에 따라서 달라지겠으나 여기선 진지한 만화를 가리킵니다.)


 번째로는 애니메이션은 주의를 환기하기 쉽습니다. bot이 다 말하고 나면 두가지 선택 화면 하단에 애니메이션을 함께 나타나게 합니다. 저는 마지막 메시지 다음으로 나타날 가장 첫번째 버튼 간의 타이밍을 계속 다듬었습니다. 그러한 끝에 bot이 말을 끝내면 유저가 올바르게 하부 버튼으로 시선을 옮기도록하는 최적의 타이밍을 발견할 수 있습니다.


세 번째로는 애니메이션이 인터랙티브함을 강화해준다는 점입니다. 버튼을 갖고노는 듯한 느낌으로 약간 이동함으로써 시선을 끌게하며, 유저를 참견하고 싶게 만들 수 있습니다. 그리고 이번에는 버튼을 누르면 그 버튼이 그대로 답변으로써 메시지가 되도록 연출했습니다.


버튼이 메시지화하는 트랜지션


실제로 이 애니메이션 중에서도 가장 중요한 점이라 생각합니다. 사용자가 대화에 대해 느끼는 방식이 바뀌기 때문입니다. 많은 사람들이 제게 어떤 자연언어처리를 사용했는지를 물었지만 처음엔 왜 그런 것들을 물었는지 알 수 없었습니다. 이후에 겨우 알았는데, 사용자가 자신의 선택이 대화의 일부가 될 것을 눈으로 확인하면 대화 자체를 파악하는 방법과 사고방식이 달라졌던 것입니다. 단적으로 제가 준비한 선택지가 자신이 하는 말처럼 생각되고, 주체적으로 선택한 선택사항처럼 보이게 됩니다. 애니메이션이 없었다면 이 대화도 스크립을 준비한 듯, 부자연스럽게 느꼈을 거라 생각합니다.


애니메이션은 이 대화체험을 풍부하게 했을뿐만아니라, 없어서는 안되는 것이었습니다.




8. 채팅은 웹사이트로 전달되지않는 것들도 전할 수 있다


재치있는 카피와 교묘하게 만들어진 제목으로 광고 대행사들이 차별화를 꾀하려 합니다. 저도 같은 일을 하고 있으며, 제 자신을 열정적인 카피오타쿠라 자칭합니다.

단지, 다른 사람과 다른 일을 시도하는 것이 반드시 좋은 점은 아닙니다. 너무 나가거나, 다른 것들과 다르게 만드려다보니 한번 삥 다 돌고 결국 똑같은 것이 되어버리기도 합니다. 저의 이번 대화체험도 마찬가지입니다. 끝까지 스크롤다운하면 기존 웹사이트가 나타납니다. 처음으로 이 대화부분을 스킵했을 때 저는 충격을 받았습니다. 대화부분과 기존 사이트 2개의 체험 간에는 커다란 간극이 존재했습니다.


제 웹사이트는 화이트 스페이스를 넉넉하게 두고 색도 적게 사용하는, 다시말해서 미니멀한 사이트입니다. 단적으로 말하자면 무표정이자 무감정입니다.


한편 bot은 이모티콘을 많이 사용하였으며 농담을 말하며 웃기도 하는, 매우 감정이 흘러넘치며 표정과 개성이 존재합니다. 이 두가지 디자인 접근법은 제 성격의 두 가지 측면을 나타내고 있었습니다. 기존 웹사이트에서는 합리적은 측면을, bot으로는 감정적인 측면 이란 형태로 말이죠.


디자인은 항상 우리를 찍어내는 거울과 같은 것입니다. 대화경험이 더욱 '나'라는 인간을 현저히 비추고 있었습니다.




9. 대화는 '틀'을 뛰어 넘는다.


대화 인터페이스를 생각할 때, 우리는 네모난 화면에 말풍선이 떠오르는 화면을 먼저 떠올릴 것입니다. 하지만 만약 갑자기 이 대화경험이 당초에 설계된 캔버스에서 이탈한다면 어떻게 될까요?

제가 "House of Cards(드라마)를 처음 보았을 때 이상한 순간이 있었습니다. 갑자기 극중 캐릭터 프랭크가 제게 말을 걸어온 것입니다. 그는 제게 자신의 계획에 대해 이야기를 하기도 하고 농담을 했으며 듣기도 했는데 제게 첫 경험이었습니다. 처음엔 위화감도 조금 있었었지만 점차 이 프로그램의 특정이라 할만한 요소가 되어갔습니다. 이는 마치 제 자신도 스토리의 일부가 되는 것과 같은 경험이었습니다.

연극에서는 이를 제 4의 벽을 깨다라는 단어로 말하는 듯합니다. 예를 들어 이걸 대화형 인터페이스에 적용하면 어떨까요?



연극에서는 이를 제 4의 벽을 깨다라고 말합니다만, 예를 들면 이것을 대화 형 인터페이스에 적용하면 어떨까요? 예를 들어 제가 푸시 알림을 쓴다고 합니다. UX디자인의 교훈으로는 알림을 보내는 이유 등을 미리 설명하여 사용자의 이해를 구하는 것이 알림 승인을 얻기 쉽다고들 합니다.

이 흐름을 대화의 맥락 속에 도입해 봅시다. 이번 경우엔 다음과 같은 말을 해보도록 하겠습니다:


"안녕하세요. 여기 오신 분인 것 같군요. 뭔가 새로운 것이 있으면 알려줄 수 있도록 푸시 알림을 사용해보지 않겠어요?" 사용자는 "좋아요, 그렇게 하죠" 또는 "지금은 됐어요" 중 하나를 선택할 수 있습니다. 사용자가 전자를 선택한다면 대화는 계속될 것입니다.


"감사해요! 브라우저 오른쪽 상단에 팝업이 나오는데, 거기서 승인해주면 완료됩니다"

승인버튼을 클릭하면 즉시 채팅에 이런 메시지가 표시됩니다.

"감사합니다! 우리 앞으로 사이좋게 지내봐요!"


이것이 대화형 디자인에 따른 제4의 벽을 깨는 방법이 아닐까요. 대화는 틀을 뛰어넘을 수 있으며, 어쩌면 원래부터 그래야하는지도 모르겠습니다.




정리


대화에 대한 사람들의 기대는 매우 다양하게 오가며, 대화경험을 디자인하는 것은 무척이나 어려운일입니다. 그 기대에 부응할 수 있다면 우린 그 인터페이스를 '자연'스러운 것으로 인식할 수 있겠으며, 조금이라도 발을 헛딛는다면 아무리 작은 점일지라도 위화감을 느껴버릴 것입니다.


이번처럼 웹사이트에서의 상호 작용 경험을 추가한다는 일은 상당히 제한적인 접근입니다. 실험은 재밌었지만 대화형UI의 잠재력은 이런 것이 아닐 것입니다.

Facebook 메신저와 WhatsApp, LINE 등의 메시징 계열 서비스가 타사 서비스와 본격적으로 연계되면, 우리가 매일 갖는 인터렉션에 의해 가치를 더할 수 있게 될 것입니다. 개별 앱을 설치하는 일도 줄어들 것입니다.


대화형 인터페이스의 개발은 기술적인 도전일뿐만 아니라 사회적인 측면에서도 많은 도전을 안고 있습니다.

우리는 디자이너로서, 이러한 일들을 설계하고 해결해 나가야만 합니다.

채팅 풍선만이 대화형 인터페이스가 아닙니다. 그 미래는 타사 서비스와 콘텐츠가 우리 일상으로 자연스럽게 녹아들어가는 풍부한 경험 그 자체입니다.


그러니 즉시 기존의 틀을 뛰어넘어, 아니, 오히려 뛰쳐 나와 새로운 것을 생각내 나갑시다!


Adrian Zumbrunnen




ㅡ 번역끝 / 묭니






브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari