> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 위젯

> Twenty에서 위젯 유형과 시각화 옵션을 살펴보세요.

export const ChartIcon = ({icon, size = 20}) => {
  const icons = {
    'database': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 6a8 3 0 1 0 16 0a8 3 0 1 0 -16 0" />
        <path d="M4 6v6a8 3 0 0 0 16 0v-6" />
        <path d="M4 12v6a8 3 0 0 0 16 0v-6" />
      </svg>,
    'filter': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227" />
      </svg>,
    'axis-x': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 13v.01" />
        <path d="M4 9v.01" />
        <path d="M4 5v.01" />
        <path d="M17 20l3 -3l-3 -3" />
        <path d="M4 17h16" />
      </svg>,
    'axis-y': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M11 20h-.01" />
        <path d="M15 20h-.01" />
        <path d="M19 20h-.01" />
        <path d="M4 7l3 -3l3 3" />
        <path d="M7 20v-16" />
      </svg>,
    'sum': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M18 16v2a1 1 0 0 1 -1 1h-11l6 -7l-6 -7h11a1 1 0 0 1 1 1v2" />
      </svg>,
    'chart-pie': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10 3.2a9 9 0 1 0 10.8 10.8a1 1 0 0 0 -1 -1h-6.8a2 2 0 0 1 -2 -2v-7a.9 .9 0 0 0 -1 -.8" />
        <path d="M15 3.5a9 9 0 0 1 5.5 5.5h-4.5a1 1 0 0 1 -1 -1v-4.5" />
      </svg>,
    'chart-line': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 19l16 0" />
        <path d="M4 15l4 -6l4 2l4 -5l4 4" />
      </svg>,
    'calendar': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12" />
        <path d="M16 3v4" />
        <path d="M8 3v4" />
        <path d="M4 11h16" />
        <path d="M11 15h1" />
        <path d="M12 15v3" />
      </svg>,
    'arrows-sort': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 9l4 -4l4 4m-4 -4v14" />
        <path d="M21 15l-4 4l-4 -4m4 4v-14" />
      </svg>,
    'filters': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M7 8a5 5 0 1 0 10 0a5 5 0 1 0 -10 0" />
        <path d="M8 11a5 5 0 1 0 3.998 1.997" />
        <path d="M12.002 19.003a5 5 0 1 0 3.998 -8.003" />
      </svg>,
    'chart-bar-popular': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -6" />
        <path d="M9 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -10" />
        <path d="M15 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -14" />
        <path d="M4 20h14" />
      </svg>,
    'math-min': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M15 18a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
        <path d="M3 13s1 -9 4 -9c2.48 0 5.643 9.565 8.36 12.883" />
        <path d="M18.748 17.038c.702 -.88 1.452 -3.56 2.252 -8.038" />
      </svg>,
    'math-max': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M5 6a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
        <path d="M3 15s.616 -5.544 2.332 -7.93" />
        <path d="M8.637 7.112c2.717 3.313 5.882 12.888 8.363 12.888c2 0 3.333 -3 4 -9" />
      </svg>,
    'color-swatch': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M19 3h-4a2 2 0 0 0 -2 2v12a4 4 0 0 0 8 0v-12a2 2 0 0 0 -2 -2" />
        <path d="M13 7.35l-2 -2a2 2 0 0 0 -2.828 0l-2.828 2.828a2 2 0 0 0 0 2.828l9 9" />
        <path d="M7.3 13h-2.3a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h12" />
        <path d="M17 17l0 .01" />
      </svg>,
    'gizmo': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M20 19l-8 -5.5l-8 5.5" />
        <path d="M12 4v9.5" />
        <path d="M11 4a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M3 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M19 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      </svg>,
    'stack-2': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M12 4l-8 4l8 4l8 -4l-8 -4" />
        <path d="M4 12l8 4l8 -4" />
        <path d="M4 16l8 4l8 -4" />
      </svg>,
    'badge-2k': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -10" />
        <path d="M14 9v6" />
        <path d="M17 9l-2 3l2 3" />
        <path d="M15 12h-1" />
        <path d="M7 9h2a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-1a1 1 0 0 0 -1 1v1a1 1 0 0 0 1 1h2" />
      </svg>,
    'text-caption': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 15h16" />
        <path d="M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" />
        <path d="M4 20h12" />
      </svg>,
    'eye-off': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
        <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
        <path d="M3 3l18 18" />
      </svg>,
    'caret-left': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M14 6l-6 6l6 6v-12" />
      </svg>,
    'caret-right': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M10 18l6 -6l-6 -6v12" />
      </svg>,
    'number-123': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 10l2 -2v8" />
        <path d="M9 8h3a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-2a1 1 0 0 0 -1 1v2a1 1 0 0 0 1 1h3" />
        <path d="M17 8h2.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-1.5h1.5a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1 -1.5 1.5h-2.5" />
      </svg>,
    'frame': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M4 7l16 0" />
        <path d="M4 17l16 0" />
        <path d="M7 4l0 16" />
        <path d="M17 4l0 16" />
      </svg>,
    'align-box-left-top': <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14" />
        <path d="M9 13h-2" />
        <path d="M13 10h-6" />
        <path d="M11 7h-4" />
      </svg>
  };
  const selectedIcon = icons[icon];
  if (!selectedIcon) {
    return null;
  }
  return selectedIcon;
};

## 사용 가능한 위젯

Twenty는 CRM 데이터를 시각화할 수 있는 다양한 위젯 유형을 제공합니다.

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-bar-popular" />막대 차트</span>

데이터를 가로 또는 세로 막대로 표시합니다.

<Frame>
  <img src="https://mintcdn.com/twenty/rtjyQTAh0DrLn5Sz/images/user-guide/dashboard/dashboard-widget-bar-chart.png?fit=max&auto=format&n=rtjyQTAh0DrLn5Sz&q=85&s=81765220d7d28faa18aedffa5e669174" alt="막대 차트" width="1258" height="742" data-path="images/user-guide/dashboard/dashboard-widget-bar-chart.png" />
</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="https://mintcdn.com/twenty/rtjyQTAh0DrLn5Sz/images/user-guide/dashboard/dashboard-widget-pie-chart.png?fit=max&auto=format&n=rtjyQTAh0DrLn5Sz&q=85&s=b3172f5c7a5f1f40a6e5e463f0172446" alt="파이 차트" width="1258" height="742" data-path="images/user-guide/dashboard/dashboard-widget-pie-chart.png" />
</Frame>

**적합한 용도:**

* 구성 또는 분포 표시
* 부분과 전체 비교
* 주요 세그먼트 강조

**사용 예시:**

* 소스별 거래 분포
* 업종별 연락처 분포
* 소유자별 파이프라인 구성

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="chart-line" />선형 차트</span>

시간에 따른 추세를 표시합니다.

<Frame>
  <img src="https://mintcdn.com/twenty/rtjyQTAh0DrLn5Sz/images/user-guide/dashboard/dashboard-widget-line-chart.png?fit=max&auto=format&n=rtjyQTAh0DrLn5Sz&q=85&s=6ec6177e1f779cac4dfb4c42fc4de0fc" alt="선형 차트" width="1258" height="742" data-path="images/user-guide/dashboard/dashboard-widget-line-chart.png" />
</Frame>

**적합한 용도:**

* 시간 경과에 따른 변화 추적
* 추세 파악
* 여러 지표 비교

**사용 예시:**

* 월별 거래 건수 추세
* 분기별 매출 성장
* 시간 경과에 따른 활동 수준

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="sum" />집계 차트</span>

단일 핵심 값을 눈에 띄게 표시합니다.

<Frame>
  <img src="https://mintcdn.com/twenty/rtjyQTAh0DrLn5Sz/images/user-guide/dashboard/dashboard-widget-aggregate-chart.png?fit=max&auto=format&n=rtjyQTAh0DrLn5Sz&q=85&s=ce43dedfdcfc4512b7c616c7a78df75a" alt="집계 차트" width="622" height="236" data-path="images/user-guide/dashboard/dashboard-widget-aggregate-chart.png" />
</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="https://mintcdn.com/twenty/rtjyQTAh0DrLn5Sz/images/user-guide/dashboard/dashboard-widget-iframe.png?fit=max&auto=format&n=rtjyQTAh0DrLn5Sz&q=85&s=52cba90e5d56ce805c1d6cdd17c8f2a8" alt="iFrame" width="1258" height="992" data-path="images/user-guide/dashboard/dashboard-widget-iframe.png" />
</Frame>

**적합한 용도:**

* 외부 보고서 또는 대시보드 표시
* 타사 영업 도구 통합
* 다른 시스템의 실시간 콘텐츠 표시

**사용 예시:**

* 지원 도구의 지표
* 다이얼러의 지표
* 영업 시퀀스 도구의 실시간 콘텐츠

### <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><ChartIcon icon="align-box-left-top" />서식 있는 텍스트</span>

대시보드에 서식 있는 텍스트와 콘텐츠를 직접 추가하세요.

<Frame>
  <img src="https://mintcdn.com/twenty/rtjyQTAh0DrLn5Sz/images/user-guide/dashboard/dashboard-widget-rich-text.png?fit=max&auto=format&n=rtjyQTAh0DrLn5Sz&q=85&s=e006d6b5fe8c362b66a43b1a03096a5a" alt="서식 있는 텍스트" width="1258" height="742" data-path="images/user-guide/dashboard/dashboard-widget-rich-text.png" />
</Frame>

**적합한 용도:**

* 컨텍스트 또는 지침 추가
* 대시보드 설명
* 노트 및 주석

**기능:**

* 서식 있는 텍스트 편집(굵게, 기울임, 목록 등)
* 이미지 및 파일 업로드
* Markdown 스타일 편집

<Note>
  **곧 제공 예정**: 게이지 차트와 표는 아직 사용할 수 없지만 로드맵에 포함되어 있습니다.
</Note>

### 위젯 복제

1. 위젯을 클릭하세요
2. **Options**를 여세요
3. **Duplicate widget**을 클릭하세요
