Wise*racker service 01. Summary & Login, Signup, GNB, LNB, Placeholder

구버전의 서비스를 최신 버전으로 재 개발하는 프로젝트로 가장 최근 진행한 프로젝트입니다.

백엔드 코어 즉 트래커 엔진, 리포팅 엔진 그리고 화면에 보이는 모든 부분을 다시 만드는 초대형 프로젝트입니다.

저는 화면에 보이는 모든 UI Components디자인과 서비스의 전체 사용성, 데이터 표현 방식, 그리고 프런트의 일부분을 React로 개발을 책임지게 되었습니다.

 

프런트는 React와 Ant design, Redux를 이용하기로 결정되었고 차트는 Echarts와 D3를 이용하기로 하였습니다.

 

Problems

기본적인 문제는 주먹구구식으로 사용된 JQuery라이브러리와 개발자의 입장에서 개발된 UX/UI였습니다.

구 버전의 서비스는 제가 설계했던 Insight 솔루션을 기반으로 하고 있었는데, 이미 6년이 지난 구식이었고 그동안 개발자의 손에서 관리되어온 터라 사용자의 입장이 많이 고려되어 있지 못했습니다.

무채색으로 점철되어 빛바랜 것 과 같아진 서비스 화면과 개발자의 입장에서 설계된 화면 플로우들은 모두 개선 대상이었습니다.

 

Progress

전자상거래 창업으로 인해 분석 솔루션 시장으로 돌아온 것도 거의 4년만 입니다.

그동안 모바일 앱 Attribution 시장도 성숙기에 들어섰고 경쟁업체들의 서비스 화면도 많이 바뀌어져 있었습니다.

우선 글로벌 경쟁업체들의 UX와 UI를 찾아보기 시작했습니다.

요소별로 정당성을 가진 부분들과 우리 서비스에서 필요로 하는 기본 요구조건들을 대입해 단위별로 벤치마킹을 하였습니다.

회사 내부에서 기능적 경쟁상대로 Appsflyer와 Amplitude, Adjust, Mixpanel등을 꼽았습니다.

Appsflyer는 글로벌 Attribution 분석 1위 서비스입니다.

Amplitude는 Attribution을 제외한 Analytics서비스의 최강자입니다.

Adjust와 Mixpanel은 저마다 특색있는 사용성을 통해 글로벌 강자로 자리매김한 상태입니다.

 

Appsflyer에서는 필터의 사용성과 데이터의 배치를, Amplitude에서는 각종 특수 차트(Funnel, Flow)와 UX를, Mixpanel과 Adjust에서는 컬러 바리에이션과 톤 앤 매너를 참조하였습니다.

특히 Amplitude와 Appsflyer를 많이 참조하였는데 Amplitude의 드라마틱한 사용성과 Appsflyer의 인사이트 높은 구성을 많이 참조하였습니다.

Solutions

Login, Signup

로그인과 회원가입은 백엔드에서 건내온 API를 이용해 진행하였는데, 카피라이트와 디자인, UI Components, Front-end 개발까지 모두 제가 진행하였습니다.

모든 Input은 Validation처리 하였고 회원가입 당시 앱이 이미 출시한 상태라면 출시된 앱 검색을, 개발 중이라면 패키지 이름을 작성하도록 분기 처리하였습니다.

특히 로그인 화면에선 Carousel을 우측에 전면으로 넣어 새로운 기능이나 프로모션 등의 노티를 사용자에게 직접 전달할 수 있도록 구성하였습니다.

 

LNB, GNB

LNB에선 1 depth 메뉴가 많고 커스텀 대시보드를 유저가 직접 추가할 수 있도록 설계되었습니다.

Collapse기능을 넣어 사용자의 모니터가 작아 많은 콘텐츠를 배치하기 힘들 경우 사용할 수 있도록 장치하였습니다.

 

많은 기능이 필요한 LNB완 달리 GNB는 단출하게 구성하였습니다.

서비스를 선택할 수 있는 UI는 Popover를 이용해 선택과 검색, 플랫폼 선택 탭, 새로운 서비스 추가 버튼을 모두 숨김 처리하였습니다.

화면에 많은 콘텐츠가 배치되어 있기 때문에 서비스 선택 UI에서 제공되는 많은 기능이 항상 나와 있으면 복잡도를 상승시킬 염려가 있었습니다.

또한 사용빈도가 높지 않기도 했기 때문에 히든 처리가 우선 고려되었습니다.

 

Placeholder

데이터 조회량이 너무 많은 것은 저희의 숙제였습니다.

LNB에서 대시보드 즉 리포트를 옮겨 다닐 때마다 리포트를 모두 조회해 버리면 사용자는 조회 속도 때문에 지쳐버릴 것이고 저희는 서버의 자원이 바닥날 처지였습니다.

모든 리포트마다 데이터를 미리 정제해놓는 서비스가 아니라 디멘전과 매트릭, 세그먼트를 실시간으로 적용하여 리포트 셋을 만드는 서비스였기 때문에 무조건 해결해야 할 문제였습니다.

 

그래서 준비한 것이 Report Placeholer입니다.

 

모든 대시보드나 리포트를 최초 접근할 땐 Placeholder를 띄우고 조회한 데이터가 로컬 스토리지에 적재되었을 땐 띄우지 않도록 조치했습니다.

Placeholder가 강요의 느낌을 주지 않기 위해 Openpeepe를 이용해 위트를 넣었고 현재 리포트의 조회 조건을 서머리로 보여주었습니다.

 

이번 프로젝트에서는 Openpeeps를 적극 활용하였습니다.

제가 일러스트레이터의 역량이 부족했고 프로젝트의 진행 기간도 빡빡해 원하는 퀄리티를 낼 수 없었기 때문입니다.

다행히 평소 스크랩을 해 둔 리소스 중 저작권에서 자유로웠고 제가 구축해둔 디자인 시스템에 잘 어울리는 톤 앤 매너였습니다.

 

결국 Pleceholder 뿐만 아니라 각종 Loader에서 사용하게 되었고 다른 기능들의 최종 컨펌 화면에서도 사용하기도 하였습니다.

현재의 서비스는 1년 넘게 준비 중인 대규모 프로젝트입니다.

보여드릴 것도 많고 자료도 많이 있습니다.

 

다른 포스트와는 달리 몇 부에 걸쳐 작성하도록 하겠습니다.

 

Wise*racker service 01. Summary & Login, Signup, GNB, LNB, Placeholder

Wise*racker service 02. UI Components

Wise*racker service 03. Audience, Funnel, Flow, Message
Wise*racker service 04. User Custom Dashboard

Term

2019-07-01 ~
진행 중

Worker

모두 본인

Stack

React, Redux

Tools & Service

Sketch, Zeplin, Git