brunch

You can make anything
by writing

C.S.Lewis

by BUNDI Feb 09. 2018

새로운 채팅 UI/UX에 대한 연구

Parallel Chat

Parallel Chat을 어떻게 해석해야 할지 모르겠어서, 관련된 정의(https://www.urbandictionary.com/define.php?term=Parallel%20Chatting)도 링크합니다. 요약하자면, 두 사람이(또는 그 이상) 채팅을 할 때, 대화 중에 주제가 바뀌더라도 자연스럽게 채팅이 진행되는 채팅을 뜻합니다. 카톡에서 대화할 때, 여러 가지 주제를 무리 없이 채팅으로 풀어가는, 일상적으로 일어나는 ‘일반적인 채팅’ 정도로 이해하면 될 것 같습니다.

UpLabs(https://www.uplabs.com/)에서는 여러 UI/UX적인 시도들을 확인할 수 있으니, 꼭 한번 가서 둘러보시길 추천합니다.


https://medium.muz.li/parallel-chat-ui-ux-case-study-of-a-new-chat-interaction-7ea6779f884b

*지금부터는 위 글에 대한 번역입니다.




Parallel Chat

새로운 채팅 UI/UX에 대한 연구


텍스트 메시지를 보내는 건, 아마 현대(2017년이라고 나와있지만, 2018년이기에 현대라고 해석했습니다)의 소통 방식 중 가장 보편화된 방법일 겁니다. 우리는 출근하면서, 학교나 직장에서, 집에서 소파에 누워있을 때도 끊임없이 메시지를 주고받습니다. 연구(https://www.theverge.com/2016/4/12/11415198/facebook-messenger-whatsapp-number-messages-vs-sms-f8-2016)에 따르면, 페이스북 메신저와 Whatsapp은 하루에 600억 개 이상의 메시지를 전송한다고 합니다.




도전


모바일 기기에서 메시지를 보내는 건 중요하며, 제가 UpLabs Chat Challenge에 참여하게 된 이유이기도 합니다. 도전의 요지는 앱 또는 웹에서의 채팅 과정을 만드는 것이었습니다. 다음과 같은 포인트들을 마음속에 품고서 말이죠:


새로운 인터페이스는 기존의 지루한 채팅 인터페이스의 공식을 벗어나야 한다.

사용자는 흘러가는 채팅에 영향을 미치지 않으면서, 완벽하게 파일을 첨부할 수 있어야 한다.

사용자는 쉽게 다양한 채팅방 사이를 옮겨다닐 수 있어야 한다.

독특해야 하며, 오늘날 우리가 직면한 UX문제도 해결할 수 있어야 한다.



핵심 문제점 생각하기

저는 Y세대(Y세대에 대한 정의입니다. http://terms.naver.com/entry.nhn?docId=931597&cid=43667&categoryId=43667)이며, 꽤나 하루 종일 스마트폰에 붙어있습니다. 물론 이렇게 사는 게 단점도 있지만 채팅할 때는 잘 보이지 않는 UX문제들에 대해 좀 더 깊이 이해할 수 있도록 도와주기도 합니다.


여러분은 아마 상대방이 채팅에서 한 가지 이상의 질문을 할 때, 그리고 그때마다 답변할 때 이 답변이 어떤 질문에 대한 답변인지 명시하는 것에 대해 익숙할 겁니다. 사실 이건 채팅을 늘어지게  만들 뿐만 아니라, 오해의 소지도 만들어냅니다.


지금 이건 어떤 질문에 대한 답변인가요? 어쩌면 5일은 파리를 돌아다니는데, 3일은 느긋하게 쉬는데 보낸다는 걸까요? 아니면 5일 동안 호텔을 예약하고, 3일 동안은 관광하고, 2일 동안은 휴식할 수도 있겠죠... 저희는 어떤 질문에 대한 답인지 도무지 알 수 없습니다.



모바일에서 메시지를 주고받을 때 겪는 또 다른 문제점은, 여러 명의 사람들과 채팅할 때입니다. 여러분은 이때 끊임없이 뒤로 가기를 눌러 채팅 목록으로 가야 하고, 채팅을 하려면 해당 대화방에 들어간 다음 타이핑을 해야 하죠.


이렇게 우리는 이 도전에서 고쳐야 할 문제점 2개가 있습니다.

첫째. 동시에 여러 개의 질문을 받았을 때, 어떤 식으로 어느 질문에 대한 답변인지를 명시할 것인가?

둘째. 매번 채팅 리스트로 돌아가서 채팅방을 선택하지 않고, 어떻게 여러 개의 대화방을 쉽게 오갈 것인가?




진행: 디자인


분명히 이 문제들에 대한 해결책을 보여주는 데는, 모션이 가미된 프로토타입이 필요합니다. 하지만, 프로토타입을 만들기 전에, 전 항상 스케치로 디자인하는 걸로 시작합니다.


디자인 과정에서 저의 목표는 오늘날 우리가 가장 많이 사용하는 채팅 서비스의 인터페이스와 유사한 Look&feel을 가진, 친근한 인터페이스를 만드는 것이었습니다. 저는 완전히 새로운 채팅 인터페이스를 만들지는 않았습니다. 그러면 잠재적인 사용자들이 보고 느끼기에 낯설 뿐만 아니라, 채팅을 하기도 어렵고 디자인된 작은 디테일들을 알아채지도 못할 것이기 때문입니다.




진행: 프로토타이핑


프로토타이핑 과정에서 저의 목표는 짧고 빠르고 재미있는 애니메이션(주로 통통 튀는 식의 애니메이션)을 사용하여 빠르고, 즉각적이며, 믿을만한 피드백을 채팅 인터페이스 전반에 제공하는 것이었습니다.


https://dribbble.com/shots/3745978-Parallel-Chat


첫 번째 문제점에 대한 해결책

저는 iMessage의 스티커를 드래그&드랍하는 방식에서 영감을 받아 채팅 과정을 만들었습니다. 사용자는 스티커와 마찬가지로 메시지를 대화의 특정 부분에 드래그&드롭 할 수 있으며, 이를 통해 답변하고자 하는 질문에 말풍선을 드랍할 수 있습니다.


두 번째 문제점에 대한 해결책

최근 대화 사이를 스와이핑을 통해 오갈 수 있고, 또는 스와이프를 통해 앱 상단에서 드롭다운 메뉴가 내려와 채팅 중인 채팅방에 쉽게 접근할 수 있게 함으로써 해결책을 찾았습니다.




마치며

이번 프로젝트/도전은 저에게 일상에서 찾을 수 있는 사소한 디자인 문제를 인식하는 능력을 기르는데 엄청난 동기부여가 되었습니다. 저는 의심하지 않거나 개선을 위해 노력하지 않고 이미 존재하는 방식에 만족해서는 안된다고 생각합니다. 비록 그 과정에서 많은 실패를 겪을 거 긴 하지만 말이죠.

작가의 이전글 스케치: 사이즈 조절 가능한 아이콘+텍스트 버튼 만들기
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari