[문제해결 스터디] 채팅화면 디자인

 

0. 문제해결 스터디 3회차

(1) 디자인 규격 : 앱

(2) 디자인 내용 : 채팅화면 디자인

 

1. 문제 배경

(1) 대상 서비스

- 리디자인이 아니므로 대상 서비스는 존재하지 않음

- 디자인할 서비스를 업무 협업 툴로 가정하고 이에 따른 채팅 화면을 디자인함

 

(2) 대상 화면

그렇다면, 업무 협업 툴의 채팅에선 어떤 것들이 중요할까?

 

(1) 메시지 검색 및 메시지 작성 시점 탐색의 편의성

업무 과정에서 이전에 나눈 대화를 검색해야 할 때가 있다. 따라서, 메시지를 검색할 수 있는 아이콘이 눈에 잘 띄는 곳에 위치해야 한다.

또한, 메시지를 찾는 과정에서 키워드나 문장으로 검색이 어려운 경우들이 있다. 이런 경우엔 해당 대화를 나눴던 일자를 기억하여 해당 일자의 채팅 내역으로 빠르게 이동할 수 있는 기능이 있다면 편리할 것이다.

 

(2) 파일, 이미지 업로드의 용이성

협업 과정에선 텍스트 대화만 나누는 것이 아니라 이미지, 영상, 혹은 파일을 공유해야 할 때도 많다. 따라서, 텍스트 외 다양한 형태의 자료를 업로드 할 수 있도록 직관적인 아이콘이 눈에 잘 띄는 곳에 위치해야 한다.

 

(3) 리액션

협업은 다양한 방식의 상호작용의 점철이다. 텍스트로 답변을 남기는 것 외에 이모지로 리액션을 취하는 것 역시 넓은 범위에서의 비대면 상호작용 방법이다. 이러한 리액션이 용이하도록 상대의 채팅 가까운 곳에 이모지를 달 수 있도록 한다.

(4) 소통 편의성(음성채팅 등)

채팅 외에 비대면으로 소통할 수 있는 기능 역시 필요하다. 해당 기능 역시 잘 보이는 곳에 위치해야 한다.

 

 

2. UI 디자인 시안

 

Number	변경 내용
1번 항목	현재 진입해있는 채팅방의 이름을 보여주고 채팅방에 입장해있는 멤버들의 인원 수를 보여준다.  참여해있는 멤버들이 누구인지 확인할 수 있게 아코디언 방식으로 풀어냈다.
2번 항목	메시지 검색이 용이하도록 직관적인 검색 아이콘을 헤더에 위치시켰고, 메시지 채팅 외의 비대면 소통이 가능하도록 헤드셋 모양의 아이콘을 헤더에 위치시켰다.
3번 항목	다른 멤버의 채팅에 대해 이모지 리액션이 용이하도록 채팅 하단에 위치시켰다.
4번 항목	카카오톡 채팅방의 일자 검색 기능을 참고하였다. 날짜 우측의 아코디언을 클릭하면 오른쪽처럼 캘린더를 통해 이동이 가능한 날짜를 직관적으로 클릭하여 해당 일자의 채팅 내역으로 이동할 수 있다.
5번 항목	메시지를 전송하는 채팅 입력 영역에서 쉽고 간편하게 파일, 이미지, 영상 등을 전송할 수 있도록 좌측에 +(플러스) 아이콘을 배치하였다.

 

 

 

 

참고 서비스 : 슬랙(Slack), 카카오톡