대시보드 빌더 R3 사용자 메뉴얼
폴스타 10 대시보드 빌더 R3 release버전 10.2.3 사용자 메뉴얼입니다.
대시보드 생성 및 편집
대시보드 생성 및 편집을 위해 "대시보드빌더"에 최초 접속 시 기본적인 대시보드 생성 방법을 튜토리얼(따라하기)로 제공됩니다.
노트
튜토리얼을 통해 대시보드빌더의 간단한 사용법을 제공합니다. 튜토리얼은 최초 접속 시에만 활성화되면 최초 실행 이후에는 활성화되지 않습니다.
주요 화면 구성
대시보드 생성 및 편집을 위한 대시보드빌더의 화면 레이아웃은 다음과 같습니다.
레이아웃 설명
상단부(헤더) : 파인더 버튼, 프로필이 배치되어 있습니다.
좌측 메뉴 : 레이어 트리와 에셋&컴포넌트를 전환하여 사용할 수 있도록 구성되어 있습니다.
메인 캔버스 : 대시보드를 생성 및 편집할 수 있는 영역이며 스크롤 줌/아웃. 드래그를 통해 자유롭게 대시보드를 제작할 수 있는 영역입니다.
우측 메뉴 : 디자인 설정과 전역변수 설정을 탭 전환으로 사용할 수 있도록 구성되어 있습니다.
상단부 (헤더)
상단부에서는 파인더 버튼, 프로필(현재 접속 계정정보)이 배치되어 있습니다.
상단부 설명
제품명 : 현재 대시보드 빌더 솔루션명을 제공합니다.
파인더 불러오기 : 새 프로젝트를 생성하거나 파인더를 불러올 수 있습니다.
프로필 : 현재 대시보드빌더에 접속해 있는 사용자의 프로필(계정)을 제공합니다.
좌측 메뉴
좌측메뉴는 레이어 트리와 에셋&컴포넌트를 전환하여 사용할 수 있도록 탭버튼 형식으로 구성되어 있습니다.
좌측 메뉴 설명
레이어 : 대시보드의 제작에 필요한 에셋&컴포넌트를 선택하면 하나의 레이어가 생성되며 레이어를 통해 대시보드를 쉽게 제작할 수 있습니다.
에셋 & 컴포넌트 : 대시보드에 필요한 컴포넌트(차트 등), 이미지, 동영상에 대한 목록을 제공합니다.
메인 캔버스
메인 캔버스 영역은 대시보드를 생성하여 제작할 수 있는 영역이며 캔버스 영역안에서 자유롭게 대시보드를 제작할 수 있습니다.
노트
우측메뉴 디자인 프레임을 제작하고자 하는 대시보드의 해상도에 맞게 선택하여 시작할 수 있습니다.
우측 메뉴
좌측메뉴는 레이어 트리와 에셋&컴포넌트를 전환하여 사용할 수 있도록 탭버튼 형식으로 구성되어 있습니다.
노트
기본적으로 제공되는 4가지 해상도를 선택하여 제작할 수 있지만 해상도 선택후 해당 해상도의 width, height 값을 직접 수정하여 변경할 수 있습니다.
우측 메뉴 설명
디자인 : 대시보드 해상도에 맞는 대시보드 프레임을 선택하여 제작할 수 있습니다. 기본적으로 제공되는 해상도는 아래와 같습니다. - 4K : 3840 x 2160 - 2K : 2560 x 1440 - Full HD : 1920 x 1080 - HD : 1280 x 720
전역변수 : 프로젝트 1개당 여러개의 전연변수를 가질 수 있으며, '헤더'와 '파라미터'에서 {{전역변수이름}}을 통해 전역변수에 들어있는 값들을 사용할 수 있습니다.
파인더 (탐색기)
대시보드 빌더에서는 파인더(탐색기) 기능을 제공하고 있습니다. 파인더를 통해 다른 프로젝트로 이동하거나 새 프로젝트를 생성할 수 있으며 프로젝트 목록, 에셋(이미지, 동영상, 폰트) 목록을 관리할 수 있습니다.
노트
프로젝트 다운로드 및 업로드 기능을 통해 외부에서 제작한 대시보드를 쉽게 불러오거나 내보낼 수 있습니다. 대시보드 전체파일이 아닌 Json 파일형태의 파일 하나로 제공하기 때문에 대시보드 유지보수 시 또는 대시보드 공동작업 시 효율적으로 공유하고 활용할 수 있다.
파인더 설명
파인더 메뉴 : 프로젝트, 에셋(이미지, 동영상, 폰트)을 선택할 수 있습니다.
검색 : 검색을 통해 찾고자하는 프로젝트, 에셋을 빠르게 검색할 수 있습니다.
목록 : 프로젝트, 에셋 목록을 제공합니다.
파일관리 : 관리대상의 파일을 추가하거나 삭제할 수 있습니다.
파인더 열기
파인더는 메인 캔버스 영역 상단 아이콘 선택 후 '전체 프로젝트 목록 열기' 또는 '이미지/에셋 관리하기'를 선택하면 파인더 창이 생성됩니다.
파인더 프로젝트
전체 프로젝트 목록 열기를 통해 대시보드 프로젝트 목록을 관리할 수 있습니다. 프로젝트 목록에서는 프로젝트별 프로젝트명, 생성자, 최근 수정일, 생성일 정보를 제공하며 체크박스를 통해 프로젝트를 선택할 수 있고 선택된 파일을 일괄삭제, 다운로드 할 수 있습니다.
노트
프로젝트는 ‘json’파일 형태로 다운로드 하거나 업로드할 수 있습니다.
파인더 이미지
이미지/에셋 관리하기를 통해 대시보드 이미지 목록을 관리할 수 있습니다. 이미지 파일은 외부에서 자유롭게 드래그하여 파인더(탐색기)로 추가할 수 있습니다.
노트
이미지 업로드는 다음 형식의 파일만 업로드 가능합니다. (png, jpg, gif, svg)
파인더 동영상
이미지/에셋 관리하기를 통해 대시보드 동영상 목록을 관리할 수 있습니다. 동영상 파일은 외부에서 자유롭게 드래그하여 파인더(탐색기)로 추가할 수 있습니다.
노트
동영상 업로드는 다음 형식의 파일만 업로드 가능합니다. (mp4)
파인더 폰트
이미지/에셋 관리하기를 통해 대시보드 폰트 목록을 관리할 수 있습니다. 폰트 파일은 외부에서 자유롭게 드래그하여 파인더(탐색기)로 추가할 수 있습니다.
노트
폰트 업로드는 다음 형식의 파일만 업로드 가능합니다. (ttf. otf)
대시보드 만들기
프로젝트 생성 및 삭제 : 대시보드를 제작하기 위해서는 가장 먼저 프로젝트를 생성해야 합니다. 프로젝트는 대시보드를 구성하는 모든 파일이 저장되는 가장 상위의 단위입니다.
노트
프로젝트는 메인 화면 상단에서 ‘새 프로젝트 생성’ 버튼을 눌러 생성할 수도 있고, 파인더(탐색기)의 프로젝트 메뉴에서 ‘+’ 버튼을 눌러 생성할 수도 있습니다.
프로젝트 다운로드 및 업로드
대시보드 프로젝트는 json 파일 형태로 다운로드 및 업로드 할 수 있습니다.
프레임
프로젝트가 생성되었으면 이제 대시보드를 만들 수 있습니다. 가장 먼저 밑바탕의 역할을 하는 프레임을 생성해야합니다. 프레임은 우측 사이드 바에서 디자인 탭의 ‘대시보드 프레임’에서 원하는 해상도를 선택하여 캔버스 영역으로 드래그하거나, 캔버스에서 마우스 우클릭 하여 ‘대시보드 프레임 생성하기’ 메뉴를 통해 선택한 해상도로 프레임을 생성할 수 있습니다.
노트
현재 지원가능한 해상도는 4K(3840X2160), 2K(2560X1440), Full HD(1920X1080), HD(1280X720)입니다.
레이어
프레임을 생성하였으면 이제 레이어를 만들어 대시보드 화면을 구성합니다. 생성할 수 있는 레이어의 종류는 텍스트와 도형 레이어가 있고, 캔버스 영역에서 마우스 우클릭을 하여 레이어를 생성할 수 있습니다.
텍스트
텍스트 레이어는 대시보드에서 주로 각 지표의 타이틀을 구성하는데 쓰이며, 폰트, 크기, 정렬 등 여러 가지 속성을 통해 원하는 스타일로 작성할 수 있습니다.
도형
도형 레이어는 대시보드에서 다양한 용도로 쓰일 수 있으며, 사각형, 원, 세모 중에서 선택할 수 있습니다. (현재는 사각형 레이어만 지원) 단위입니다.
노트
사각형 레이어는 최초 100X100 사이즈로 생성되며, 내부는 랜덤 색상으로 채워집니다.
에셋&컴포넌트
텍스트와 도형을 제외한 나머지는 ‘에셋&컴포넌트’에서 찾을 수 있습니다. ‘컴포넌트’에서는 데이터소스가 맵핑된 종류별 차트를 만들 수 있고, ‘이미지’, ‘동영상’을 통해 외부에서 이미지 파일 및 동영상도 삽입할 수 있습니다.
노트
생성할 수 있는 컴포넌트의 종류로는 차트, 데이터, 3D, 기타, 모션차트, 링크 가 있으며, 각각 여러 형태를 지원합니다. 좌측 메뉴에서 드래그 또는 마우스 우클릭으로 컴포넌트를 생성합니다.
차트
바, 라인, 영역, 스케터, 파이, 헥사곤, 스택, 게이지 등 다양한 차트를 제공합니다.
데이터
그리드, 데이터 텍스트, 데이터 이미지, 범례, 타임라인, 타임 등 데이터 관련 컴포넌트를 제공합니다.
기타
코딩을 통해 커스텀하기 쉽도록 리액트 노드 컴포넌트를 제공합니다.
모션차트
대시보드에서 주요 서비스 그룹의 상태를 애니메이션 효과를 주어 표현하기 위해 많이 사용하는 컴포넌트 입니다. 아래와 같이 서클 모양을 이루며 특정 방향과 주기를 가지고 회전하는 효과를 줍니다.
노트
배경 이미지, 캐러셀 요소 이미지, 캐러셀 요소 임계치 이미지를 통해 표현할 수 있습니다.
링크
전환할 대상의 설정 값(노드 아이디)을 통해 화면전환을 제공합니다.
노트
링크 컴포넌트는 링크탭, 링크탭 토글 스위치 두개의 컴포넌트를 제공하며 대시보드 성격에 맞게 선택하시면 됩니다.
링크 컴포넌트 설명
링크탭 : 2개 이상의 메뉴를 통해 링크 버튼을 만들 때 주로 사용합니다.
링크 탭 토글 스위치 : 토글 스위치 형식의 탭 전환이 필요할 때 주로 사용합니다.
이미지
좌측 메뉴의 이미지 모음에서 사용할 이미지를 캔버스로 드래그 하여 사용합니다.
노트
이미지 목록은 목록형, 썸네일형 두가지를 선택하여 사용할 수 있으며 이미지를 검색할 수 있습니다.
동영상
좌측 메뉴의 동영상 모음에서 사용할 동영상을 캔버스로 드래그 하여 사용합니다.
노트
동영상 목록은 목록형, 썸네일형 두가지를 선택하여 사용할 수 있으며 이미지를 검색할 수 있습니다.
데이터소스 & 컴포넌트 설정
컴포넌트 중 데이터소스를 맵핑하여 표시해야하는 경우 ‘데이터소스 & 컴포넌트 - 편집’ 버튼을 눌러 관련 설정을 해야합니다.
노트
컴포넌트 종류가 다르더라도 기본적으로 데이터소스를 맵핑하는 개념은 동일하므로 아래 공통 설명을 참고하시기 바랍니다.
설정 절차 01
먼저 데이터소스를 맵핑할 레이어를 클릭하면 우측 메뉴에서 ‘데이터소스 & 컴포넌트 - 편집’ 버튼이 나타나게 되고 이를 클릭하면 해당 설정창이 우측에서 좌측으로 드로우 됩니다.
설정 절차 02
POLESTAR LOADER 에 등록된 데이터 소스 룰 체인 중 사용할 소스를 선택합니다.
설정 절차 03
‘헤더’ 탭에서 전역변수, 데이터 요청주기를 설정하고, 데이터 맵핑 작업을 합니다. 데이터 맵핑은, ‘응답 미리보기’에서 선택한 데이터 소스의 구조를 먼저 파악한 후, 사용할 데이터가 어떤 path에 들어가있는지를 찾아야만 할 수 있습니다. 예를 들어 아래 그림에서는, ‘alarmCount1’이라는 path안에 사용하고자 하는 데이터값 (total, attention, trouble, critical, 최고등급)이 들어있는 걸 확인할 수 있습니다. 그럼 ‘threshold’ 란에 사용할 데이터의 최종 경로를 기입합니다. ‘critical’이라는 컬럼의 값을 사용하고 싶다면 ‘["alarmCount1","0","critical"]’ 이라고 입력하면 됩니다. 그리고 ‘저장’ 버튼 또는 엔터를 치면 데이터 맵핑이 완료됩니다.
동시 편집 (프로필)
복수의 사용자가 동시에 접속하여 동시 편집이 가능합니다. 우측 상단 프로필 메뉴에서 현재 접속중인 사용자 정보를 확인할 수 있습니다. 각 사용자의 작업 내용을 실시간으로 확인할 수 있습니다.
노트
이전 작업 (Ctrl+Z) 시에는 각 사용자의 작업 내용에 따라 진행됩니다.
대시보드 보기
좌측 메뉴 레이어 트리에서, 대시보드 레이어 우클릭하여’ 배포된 뷰 페이지 열기’ 또는 ‘실시간 뷰 페이지 열기’를 통해 작업한 대시보드 페이지를 확인할 수 있습니다. 배포된 경우 POLESTAR 페이지 대시보드 메뉴에서 ‘빌더 대시보드 목록’ 을 클릭하여 페이지를 볼 수도 있습니다.
대시보드 배포
배포를 통해 특정 시점의 대시보드를 저장해놓을 수 있습니다. 배포 후 대시보드를 수정하더라도 재배포하지 않으면 배포된 뷰에서는 해당 수정내용이 반영되지 않습니다. 좌측 메뉴 레이어 트리에서 대시보드 레이어에 마우스 오버하면, 망치 모양의 버튼을 눌러 현재 버전의 대시보드를 배포할 수 있습니다.
노트
화면 우측 메뉴의 ‘대시보드 히스토리 보기’에서는 배포된 이력(히스토리)을 확인할 수 있습니다.
전체 대시보드 배포 목록
전체 대시보드 배포 목록을 제공합니다. 이를 통해 최종 배포한 사용자의 이력을 관리할 수 있습니다.
노트
화면 우측 메뉴의 하단에 전체 대시보드 배포목록 “목록보기” 버튼 선택 시 드로어로 생성됩니다.
전체 대시보드 배포 목록
화면 미리보기 및 불러오기 : 배포목록 선택 시 화면을 미리보기 할 수 있으며 불러오기 기능을 제공합니다.
검색 : 검색을 통해 찾고자 하는 배포목록을 빠르게 검색할 수 있습니다.
목록 : 대시보드명, 배포일, 배포자 정보를 포함한 현재까지 배포된 대시보드 목록을 최신순으로 제공합니다.
단축키
대시보드 제작에 필요한 단축키를 제공합니다.
단축키 목록
w
캔버스 위로 이동
s
캔버스 아래로 이동
a
캔버스 왼쪽으로 이동
d
캔버스 오른쪽으로 이동
shift+w
캔버스 위로 10px 이동
shift+s
캔버스 아래로 10px 이동
shift+a
캔버스 왼쪽으로 10px 이동
shift+d
캔버스 오른쪽으로 10px 이동
esc
모든 노드 선택 해제
ctrl+c
선택된 노드 복사
delete, backspace
선택된 노드 삭제
ctrl+v
복사된 노드 붙여넣기
alt+o
전체 노드 열기(닫기)
ctrl+z
뒤로 가기
ctrl+shift+z
앞으로 가기
ctrl+shift+h
선택된 노드 숨기기(보이기)
ctrl+'
격자 보이기(숨기기)
ctrl+g
선택된 노드 그룹 맺기
ctrl+backspace
선택된 노드 그룹 해제
up (방향키)
노드 위로 1px 이동
down (방향키)
노드 아래로 1px 이동
left (방향키)
노드 왼쪽으로 1px 이동
right (방향키)
노드 오른쪽으로 1px 이동
shift+up
노드 위로 10px 이동
shift+down
노드 아래로 10px 이동
shift+left
노드 왼쪽으로 10px 이동
shift+right
노드 오른쪽으로 10px 이동
ctrl+shift+l
선택된 노드 잠금(해제)
ctrl+a
모든 노드 선택
ctrl+shift+r
사각형 레이어 생성
t
텍스트 레이어 생성
ctrl+shift+1
가로바 차트 생성
ctrl+shift+9
세로바 차트 생성
ctrl+shift+o
가로 라인 차트 생성
ctrl+shift+p
세로 라인 차트 생성
ctrl+shift+e
가로 스택 에어리어 차트 생성
ctrl+shift+s
가로 스캐터 차트 생성
ctrl+shift+8
파이 차트 생성
ctrl+shift+u
히트맵 차트 생성
ctrl+4
AG그리드 생성
ctrl+/
리액트 커스텀 노드 생성
ctrl+o
실시간 대시보드 뷰페이지 열기
ctrl+shift+7
상면 차트 생성
ctrl+shift+f
선택된 노드로 캔버스 포지션 이동
Last updated