

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

# 위젯
<a name="widgets"></a>

프로파일 탐색기에서 사용할 수 있는 다양한 위젯 유형을 살펴봅니다.

## 개요
<a name="widgets-overview"></a>

프로파일 탐색기의 위젯은 레이아웃 정의 내의 JSON 구성 요소로 빌드된 복합 요소입니다. 이러한 위젯은 복잡한 JSON 구조를 나타내지만 UI 빌더는 기술 구성을 자동으로 처리하여 대시보드 관리를 간단하고 액세스 가능하게 만듭니다.

**Topics**
+ [개요](#widgets-overview)
+ [사용 가능한 위젯](#available-widgets)
+ [기본 위젯](default-widgets.md)
+ [사용자 지정 위젯](custom-widgets.md)

## 사용 가능한 위젯
<a name="available-widgets"></a>
+ 기본 위젯
  + [생성형 AI 요약](default-widgets.md#generative-ai-summary)
  + [고객 정보](default-widgets.md#customer-information)
  + [계산된 속성](default-widgets.md#calculated-attribute)
  + [연락처](default-widgets.md#contacts)
  + [Cases](default-widgets.md#cases-cp)
  + [주문](default-widgets.md#orders-cp)
  + [자산](default-widgets.md#assets-cp)
+ 사용자 지정 위젯
  + [표](custom-widgets.md#table-widget)
  + [키-값 페어:](custom-widgets.md#key-value-pair)
  + [주요 지표](custom-widgets.md#key-metric)
  + [도넛 차트](custom-widgets.md#donut-chart)

# 기본 위젯
<a name="default-widgets"></a>

프로파일 탐색기는 Customer Profiles 데이터와 원활하게 작동하도록 설계된 사전 구성된 위젯 모음과 함께 제공됩니다. 이러한 기본 위젯은 최소한의 설정으로 즉각적인 가치를 제공하므로 클릭 몇 번으로 정교한 대시보드를 구축할 수 있습니다.

![\[탐색기 레이아웃에 기본 위젯을 추가합니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/default-widgets-1.png)


## 즉시 사용 가능한 위젯
<a name="ready-to-use-widgets"></a>
+ [생성형 AI 요약](#generative-ai-summary)
+ [고객 정보](#customer-information)
+ [계산된 속성](#calculated-attribute)
+ [연락처](#contacts)
+ [Cases](#cases-cp)
+ [주문](#orders-cp)
+ [자산](#assets-cp)

**참고**  
이러한 위젯은 미리 구성되어 있지만 특정 요구 사항에 더 잘 맞게 위젯을 사용자 지정할 수 있습니다. 쉽게 온보딩할 수 있는 출발점 역할을 합니다.

## 생성형 AI 요약
<a name="generative-ai-summary"></a>

프로필 탐색기는 주요 행동 패턴을 강조하는 간결한 요약을 생성하는 기본 AI 기반 고객 인사이트를 제공하고, 상호 작용 기록을 기반으로 맞춤형 고객 인사이트를 제공하고, 고객 360 데이터의 실행 가능한 권장 사항을 표시합니다. AI 생성 요약은 조직이 여러 고객 접점의 패턴을 식별하고, 각 고객에 맞는 맞춤형 행동 인사이트를 제공하고, 향상된 고객 경험과 향상된 충성도를 지원하여 데이터 기반 결정을 내리는 데 도움이 됩니다.

![\[생성형 AI 요약 위젯.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/generative-ai-summary-1.png)


## 고객 정보
<a name="customer-information"></a>

고객 정보 위젯은 키-값 페어 구성 요소를 사용하여 표준 고객 프로필 데이터를 명확하고 체계적으로 보여 줍니다. 이 기본 위젯은 스캔하기 쉬운 형식으로 필수 고객 정보를 자동으로 표시합니다.

### 개요
<a name="customer-information-overview"></a>

이 위젯은 키 값 페어 구성 요소를 활용하여 고객 속성을 구조화된 레이아웃으로 표시합니다.
+ 이름
+ 성
+ 이메일 주소
+ 전화번호
+ 주소
+ 계좌 번호
+ 프로필 ID

### 데이터
<a name="customer-information-data"></a>

위젯은 Customer Profiles 도메인에 자동으로 연결하고 표준 프로필 속성에서 정보를 가져옵니다. 기본 기능에는 추가 구성이 필요하지 않습니다.

**참고**:이 위젯은 표준 프로필 속성으로 사전 구성되어 제공되지만 특정 요구 사항에 따라 표준 프로필의 어떤 속성을 표시할지 사용자 지정할 수 있습니다.

#### 자세히 알아보기
<a name="customer-information-learn-more"></a>
+ [표준 프로필 정의](standard-profile-definition.md)
+ 키-값 페어:

## 계산된 속성
<a name="calculated-attribute"></a>

계산된 속성 위젯을 사용하면 고객 프로필의 계산된 속성의 데이터를 활용하여 주요 지표 구성 요소를 표시할 수 있습니다.

### 개요
<a name="calculated-attribute-overview"></a>

계산된 속성 위젯을 사용하면 고객 프로필의 계산된 속성의 데이터를 활용하여 주요 지표 구성 요소를 표시할 수 있습니다.

### 구성 요소 기능
<a name="component-features"></a>
+ 계산된 지표를 단일 값 지표로 표시

### 사용 사례의 예는 다음과 같습니다.
<a name="example-use-cases"></a>
+ 캠페인 배달
+ 열린 사례
+ 평균 통화 시간
+ 채널 기본 설정

### 구성
<a name="configuration"></a>

계산된 속성을 선택하고 원하는 표시 형식을 선택하기만 하면 됩니다.

**참고**  
계산된 속성을 이 위젯에서 사용하려면 먼저 Customer Profiles 도메인에서 구성해야 합니다.

**자세히 알아보기**
+ 주요 지표
+ [계산된 속성 설정](customerprofiles-calculated-attributes-admin-website.md)

## 연락처
<a name="contacts"></a>

테이블 JSON 구성 요소를 사용하여 구축된 고객 응대 위젯은 Customer Profiles 고객 응대 객체 데이터를 정리된 테이블 형식으로 표시합니다. 이 위젯은 Customer Profiles CTR 데이터에 자동으로 연결하여 주요 연락처 정보와 상호 작용 기록을 표시합니다.

### 특성
<a name="contacts-features"></a>
+ 모든 고객 응대 이벤트 보기
+ 연락처 기록 정렬 및 필터링
+ 표시된 연락처 필드 사용자 지정
+ 세부 연락처 정보 액세스

Customer Profiles CTR 객체에 대한 자세한 내용은 [Amazon Connect Customer Profiles의 연락처 레코드 템플릿](ctr-contact-record-template.md) 섹션을 참조하세요.

## Cases
<a name="cases-cp"></a>

테이블 JSON 구성 요소를 사용하여 구축된 사례 위젯은 Customer Profiles 사례 객체 데이터를 정리된 테이블 형식으로 표시합니다. 이 위젯은 Customer Profiles 사례 데이터에 자동으로 연결하여 지원 상호 작용 및 사례 관리 세부 정보를 표시합니다.

### 특성
<a name="cases-features"></a>
+ 모든 고객 사례 보기
+ 사례 레코드 정렬 및 필터링
+ 표시된 사례 필드 사용자 지정
+ 자세한 사례 정보 액세스

Customer Profiles Case 객체에 대한 자세한 내용은 [Customer Profiles의 표준 사례에 객체 유형 매핑](object-type-mapping-standard-case.md) 섹션을 참조하세요.

## 주문
<a name="orders-cp"></a>

테이블 JSON 구성 요소를 사용하여 구축된 주문 위젯은 Customer Profiles 주문 객체 데이터를 정리된 테이블 형식으로 표시합니다. 이 위젯은 Customer Profiles 주문 데이터에 자동으로 연결하여 구매 내역 및 거래 세부 정보를 표시합니다.

### 특성
<a name="orders-features"></a>
+ 모든 고객 주문 이벤트 보기
+ 주문 레코드 정렬 및 필터링
+ 표시된 순서 필드 사용자 지정
+ 자세한 주문 정보 액세스

Customer Profiles Order 객체에 대한 자세한 내용은 [Amazon Connect Customer Profiles의 표준 주문에 객체 유형 매핑](object-type-mapping-standard-order.md) 섹션을 참조하세요.

## 자산
<a name="assets-cp"></a>

테이블 JSON 구성 요소를 사용하여 구축된 자산 위젯은 Customer Profiles 자산 객체 데이터를 정리된 테이블 형식으로 표시합니다. 이 위젯은 고객 프로필 자산 데이터에 자동으로 연결하여 고객 소유 제품 및 서비스를 보여 줍니다.

### 특성
<a name="assets-features"></a>
+ 모든 고객 자산 레코드 보기
+ 자산 데이터 정렬 및 필터링
+ 표시된 자산 필드 사용자 지정
+ 세부 자산 정보 액세스

Customer Profiles Asset 객체에 대한 자세한 내용은 [Customer Profiles의 표준 자산에 객체 유형 매핑](object-type-mapping-standard-asset.md) 섹션을 참조하세요.

# 사용자 지정 위젯
<a name="custom-widgets"></a>

특정 비즈니스 요구 사항에 맞게 처음부터 맞춤형 대시보드 구성 요소를 생성합니다. 사용자 지정 위젯을 사용하면 사전 정의된 데이터 없이 고유한 시각화를 구축할 수 있습니다.

![\[프로필 탐색기 레이아웃에 고객 위젯을 추가합니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/custom-widgets-1.png)


## 사용 가능한 사용자 지정 구성 요소
<a name="available-custom-components"></a>
+ [표](#table-widget)
+ [키-값 페어:](#key-value-pair)
+ [주요 지표](#key-metric)
+ [도넛 차트](#donut-chart)

## 사용자 지정 위젯 빌드
<a name="building-custom-widgets"></a>

**각 사용자 지정 위젯은 다음과 같이 구성할 수 있습니다.**
+ 사용자 지정 데이터 소스
+ 사용자 지정 디스플레이
+ 사용자 지정 필드
+ 사용자 지정 항목 상호 작용

## 표
<a name="table-widget"></a>

사용자 지정 테이블 구성 요소는 상호 작용 및 구성을 위한 고급 기능과 함께 테이블 형식으로 데이터를 표시할 수 있는 유연한 구성 옵션을 제공합니다.

### 특성
<a name="table-features"></a>

1. **열 구성**
   + 사용자 지정 열 헤더 정의
   + 각 열에 대한 데이터 지정
   + 데이터 형식 지정 옵션 설정
   + 열 배치 정의

1. **필터링**
   + 테이블 내에서 항목을 빠르게 필터링

1. **연결**
   + 리소스 링크 연결
     + 다음에 대한 원활한 탐색:
       + Segments
       + 계산된 속성
     + 새 탭에서 열기
   + **외부 URL 링크**
     + 행 항목 값을 선택할 수 있는 URL로 변환
     + 새 탭에서 열기
     + 행 데이터를 기반으로 동적으로 링크 생성
   + 서랍 보기 링크
     + 측면 서랍에서 세부 정보 열기
     + 페이지를 나가지 않고 전체 레코드 세부 정보 보기

1. 데이터 구성
   + 그룹화
     + 특정 필드 이름을 기준으로 행 그룹화
     + 영구 그룹 설정
   + 정렬
     + 열 필드를 기준으로 정렬
     + 오름차순 정렬
     + 영구 정렬 설정

**그림 1**

![\[사용자 지정 테이블 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/table-features-1.png)


**그림 2**

![\[또 다른 사용자 지정 테이블 위젯 편집 예제입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/table-features-2.png)


### 구성의 예
<a name="table-example-configuration"></a>

```
{
    "Type": "Table",
    "Props": {
        "ColumnDefinitions": [
            {
                "Header": "Table column header"
                "Cell": {
                    "Content": {
                        "Props": {
                            "Variant": "Link",
                            "LinkOptions": {
                                "LinkType": "Drawer"
                            }
                        },
                        "Type": "TextContent",
                        "Children": ["string"]
                    }
                },
            }
        ]
    }
}
```

## 키-값 페어:
<a name="key-value-pair"></a>

키 값 페어 구성 요소를 사용하면 유연하고 읽기 쉬운 형식으로 관련 데이터 포인트의 구성된 디스플레이를 생성할 수 있습니다.

### 개요
<a name="key-value-pair-overview"></a>

사용자 지정 키-값 관계를 정의하여 동적 데이터 표시를 생성합니다. 이 구성 요소는 다음과 같은 속성 페어를 표시하는 데 특히 유용합니다.
+ 사용자 지정 세부 정보
+ 계정 정보

### 특성
<a name="key-value-pair-features"></a>

1. **대화형 링크 옵션**
   + 리소스 링크 연결
     + 관련 리소스에 직접 연결
     + 다음에 대한 원활한 탐색:
       + 계산된 속성
       + Segments
     + 새 탭에서 열기
   + 외부 URL 링크
     + 항목 값을 선택할 수 있는 URLs로 변환
     + 새 탭에서 열기
   + 서랍 보기 링크
     + 측면 서랍에서 세부 정보 열기
     + 페이지를 나가지 않고 전체 세부 정보 보기

1. 열 구성
   + 키-값 페어의 1\$14개 열 정의

1. 논리적 그룹화에서 페어 구성

**그림 1**

![\[사용자 지정 키 값 페어 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/key-value-pair-features-1.png)


**그림 2**

![\[또 다른 사용자 지정 키 값 페어 위젯 편집 예제입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/key-value-pair-features-2.png)


### 구성의 예
<a name="key-value-pair-example-configuration"></a>

```
{
    "Type": "KeyValuePair",
    "Id": "UniqueId",
    "Props": {
        "Columns": 2,
        "Items": [
            {
                "Label": {
                    "Content": {
                        "Type": "TextContent",
                        "Id": "UniqueId",
                        "Props": {
                            "FontWeight": "bold"
                        },
                        "Children": ["Profile id"]
                    }
                },
                "Value": {
                    "Content": {
                        "Type": "TextContent",
                        "Id": "UniqueId",
                        "Props": {},
                        "Children": ["[string]"]
                    }
                }
            }
        ]
    }
}
```

**참고**  
이 구성 요소는 현재 UI 빌더에서 `ProfileObjects`를 지원하지 않습니다.

## 주요 지표
<a name="key-metric"></a>

주요 지표 구성 요소를 사용하면 중요한 비즈니스 지표, KPI' 및 중요 통계를 쉽게 이해할 수 있는 형식으로 눈에 띄게 표시할 수 있습니다.

### 개요
<a name="key-metric-overview"></a>

중요한 데이터 포인트, 추세 또는 상태 표시기를 강조 표시하는 고가시성 지표 디스플레이를 생성합니다. 이 구성 요소는 다음을 보여 주는 데 적합합니다.
+ 성과 지표
+ 중요 측정
+ 상태 요약
+ 추세 지표

### 특성
<a name="key-metric-features"></a>

1. **대형 디스플레이 텍스트**

1. **지표 형식**

1. **대화형 링크 옵션**
   + 리소스 링크 연결
     + 관련 리소스에 직접 연결
     + 다음에 대한 원활한 탐색:
       + 계산된 속성
       + Segments
     + 새 탭에서 열기
   + 외부 URL 링크
     + 항목 값을 선택할 수 있는 URLs로 변환
     + 새 탭에서 열기
   + 서랍 보기 링크
     + 측면 서랍에서 세부 정보 열기
     + 페이지를 나가지 않고 전체 세부 정보 보기

1. **지표 레이아웃 구성**

**그림 1**

![\[사용자 지정 주요 지표 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/key-metric-features-1.png)


**그림 2**

![\[또 다른 사용자 지정 주요 지표 위젯 편집 예제입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/key-metric-features-2.png)


### 구성의 예
<a name="key-metric-example-configuration"></a>

```
{
    "Type": "KeyMetrics",
    "Props": {
        "MetricDefinitions": [
            {
                "MetricLabel": "Total Revenue",
                "MetricValue": {
                    "Content": {
                        "Type": "TextContent",
                        "Props": {
                            "Format": "USD",
                            "FontSize": "large",
                            "FontWeight": "bold"
                        },
                        "Children": ["[string]"]
                    }
                },
                "Columns": 1
            }
        ]
    }
}
```

**참고**  
이 구성 요소는 현재 UI 빌더에서 `ProfileObjects`를 지원하지 않습니다.

## 도넛 차트
<a name="donut-chart"></a>

도넛 차트 구성 요소를 사용하면 원형 도넛 차트를 통해 감정 점수를 시각화할 수 있습니다.

### 개요
<a name="donut-chart-overview"></a>

사용자 지정 점수 기준을 정의하여 동적 감정 시각화를 생성합니다. 이 구성 요소는 다음을 표시하는 데 특히 유용합니다.
+ 성공 지표
+ 달성률
+ 위험 평가
+ 성과 지표

### 특성
<a name="donut-chart-features"></a>

1. 감정 분석 옵션
   + 긍정적인 감정
     + 0부터 시작
     + 기준을 기준으로 성과를 추적합니다.
       + 사용자 지정 포인트 값
       + 색상으로 구분된 세그먼트
       + 충족되지 않은 조건의 경우 회색
     + 성공률 백분율을 표시합니다.
   + 부정적인 감정
     + 최대값부터 시작
     + 공제 추적:
       + 색상으로 구분된 세그먼트
       + 포인트 감소 시스템
       + 나머지 값은 녹색
     + 최종 점수를 표시합니다.

1. 계산된 속성 값

1. 연산자 옵션
   + 같음
   + 같지 않음
   + 보다 큼
   + 보다 작음

1. 값 조건

1. 조건당 할당된 포인트

**그림 1: 긍정적인 감정 예제**

![\[긍정적인 감정 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/donut-chart-features-1.png)


**그림 2: 부정적인 감정 예제**

![\[부정적인 감정 위젯 편집 예제.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/donut-chart-features-2.png)


### 구성의 예
<a name="donut-chart-example-configuration"></a>

```
{
    "Type": "DonutChart",
    "Props": {
        "Variant": "PositiveSentiment",
        "ConditionDefinitions": [
            {
                "Title": "Customer Satisfaction",
                "Color": "#4CAF50",
                "CalculatedAttribute": "satisfaction_score",
                "Operator": "GREATER_THAN",
                "ValueCondition": 8,
                "Points": 10
            }
        ]
    }
}
```

**참고**  
**Donuts는 현재 계산된 속성만 데이터 소스로 지원합니다.**
**모든 조건 정의에는 제목, 색상, 계산된 속성, 연산자, 값 조건 및 점 값이 포함되어야 합니다.**