G모빌리티를 서비스를 소개하는 화면이 아닌, 로그인한 담당자의 오늘 업무부터 보여주는 탁송 플랫폼으로 다시 설계하였습니다.

상황

G모빌리티는 수입차 서비스센터와 고객 사이의 차량 이동을 맡는 모빌리티 플랫폼입니다. 주식회사 지카가 운영하며, 정비할 차량을 고객의 위치에서 서비스센터로 옮기고 다시 돌려주는 G드라이브, 지방 이동과 신차처럼 직접 운전으로 옮기기 어려운 차량을 맡는 G캐리어, 서비스센터에 입고한 고객을 위한 대차 서비스 G렌트를 하나의 계정으로 제공합니다.

서비스센터와 딜러의 담당자가 매일 예약을 접수하고 조회하는 업무 도구임에도 불구하고, 기존 화면은 처음 방문한 사람에게 서비스를 소개하는 순서로 구성되어 있었습니다. 프로젝트는 2021년 6월, 웹과 앱의 화면을 새롭게 디자인해 달라는 요청에서 출발하였습니다.

현재 화면을 분석하는 과정에서 불편의 원인이 화면의 꾸밈이 아닌 진입 순서와 정보 구조에 있다는 점을 확인하였습니다. 이에 따라 시안과 함께 로그인 시나리오와 메뉴 구조를 먼저 제안하였고, 범위를 웹과 앱 화면 전체 설계로 넓혔습니다. 이후 같은 해 로그인 전 방문자를 위한 서비스 소개 화면과 앱 출시용 디자인을, 2023년에는 기사용 앱의 화면 디자인을 이어서 맡았습니다.

발견

현재 화면을 분석하여 확인한 내용은 다음과 같습니다.

• G모빌리티는 계정 기반 서비스입니다. 화면을 여는 사람은 대부분 이미 계약된 법인 고객의 담당자이며, 계정마다 쓸 수 있는 서비스가 다릅니다.
• 웹과 앱을 쓰는 사람과 상황이 다릅니다. 웹은 사무실에서 여러 프로그램을 함께 띄워 두고 하루 종일 보는 기존 담당자가, 앱은 이동하면서 일하는 영업과 제휴 담당자가 주로 사용합니다. 바깥에서 쓰는 앱은 빛의 변화도 고려해야 합니다.
• 두 화면 모두 빠르고 정확한 업무 처리를 위해 쓰이지만, 기존 화면에는 불필요한 스크롤과 작은 버튼이 몰린 상단, 한 화면에 지나치게 많은 정보가 있었습니다. 상세 화면은 보기 상태인지 수정 상태인지 구분되지 않았습니다.
• 하위 메뉴가 많음에도 페이지 사이를 이동하기 어려웠고, 기능이 아코디언 안에 숨어 있어 자주 쓰는 업무에 바로 닿기 어려웠습니다. 고객센터, 내역 조회, 지점 정보처럼 상위 메뉴의 성격과 맞지 않는 메뉴도 섞여 있었습니다.

이를 바탕으로 G모빌리티의 화면을 서비스를 설명하는 곳이 아닌, 담당자가 오늘 처리할 예약을 빠르고 정확하게 처리하는 업무 도구로 정의하였습니다.

방향을 정립하는 과정

서비스보다 로그인을 먼저

진입 순서를 메인 → 로그인 → 서비스에서 로그인 → 메인 → 서비스로 바꾸었습니다. 앱에는 자동 로그인을 두어, 담당자가 앱을 열면 곧바로 자신의 업무 화면에 도착합니다.

메인은 로그인한 담당자의 소속 센터와 결제 카드 등록 여부, 최근 알림을 먼저 보여 줍니다. 드라이브, 캐리어, 렌트 가운데 그 계정에 열린 서비스만 노출하고, 관리자 설정에 따라 계정마다 다르게 보이도록 하였습니다. 로그인과 상관없이 쓰는 FAQ, 1:1 문의, 챗봇 문의는 화면 아래에 두었습니다. 로고를 누르면 로그인 전에는 첫 화면으로, 로그인 후에는 메인으로 이동합니다.

웹은 유연하게, 앱은 움직이면서도 편하게

웹과 앱은 같은 기능을 제공하되, 쓰는 상황에 맞추어 다른 기준을 세웠습니다.

• 웹 | 화면을 내비게이션, 주요 콘텐츠, 부가 기능과 요약의 네 영역으로 나누었습니다. 모니터에 여러 프로그램을 띄워 창이 좁아지더라도 중요한 정보는 남고 부가 정보만 줄어드는 반응형 구조입니다.
• 앱 | 반복되는 문구와 기능을 덜어 내고, 가장 쓸모 있는 기본값을 정하였습니다. 움직이면서도 누르기 편한 위치에 버튼을 두고, 좁은 화면에서 지금 봐야 할 정보에 눈이 가도록 움직임을 설계하였습니다. 앱에 익숙한 사용자를 위해 길게 눌러 쓰는 단축 기능을 더하였습니다.

앱 시안은 필요한 정보를 요약해 보여 주는 프로세스형과 서비스를 친절하게 설명하는 프렌들리형의 두 방향으로 먼저 비교하였고, 이후 웹과 같은 밝은 톤과 바깥에서도 눈이 편안한 어두운 톤의 두 가지로 다듬었습니다.

그룹의 CI를 화면의 언어로

브랜드 기준은 그룹 CI 가이드에서 출발하였습니다. 주 컬러 3종은 아이콘과 주요 텍스트의 강조에만 사용하고, 배너에서 보조색을 가져왔으며, 오래 보아도 편안하도록 미색 바탕을 정하였습니다. 가이드의 윤고딕은 인쇄물에 맞춘 서체로 웹에서는 용량이 커 속도를 떨어뜨리기 때문에, 화면에서는 Spoqa Han Sans를 쓰도록 제안하였습니다.

이 과정을 통해 정립한 원칙은 다음과 같습니다.

• 서비스 소개보다, 오늘의 업무를 먼저
• 많은 기능보다, 가장 쓸모 있는 기본값을
• 화려한 색보다, 오래 보아도 편안한 화면을

한 일

고객사용 웹과 앱

예약접수는 한 화면에서 끝나도록 설계하였습니다. 드라이브와 캐리어를 탭으로 나누고, 발송인과 수령인 정보는 지난 내역이나 지점 정보에서 불러오거나 직접 입력할 수 있습니다. 차량정보에는 브랜드, 차량번호 조회, WIP 번호, 차대번호를 두어 서비스센터의 업무 방식을 그대로 담았습니다. 오른쪽 요약 영역은 예약일시, 예상 주행거리, 예상 금액과 함께 아직 입력하지 않은 항목을 알려 주며, 작성 중인 예약은 임시저장할 수 있습니다.

예약내역 조회와 통계자료는 담당자가 판단에 쓰는 정보를 기준으로 정리하였습니다.

• 예약내역 조회 | 예약접수, 배정완료, 탁송완료처럼 단계별 건수를 맨 위에 두고, 숫자를 누르면 그 단계의 예약만 걸러 보도록 하였습니다. 기본 기간은 1주일로 정하고, 목록에서는 예약번호, 고객명, 차량번호를 먼저 보여 줍니다.
• 예약 상세 | 보기와 수정 상태를 분명히 나누고, 입력 항목이 많은 화면에서는 다음 항목으로 자동 이동하고 글자 수를 자동으로 확인하도록 하였습니다.
• 통계자료 | 요일, 월, 시간, 지역, 거리, 서비스 유형, 배차 유형, 브랜드별 그래프를 한 화면에 두고, 항목마다 자료를 내려받을 수 있습니다.
• 약관과 제보 | 페이지로 이동하던 공시성 내용은 가벼운 팝업으로 바꾸고 읽기 쉬운 서식을 정하였습니다.

서비스 소개와 앱 출시

로그인을 먼저 보여 주는 대신, 아직 계정이 없는 방문자를 위한 서비스 소개 화면을 따로 설계하였습니다. 첫 화면에서 서비스 소개와 로그인 두 갈래로 나뉘고, 로그인하지 않은 경우와 로그인한 경우의 시나리오를 구분하였습니다. 서비스 소개는 한 화면에서 세 서비스를 탭으로 비교하는 안과 스크롤하며 자세히 읽는 안의 두 가지로 제안하였습니다.

서비스 소개 시안 1 | 탭 UI, 한 화면에서 세 서비스의 개요를 파악 (2021.10)

서비스 소개 시안 2 | 정보 나열, 스크롤하며 서비스별 자세한 정보를 확인 (2021.10)

앱 출시에 맞추어 런처 아이콘, 스플래시, 스토어 스크린샷과 배너를 디자인하였습니다. 런처 아이콘은 이름을 함께 보여 주는 브랜딩 안과 작은 크기에서도 잘 보이는 가시성 안으로 비교하였습니다.

런처 시안 1 | 브랜딩, 이름을 함께 담은 안 (2021.10)

런처 시안 2 | 가시성, G만 크게 담은 안 (2021.10)

기사용 웹과 앱

차량을 옮기는 기사를 위한 화면도 함께 설계하였습니다. 2021년의 기사용 웹은 예약번호로 들어와 휴대폰 인증과 위치정보 수집 동의를 거치는 짧은 흐름으로 구성하였습니다.

2023년에는 기사용 앱의 화면을 다시 디자인하였습니다. 기사는 하루의 운행을 한 건씩 차례로 처리하며, 운전 중에도 화면을 확인해야 합니다. 이에 따라 다음과 같이 설계하였습니다.

• 오늘을 먼저 | 헤더의 서비스 로고를 덜어 내고, 그 자리에 오늘 날짜와 지역 날씨를 두어 안전 운행을 위한 정보로 삼았습니다. 맑음은 노랑, 흐림은 회색처럼 날씨에 따라 색이 달라집니다.
• 지금 처리할 한 건 | 날짜를 가로로 넘기며 운행이 있는 날을 확인하고, 바로 처리해야 할 운행 카드를 가장 크게 보여 줍니다. 다음 운행은 나열하되 강조하지 않습니다.
• 운전 중을 고려한 버튼 | 메시지는 특정 시점에만 쓰이므로 화면 아래에 고정된 버튼으로 두고, 버튼은 의도적으로 크게 만들었습니다.
• 운행 중 화면 | 픽업 거리와 출발지, 도착지를 위에 고정하고, 차량 사진 15장 촬영과 도착 예상 시간 입력처럼 단계마다 한 가지 일만 보이도록 하였습니다.

결과물

• 현재 화면 분석과 UX 방향, 화면 흐름도
• BI 적용 방안(컬러, 서체)
• 고객사용 반응형 웹 화면 디자인(로그인, 메인, 예약접수, 예약내역 조회, 결제관리, 마이페이지, 통계자료, 고객센터)
• 고객사용 앱 화면 디자인 시안
• 서비스 소개 화면 시안 2종
• 앱스토어 출시용 런처 아이콘, 스플래시, 스토어 스크린샷과 배너
• 기사용 웹 인증 화면(2021), 기사용 앱 화면 디자인(2023)