위젯 관리

대시보드 캔버스에 위젯을 추가하고 배치하여 원하는 레이아웃을 구성하는 방법을 설명합니다.

위젯 추가하기

1. 왼쪽 위젯 라이브러리 패널을 엽니다.
2. 원하는 위젯 유형을 선택합니다.
3. 위젯을 드래그하여 캔버스 위로 이동하거나 클릭하여 추가합니다. 드래그 중에는 캔버스 grid에 배치 미리보기가 표시되어 정확한 위치를 잡을 수 있습니다.

위젯 유형

위젯은 카테고리별로 분류됩니다. 차트 카테고리는 Visualizations(이전 명: Charts)로 명명되었습니다.

Statistics

통계 카드 (Statistic Card)

핵심 지표(KPI)를 강조하여 표시하는 위젯입니다.

• 용도: 총 매출, 활성 사용자 수, 전환율 등 단일 수치 강조
• 설정 옵션:
  • 접두사 (예: $, ₩)
  • 접미사 (예: %, 건)
  • 값 폰트 크기 컨트롤: 카드 안 큰 숫자의 크기를 단계별로 조정 가능 (위젯 크기에 맞춰 시각 균형을 잡을 때 유용).

게이지 (Gauge)

목표 대비 현재 값의 달성률을 시각화합니다.

• 용도: 목표 달성률, 서버 사용률, 진행 상황
• 설정 옵션: 최소/최대 값, 목표 값(Target)

Visualizations

막대 차트 (Bar Chart)

범주별 데이터를 비교하는 데 적합한 차트입니다. 스택(Stacked) 모드 지원.

선 차트 (Line Chart)

시계열 데이터의 추세를 시각화합니다. 데이터 포인트 표시(Show Points) 옵션 제공.

산점도 (Scatter Chart)

두 수치형 변수 간의 분포·상관관계를 보여줍니다.

스크린샷 TODO

산점도 위젯이 캔버스에 배치된 상태. 두 축에 측정값이 매핑되어 점의 분포를 보여줍니다.

• 용도: 두 지표 간 관계 시각화, 이상치 식별
• 설정 옵션: X축·Y축 필드, 색상 분류 필드

파이 차트 (Pie Chart)

전체 대비 비율을 시각화합니다. 파이/도넛 토글, 범례·퍼센트 표시 옵션.

히트맵 (Heatmap)

두 차원의 교차점에서 값의 강도를 색상으로 표현. 색상 스케일은 Sequential / Diverging 선택.

지도 (Map)

위치 기반 데이터를 지도 위에 시각화합니다.

Tables

데이터 테이블 (Data Table)

상세 데이터를 표 형태로 표시합니다. 페이지당 행 수, 정렬, 검색 필터 옵션.

Content (콘텐츠)

마크다운 텍스트 박스 (Markdown Text Box)

설명·헤더·주석 등을 마크다운으로 작성하는 위젯입니다. 대시보드의 섹션 구분이나 가이드 문구에 사용합니다.

스크린샷 TODO

마크다운 위젯 — 편집 모드(미리보기 토글)와 뷰어 모드를 비교 가능하면 좋습니다.

• 마크다운 GFM 지원(표, 체크박스, 코드 블록).
• 데이터 소스·쿼리 설정 없음 — 콘텐츠 위젯입니다.

외부 사이트 임베드 (External Site Embed)

http(s) URL을 iframe으로 임베드하는 위젯입니다.

스크린샷 TODO

External Site Embed 위젯 — URL 입력 + 임베드된 외부 사이트가 보여야 합니다. 새 탭에서 열기 액션도 함께 보여주세요.

• 용도: 사내 위키, BI 대시보드, 외부 모니터링 페이지 등을 한 화면에 통합.
• 설정 옵션: URL, 스크롤 허용, 마우스 휠 우선 전달.
• 새 탭에서 열기 액션: 위젯 헤더 메뉴에서 임베드된 URL을 새 탭으로 엽니다.
• 보안 주의: 임베드 대상 사이트의 X-Frame-Options / CSP frame-ancestors 정책이 iframe 임베드를 거부하면 표시되지 않을 수 있습니다.

Controls

날짜 범위 선택기 (Date Range Selector, DRS)

대시보드 위젯들의 조회 기간을 제어하는 컨트롤 위젯이자 캔버스 상단의 전역 컨트롤입니다.

• 용도: 대시보드 전체 또는 연결된 위젯의 날짜 범위를 동적으로 변경.
• 자동 적용: 위젯이 명시적 시간 컬럼/기간을 설정하지 않은 경우 DRS 범위가 자동으로 위젯 쿼리에 주입됩니다(ADR-0054).
• 사용자 지정 범위 잠금: DRS를 사용자 지정 고정 범위로 잠그면 자동 새로고침이 비활성화됩니다.
• 설정 옵션: 기본 범위(최근 7일·30일·사용자 지정), 사용자 지정 허용 여부, 날짜 표시 형식.

위젯 배치 및 크기 조절

• 이동: 위젯의 헤더 부분을 드래그하여 원하는 위치로 이동합니다. 드래그 중 grid에 배치 미리보기.
• 크기 조절: 위젯 우측 하단의 핸들을 드래그하여 크기를 조절합니다.
• 레이아웃 자동 조정: 위젯을 이동하면 다른 위젯들이 자동으로 재배치되어 빈 공간을 최소화합니다.

위젯별 액션 메뉴

각 위젯 우상단의 ⋯ 메뉴에서 다음 작업이 가능합니다.

스크린샷 TODO

위젯 우상단의 ⋯ 액션 메뉴가 펼쳐진 상태. 복제·삭제·내보내기·잠금 등의 항목이 보여야 합니다.

• 복제(Duplicate): 동일한 설정의 위젯을 빠르게 생성
• 삭제(Delete): 위젯 제거
• 내보내기(Export): 위젯 자체 또는 위젯 데이터 내보내기(차트 위젯 유형에 따라)
• 새 탭에서 열기: External Site Embed 위젯 전용

위젯 설정

위젯을 선택하면 오른쪽 구성 패널이 활성화됩니다. 패널 좌측 가장자리를 드래그해 폭을 조절할 수 있습니다.

1. 기본 설정 (General)

• 제목: 위젯 상단에 표시될 제목을 입력합니다.
• 설명: 위젯에 대한 부가 설명을 입력합니다.

2. 데이터 설정 (Data)

• 데이터 모드: Simple 또는 Query 모드 선택. Query 모드에서는 Monaco 에디터와 AI 어시스턴트를 사용합니다.
• 데이터 소스: 연결할 데이터셋 선택
• 필드 매핑: X축, Y축, 값 필드 지정

자세한 내용은 데이터 설정 문서를 참조합니다.

3. 스타일 (Style)

• 차트 종류에 따라 색상, 범례 표시 여부, 축(Axis) 설정 등 시각적 요소를 조정할 수 있습니다.