Wise*racker service 02. UI Components

대규모 Attribution & Analytics 서비스답게 UI 컴포넌트가 많이 필요했습니다.

기본 구성 UI(Grid, Btn, Table, Drawer, Select, Popover, Calendar, Tooltip 등)와 함께 서비스에서 사용할 전용 특수 UI(Flow, Funnel, Chart, Loader, Timeline 등)가 필요했습니다.

UI Component들은 모두 복합적으로 대화형으로 구성될 때도 있고 단일 구성으로 리포트를 구성될 수도 있었습니다.

 

Calendar

서비스에서 사용되는 캘린더는 꼭 Date range형태가 기본 제공이어야 했습니다.

시작일과 종료일을 선택해 조회 기간을 선택할 수 있어야 하고 기본 정의된 일자 세트도 제공해야 했습니다.

클릭 액션에 대응되는 캘린더 대신 직접 입력해 기간을 조회할 수 있는 Input 도 기본 포함입니다.

캘린더는 시작일과 종료일과 함께 오늘도 모두 UI에 포함될 수 있도록 디자인되었습니다.

 

Drawer

Modal로 표현하기 힘든 콘텐츠도 많습니다.

조작해야 할 정보가 많거나 프로세스를 분리하여 독립적인 액션을 제공할 땐 Drawer로 제공하였습니다.

 

Global Filter

모든 대시보드와 리포트는 하나의 글로벌 필터의 설정값에 종속됩니다.

글로벌 필터에선 기간과 조회 기간 타입이 리포트의 기본 설정을 담당하게 되고 채널과 플랫폼 등을 필터로 지정할 수 있도록 정의하였습니다.

더불어 디멘전과 매트릭을 조정하여 리포트를 풀 커스텀 할 수 있도록 제공하였습니다.

또한 항상 빠르게 조작해야 할 필요가 있는 UI였기때문에 스크롤이 일정량 이상이 되면 position을 fixed로 고정하도록 조치하였습니다.

 

Loader

리포트 조회 시 데이터가 없거나, 글로벌 필터 조작 시 조회 조건에 해당하는 데이터가 없을 경우 위와 같은 로더를 사용하였습니다.

딱딱할 수 있는 데이터 분석 서비스에서 위트 있는 요소를 삽입해 지루함을 줄이려 노력하였습니다.

Openpeeps를 사용해 캐릭터 디자인하는 시간을 줄였고 덕분에 짧은 시간에 확보한 많은 애셋을 사용하여 매번 다른 캐릭터로 표현될 수 있도록 디자인하였습니다.

 

 

Input combination

데이터 조회 조건을 만들고 스케줄링이 필요할땐 수많은 인풋들의 조합이 필요합니다.

Input text와 area, select, checkbox, radio 등의 수많은 인풋 요소들이 각종 텍스트들과 함께 배치되어야 합니다.

기능 요건마다 대화형으로 풀어내야 할 때가 있고 단문 형식으로 풀어내야 할 때가 있는데, 작성해야 할 양식이 프로세스를 길게 가지고 있을 경우 대화형으로 풀어내곤 합니다.

단 하나의 양식을 만들 땐 단문형식으로 풀어내곤 하고요.

 

수많은 인풋의 조합에서 가장 중요한 것은 필수 값의 입력을 어떻게 자연스럽게 강요할 수 있느냐입니다.

수많은 인풋들이 한 번에 표현되면 사용자는 스트레스를 받곤 합니다.

최초에는 사용자가 선택하는 질문을 제공하고 선택한 질문에 맞게 하위 인풋들을 표현하는 방식이 좋습니다.

사용자가 선택한 값을 화면에서 즉각적으로 표현하는것도 중요한 방법 중 하나입니다.

사용자가 스스로 중요한 값 들을 입력하고 있음을 느끼게 하는 것입니다.

 

또한 필수로 입력 받아야 하는 인풋은 레이블에 * 등을 통해 필수값임을 확실히 인지시켜주는 것이 필요하고 커서가 Unfocused 되었을 경우 발리데이션을 즉각 실행하여 필수 값을 지나쳤음을 인지시켜주는 것이 좋습니다.

 

 

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