snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)
Some checks failed
App Prod-Parity E2E Dispatch / dispatch (push) Failing after 10s
CD Storybook UI / build (push) Failing after 3m25s
CD Storybook UI / dispatch (push) Has been skipped
CD deploy main / website-changed-files (push) Successful in 18m8s
CI Agent Skills / changed-files-check (push) Successful in 18m9s
CI Create App E2E minimal / changed-files-check (push) Successful in 24s
CI Create App / changed-files-check (push) Successful in 26s
CI Docs / changed-files-check (push) Successful in 26s
CI Emails / changed-files-check (push) Successful in 28s
CI Example App Hello World / changed-files-check (push) Successful in 23s
CI Front / changed-files-check (push) Has been skipped
CI Example App Postcard / changed-files-check (push) Successful in 27s
CI UI / changed-files-check (push) Has been skipped
CI Utils Test / changed-files-check (push) Successful in 45s
CI Twenty Apps / discover (push) Successful in 1m3s
CD deploy main / deploy-main (push) Failing after 3s
CI Agent Skills / agent-skills-validate (push) Has been skipped
CI Create App / create-app-test (lint) (push) Has been skipped
CI Emails / emails-test (push) Has been skipped
CI Front / front-task (lingui:compile) (push) Has been skipped
CI Front / front-task (lint) (push) Has been skipped
CI Example App Postcard / example-app-postcard (push) Has been skipped
CI UI / ui-task (lint) (push) Has been skipped
CI UI / ui-task (pack-size) (push) Has been skipped
CI UI / ui-task (size) (push) Has been skipped
CI UI / ui-task (test) (push) Has been skipped
CI UI / ui-task (typecheck) (push) Has been skipped
CI Utils Test / utils-test (push) Has been skipped
CI Twenty Apps / ${{ matrix.app.name }} (push) Has been skipped
CI Emails / ci-emails-status-check (push) Successful in 2s
CI Example App Hello World / ci-example-app-hello-world-status-check (push) Successful in 2s
CI Example App Postcard / ci-example-app-postcard-status-check (push) Successful in 3s
CI UI / ui-sb-test (push) Has been skipped
CI Utils Test / ci-utils-test-status-check (push) Successful in 2s
CI Twenty Apps / ci-twenty-apps-status-check (push) Successful in 2s
CI UI / ci-ui-status-check (push) Successful in 2s
CI Desktop / desktop (push) Failing after 1m8s
Push docs to Crowdin / Push documentation to Crowdin (push) Failing after 55s
Push translations to Crowdin / Extract and upload translations (push) Failing after 5s
Push website translations to Crowdin / Extract and upload website translations (push) Failing after 5s
CI Create App / create-app-test (test) (push) Has been skipped
CI Create App / create-app-test (typecheck) (push) Has been skipped
CI Docs / docs-lint (push) Has been skipped
CI Example App Hello World / example-app-hello-world (push) Has been skipped
CI Front / front-task (lingui:extract) (push) Has been skipped
CI Front / front-task (test) (push) Has been skipped
CI Front / front-task (typecheck) (push) Has been skipped
CI UI / ui-sb-build (push) Failing after 1m32s
CI Twenty Apps / ${{ matrix.app.name }} (${{ matrix.server-source }}) (push) Has been skipped
CI Agent Skills / agent-skills-publish (push) Has been skipped
CI Create App / ci-create-app-status-check (push) Successful in 2s
CI Agent Skills / agent-skills-remote-source (push) Has been skipped
CI Create App E2E minimal / create-app-e2e-minimal (push) Has been cancelled
CI E2E Main / e2e-test (push) Has been cancelled
CI Front / front-sb-build (push) Has been cancelled
CI Front / front-build (push) Has been cancelled
CI Create App E2E minimal / ci-create-app-e2e-minimal-status-check (push) Has been cancelled
CI E2E Main / ci-e2e-main-status-check (push) Has been cancelled
CI E2E Main / notify-main-ci-failure (push) Has been cancelled
CI E2E Main / qa-scout-comment (push) Has been cancelled
CI Front / front-sb-test (push) Has been cancelled
CI Front / front-sb-screenshots (push) Has been cancelled
CI Front / ci-front-status-check (push) Has been cancelled
DPA Sub-Processor Sync / sync-subprocessors (push) Failing after 3s
AI Catalog Sync / sync-catalog (push) Failing after 2s

This commit is contained in:
upstream-mirror
2026-09-17 23:28:13 +05:00
commit e7da97194a
32688 changed files with 4208681 additions and 0 deletions

View File

@@ -0,0 +1,275 @@
---
title: 차트 설정
description: 필요에 맞게 데이터를 정확히 표시하도록 차트를 구성하세요.
---
import { ChartIcon } from '/snippets/chart-icon.mdx';
## 차트 설정에 액세스
1. 대시보드 오른쪽 상단에서 **편집** 버튼을 클릭합니다
<img src="/images/user-guide/dashboard/dashboard-edit.png" alt="편집 모드" />
2. 대시보드가 편집 모드로 전환됩니다
3. 아무 위젯이나 클릭하여 선택합니다
4. 오른쪽에 설정 패널이 열립니다
설정은 다음 섹션으로 구성됩니다:
* **데이터**: 가져올 데이터와 필터링 방법
* **X축**: 범주를 그룹화하고 정렬하는 방법(막대/선 차트)
* **Y축**: 무엇을 측정하고 어떻게 표시할지(막대/선 차트)
* **스타일**: 색상, 레이블, 시각적 옵션
<Note>
일부 설정은 다른 설정이 구성되었을 때만 표시됩니다. 예를 들어, **날짜 세분성**은 날짜 필드를 선택했을 때만 표시됩니다.
</Note>
---
## 데이터 설정
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="database" />소스 </span>
데이터를 가져올 객체를 선택합니다.
1. **소스**를 클릭합니다
2. 객체를 선택합니다(기회, 사람, 회사 등).
모든 표준 및 사용자 지정 객체를 사용할 수 있습니다. 선택한 객체에 따라 필드 옵션이 달라지므로 소스를 변경하면 다른 설정이 초기화됩니다.
<img src="/images/user-guide/dashboard/dashboard-chart-settings-source.png" alt="소스" />
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filter" />필터 </span>
차트에 포함할 레코드를 제한합니다.
1. **필터**를 클릭합니다
2. 필터 빌더가 열립니다
3. **+ 필터 추가**를 클릭합니다
4. 필드, 조건, 값을 선택합니다
5. 필요에 따라 필터를 더 추가합니다
필터는 테이블 보기에서와 동일하게 동작합니다. 이를 사용해 데이터의 특정 세그먼트에 집중하세요.
**예시**: 단계가 "Won"인 기회만 필터링하여 성사된 거래만 표시합니다.
<img src="/images/user-guide/dashboard/dashboard-chart-settings-filters.png" alt="필터" />
<Tip>
날짜 필드의 경우, 자동으로 업데이트되는 "지난 7일" 또는 "이번 달"과 같은 동적 필터를 만들려면 **Is relative**를 사용해 보세요.
</Tip>
<Tip>
고급 필터를 지원합니다—여러 필터 규칙을 추가하고 **And** 또는 **Or** 로직으로 결합하세요.
</Tip>
---
## X축 설정
이 설정은 막대 및 선 차트의 가로축을 제어하며, 일반적으로 데이터가 범주로 그룹화되는 방식을 결정합니다.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-x" />표시할 데이터 </span>
데이터를 그룹화할 필드를 선택합니다. X축에 표시될 범주가 결정됩니다.
**예시**: "Stage"를 선택하면 파이프라인 단계별로 그룹화된 데이터를, "Created date"를 선택하면 시간 경과에 따른 데이터를 볼 수 있습니다.
<img src="/images/user-guide/dashboard/dashboard-chart-settings-x-data-on-display.png" alt="표시된 데이터" />
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />날짜 세분성 </span>
날짜 필드로 그룹화할 때 그룹화 기간을 선택합니다.
| 옵션 | 그룹화 기준 | 출력 예 |
| ---------- | -------- | ------------------------ |
| **일** | 각 날짜 | 1월 1일, 1월 2일, 1월 3일... |
| **주** | 달력 기준 주 | 1주차, 2주차, 3주차... |
| **월** | 달력 기준 월 | 1월, 2월, 3월... |
| **분기** | 회계 분기 | Q1, Q2, Q3, Q4 |
| **연도** | 달력 기준 연도 | 2023, 2024, 2025 |
| **요일** | 요일(집계) | 월요일, 화요일... (모든 월요일 합산) |
| **연도의 달** | 월(집계) | 1월, 2월... (모든 1월 합산) |
| **연도의 분기** | 분기(집계) | Q1, Q2, Q3, Q4(모든 Q1 합산) |
"요일/연도 기준" 옵션은 전체 기간에 걸쳐 집계됩니다. **요일**을 사용하면 어떤 요일에 거래가 가장 많은지 확인할 수 있습니다. **월**을 사용하면 월별 추세를 볼 수 있습니다.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />정렬 기준 </span>
X축의 범주 순서를 제어합니다.
* **위치** – Select 필드 설정에 정의된 순서를 사용
* **알파벳순** – A에서 Z까지(날짜는 시간순)
* **값 기준** – 지표값으로 정렬(최대 또는 최소 우선)
* **수동** – 드래그하여 사용자 지정 순서로 설정
<img src="/images/user-guide/dashboard/dashboard-chart-settings-x-sort.png" alt="정렬 기준" />
**팁**: 파이프라인 단계에는 **위치**를 사용하여 영업 프로세스 순서(Lead → Qualified → Proposal → Won)대로 표시하세요.
<Note>
표시되는 옵션은 필드 유형에 따라 다릅니다. Select 필드는 모든 옵션을 제공하지만 날짜 및 텍스트 필드는 더 적습니다.
</Note>
<Tip>
수동 정렬에서는 범주를 드래그해 사용자 지정 순서를 만들 수 있습니다—특정 세그먼트를 강조하거나 데이터로 스토리를 전달하는 데 완벽합니다.
</Tip>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="eye-off" />0 값 제외 </span>
값이 0이거나 데이터가 없는 범주를 숨깁니다.
* **켜짐**: 레코드가 없는 범주를 숨김
* **꺼짐**: 비어 있어도 모든 범주를 표시
희소한 데이터가 있는 차트를 정리하는 데 사용합니다.
---
## Y축 설정
측정 항목과 표시 방식을 제어합니다.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="axis-y" />표시할 데이터 </span>
지표를 계산할 필드와 연산을 선택합니다.
* **개수** – 전체 개수, 비어 있음 개수, 비어 있지 않음 개수, 고유 값 개수
* **수학** – 합계, 평균, 최솟값, 최댓값(숫자 필드)
* **백분율** – 비어 있음 비율, 비어 있지 않음 비율
Boolean 필드에는 true/false 개수 옵션이 추가됩니다. 날짜 필드가 있는 집계 차트에는 Earliest/Latest가 표시됩니다.
**예시**: "Amount"에 합계를 선택하면 범주별 총 거래 금액을, 전체 개수를 선택하면 거래 수를 볼 수 있습니다.
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-data-on-display.png" alt="표시된 데이터" />
<Note>
표시되는 옵션은 필드 및 차트 유형에 따라 다릅니다. 예상한 연산이 보이지 않으면 필드 유형을 확인하세요.
</Note>
### 비율
Select, Multi-select 또는 Boolean 필드의 경우 특정 값의 비율을 계산할 수 있습니다.
1. Select, Multi-select 또는 Boolean 필드를 선택합니다
2. **Ratio**를 활성화합니다
3. 측정할 옵션을 선택합니다
**예시**: 모든 기회 대비 "Won" 거래의 비율을 표시합니다. 총 50개 중 10개가 "Won"이라면 차트에는 20%가 표시됩니다.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="filters" />그룹화 기준 </span>
두 번째 차원을 추가해 다중 시리즈(여러 막대 또는 선)를 만듭니다.
1. 먼저 X축 필드를 설정합니다
2. **그룹화 기준**을 클릭합니다
3. 두 번째 필드를 선택합니다
**예시**: 단계(X축)와 소유자(그룹화 기준)로 거래를 그룹화하여 각 사람의 파이프라인 분포를 나란히 비교합니다.
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-group-by.png" alt="그룹별" />
그룹화 기준을 설정하면 차트에 여러 색상이 표시되고 범례가 나타납니다.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="calendar" />날짜 세분성 </span>
그룹화 기준이 날짜 필드일 때 기간을 선택합니다(X축과 동일한 옵션).
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="arrows-sort" />정렬 기준 </span>
그룹화 기준이 설정된 경우, 그룹 시리즈의 표시 순서를 제어합니다(예: 각 범주 안에서 어떤 소유자의 막대가 먼저 나타날지).
X축 정렬과 동일한 옵션(위치, 알파벳순, 수동)을 사용할 수 있지만, 보조 그룹화에는 값 기준 정렬을 사용할 수 없습니다.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="chart-bar-popular" />누적 </span>
개별 값 대신 누적 합계를 표시합니다.
* **꺼짐**: 각 막대/포인트가 자신의 값을 표시
* **켜짐**: 각 막대/포인트가 이전 값들의 합계에 자신의 값을 더한 값을 표시
**예시**: 1월 = 10, 2월 = 15
* 누적 꺼짐: 10과 15를 표시
* 누적 켜짐: 10과 25(10 + 15)를 표시
누적을 사용해 시간 경과에 따른 목표 달성 진행도를 추적하세요.
<img src="/images/user-guide/dashboard/dashboard-chart-settings-y-cumulative.png" alt="누적" />
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="math-min" />최솟값 범위 / <ChartIcon icon="math-max" />최댓값 범위 </span>
Y축의 최소/최대 값을 고정합니다.
* 비워 두면 자동 스케일링
* 숫자를 입력해 경계를 고정합니다
**사용 시점:**
* 정확한 시각적 비교를 위해 최소값을 0으로 설정하세요
* 여러 차트에서 일관된 축 범위를 위해 둘 다 설정하세요
* 둘 다 설정하여 특정 값 범위에 집중하세요
---
## 스타일 설정
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="color-swatch" />색상 </span>
차트의 색 구성표를 설정합니다. 다양한 색상 팔레트 중에서 선택합니다.
<Note>
Select 필드로 그룹화하는 경우 차트는 필드 설정에서 각 옵션에 정의된 색상을 자동으로 사용합니다.
</Note>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="gizmo" />축 이름 </span>
표시할 축 레이블을 선택합니다: **없음**, **X축**, **Y축**, 또는 **둘 다**(막대 및 선 차트 전용).
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="stack-2" />누적 막대 / 누적 선 </span>
그룹화가 설정된 경우 다중 시리즈의 표시 방식을 선택합니다.
* **꺼짐(그룹형)**: 시리즈가 나란히 표시됩니다. 그룹 간 정확한 값을 비교할 때 사용합니다.
* **켜짐(누적형)**: 시리즈가 위로 겹쳐 누적되어 표시됩니다. 부분이 전체를 어떻게 구성하는지(구성 비율)를 보여줄 때 사용합니다.
**예시**: 단계별 거래, 소유자 기준 그룹화
* 그룹형: 각 소유자의 정확한 수치를 나란히 확인
* 누적형: 단계별 총 거래 수와 각 소유자의 기여도를 누적으로 확인
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="badge-2k" />데이터 레이블 </span>
차트 요소(막대, 포인트, 조각)에 값을 직접 표시합니다.
* **켜짐**: 값이 차트에 표시됩니다
* **꺼짐**: 값이 표시되지 않습니다(더 깔끔함)
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}> <ChartIcon icon="text-caption" />범례 </span>
범례를 표시하거나 숨깁니다(그룹화가 설정된 경우에만 표시).
* **켜짐**: 각 색상이 의미하는 바를 범례에 표시
* **꺼짐**: 범례를 표시하지 않음
<Tip>
**범례 항목 위에 마우스를 올리면** 해당 그룹이 강조 표시됩니다. **클릭**하여 차트에서 일시적으로 숨깁니다.
</Tip>
---
## 차트별 참고 사항
### 파이 차트
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="chart-pie" size={16} /></span> **각 조각이 나타내는 것** – 조각의 그룹화 기준을 정의
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="eye-off" size={16} /></span> **빈 범주 숨기기** – 값이 0인 조각 제거
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="number-123" size={16} /></span> **가운데에 값 표시** – 집계 값(합계, 평균, 개수 등) 표시
### 집계 차트
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-left" size={16} /></span> **접두사** – 숫자 앞에 텍스트 추가(예: `$`)
* <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}><ChartIcon icon="caret-right" size={16} /></span> **접미사** – 숫자 뒤에 텍스트 추가(예: `%`)

View File

@@ -0,0 +1,92 @@
---
title: 대시보드
description: CRM 데이터를 시각화하기 위해 탭으로 대시보드를 생성하고 구성합니다.
---
## 개요
Twenty의 대시보드는 계층 구조로 구성됩니다: **대시보드 → 탭 → 위젯**. 각 대시보드에는 여러 개의 탭을 포함할 수 있으며, 각 탭에는 위젯(차트, 숫자, iFrames)이 포함됩니다.
## 새 대시보드 생성
1. 내비게이션에서 **대시보드**로 이동합니다
2. **+ 새 레코드**를 클릭합니다
<img src="/images/user-guide/dashboard/dashboard-create-new.png" alt="새 대시보드 생성" />
3. 대시보드에 이름을 지정합니다
4. 탭과 위젯을 추가하기 시작합니다
## 탭으로 작업하기
탭은 대시보드를 논리적인 섹션으로 구성하는 데 도움이 됩니다.
### 탭 만들기
1. 편집 모드에서 탭 표시줄의 \*\*+\*\*를 클릭하면 오른쪽에 사이드 패널이 열립니다
2. 탭의 이름을 지정합니다(예: "파이프라인 개요", "팀 성과")
3. 탭에 위젯을 추가합니다
### 탭 재정렬
1. 편집 모드에서 이동하려는 탭을 클릭한 상태로 길게 누릅니다
2. 드래그 앤 드롭하여 새 위치로 이동합니다
3. 탭을 클릭한 다음 명령 메뉴를 사용해 탭을 왼쪽이나 오른쪽으로 이동할 수도 있습니다
### 탭 삭제
1. 편집 모드에서 삭제하려는 탭을 클릭합니다
2. 명령 메뉴에서 **Delete** 버튼을 클릭합니다
### 탭 복제
1. 복제하려는 탭을 클릭합니다
2. 사이드 패널에서 **복제** 버튼을 클릭합니다
<img src="/images/user-guide/dashboard/dashboard-tabs.png" alt="대시보드 탭" />
## 대시보드 레이아웃
### 위젯 배치
* 드래그 앤 드롭하여 위치를 지정합니다
* 강조를 위해 크기를 조정합니다
* 관련 차트를 함께 그룹화합니다
### 대시보드 복제
1. 복제하려는 대시보드를 선택합니다
2. **Cmd + K**(Windows에서는 **Ctrl + K**)로 명령 표시줄을 엽니다
3. **대시보드 복제**를 선택합니다
<img src="/images/user-guide/dashboard/dashboard-duplicate.png" alt="대시보드 복제" />
### 모범 사례
* **논리적 흐름**: 개요에서 세부 정보 순으로 배열합니다
* **시각적 위계**: 핵심 지표에는 더 큰 차트를 사용합니다
* **일관된 스타일**: 일치하는 색상과 글꼴을 사용합니다
## 가시성 및 액세스
### 대시보드 가시성
대시보드는 Twenty 워크스페이스에 액세스 권한이 있는 모든 사용자에게 표시됩니다. 현재는 비공개 대시보드 옵션이 없습니다.
### 즐겨찾기
빠르게 액세스할 수 있도록 대시보드를 즐겨찾기에 추가할 수 있습니다. 이는 개인 설정—사용자의 즐겨찾기는 다른 사용자에게 표시되지 않습니다.
대시보드를 즐겨찾기에 추가하려면 대시보드를 열고 별 아이콘을 클릭합니다.
### 시간대 동작 방식
현재 대시보드는 보는 사람의 시간대를 기준으로 데이터를 표시합니다. 즉, 동일한 대시보드라도 지역이 다른 팀 구성원에게는 서로 다른 지표가 표시될 수 있습니다(예: APAC vs. US).
<Note>
**곧 제공 예정**: 모든 사용자가 위치와 관계없이 일관된 데이터를 볼 수 있도록 대시보드별로 특정 시간대를 설정하는 기능을 추가할 예정입니다.
</Note>
<Note>
**곧 제공 예정**: 대시보드 수준의 필터를 통해 모든 위젯에 한 번에 필터를 적용할 수 있어 데이터를 더 빠르게 탐색할 수 있습니다.
</Note>

View File

@@ -0,0 +1,169 @@
---
title: 위젯
description: Twenty에서 위젯 유형과 시각화 옵션을 살펴보세요.
---
import { ChartIcon } from '/snippets/chart-icon.mdx';
## 사용 가능한 위젯
Twenty는 CRM 데이터를 시각화할 수 있는 다양한 위젯 유형을 제공합니다.
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />막대 차트</span>
데이터를 가로 또는 세로 막대로 표시합니다.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-bar-chart.png" alt="막대 차트" />
</Frame>
**적합한 용도:**
* 범주별 값 비교
* 순위 표시
* 기간별 지표 추적
**사용 예시:**
* 단계별 거래
* 영업 담당자별 매출
* 월별 추가된 연락처
<Note>
**표시 제한**: 막대 차트는 막대 최대 100개를 표시할 수 있으며, Group By를 사용하는 경우 막대당 최대 50개의 그룹을 표시할 수 있습니다. 경고 "Undisplayed data: max X bars per chart"가 표시되면, 필터를 추가해 데이터 범위를 좁히거나 그룹화를 변경하세요(예: 일 단위 대신 주 단위로 그룹화).
</Note>
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-pie" />파이 차트</span>
전체 대비 비율을 표시합니다.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-pie-chart.png" alt="파이 차트" />
</Frame>
**적합한 용도:**
* 구성 또는 분포 표시
* 부분과 전체 비교
* 주요 세그먼트 강조
**사용 예시:**
* 소스별 거래 분포
* 업종별 연락처 분포
* 소유자별 파이프라인 구성
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />선형 차트</span>
시간에 따른 추세를 표시합니다.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-line-chart.png" alt="선형 차트" />
</Frame>
**적합한 용도:**
* 시간 경과에 따른 변화 추적
* 추세 파악
* 여러 지표 비교
**사용 예시:**
* 월별 거래 건수 추세
* 분기별 매출 성장
* 시간 경과에 따른 활동 수준
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />집계 차트</span>
단일 핵심 값을 눈에 띄게 표시합니다.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" alt="집계 차트" />
</Frame>
**적합한 용도:**
* KPI 강조
* 합계 또는 평균 표시
* 빠른 상태 확인
**사용 예시:**
* 총 파이프라인 가치
* 열린 기회 수
* 전환율
**고급 옵션:**
* **Ratio**: Select 필드에서 값 간 비율을 계산합니다. **Data on display**로 이동 → 필드를 선택 → **Ratio** 옵션을 활성화하세요.
* **Prefix & Suffix**: 가독성을 높이기 위해 숫자 앞이나 뒤에 사용자 지정 텍스트를 추가합니다(예: "$" 접두사 또는 "%" 접미사).
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="frame" />iFrames</span>
대시보드에 외부 도구와 콘텐츠를 직접 삽입합니다.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-table.png" alt="표 차트" />
</Frame>
**적합한 용도:**
* 개별 항목 검색하기
* 정확한 값 확인하기
* 감사 또는 참고용
**사용 예시:**
* 이번 달에 마감되는 거래
* 이번 주 신규 리드
* 연체된 청구서
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="table" />Table</span>
필터링된 레코드를 대시보드에서 바로 확인하세요.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-iframe.png" alt="iFrame" />
</Frame>
**적합한 용도:**
* 외부 보고서 또는 대시보드 표시
* 타사 영업 도구 통합
* 다른 시스템의 실시간 콘텐츠 표시
**사용 예시:**
* 지원 도구의 지표
* 다이얼러의 지표
* 영업 시퀀스 도구의 실시간 콘텐츠
### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />서식 있는 텍스트</span>
대시보드에 서식 있는 텍스트와 콘텐츠를 직접 추가하세요.
<Frame>
<img src="/images/user-guide/dashboard/dashboard-widget-rich-text.png" alt="서식 있는 텍스트" />
</Frame>
**적합한 용도:**
* 컨텍스트 또는 지침 추가
* 대시보드 설명
* 노트 및 주석
**기능:**
* 서식 있는 텍스트 편집(굵게, 기울임, 목록 등)
* 이미지 및 파일 업로드
* Markdown 스타일 편집
<Note>
**곧 제공 예정**: 게이지 차트는 아직 사용할 수 없지만 로드맵에 포함되어 있습니다.
</Note>
### 위젯 복제
1. 위젯을 클릭하세요
2. **Options**를 여세요
3. **Duplicate widget**을 클릭하세요