brunch

You can make anything
by writing

C.S.Lewis

by 빅데이터스터디 Mar 09. 2022

대시보드 빠르게 개발하는 법

경영 데이터를 전면적으로 전시할 수 있고 관리 전략을 상화시킬 수 있다!

안녕하세요! 빅데이터 스터디입니다~ 이번 시간에는 대시보드를 빠르게 개발하는 방법을 알려 드리겠습니다.


기업의 디지털화가 진전됨에 따라 관리자의 데이터 가치에 대한 활용의식이 높아지고 데이터 분석에 대한 수요가 나날이 증가하고 있습니다.특히 경영진에겐 시각화 대시보드가 인기가 높습니다.


멋있는 관리 대시보드 

한편, 대시보드는 경영 데이터를 전면적으로 전시할 수 있고 관리 전략을 상화시킬 수 있습니다. 다른 한편, 과학기술 감각이 충만한 화면은 기업의 이미지를 높일 수 있습니다. 

이글에서 대시보드를 빠르게 개발하는 방법을 알려 드리겠습니다.






대시보드 개발 프로세스

이 그림은 대시보드 프로젝트 개발의 프로세스입니다. 그 중 가장 중요한 것은 비즈니스 요구 분석입니다. 비즈니스 요구 사항을 조사하고 주요 지표를 논의하고 선택하며 하드웨어 디스플레이에 대한 수요가 있으면 하드웨어 장비 요구 사항을 조사하고 선택해야합니다.


지표 식별을 완료한 후 성과지표 분석의 차원에 따라 데이터 정보를 표시할 적절한 시각적 차트를 선택해야 합니다. 차트 유형을 결정한 후 조판 및 레이아웃을 수행하고 프로토타입 다이어그램을 결정합니다.


차트 선택은 다음 그림을 참조할 수 있습니다.

출처: domo



시작하기


이번 사용할 FineReport(파인리포트)는 대시보드 툴로서 풍부한 시각화 기능과 간단한 조작성을 가지고 있습니다. low-coding 기반으로 복잡한 보고서, 대시보드, 데이터 마이닝, 출력 인쇄, 데이터 입력, 권한 관리, 모바일 단말 등을 실현할 수 있습니다.


1단계: 데이터 준비 

FineReport공식홈페이지에서 무료체험판을 다운로드하여 설치합니다. 

 공식홈페에지 접속: https://www.finereport.com/kr/  

신규로 대시보드 화면을 구축합니다. 사용할 데이터는 디자이너 설치 시 내장되어있는 샘플 DB인 [FRDemoEN]를 사용하겠습니다.
1) FineReport의 개발 툴인 [리포트 디자이너]의 상단 메뉴에서 [파일] > [새로운 폼]  메뉴를 클릭하여 신규 템플릿을 생성합니다.

1) 템플릿 생성 후 왼쪽 하단 데이터셋 영역에서 버튼을 클릭한 후, [디비 조회]를 선택하면 데이터셋 쿼리 작성 창이 열립니다.


2)DB는 [FRDemoEN]를 선택하고 하기SQL쿼리를 데이터셋 편집창에 붙여 넣습니다.

[ SELECT * FROM Sales_Volume ]
버튼을 클릭하여 편집한 데이터셋의 샘플 데이터를 확인합니다.



2 단계 :대시보드 디자인 

대시보드 디자인 신규 대시보드 생성한 후 화면에 대한 구체적 디자인은 하얀색 바탕의 blank 캔버스에서작업하게 됩니다. 차트, 위젯 등과 같은 다양한 컴포넌트를 사용하여 화면을 구성할수있습니다.  컬럼 차트, 파이 차트 및 확장차트-KPI 차트를 blank 캔버스로 드래그앤드롭합니다. 각 차트의 크기는 필요에 따라 조절할 수 있습니다.


KPI 지표와 같은 색상으로 보고서 배경을 설정하고 [body] 버튼을 클릭합니다. 

[속성] > [고급] > [양식] 버튼을 클릭하여 [컬러]를 설정하고 구체적색상(예:블루색상)을선택합니다.



3단계 : 차트 디자인 

차트에 대한 설정을 편집하면서 원하는 효과를 추가할 수 있습니다. 여기에서 넘어가겠습니다. 


기본적인 막대형 차트, 꺾은선형 차트, 방사형 차트 및 기타 차트 외에도 FineReport는 시각적 효과가 뛰어난 확장 차트도 제공합니다. 

이러한 3D 및 애니메이션 효과를 사용하여 차트 구성 요소를 보다 간결하고 멋지게 만들 수 있습니다. 확장 차트 플러그인을 설치한 후 끌어서 놓기 코드를 작성할 필요 없이 캔버스에 직접 드래그 앤 드롭하여 사용할 수 있습니다.


색상 일치 외에도 제목 상자, 동적 배경 등을 차트에 추가할 수 있으며 js를 사용하여 동적 회전을 달성할 수도 있습니다. 제품의 도움말 문서에는 다양한 기능에 대한 자세한 코드가 나와 있으며, 자세한 내용은 

FineReport 홈페이지에서 참조하시기 바랍니다.


또 배색 처리를 잘 못하는 분들을 위한 배색 사이트 추천:



최종 효과



제작 완료의 최종 효과는 위의 그림과 같습니다. 상상력을 발휘하여 더욱 멋진 대시보드를 만드십시오.



무료 대시보드 템플릿 공유


지금 무료 대시보드 템플릿을 구독자와 공유합니다. 데이터를 수정하는 것만으로 대시보드 개발이 가능합니다. 관심 있는 구독자는 클릭하여 무료 체험할 수 있습니다. FineReport에서도 다양한 대시보드 템플릿이 내장되어 있습니다. 


대시보드 템플릿 예시





앞으로 더 많은 데이터 분석과 빅데이터에 대한 내용을 여러분에게 가져다 줄 것입니다. 기대 많이 해 주세요~ 데이터 분석에 관심이 있으시면 페이스북에서 우리 팔로우해주세요~ @bigdatastudy

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari