챠오 웹폰 UI/UX 전면 개선기

by Hey Hu
May 4. 2021

Overview

챠오는 닷커넥트의 커뮤니케이션 API 기술을 바탕으로 만들어진 업무용 커뮤니케이션 플랫폼입니다. 모바일 앱, 웹 폰(브라우저 기반) 채팅에 070 인터넷 전화번호를 부여해 개인 자리 전화기(IP폰) 없이 직원 또는 고객과의 전화 업무를 대체 하겠다는 목표로 만들어진 서비스입니다.
챠오는 PC업무 환경에 맞추어 웹 폰 서비스를 제공하는데 보다 나은 업무 협업을 위해 전면 개선 작업을 하였습니다.


Problem

챠오는 기존 닷커넥트에서 제공하던 각 하나의 기업에 맞추어 제공되었던 세종스마트비즈 서비스 기반에서 누구나 팀 스페이스를 생성하면서 각 팀마다 스위칭을 통해 개인, 친목, 동호회, 부서, 회사 등 목적성에 맞도록 사용하도록 클라우드 확장형 빠르게 피벗팅 하여 만들어지게 되었습니다.

다만 기존 세종스마트비즈의 UI/UX를 계승하여 만들어지다 보니 Chat, Call UI의 노후화 및 억지로 추가된 팀스위칭의 개선이 필요하게 되었습니다.


Strategy & Concept

총 3가지의 개선점을 기반으로 전반적인 UI/UX 를 개선하여 기존 웹 폰에서 가지고 있었던 확장성을 방해 하는 요소들을 제거하고 사용성을 높이는 방향으로 초점을 두었습니다.

1. Call UI

2. Chat UI

3. Team Switching UI




#1. Call UI 개선

call01.png
chat02.png


이번 전면 개선 작업은 사실 개발파트에서 Call UI의 개선 요청으로 시작을 하였습니다. 웹브라우저 기반인 챠오는 통화 시 Call UI를 호출할때 새창이라든지 새탭으로 불러올 수 없는 개발적 구조때문에 무조건 한 화면안에 표현을 해야 했습니다.


기존 웹 폰에서 Call 기능을 이용할 경우 오른쪽 사이드 영역에서 콜 화면이 슬라이딩 되어 이루어지다 보니 채팅방 정보, 보관함 등 정보 영역과 겹쳐 활용도가 떨어지는 경우가 발생하였습니다. 또 한 Call UI에 들어가는 정보에 비해 영역이 크다 보니 공간을 낭비 한다는 점도 있었습니다.



이를 보완하기 위해 새로운 웹 폰에서는 상대적으로 사용이 덜한 리스트 및 메뉴 영역의 상단 부분으로 Call UI를 호출하기로 하였습니다.



통화시 기존 Call 관련 정보를 최소화 시킨 사이즈로 노출시킨 UI를 리스트 및 메뉴 영역 위쪽에 슬라이딩으로 노출 시켰고 그 결과 통화중에도 채팅 및 보관함 등의 다른 정보 영역에 방해하지 않고 이용할 수 있도록 개선을 하였습니다.





#2. Chat UI 개선


기존 Chat UI는 모바일앱과 동일한 말풍선 UI를 이용하였습니다.

모바일앱과 동일하기에 친숙한 UI였지만 PC기반 웹브라우저의 사이즈 가변성 같은 환경에는 어울리지 않았습니다. 브라우저 사이즈가 늘어나면 말풍선과의 대화 간격도 좌우로 멀어져 대화하는 내용의 집중도와 가독성이 떨어진다는 문제점이 있었습니다.



이 부분을 해결하기 위해 당시 슬랙과 같은 업무용 협업 커뮤니케이션 툴들의 스레드 UI처럼 우리도 추후 연결될 외부 응용프로그램들과의 확장성에 대비해 말풍선 UI에서 스레드 방식의 Chat UI를 도입하기로 하였습니다.



스레드 Chat UI의 도입으로 대화의 목적과 정보 전달의 명확함을 타임라인순으로 보다 확실히 표현할 수 있었습니다. 당시 개발은 진행이 안되었지만 추후 Google Drive, Google 문서, JIRA 같은 확장 플러그인의 메시징 공간도 심플하게 표현할 수 있는 공간을 마련할 수 있었습니다.





#3. Team Switching UI

team01.png
team02.png


초반에는 각 팀마다의 고유주소로 들어가야만 해당 팀의 챠오를 이용할 수 있었습니다.

이를 해결하기 위해 메뉴 영역에 팀 스위칭 기능을 추가하기로 하였고, 팀스위치 버튼을 통해 팀리스트를 호출하여 이동하는 방식을 채택하였습니다. 기존 UI에 맞춰 추가한 기능이다 보니 팀 스위칭할때마다 뎁스가 있었고 현 팀의 명칭이 노출이 안된다는 문제점이 있었습니다.



왼쪽 사이드에 팀 UI 영역을 마련해 유저가 가입된 팀의 심볼(아이콘)로 빠르게 팀스위칭이 가능 하도록 하였습니다.



추가로 기존 왼쪽 사이드영역에 있던 메뉴영역을 리스트UI와 결합시켜 상단에 현재 이용중인 팀 스페이스의 이름을 노출시켜 바로 인지할수 있도록 개선하였습니다.





New Ciao Webphone!


총 3가지의 중요 개선점을 바탕으로 챠오 웹폰의 새로운 레이아웃은 팀 스위칭 영역, 리스트 및 메뉴 영역, 채팅 및 통화내역 영역, 정보 영역까지 크게 4개의 영역으로 구분되어 각각의 목적성에 맞게 구성하여 사용성을 높이는데 초점을 두었습니다. 그와 함께 전체적인 톤앤매너와 디자인 스타일 가이드도 규정하면서 개선하였습니다.


시작은 Call UI 개선으로 시작한 전면 개선한 프로젝트였지만 이미 시장에 많은 협업 커뮤니케이션 플랫폼들과 경쟁하기 위해 전체적인 UI/UX 개선이 필요한 시점에 진행하였기에 좋은 기회였다고 생각합니다.
keyword