DUOLABS
포트폴리오

사내 대시보드용 차트 부품

정유사 사내 대시보드 시스템에 올릴 차트를 화면마다 따로 만들지 않고, 여러 화면이 함께 쓰는 차트 부품으로 설계하고 개발했습니다. 대시보드는 화면마다 데이터가 다르고, 차트를 화면마다 새로 만들면 같은 종류의 차트가 화면 수만큼 생깁니다. 데이터와 표시 방식을 나눠, 어느 화면에 올려도 같은 방식으로 그려지게 했습니다. 시스템 구축 프로젝트 안에서 스스로 기획해 부품의 구조와 쓰는 법까지 정리했습니다.

Launch
2007
Client
국내 정유사
Type
데이터·시각화
01 / 04

화면마다 새로 만들던 차트를 하나로 묶은 공통 부품

사내 대시보드 시스템은 화면마다 보여 줄 데이터가 다르고, 그때마다 차트를 새로 만들면 같은 종류의 차트가 화면 수만큼 생깁니다. 한 화면 전용으로 만드는 대신, 여러 대시보드 화면에 공통으로 올려 쓰는 차트 부품을 목표로 잡았습니다. 부품이 하나라 고칠 곳도 하나이고, 그 차트를 쓰는 화면에 함께 반영됩니다.

화면마다 새로 만들던 차트를 하나로 묶은 공통 부품
02 / 04

데이터와 표시 방식을 따로 받는 설계

재사용 차트 부품은 그릴 데이터와 그리는 방식을 따로 받습니다. 데이터만 바꿔 넣으면 같은 부품이 다른 화면의 숫자를 그리고, 표시 방식만 바꾸면 같은 데이터를 다른 형태의 차트로 보여 줍니다. 한 화면 전용으로 만들면 이 둘이 한데 묶여 다른 화면에 옮겨 쓰기 어렵습니다.

데이터와 표시 방식을 따로 받는 설계
03 / 04

정보가 빽빽한 업무 화면에서도 읽히는 차트

업무용 대시보드는 한 화면에 숫자와 차트가 빽빽하게 놓입니다. 차트 종류가 달라도 대시보드 데이터가 같은 방식으로 표현되게 부품의 인터페이스를 맞췄습니다. 한 화면에 담는 정보의 양, 읽기 쉬움, 화면이 반응하는 속도를 따져 차트 표현을 다듬었습니다.

정보가 빽빽한 업무 화면에서도 읽히는 차트
04 / 04

구축 프로젝트 안에서 스스로 시작한 부품 표준화

차트 부품은 시스템 구축 프로젝트 안에서 스스로 기획해 진행한 사내 표준화 작업이었습니다. 부품의 구조와 쓰는 법을 정리해 두어, 이후 다른 화면과 프로젝트에서도 가져다 쓸 수 있는 바탕을 만들었습니다. 이때 쌓은 차트 · 시각화 기술은 다음 작업인 정유사 웹 지도 서비스로 이어졌습니다.

구축 프로젝트 안에서 스스로 시작한 부품 표준화

이 작업의 포인트

01

데이터와 표시 방식을 나눈 재사용 차트 부품

02

여러 대시보드 화면이 같은 방식으로 그리는 차트

03

스스로 기획해 정리한 부품 구조와 사용 방식

인사이트

블로그 전체 보기