Jump to content
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr ×
과거의 기술자료(읽기 전용): https://tech.devgear.co.kr

멋진 대시보드를 통한 시각화를 윈도우, 모바일, 웹에서 쉽게 만드는 방법


Recommended Posts

이안 바커 (Ian Barker)"How Delphi Helped Us Stay Out Of Jail" 을 번역했습니다. (원문 작성: 2021년 4월, 최종 번역: 2024년 1월)

데이터를 그래픽으로 시각화 하여 보여주는 대시보드는 어디에서나 볼 수 있다. 특히 요즘같은 팬데믹 시기에는 일일 및 주간 트렌드가 사람들에게 매우 큰 관심을 받는다. 이 글에서는 멋진 대시보드를 살펴보겠다. 이 대시보드는 여러분의 필요에 맞게 커스터마이징 하기가 매우 쉽다.

목차


시각화는 유용하고 아름다운 것을 만들어 내는 예술이다.

객관적 사실과 숫자들이 담긴 표에서 얻을 수 있는 것은 한계가 있다. 언젠가는, 데이터를 그래픽으로 시각화하게 된다. 때로는 그림이 천 마디 말보다 더 많은 정보를 전달한다. 그 뿐 아니라, 사용자들은 정보를 더 쉽게 받아들일 수 있다.

델파이 프로그래머들은 기본 TChart 컴포넌트에 아마 익숙할 것이다. 이 컴포넌트는 델파이의 거의 모든 버전에 번들로 제공되어 왔기 때문이다. RAD 스튜디오 최신 버전(예: 시드니)에서는 옵션 확인란에서 선택해야 컴포넌트 팔레트에 TChart 컴포넌트가 나타난다. TChart 컴포넌트의 번들 버전은 스페인에 본사를 둔 Steema Software에서 제공한다.

이 글에서 소개하는 대시보드 역시 Steema에서 데모로 제공하는 것이다. 이 데모는 TeeChart의 Pro 버전과 TeeGrid의 강력한 성능을 보여준다. 잠시 후 더 살펴보겠다.

이 대시보드로 데이터를 시각화 한 모습은?

대단히 멋지다!

spacer.png

이 대시보드 시각화 관련 정보를 어디에서 얻을 수 있나?

이 Steema 대시보드 예시는 깃허브에서 무료로 다운로드할 수 있다. https://github.com/Steema/TeeChart-FireMonkey-samples/tree/master/Dashboard 

나는 크로스 플랫폼 깃허브 데스크탑 프로젝트를 사용하여 리포지토리에서 샘플을 직접 다운로드 했다.

어떤 컴포넌트들이 필요한가?

Steema의 대시보드 시각화 예시를 직접 해보려면, Pro TeeChart 컴포넌트 버전이 필요하다. Pro 버전은 번들로 포함된 버전과는 다르다. 실제로, 번들 버전을 이미 설치했다면, 먼저 번들 버전을 완전히 제거해야 한다. Pro 버전과 충돌할 수 있기 때문이다. 또한, Steema의 TeeGrid 컴포넌트도 설치해야 한다.

TeeChart Pro 또는 TeeGrid 컴포넌트 팩이 나에게 없다면?

걱정할 필요는 없다. Steema 웹사이트에서 모든 기능을 갖춘 30일 무료 평가판을  다운로드할 수 있다. 두 컴포넌트 라이브러리들 역시 다운로드가 제공된다. 나도 이 글을 쓰기에 앞서 무료 평가판을 사용했는데 아무 문제없이 잘 작동했다.

spacer.png다음 링크로 이동하여 다운로드 하자: https://www.steema.com/product/vcl 

RAD 스튜디오에 탑재된 번들 버전의 TeeChart를 제거했는지 먼저 확인한다. 나는 이 점을 잊고 설치하는 바람에 좀 복잡해졌었다. 나와 같은 경우가 생긴다면, 새 컴포넌트 팩 둘 다 제거한다. 제거 프로그램을 사용하면 된다. 그런 다음 IDE로 이동하여 메뉴에서 "component"를 선택한 다음 "install packages"를 선택한다. 이제 아래로 스크롤 하여 TeeChart 와 TeeGrid 컴포넌트에 대한 참조가 모두 사라졌는지 확인한다. 거기에 사라지지 않고 남아있는 항목이 있다면, 그것을 클릭한 다음 "remove"를 눌러 제거한다.

이제 IDE를 닫고 TeeChart Pro와 TeeGrid 컴포넌트를 설치한다. 설치 프로그램을 사용하면 된다. 이제 모든 것이 정상적으로 작동할 것이다. 나는 이런 실수를 했지만, 여러분은 이런 실수를 할 필요가 없다.

이 대시보드 시각화는 무슨 일을 하는가?

소스 코드는 SQLite 데이터베이스에서 데이터를 읽는다. 그 SQLite는 예시 안에 포함되어 있다. 데이터 추출 대부분은 라이브바인딩(LiveBindings)을 사용해 이루어진다. 모든 데이터 액세스 컴포넌트는 FireDAC 쿼리(query) 컴포넌트들을 사용한다. 이 프로그램 안에는 데이터를 읽고 조작하는 코드들이 있는 영역 몇 개가 있다. 하지만 전반적으로 거의 모두 라이브바인딩이다. 이것이 큰 역할을 한다.

spacer.png

그러면, 대시보드 시각화의 결과가 일반 델파이 FMX 폼(form)으로 표시된다. 또는 HTML 기반 웹페이지로 추출할 수도 있다. 데모는 매우 잘 만들어져 있다. TeeChart와 TeeGrid 컴포넌트의 강력한 기능을 잘 보여 줄 뿐만 아니라, RAD 스튜디오와 델파이가 프로그래밍 소프트웨어 개발자의 일을 훨씬 쉽게 해주는데 얼마나 앞서있는지를 잘 보여준다. 나는 웹 세미나에서 "델파이는 나의 초능력"이라는 말을 종종 한다. 아름다우면서도 유용한 시각화를 볼 수 있다. 이 정도를 해내는 것은 다른 프로그래밍 언어로는 훨씬 어렵다.

spacer.png

맵과 차트는 인터랙티브하다. 그 작업들 대부분은 이 컴포넌트들 자체에서 처리한다.

spacer.png

그 밖에 다른 것이 있는가?

이 데모가 크로스 플랫폼을 지원한다고 내가 말했던가? 파이어몽키를 사용하여 시각화가 되었기 때문에 이 데모는 윈도우는 물론, 맥OS, iOS, 안드로이드에서도 작동한다. FMX리눅스(현재 일부 버전의 RAD 스튜디오에 포함되어 있다. 자세한 내용은 겟잇을 참조)는 사용해 보지 않았다. 만약 FMX리눅스에서도 이 데모가 작동한다면 아래 댓글에 의견을 남겨주기 바란다.

아무튼 이 멋진 데모를 사용해 보길 바란다. Steema의 컴포넌트들은 그 자체로도 매우 우수하지만, 이 대시보드와 함께 사용하면 앱에 더욱 훌륭한 기능을 추가할 수 있다. 무슨 플랫폼이든 데스크탑이든 모바일이등 관계없다.

 

FMX 프레임워크에서 대시보드로 시각화 하려고 할 때 사용할, 훌륭한 UI 컴포넌트와 멋진 스타일을 찾고 있는가? Cross-Platform App Builder를 사용해보자. 이것을 사용하면 디자인 작업이 단순해진다. 게다가 디자인의 무한한 가능성을 활용할 수 있다.

이 댓글 링크
다른 사이트에 공유하기

이 토의에 참여하세요

지금 바로 의견을 남길 수 있습니다. 그리고 나서 가입해도 됩니다. 이미 회원이라면, 지금 로그인하고 본인 계정으로 의견을 남기세요.

Guest
이 토픽(기고/질문)에 답하기

×   서식있는 텍스트로 붙여넣기.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   이전에 작성한 콘텐츠가 복원되었습니다..   편집창 비우기

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

중요한 정보

이용약관 개인정보보호정책 이용규칙 이 사이트가 더 잘 작동하기 위해 방문자의 컴퓨터에 쿠키가 배치됩니다. 쿠키 설정 변경에서 원하는 설정을 할 수 있습니다. 변경하지 않으면 쿠키를 허용하는 것으로 이해합니다.