채팅과 소셜 피드
비슷해 보이지만, 다른.
채팅과 소셜 피드는
얼마나 다를까?
'디스코드'를 사용하게 되면서, 디스코드의 UI를 살펴보다가 다른 앱을 보면서 다른 부분들을 비교하게 되었다. 슬랙, 카카오톡, 트위터, 메신저 등을 비교하면서 말풍선과 피드의 형태와 UI의 구조를 의식의 흐름에 따라 살펴보았다.
UI를 비교해보면서, Mobbin을 참고하여, UI 용어는 Mobbine 기준으로 작성하였다.
말풍선 UI
카카오톡부터 텔레그램, 메타(페이스북) 메신저를 살펴보면, 말풍선 모양이 약간씩 달랐다. 말풍선의 모양은 크게 3종류가 있고 모양은 한쪽 끝이 단순하게 표현되고 있었다. 대화가 여러 개 쌓일 경우, 대화를 모아서 보여주고, 말풍선의 형태를 합쳐준다.
말풍선이 합쳐지는 기능이 없는 경우, 화면에 장식이 많아진다. 합쳐지는 경우는 마지막 말풍선의 형태가 변하는 경우와 말풍선 그룹으로 묶어준다. 그룹으로 묶이면서 화면의 여백을 줄이고, 형태를 단순하게 표현하고 있다. 말풍선의 반대편은 대화의 길이에 따라 달라진다. 말풍선은 간단해 보이지만, 연속되는 대화를 표시하기 위해 꽤 많은 기능이 포함되어 있다.
말풍선의 형태를 보면, 메시지를 전달하는 채팅 앱과 피드를 사용하는 커뮤니티 앱이 비슷하지만 다른 형태를 띠고 있다.
프로필 사진의 위치도 흥미롭다.메신저와 슬랙의 모바일 앱을 비교해보면, 채팅 앱은 아래에서 위로 말풍선이 쌓이고, 슬랙과 같은 앱은 위에서 아래로 포스팅이 쌓인다.
말풍선과 포스팅은 왼쪽에 사용자 프로필 사진을 놓고, 오른쪽에 텍스트를 배치하는데, 슬랙과 비슷한 앱은 말풍선과 달리 하나의 대화에 모든 콘텐츠를 넣어서 컨테이너 안에 넣는다. 말풍선일 경우는 말풍선 안에 텍스트만 배치하고, 나머지 정보를 말풍선 밖에 배치한다.
슬랙과 디스코드는 같은 형태로 쌓이지만, 채팅과 메시지 앱은 말풍선이 좌우 대칭으로 번갈아 가면서 쌓이게 된다. 하지만 좌우가 비게 되는 경우가 생긴다.
채팅 UI의 문제
둘이 대화할 땐 문제가 별로 없다.개인 채팅의 경우, 화면을 구성해 보면 좌우가 복잡해진다. 메시지의 길이에 따라 말풍선의 길이가 정해지고, 시간과 닉네임, 공지사항 등의 정보와 글 쓰기 같은 기능 UI가 추가되면, 전체 화면도 점점 복잡해진다.
친구끼리의 대화에서는 인싸와 아싸가 나뉠 뿐이지만, 일은 다르다.개인 채팅에서 그룹 채팅이 되면 화면은 더욱 복잡해진다. 그룹 채팅의 문제는 화면의 복잡도가 아니라 대화와 대화의 거리가 멀어진다는 점이다. 만일 채팅 형식에서 다수의 사람이 길이가 긴 정보를 전달하게 되면, 이 문제는 더 복잡해진다.
일이 아닌 대화에서 대화 화면의 메시지 사이의 길이가 멀어지는게 전혀 문제가 되지 않는다. 하지만, 일이라면, 이야기가 전혀 다르다. 예를들어 OKR의 상위 오브젝트라고 하면, 오브젝트 선언에 대한 메시지는 한 두개이고, 실행이 시작되면서, 시간의 흐름에 메시지가 많이 추가된다. 하지만 첫 메시지를 찾으려면, 긴 대화를 따라 올라가야 한다.
메시지의 피드를 거슬러 올라가는 일을 '벽타기'라고도 하는데, 대화에 참여하는 사람들은 비동기화 되어 있으므로, 대화로 업무를 이어갈 경우, 열심히 일을 하고 피드백을 할 수록 비효율성은 커지게 된다.
채널과 스레드
두 사람이 메시지를 보내고 받기만 하는 경우에는 문제가 없지만, 계속해야 하는 일이라면, 정보를 유지하는 것이 중요하다. 슬랙에서는 스레드를 사용해서 대화와 대화 사이의 거리를 줄이고, 대화 내용을 좀 더 가깝게 유지할 수 있다.
슬랙에서 제공하는 채널과 스레드는 대화를 분류하고 유지하는데 유용하다. 사용자는 채널에서 대화를 하다가 스레드를 시작해서 대화를 집중할 수 있다. 스레드가 중요하기 때문에 슬랙의 사이드 메뉴에서 가장 위에 있다. 스레드와 채널은 비슷해 보이지만, 기능과 레이아웃은 미세하게 다르다.
슬랙에서 스레드와 채널이 시각적으로 비슷하기 때문에 사용자가 직관적으로 기능을 구분하기 힘들다. 슬랙에 익숙하지 않은 사용자는 메시지 앱과 비슷한 패턴으로 슬랙을 사용한다.
트위터는 스레드를 좀 더 시각적으로 보여준다. 피드에서 스레드를 시작하면, 수직선이 생기고 대화의 연결 관계를 보여준다. 스레드와 홈으로 쉽게 이동할 수 있고, 스레드에서 대화를 이어갈 때도, 이전 글을 보여준다.
스레드 간의 대화를 이미지로 표시하면, 피드와 스레드는 원래 대화의 흐름에서 벗어나 다른 이야기를 할 수 있도록 해준다. 하지만 스레드 내부에서도 같은 문제가 반복된다. 대화창을 하나 더 늘린 효과일 뿐이다.
답장
메타 메신저는 대표적인 메신저 앱이지만, 트위터와 달리 스레드는 없다. 슬랙이나 트위터와 마찬가지로 말풍선을 쓰고 있는데, 대화의 간격이 멀어지는 경우, 답변을 통해서 관련이 있는 말풍선으로 거슬러 올라갈 수 있다. 메신저는 대화 외의 정보는 간결하게 표시하고 있어서 답변도 작은 말풍선으로 표시한다.
답장의 구조를 스레드의 구조와 비슷하게 그려보면, 스레드는 대화하는 라인을 하나 더 만들지만, 답장은 대화를 겹쳐 놓는다는 것처럼 보인다. 답장의 구조는 시각적으로 쉽게 구분할 수 있지만, 답장으로 이어진 대화를 따로 볼 수는 없다.
친목의 경우는 모든 정보를 흘려보낼 수 있지만, 업무에 사용하면 문제가 생긴다. 검색으로 일일이 대화를 찾기도 힘들고, 대화 간의 관계를 유추하기도 어렵다.
채팅 UI가 익숙해지면서, 채팅 UI가 협업의 UI로 이어지는 UX가 많기 때문에 협업 툴에서 일을 하면서 생긴 정보를 유지하기 어렵다.
디스코드의 해결책
디스코드는 슬랙을 따라 했다는 평가를 받고 있지만, 메시징 시장에서 빠르게 성장하고 있다. 디스코드는 초기에 업무를 하는 직장인보다 게이머들이 많이 사용했다. 게임과 일은 달라 보이지만, 특정 주제에 집중해야 하며 다양한 의사소통이 빠르게 필요하고, 정보가 쌓여야 하며, 찾기 쉬워야 한다는 점에서는 비슷하다.
디스코드의 장점을 3가지로 정리하면,
1. 대화와 대화를 연결하여 거리를 줄이는 공간을 설계했다.
2. 대화의 관계를 시각적 기호로 보여준다.
3. 파생된 스레드에는 제한이 있고, 계속 이어지지 않으면 보관된다.
전체 화면을 구성하는 하나의 컴포넌트 만으로 차이를 비교해보면, 디스코드의 방법은 시각적으로 기능과 맥락을 보여주는 '기호'를 사용한다.
컴포넌트
대화를 나타내는 컴포넌트의 형태와 쌓이는 형식을 비슷한 크기의 구성요소로 다시 만들어보면, 차이를 금방 알 수 있다.
슬랙과 디스코드를 비교하면, 디스코드에서 대화가 쌓이는 방식은 채팅과 가깝고 말풍선 테두리가 없어서 전체 화면이 단순하다.
메신저와 카카오톡을 비교해보면, 카카오톡은 슬랙과 가깝고, 메신저는 디스코드에 가까운 형태라는 것을 알 수 있다. 디스코드는 복잡해 보이지만, 텍스트로 전하는 대화의 상태를 '기호'와 '아이콘'으로 대체했다. 기본 대화가 있고, 대화 UI에 '기호'와 '아이콘'이 추가되어 확장된 대화가 표현된다.
슬랙과 카카오톡, 디스코드, 아이 메시지, 메신저의 추가 기능을 비교해보면, 다른 메시징 앱들은 대화에 관련된 추가 기능을 팝업 한다. 기능은 크게 두 가지로 분류되는데, 감정을 표현하는 이모지와 복사와 답장 같은 기능을 함께 보여준다.
결론
디스코드와 다른 앱을 비교하면서 의외로 많이 차이가 있다는 것을 알게 되었다. 최근 협업 툴이 많아지고 있고, 대부분은 대화를 많이 사용한다. 또 문서화보다는 린 방식으로 일을 애자일 하게 하는 경우도 많아졌다.
개인의 경험이 공유되고 프로젝트를 진행하면서 생긴 노하우가 공유되어야 팀과 개인이 성장할 수 있는데, 기존의 대화 방식은 효율성이 낮다. 많은 회사에서 단순성과 일관성, 효율을 많이 강조하는데, 디자인 관행을 반복하고 있는 건 아닐까 하는 생각이 들었다.
복잡성과 단순성의 반대가 아니다. 트위터에서 수직선으로 트윗을 연결하거나, 게시판의 답글을 다는 'L' 자 모양이 단순하지 않다고 생각할 수 있는데, 어떻게 활용하는가에 따라서 대화의 맥락을 시각적으로 표현하는 단순하고 효과적인 방식일 수 있다.
아이와 어른의 차이
맥락이 차이를 만든다. 아이의 행동은 산만하지만, 어른의 행동은 흐름이 있다. 성장하면서, 우리는 주의를 집중하고 몰입하는 훈련을 한다. 식사를 할 때는 앉아있어야 하고, 공부를 할 때는 수업의 주제에 집중해야 한다.
트위터나 틱톡 등은 짧고 강렬한 메시지로 많은 사람에게 큰 충격을 주었다. 디지털화된 메시지는 분열된 자아, '부캐'나 '멀티 프로필', '디지털 트윈'처럼 맥락이 극단적으로 달라지거나, 분리되어 있는 기능과 용어를 만들어냈다. 하지만 우리가 친밀한 관계가 될 수록 더 적은 양의 대화로 더 많은 의사소통을 할 수 있다.
일에서는 숙련도이며, 커뮤니티에서는 공감이라고 할 수 있다. 맥락은 시간과 메시지 효율성과 관계의 지속성을 높인다.
만약에...
답변과 스레드, 기호를 사용해서 대화를 연결할 수 있는데, 여전히 검색은 쉬운 일이 아니다. 많은 대화를 하게 되면, 언제 무슨 일이 있었는지, 알기 힘들다. 그리고 시각적으로 대화의 말풍선을 써야 하는지, 말아야 하는지도 애매하다.
그 사이에 일은 메시지와 피드 사이의 형태에서 오가고 있다.
그래서 피드와 대화, 스레드와 답변의 형태를 뒤섞어 보면 어떻게 될까 하는 생각이 들었다.
아이디어는 각 날짜가 길게 이어지는 두루마리이고, 모든 대화가 기록된 두루마리에서 각 개인이 필요로 하는 대화의 일부만 집중해서 보는 와이어프레임을 만들어봤다.
일반 대화는 메시지로 간단하게 표현하고, 인터렉션이나 중요한 대화일수록 많은 정보를 표시하고, 과거의 날짜에서 정보가 많은 대화만 표시할 수 있는 기능을 만든다. 그리고 그 대화는 스레드 혹은 답변 관계로 이어져 있으므로 해당 이슈로 쉽게 돌아갈 수 있다.
대화의 거리는 줄이고 응집력을 높이면, 더 가치있는 시간을 공유할 수 있다.
