"Actions": ["CardSelected", "Skip"]
}
```
**템플릿 JSON(문자열화되지 않음)**
```
{
"Head": {
"Title": "CustomerManagedFormView",
"Configuration": {
"Layout": {
"Columns": ["10", "2"] // Default column width for each component is 12, which is also the width of the entire view.
}
}
},
"Body": [
{
"_id": "card-container",
"Type": "Container",
"Props": {},
"Content": [
{
"_id": "cafe_card",
"Type": "Card",
"Props": {
"Id": "cafe-card",
"Heading": "Cafe Card",
"Icon": "Cafe",
"Status": "Status Field",
"Description": "This is the cafe card.",
"Action": "CardSelected" // Note that these actions also appear in the view-content.json file.
},
"Content": []
},
{
"_id": "no_icon_card",
"Type": "Card",
"Props": {
"Id": "NoIconCard",
"Heading": "$.NoIconCardHeading",
"Status": "Status Field",
"Description": "This is the icon card.",
"Action": "CardSelected" // Note that these actions also appear in the view-content.json file.
},
"Content": []
}
]
},
{
"_id": "button",
"Type": "Button",
"Props": { "Action": "Skip" }, // Note that these actions also appear in the view-content.json file.
"Content": ["Skip"]
}
]
}
```
## 보기
**입력**
`$.NoIconCardHeading`은 보기를 렌더링하는 데 `NoIconCardHeading` 필드에 입력값이 필요함을 나타냅니다.
`NoIconCardHeading`이 `No Icon Card`로 설정되어 있다고 가정해 보겠습니다.
**모양**
![\[에이전트 Workspace 보기 카드의 이미지.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/view-resources-custom-the-view.png)
## 보기 출력 예제
보기는 두 가지 주요 데이터, 수행한 `Action`과 `Output` 데이터를 출력합니다.
[보기 표시 블록](https://docs.aws.amazon.com/connect/latest/adminguide/show-view-block.html)과 함께 보기를 사용하는 경우 `Action`은 분기를 나타내며, `Output` 데이터는 보기 표시 블록 설명서에 언급된 대로 `$.Views.ViewResultData` 흐름 속성으로 설정됩니다.
**시나리오 1: **카페 카드** 선택**
```
"Action": "CardSelected"
"Output": {
"Heading": "CafeCard",
"Id": "CafeCard"
}
```
**시나리오 2: **건너뛰기** 버튼 선택**
```
"Action": "Skip"
"Output": {
"action": "Button"
}
```
## 양식 보기 출력 예시
**AWS 관리형 보기(양식 보기)**를 사용하는 경우 양식 데이터의 결과는 *FormData* 아래에 표시됩니다.
```
{
FormData: {
email: "a@amazon.com"
}
}
```
`$.Views.ViewResultData.FormData.email`과 같은 표시 보기 블록에서 데이터에 액세스할 수 있습니다.
**사용자 지정 보기(양식 구성 요소 포함)**를 사용하는 경우 양식 데이터의 결과가 출력 바로 아래에 표시됩니다.
```
{
email: "a@amazon.com"
}
```
`$.Views.ViewResultData.email`과 같은 표시 보기 블록에서 데이터에 액세스할 수 있습니다.
# Amazon Connect에서 에이전트의 워크스페이스에 대한 AWS 관리형 뷰 설정
Amazon Connect 에는 에이전트의 워크스페이스를 추가할 수 있는 보기 세트가 포함되어 있습니다. 다양한 AWS 관리형 뷰를 구성하는 방법에 대한 자세한 내용은 다음을 참조하세요.
------
#### [ Detail view ]
**세부 정보 보기**는 에이전트에게 정보를 표시하고 에이전트가 취할 수 있는 작업 목록을 제공합니다. **세부 정보 보기**의 일반적인 사용 사례는 통화가 시작될 때 에이전트에게 화면 팝을 표시하는 것입니다.
+ 이 보기의 작업을 사용하여 에이전트가 단계별 가이드의 다음 단계로 넘어가도록 하거나 완전히 새로운 워크플로를 호출할 수 있습니다.
+ **Sections**는 유일한 필수 구성 요소입니다. 에이전트에게 표시할 페이지의 본문을 구성할 수 있는 곳입니다.
+ 이 보기에서는 **AttributeBar**와 같은 선택적 구성 요소도 지원됩니다.
**세부 정보 보기**의 대화형 [설명서](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all)
다음은 **세부 정보 보기**의 예를 보여 주는 이미지입니다. 여기에는 페이지 제목, 설명 및 네 가지 예가 있습니다.
![\[페이지 제목, 설명 및 속성이 있는 네 가지 예가 포함된 세부 정보 보기.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/details-view-page-heading-sq.png)
**Sections**
+ 콘텐츠는 정적 문자열, 템플릿 문자열 또는 키-값 쌍일 수 있습니다. 단일 데이터 포인트 또는 목록일 수 있습니다. 자세한 내용은 [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring) 또는 [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section)을 참조하세요.
**AttributeBar(선택 사항)**
+ 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다.
+ 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요.
+ **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다.
+ **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다.
+ **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다.
+ **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다.
**Back(선택 사항)**
+ 선택 사항이지만 포함된 작업이 없는 경우 필수 사항입니다. 제공된 경우 뒤로 탐색 링크가 표시합니다.
+ 링크 텍스트에 표시되는 내용을 제어하는 **Label이 있는 객체입니다.
**Heading(선택 사항)**
+ 선택 사항으로, 제공된 경우 텍스트가 제목으로 표시됩니다.
**Description(선택 사항)**
+ 선택 사항으로, 제공된 경우 제목 아래에 설명 텍스트가 표시됩니다.
**Actions(선택 사항)**
+ 선택 사항으로, 제공된 경우 페이지 하단에 작업 목록이 표시됩니다.
**입력 예제**
```
{
"AttributeBar": [
{"Label": "Example", "Value": "Attribute"},
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true }
],
"Back": {
"Label": "Back"
},
"Heading": "Hello world",
"Description": "This view is showing off the wonders of a detail page",
"Sections": [{
"TemplateString": "This is an intro paragraph"
}, "abc"],
"Actions": ["Do thing!", "Update thing 2!"],
}
```
**출력 예제**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Action 2"
}
}
```
------
#### [ List view ]
**목록 보기**는 제목과 설명이 있는 항목의 목록으로 정보를 표시하는 데 사용됩니다. 항목은 작업이 첨부된 링크 역할을 할 수도 있습니다. 또한 표준 뒤로 탐색 및 영구적인 컨텍스트 헤더를 선택적으로 지원합니다.
**목록 보기**의 대화형 [설명서](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-list--with-all)
다음은 목록 보기의 예를 보여 주는 이미지입니다. 하나의 열에 세 개의 항목이 있습니다.
![\[링크가 있는 목록 항목 1개와 링크가 없는 항목 2개가 있는 목록 보기입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/list-view-column-sq.png)
**Items**
+ 필수 사항으로, 이러한 항목은 리스트로 표시됩니다.
+ 각 항목에는 제목, 설명, 아이콘 및 ID가 있을 수 있습니다.
+ 모든 속성은 선택 사항입니다.
+ ID를 정의하면 출력에 해당 값이 출력의 일부로 포함됩니다.
**AttributeBar(선택 사항)**
+ 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다.
+ 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요.
+ **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다.
+ **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다.
+ **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다.
+ **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다.
**Back(선택 사항)**
+ 선택 사항이지만 포함된 작업이 없는 경우 필수 사항입니다. 제공된 경우 뒤로 탐색 링크가 표시합니다.
+ 링크 텍스트에 표시되는 내용을 제어하는 **Label이 있는 객체입니다.
**Heading(선택 사항)**
+ 선택 사항으로, 제공된 경우 텍스트가 제목으로 표시됩니다.
**SubHeading(선택 사항)**
+ 선택 사항으로, 제공된 경우 텍스트가 목록 제목으로 표시됩니다.
**입력 데이터 예제**
```
{
"AttributeBar": [
{ "Label": "Example", "Value": "Attribute" },
{ "Label": "Example 2", "Value": "Attribute 2" },
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "external", "Url": "https://www.amzon.com" }
],
"Back": {
"Label": "Back"
},
"Heading": "José may be contacting about...",
"SubHeading": "Optional List Title",
"Items": [
{
"Heading": "List item with link",
"Description": "Optional description here with no characters limit. We can just wrap the text.",
"Icon": "School",
"Id": "Select_Car"
},
{
"Heading": "List item not a link",
"Icon": "School",
"Description": "Optional description here with no characters limit."
},
{
"Heading": "List item not a link and no image",
"Description": "Optional description here with no characters limit."
},
{
"Heading": "List item no image and with link",
"Description": "Optional description here with no characters limit."
}
]
}
```
**출력 데이터 예제**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Select_Car"
}
}
```
------
#### [ Form view ]
**양식 보기**를 사용하면 에이전트가 필수 데이터를 수집하고 백엔드 시스템에 데이터를 제출할 수 있는 입력 필드를 제공할 수 있습니다. 이 보기는 헤더가 있는 미리 정의된 **섹션 스타일을 가진 여러 **섹션으로 구성됩니다. 본문은 열 또는 그리드 레이아웃 형식으로 배열된 다양한 입력 필드로 구성됩니다.
**양식 보기**의 대화형 [설명서](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-form--with-all)
다음은 렌터카 예약에 대한 양식 보기의 예를 보여 주는 이미지입니다. 위치 및 날짜 필드가 있습니다.
![\[위치 및 날짜 필드가 있는 양식 보기의 예제입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/form-view-sq.png)
**Sections**
+ 입력 필드 및 표시 필드가 있는 **양식 보기**의 위치입니다.
+ **SectionProps**
+ **Heading**
+ 섹션의 제목
+ **Type**
+ 섹션의 유형
+ FormSection(사용자의 입력을 처리하는 양식) 또는 DataSection(레이블 및 값 목록 표시)
+ **Items**
+ 유형에 따른 데이터 목록입니다. `Type`이 `DataSection`인 경우 데이터는 속성이어야 합니다. `Type`이 `FormSection`인 경우 데이터는 양식 구성 요소여야 합니다.
+ **편집 가능**
+ 섹션 유형이 `DataSection`일 때 제공되면 헤더에 편집 버튼이 표시됩니다.
+ 부울
**Wizard(선택 사항)**
+ 보기의 왼쪽에 **ProgressTracker**가 표시됩니다.
+ 각 항목에는 제목, 설명 및 선택 사항이 있을 수 있습니다.
+ 제목은 필수 사항입니다.
**Back(선택 사항)**
+ 링크 텍스트에 표시되는 내용을 제어하는 Label이 있는 객체 또는 문자열입니다.
**Next(선택 사항)**
+ 이 작업은 해당 단계가 단계의 마지막 단계가 아닐 때 사용됩니다.
+ 객체(FormActionProps) 또는 문자열입니다. 자세한 내용은 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요.
**Cancel(선택 사항)**
+ 이 작업은 해당 단계가 첫 단계가 아닐 때 사용됩니다.
+ 객체(FormActionProps) 또는 문자열입니다. 자세한 내용은 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요.
**Previous(선택 사항)**
+ 이 작업은 해당 단계가 첫 단계가 아닐 때 사용됩니다.
+ 객체(FormActionProps) 또는 문자열입니다. 자세한 내용은 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요.
**Edit(선택 사항)**
+ 이 작업은 섹션 유형이 `DataSection`일 때 표시됩니다.
+ 객체(FormActionProps) 또는 문자열입니다. 자세한 내용은 [FormActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요.
**AttributeBar(선택 사항)**
+ 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다.
+ 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요.
+ **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다.
+ **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다.
+ **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다.
+ **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다.
**Heading(선택 사항)**
+ 페이지 제목으로 표시되는 문자열입니다.
**SubHeading(선택 사항)**
+ 페이지의 보조 메시지입니다.
**ErrorText(선택 사항)**
+ 선택 사항으로, 서버 측 오류 메시지가 표시됩니다.
+ ErrorProps, String
**입력 데이터 예제**
```
{
"AttributeBar": [{
"Label": "Queue",
"Value": "Sales"
},
{
"Label": "Case ID",
"Value": "1234567"
},
{
"Label": "Case",
"Value": "New reservation"
},
{
"Label": "Attribute 3",
"Value": "Attribute"
}
],
"Back": {
"Label": "Back Home"
},
"Next": {
"Label": "Confirm Reservation",
"Details": {
"endpoint": "awesomecustomer.com/submit",
}
},
"Cancel": {
"Label": "Cancel"
},
"Heading": "Modify Reservation",
"SubHeading": "Cadillac XT5",
"ErrorText": {
"Header": "Modify reservation failed",
"Content": "Internal Server Error, please try again"
},
"Sections": [{
"_id": "pickup",
"Type": "FormSection",
"Heading": "Pickup Details",
"Items": [{
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "12",
"xs": "6"
}
}]
},
"Items": [{
"Type": "FormInput",
"Fluid": true,
"InputType": "text",
"Label": "Location",
"Name": "pickup-location",
"DefaultValue": "Seattle"
}]
}, {
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "6",
"xs": "4"
}
}, {
"colspan": {
"default": "6",
"xs": "4"
}
}]
},
"Items": [{
"Label": "Day",
"Type": "DatePicker",
"Fluid": true,
"DefaultValue": "2022-10-10",
"Name": "pickup-day"
}, {
"Label": "Time",
"Type": "TimeInput",
"Fluid": true,
"DefaultValue": "13:00",
"Name": "pickup-time"
}]
}]
}, {
"_id": "dropoff",
"Heading": "Drop off details",
"Type": "FormSection",
"Items": [{
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "12",
"xs": "6"
}
}]
},
"Items": [{
"Label": "Location",
"Type": "FormInput",
"Fluid": true,
"DefaultValue": "Lynnwood",
"Name": "dropoff-location"
}]
}, {
"LayoutConfiguration": {
"Grid": [{
"colspan": {
"default": "6",
"xs": "4"
}
}, {
"colspan": {
"default": "6",
"xs": "4"
}
}]
},
"Items": [{
"Label": "Day",
"Type": "DatePicker",
"Fluid": true,
"DefaultValue": "2022-10-15",
"Name": "dropoff-day"
}, {
"Label": "Time",
"Type": "TimeInput",
"Fluid": true,
"DefaultValue": "01:00",
"Name": "dropoff-time"
}]
}]
}]
}
```
**출력 데이터 예제**
```
{
Action: "Submit",
ViewResultData: {
FormData: {
"dropoff-day": "2022-10-15",
"dropoff-location": "Lynnwood",
"dropoff-time": "01:00",
"pickup-day": "2022-10-10",
"pickup-location": "Seattle",
"pickup-time": "13:00"
},
StepName:"Pickup and drop off"
}
}
```
------
#### [ Confirmation view ]
**확인 보기**는 양식이 제출되거나 작업이 완료된 후 사용자에게 표시되는 페이지입니다. 이 미리 작성된 템플릿에서는 발생한 일의 요약, 다음 단계 및 프롬프트를 제공할 수 있습니다. **확인 보기**는 영구 속성 표시줄, 아이콘/이미지, 헤드라인 및 하위 헤드라인과 함께 홈으로 돌아가기 탐색 버튼을 지원합니다.
**확인 보기**의 대화형 [설명서](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-confirmation--with-all)
다음은 확인의 예를 보여 주는 이미지입니다.
![\[확인 표시 및 렌터카 예약을 확인하는 텍스트가 표시된 확인 보기입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/confirmation-view-check-sq.png)
**Next**
+ 필수 사항입니다.
+ 다음을 위한 작업 버튼
+ Label - 탐색 버튼의 문자열 레이블입니다.
**AttributeBar(선택 사항)**
+ 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다.
+ 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요.
+ **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다.
+ **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다.
+ **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다.
+ **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다.
**Heading(선택 사항)**
+ 페이지 제목으로 표시되는 문자열입니다.
**SubHeading(선택 사항)**
+ 페이지의 보조 메시지입니다.
**Graphic(선택 사항)**
+ 이미지 표시
+ 다음 키가 있는 객체:
+ 포함 - 부울, true이면 그래픽이 페이지에 포함됩니다.
**입력 데이터 예제**
```
{
"AttributeBar": [
{ "Label": "Attribute1", "Value": "Value1" },
{ "Label": "Attribute2", "Value": "Value2" },
{ "Label": "Attribute3", "Value": "Amazon", "LinkType": "external", "Url": "https://www.amzon.com" }
],
"Next": {
"Label": "Go Home"
},
"Graphic": {
"Include": true
},
"Heading": "I have updated your car rental reservation for pickup on July 22.",
"SubHeading": "You will be receiving a confirmation shortly. Is there anything else I can help with today?",
}
```
**출력 데이터 예제**
```
{
"Action": "Next",
"ViewResultData": {
"Label": "Go Home"
}
}
```
------
#### [ Cards view ]
**카드 보기**에서는 에이전트가 연락을 수락하는 즉시 선택할 수 있는 주제 목록을 제시하여 에이전트를 안내할 수 있습니다.
**카드 보기**의 대화형 [설명서](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all)
**에이전트에게 카드를 표시합니다. 다음은 새 예약을 위한 카드와 예정된 여행의 예약을 검토하기 위한 카드 등 에이전트에게 제시되는 6가지 카드의 예를 보여 주는 이미지입니다.
![\[6장의 카드 세트입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/solve-view-sq.png)
**에이전트가 카드를 선택하면 더 많은 정보가 표시됩니다. 다음은 예약 세부 정보를 표시하는 열린 카드를 보여 주는 이미지입니다.
![\[예약 세부 정보가 표시된 열린 카드입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/card-view-sq.png)
**Sections**
+ 요약 및 세부 정보가 있는 객체 목록입니다. 카드 및 세부 정보를 생성하려면 이 정보가 제공되어야 합니다.
+ 요약 및 세부 정보로 구성됩니다. 자세한 내용은 [요약 및 세부 정보](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-cards--with-all)를 참조하세요.
**AttributeBar(선택 사항)**
+ 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다.
+ 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요.
+ **LinkType**은 외부이거나 연결 애플리케이션(예: 사례)일 수 있습니다.
+ **외부인 경우 사용자는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다.
+ **사례인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다.
+ **Copyable**을 선택하면 사용자가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다.
**Heading(선택 사항)**
+ 페이지 제목으로 표시되는 문자열
**Back(선택 사항)**
+ 링크 텍스트에 표시되는 내용을 제어하는 Label이 있는 객체 또는 문자열입니다. 자세한 내용은 [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요.
**NoMatchFound(선택 사항)**
+ 카드 아래에 있는 버튼에 표시되는 문자열입니다. 자세한 내용은 [ActionProps](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#actionProps)를 참조하세요.
**입력 데이터 예제**
```
{
"AttributeBar": [{
"Label": "Queue",
"Value": "Sales"
},
{
"Label": "Case ID",
"Value": "1234567"
},
{
"Label": "Case",
"Value": "New reservation"
},
{
"Label": "Attribute 3",
"Value": "Attribute"
}
],
"Back": {
"Label": "Back"
},
"Heading": "Customer may be contacting about...",
"Cards": [{
"Summary": {
"Id": "lost_luggage",
"Icon": "plus",
"Heading": "Lost luggage claim"
},
"Detail": {
"Heading": "Lost luggage claim",
"Description": "Use this flow for customers that have lost their luggage and need to fill a claim in order to get reimbursement. This workflow usually takes 5-8 minutes",
"Sections": {
"TemplateString": "Steps:- Customer provides incident information
- Customer provides receipts and agrees with amount
- Customer receives reimbursement
"
},
"Actions": [
"Start a new claim",
"Something else"
]
}
},
{
"Summary": {
"Id": "car_rental",
"Icon": "Car Side View",
"Heading": "Car rental - New York",
"Status": "Upcoming Sept 17, 2022"
},
"Detail": {
"Heading": "Car rental - New York",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "trip_reservation",
"Icon": "Suitcase",
"Heading": "Trip to Mexico",
"Status": "Upcoming Aug 15, 2022",
"Description": "Flying from New York to Cancun, Mexico"
},
"Detail": {
"Heading": "Trip to Mexico",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "fligh_reservation",
"Icon": "Airplane",
"Heading": "Flight to France",
"Status": "Upcoming Dec 5, 2022",
"Description": "Flying from Miami to Paris, France"
},
"Detail": {
"Heading": "Flight to France",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "flight_refund",
"Icon": "Wallet Closed",
"Heading": "Refund flight to Atlanta",
"Status": "Refunded July 10, 2022"
},
"Detail": {
"Heading": "Refund trip to Atlanta",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
},
{
"Summary": {
"Id": "book_experience",
"Icon": "Hot Air Balloon",
"Heading": "Book an experience",
"Description": "Top experience for european travellers"
},
"Detail": {
"Heading": "Book an experience",
"Sections": {
"TemplateString": "There is no additional information
"
}
}
}],
"NoMatchFound": {
"Label": "Can't find match?"
}
}
```
**출력 데이터 예제**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Update the trip"
}
}
```
------
# HTML 및 JSX를 사용하여 Amazon Connect 에이전트 Workspace에 대한 보기 사용자 지정
보기 리소스 레이아웃의 모양과 느낌을 사용자 지정할 수 있습니다. 입력 파라미터를 [보기 표시](show-view-block.md) 블록에 전달할 때 HTML 또는 JSX를 활용하여 이 작업을 수행할 수 있습니다.
[보기 표시](show-view-block.md) 블록에서 HTML 또는 JSX를 활용하는 방법의 간단한 예를 보려면 다음 단계를 완료하세요.
1. [보기 표시](show-view-block.md) 블록을 사용하여 흐름을 생성합니다.
1. [보기 표시](show-view-block.md) 블록의 속성 페이지를 엽니다.
1. **보기**의 드롭다운 목록에서 **세부 정보**를 선택합니다.
1. **섹션** 섹션에서 **JSON 설정**을 선택합니다.
1. 다음 JSON 코드를 복사하여 붙여 넣습니다. 이 코드는 HTML 또는 JSX 표현식이 처리되는 방법을 보여 줍니다.
**HTML 예제**
```
{
"TemplateString":
"Steps:- Customer provides incident information
- Customer provides receipts and agrees with
amount
- Customer receives reimbursement
"
}
```
**JSX 예제**
```
{
"TemplateString":
"Please provide an introduction to the customers. Ask them how their day is going
Things to say:
Hello, how are you today? My name is Bob, who am I speaking to?"
}
```
# step-by-step 가이드의 리소스에 Amazon Connect의 UI 빌더 사용
Amazon Connect의 UI 빌더를 사용하여 step-by-step 가이드에 사용되는 보기 리소스를 생성할 수 있습니다. UI 빌더를 사용하면 다음을 수행할 수 있습니다.
+ UI 구성 요소를 캔버스로 끌어서 놓습니다.
+ 레이아웃을 정렬합니다.
+ 각 구성 요소의 속성과 스타일을 편집합니다.
다음 이미지는 UI 빌더 페이지의 예를 보여줍니다.
![\[UI 빌더 사용자 인터페이스입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-updates.png)
1. UI 구성 요소 라이브러리에서 선택하거나 사용 가능한 템플릿 중 하나를 사용하는 **생성** 패널입니다.
1. 구성 요소는 축소 가능한 컨테이너 내에서 그룹화됩니다. 이러한 구성 요소를 보기 리소스의 캔버스로 끌어서 놓습니다.
1. 보기 리소스의 캔버스입니다.
1. **사용자 지정** 패널 및 전역 설정 아이콘입니다. 여기서 열, 정렬 및 색상과 같은 페이지의 전역 속성을 설정합니다. 캔버스에 있는 개별 구성 요소에 대한 속성을 설정하는 위치이기도 합니다.
다음 이미지는 **주소** 구성 요소에 대한 **속성** 탭의 예를 보여 줍니다. 동적 아이콘(번개 모양)을 선택하면 런타임에 필드가 채워집니다.
![\[사용자 지정 패널, 속성 탭, 동적 아이콘입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties.png)
## UI 빌더 액세스
1. https://*instance name*.my.connect.aws/의 Amazon Connect 관리자 웹 사이트에 로그인합니다. 관리자 계정 또는 보안 프로필에서 **채널 및 흐름 - 보기** 권한이 있는 계정을 사용합니다.
1. Amazon Connect 관리자 웹 사이트에서 **UI 관리를** 선택합니다.
1. **보기 생성을** 선택합니다. **뷰 생성** 대화 상자에서 뷰의 이름을 지정하고 **용도 유형을** 선택합니다. 뷰에는 두 가지 용도가 있습니다.
+ **가이드 보기**: 통합 인터페이스에서 연락처별 또는 타사 데이터에 액세스하기 위해 에이전트, 최종 고객 또는 관리자에게 표시할 수 있는 단일 또는 다단계 워크플로를 구성하는 데 사용됩니다.
+ **Workspace 보기**: 홈 페이지와 같은 Workspace 페이지를 빌드하는 데 사용되는 이러한 보기는 고객 응대 처리와 관계없이 일반 인터페이스 구성 요소와 기능을 제공합니다.
1. UI 빌더 페이지가 나타납니다. 템플릿으로 빠르게 시작하거나 처음부터 뷰를 빌드합니다.
1. **새로 생성**을 선택합니다. 다음 이미지와 같이 빈 UI 빌더 페이지가 나타납니다.
![\[빈 UI 빌더 페이지.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-blank-page.png)
# Amazon Connect의 UI 빌더용 UI 구성 요소 라이브러리
모든 UI 빌더 구성 요소는 [Amazon Connect UI 구성 요소 설명서에](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/overview--page) 설명되어 있습니다. 이 설명서에서는 UI 빌더에서 사용할 수 있는 개별 UI 구성 요소와 구성 방법을 보여줍니다.
**생성** 패널, 라이브러리 탭의 UI 빌더에서 **라이브러리** 구성 요소에 액세스합니다. 다음 이미지는 **라이브러리** 탭과 **컨테이너** 구성 요소의 예를 보여 줍니다.
![\[UI 빌더 생성 패널, 라이브러리 탭, UI 구성 요소.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/user-interface-component-library-example.png)
## 컨테이너를 사용하여 구성 요소 이동 및 구성
컨테이너는 보기를 만드는 핵심 구성 요소입니다. UI 구성 요소(다른 컨테이너 포함)를 컨테이너로 이동하여 페이지에서 논리적이고 시각적으로 그룹화할 수 있습니다.
최상위 보기 설정을 사용자 지정할 때 페이지 콘텐츠를 비교적 일관되게 유지하려면 모든 보기에서 컨테이너를 사용하는 것이 좋습니다. 컨테이너에는 열 레이아웃도 함께 제공됩니다. 열 레이아웃을 사용하면 컨테이너 내에서 콘텐츠를 구성할 수 있습니다.
## 양식 생성
에이전트 또는 고객이 작성하고 제출할 양식을 생성하려면 [양식](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) 구성 요소를 사용합니다. 다음 작업 중 하나를 수행할 수 있습니다.
+ UI 라이브러리에서 캔버스로 **양식** 구성 요소를 끌어서 놓습니다.
+ 또는 **템플릿** 탭에서 **양식 예제** 템플릿을 선택합니다. 양식 구성 요소를 사용합니다.
[양식](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/aws-managed-views-form--with-all) 구성 요소는 입력 필드를 삽입하고 **제출** 버튼을 추가할 수 있는 특수한 유형의 컨테이너입니다. 가이드와 상호 작용 중인 사용자가 **제출** 버튼을 누르면, Amazon Connect는 양식 필드에 입력된 모든 값을 흐름으로 전달합니다. 해당 흐름 단계에서 [AWS Lambda 함수](invoke-lambda-function-block.md) 블록을 활용하여 자체 비즈니스 로직을 커스터마이징하고, 서드파티 시스템으로 데이터를 전송하거나 검색할 수 있습니다.
다음 이미지는 자리 표시자 레이블과 제출 버튼이 있는 **양식** 구성 요소의 예를 보여 줍니다.
![\[자리 표시자 레이블과 제출 버튼이 있는 양식 구성 요소입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/user-interface-component-library-form-section-example.png)
# 보기에서 열 레이아웃, 색상 및 데이터 정의 구성
이 주제에서는 Amazon Connect UI 빌더에서 열 레이아웃, 색상 및 동적 데이터 필드를 구성하여 콜센터 에이전트의 보기를 사용자 지정하는 방법을 설명합니다.
UI 빌더에서 사용자 **지정** 패널은 다음 이미지와 같이 오른쪽에 있습니다.
![\[UI 빌더의 사용자 지정 패널 예제, 전역 설정 아이콘.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-customize-panel-example.png)
**사용자 지정** 패널을 사용하여 다음을 구성합니다.
+ 전체 보기 리소스에 대한 전역 설정입니다.
+ 구성 요소 수준의 로컬 설정입니다. 각 구성 요소에는 고유한 속성 세트가 있습니다.
**사용자 지정** 패널을 사용하여 다음을 포함하여 보기에 대한 설정 범위를 설정합니다.
+ 열 레이아웃
+ 색상
+ 동적 데이터 매핑
+ 샘플 데이터
+ 정적 데이터 정의
## 보기에 대한 전역 레이아웃 및 색상 구성입니다.
전역 설정을 구성하려면 다음 이미지와 같이 **사용자 지정** 패널로 이동한 다음 전역 설정 아이콘을 선택합니다.
![\[사용자 지정 패널, 전역 설정 아이콘입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties-global-settings-example.png)
전역 설정을 사용하여 보기의 전체 레이아웃과 색상을 설정합니다.
+ **정렬** 섹션을 사용하여 보기의 왼쪽, 중앙 또는 오른쪽에 대한 구성 요소의 상대적 위치를 지정합니다.
+ 세 가지 색상 필드를 선택합니다.
+ 기본 색상
+ 보조 색상
+ 중립적 색상
보기의 각 구성 요소는 기본적으로 이러한 설정을 적용합니다. 하지만 구성 요소를 사용자 지정할 때 이러한 전역 색상 설정을 재정의할 수 있습니다.
## 레이아웃 열
보기 리소스는 12개의 열로 구성된 플렉스박스 패턴을 사용합니다. 구성 요소는 서로 상대 위치를 차지합니다. 캔버스에 완벽한 픽셀 방식으로 배치되지 않습니다. 이렇게 하면 보기의 구성을 잃지 않고 보기의 크기를 신속하게 스케일 업 및 스케일 다운할 수 있습니다.
전역 설정에서 열을 그룹화하는 방법을 결정할 수 있습니다. 예를 들어, **열** 섹션에서 다음 그림과 같이 보기를 각각 6개의 열로 구성된 두 개의 섹션으로 나눌 수 있습니다.
![\[열 섹션은 각각 6개의 열로 구성된 2개의 섹션으로 나뉩니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-1.png)
다음 이미지는 이 레이아웃이 에이전트에게 어떻게 보일지 보여 주는 예를 보여 줍니다.
![\[에이전트에게 표시되는 것처럼 6개의 열로 구성된 2개의 섹션으로 분할된 보기입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-1.png)
**사용자 지정** 슬라이더를 사용하여 이러한 그룹의 비율을 변경할 수도 있습니다. 예를 들어 다음 이미지와 같이 보기의 왼쪽이 4개의 열이고 오른쪽이 8이 되도록 설정할 수 있습니다.
![\[한 쪽에는 4개의 열이 있고 다른 쪽에는 8개의 열이 있는 레이아웃입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-example-2.png)
다음 이미지는 이 레이아웃이 사용자에게 어떻게 표시되는지 보여 주는 예를 보여 줍니다.
![\[한 쪽에 있는 열 4개와 다른 쪽에 있는 열 4개의 보기로, 에이전트에게 표시됩니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties-layout-columns-details-example-2.png)
# Amazon Connect의 노코드 UI 빌더에 있는 동적 필드 구성
이 주제에서는 Amazon Connect에서 노코드 빌더 UI를 사용하여 에이전트 및 고객 인터페이스를 빌드할 때 하드 코딩된 값 대신 런타임 데이터를 표시하도록 구성 요소의 동적 필드를 구성하는 방법을 설명합니다.
하드 코딩 대신 에이전트 또는 고객에게 데이터를 동적으로 채우려는 시나리오가 있을 수 있습니다. 예를 들어 화면 팝업을 생성하는 경우 고객의 이름과 프로필 ID를 표시할 수 있습니다. 이러한 필드의 값은 연락처에서 연락처로 변경되므로 데이터가 동적이어야 합니다.
구성 요소 필드를 동적으로 채우려면 다음을 수행하세요.
1. 해당 구성 요소의 속성 탭을 엽니다.
1. 동적으로 하려는 필드 옆에 나타나는 동적 아이콘(번개 아이콘)을 선택합니다.
동적 값이 필요한 가장 일반적인 필드는 다음과 같습니다.
+ 표시 필드의 **Value** 필드입니다.
+ 양식 입력의 **DefaultValue** 필드입니다.
기술적으로 에이전트에게 표시되거나 숨겨진 모든 필드가 런타임에 동적으로 결정될 수 있습니다. 따라서 **속성** 탭의 모든 필드를 동적(번개 모양 아이콘)으로 설정할 수 있습니다.
예를 들어 다음 이미지에서 **AttributesBar** 구성 요소를 살펴봅니다.
![\[값이 동적으로 설정된 속성 막대 구성 요소입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-attributebar-example.png)
+ 속성 1의 레이블은 **고객 이름**으로 정적으로 정의됩니다.
+ 속성의 **값**은 동적(번개 모양 아이콘이 선택됨)으로 설정됩니다.
이러한 설정을 사용하면 런타임에 [보기 표시](show-view-block.md) 블록으로 전달되는 데이터에 따라 **AttributesBar**의 값이 결정됩니다.
필드가 동적으로 설정되면 해당 정적 값이 동적 참조로 대체됩니다. 필드 아래에 **샘플 데이터** 섹션이 나타납니다. 이 섹션을 사용하여 [샘플 데이터](no-code-ui-builder-sample-data.md)를 정의합니다.
동적 참조는 런타임 데이터를 설정할 때 [보기 표시](show-view-block.md) 블록에서 예상되는 데이터 구조를 반영합니다. 예를 들어 다음 이미지와 같이 [AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes) 구성 요소의 속성 1 **값**을 고려합니다.
![\[동적일 때 AttributesBar 구성 요소의 속성 1 값입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-dynamicicon.png)
+ 동적으로 설정하면 필드는 `$.AttributeBar_1.Attributes[0].Value`로 변환됩니다. 여기서 `AttributeBar_1`은 구성 요소의 ID입니다.
+ 이는 [보기 표시](show-view-block.md) 블록에서 `AttributeBar_1` 필드가 객체를 받아야 함을 나타냅니다.
+ 해당 객체는 `Attributes` 배열을 포함하며, 첫 번째 항목(`[0]`)은 `Value` 필드를 가진 객체여야 합니다.
명확성이나 재사용성을 위해 동적 참조를 편집할 수 있습니다. 동적 참조는 뷰 내 여러 필드와 컴포넌트 간에 공유될 수 있습니다. 예를 들어, 다음 [AttributeBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes) 구성 요소 이미지에서 동적 참조를 `$.myAttributeValue`로 업데이트합니다. 이제 [보기 표시](show-view-block.md) 블록에는 문자열 입력을 예상하는 `myAttributeValue` 필드가 있습니다.
![\[동적 값인 AttributeBar 구성 요소의 속성입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-dynamic-example2.png)
**중요**
동적 참조의 유형은 필드의 예상 유형과 일치해야 합니다. 예를 들어 부울 필드에는 문자열 기반 동적 참조를 사용할 수 없습니다. 다음 이미지는 동적 참조가 일치하지 않는 경우의 오류 메시지 예제를 보여 줍니다.
![\[동적 참조가 필드의 예상 유형과 일치하지 않기 때문에 발생하는 오류 메시지인 사용자 지정 패널입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-4.png)
또한 구성 요소 내 속성의 모든 속성을 동적으로 설정할 수도 있습니다. 다음 이미지에서, 레이블을 포함한 이 속성에 관한 모든 사항은 [보기 표시](show-view-block.md) 블록으로 전달된 값을 기반으로 런타임 시점에 결정됩니다. 예를 들어, **고객 이름**은 이제 에이전트가 가이드를 사용할 때 볼 수 있는 내용을 파악하는 데 사용할 수 있는 샘플 데이터입니다. 그러나 에이전트는 이 값을 볼 수 없습니다.
![\[사용자 지정 패널, 샘플 데이터로 고객 이름입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-fields-example-5.png)
[AttributesBar](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/ui-component-attributebar--with-attributes)와 같은 특정 구성 요소의 경우 구성 요소의 모든 속성을 동적으로 설정할 수도 있습니다. 예를 들어 AttributeBar를 사용하여 동적 아이콘(번개 모양)을 선택하여 모든 속성을 동적으로 만들 수 있습니다. 속성은 런타임 시 [보기 표시](show-view-block.md) 블록에 전달되는 항목에 따라 결정됩니다.
![\[AttributeBar의 모든 속성은 동적으로 설정됩니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-properties-dynamic-6.png)
# 보기 표시 블록에서 흐름 브랜치로 표시되는 작업 설정
단계별 사용 설명서에서는 사용자가 새 페이지로 진행하기 위한 버튼을 선택해야 합니다. 각 버튼에 대해 작업을 설정하여 UI 빌더에서 이러한 버튼을 구성합니다. 예를 들어 양식을 제출하도록 버튼을 구성할 수 있습니다.
사용자가 런타임에 버튼을 선택하면 가이드는 흐름에 응답 메시지를 보냅니다. **작업** 값은 [보기 표시](show-view-block.md) 블록의 분기 경로를 결정합니다.
예를 들어 보기에는 작업이 서로 다른 세 개의 버튼이 있을 수 있습니다. 이러한 작업은 [보기 표시](show-view-block.md) 블록에서 서로 다른 분기 경로로 표시됩니다. 이를 통해 가이드 흐름에서 적절한 분기 로직을 구성할 수 있습니다.
다음 이미지는 노코드 빌더의 **사용자 지정** 패널에 있는 **작업** 섹션의 예를 보여 줍니다.
![\[노코드 UI 빌더에 있는 사용자 지정 패널의 작업 섹션입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-setting-actions-in-flows-example.png)
# Amazon Connect의 단계별 가이드에서 사용할 보기 저장 및 게시
보기 리소스에는 버전 관리가 지원됩니다. 버전 관리를 통해 단계별 가이드에서 생성 및/또는 사용한 뷰의 이전 버전을 감사하고 재사용할 수 있습니다.
1. 아직 입력하지 않은 경우 보기의 이름을 입력합니다. 보기에 이름이 지정되기 전까지는 저장할 수 없습니다.
1. 보기를 변경한 후 **저장**을 선택하여 리소스를 업데이트합니다.
1. 단계별 가이드 흐름에서 보기를 사용할 준비가 되면 **게시**를 선택합니다. 이제 흐름에서 사용할 수 있도록 뷰가 [보기 표시](show-view-block.md) 블록에 표시됩니다.
게시된 보기 버전만 흐름에서 사용할 수 있도록 [보기 표시](show-view-block.md) 블록에 표시됩니다.
# 빠르게 시작할 수 있는 UI 빌더 템플릿
UI 빌더에는 캔버스를 구성 요소로 미리 채우는 데 사용할 수 있는 템플릿이 포함되어 있습니다. 템플릿에 액세스하려면 다음을 수행하세요.
1. 노코드 빌더에서 **생성** 패널을 엽니다.
1. **템플릿** 탭을 선택합니다.
1. 사용할 템플릿을 선택하고 보기 캔버스로 끌어다 놓습니다.
캔버스에 템플릿이 표시되면 다음을 수행할 수 있습니다.
+ 구성 요소 추가
+ 구성 요소 삭제
+ 처음부터 빌드된 보기 리소스로 수행할 수 있는 다른 유형의 구성 적용
UI 구성 요소를 캔버스에 이미 배치한 경우 이러한 구성 요소를 덮어쓰고 템플릿이 대신 사용됩니다. 이러한 변경 사항은 보기 리소스를 **저장**한 후 완료됩니다. 템플릿을 잘못 사용하는 경우 페이지를 떠났다가 돌아와서 마지막으로 저장한 보기 리소스 버전으로 돌아갈 수 있습니다.
다음 이미지는 **생성** 패널에서 사용할 수 있는 화면 팝업, 처리, 결제 등의 몇 가지 템플릿의 예를 보여 줍니다.
![\[생성 패널에서 사용할 수 있는 몇 가지 템플릿은 화면 팝업, 처리, 결제입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-templates-example.png)
# Amazon Connect 에이전트 Workspace에서 서드파티 애플리케이션의 화면 팝업 기능 사용
서드파티 애플리케이션의 스크린 팝 기능의 경우 단계별 가이드를 사용하거나 앱 고정을 사용할 수 있습니다. 자세한 내용은 [에이전트 Workspace에서 서드파티 애플리케이션에 액세스](3p-apps-agent-workspace.md) 단원을 참조하십시오. 고객 응대가 들어오면 **가이드** 탭이 에이전트 Workspace의 첫 번째 탭으로 열립니다. 흐름을 사용하여 [단계별 가이드를 구성](how-to-invoke-a-flow-sg.md)할 수 있습니다.
**참고**
보기를 구성하는 경우:
에 등록된 앱 이름이 [애플리케이션](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-application--with-agent-workspace-example) 및/또는 앱 시작 구성 요소에 제공하는 앱 이름과 AWS Management Console 정확히 일치하는지 확인합니다.
오류가 발생하고 이름이 일치한다고 생각되면 AWS Management Console 애플리케이션 이름을 편집합니다. 선행 또는 후행 공백이 없는지 확인합니다.
+ [애플리케이션](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-application--with-agent-workspace-example) 구성 요소를 사용하면 서드파티 애플리케이션을 가이드에 임베딩할 수 있습니다. 연락처가 들어오면 애플리케이션이 첫 번째 탭에 표시됩니다.
+ App Launch 구성 요소를 사용하면 에이전트 Workspace에서 탭으로 열도록 애플리케이션을 구성합니다. 자동 열기를 켜면 가이드가 첫 번째 탭으로 초점을 맞추고 애플리케이션이 다른 탭으로 열립니다.
+ 항상 자동 열기와 함께 [링크](https://d3irlmavjxd3d8.cloudfront.net/?path=/story/ui-component-link--default-case) 구성 요소를 사용하여 새 브라우저 창에서 열 수 있도록 브라우저 링크를 구성할 수 있습니다.
연락처에 대한 보다 구체적인 대상 또는 파라미터를 제공하는 경로를 제공할 수 있는 옵션이 있습니다. 경로를 제공하면 도메인으로 단축됩니다. 앱 도메인 끝에 슬래시를 입력합니다.
**예제 1(권장)**:
```
App Domain registered in AWS Management Console: https://example.com/
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Success if website exists!
```
**예제 2:**
```
App Domain registered in AWS Management Console: https://example.com/dogs/
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Fails because only subdomains of https://example.com/dogs/ are allowed
```
**예제 3:**
```
App Domain registered in AWS Management Console: https://example.com/cats
Path: cats/siamese
Guides will attempt to render: Domain https://example.com/ + Path cats/siamese
https://example.com/cats/siamese
Success if website exists!
```
다음 이미지는 캔버스에 드롭된 App Launch 구성 요소를 보여 줍니다. **사용자 지정** 패널에는 앱 이름 및 앱 경로를 지정하는 예제가 표시됩니다.
![\[사용자 지정 패널, 예제 앱 이름 및 앱 경로.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-app-integration-1.png)
다음 이미지는 흐름에 추가되고 **DefaultAgentUI** 이벤트 후크에 구성된 [Amazon Connect에서 흐름 블록: 이벤트 흐름 설정](set-event-flow.md) 블록의 예를 보여 줍니다.
![\[DefaultAgentUI 이벤트 후크로 구성된 이벤트 흐름 설정 블록입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-app-integration-2.png)
# 샘플 데이터를 사용하여 Amazon Connect에서 보기 미리 보기
샘플 데이터를 사용하여 사용자에게 보기가 어떻게 보일지 확인할 수 있습니다. 런타임 시 동적으로 결정되는 데이터 필드를 볼 수도 있습니다. 필드가 동적으로 설정된 경우(번개 모양이 선택됨) 해당 속성의 샘플 데이터 섹션 아래의 입력 필드에 **샘플 데이터**를 입력할 수 있습니다. 이 샘플 데이터는 보기 전용입니다. Amazon Connect UI 빌더에만 표시됩니다.
예를 들어 다음 이미지는 **우편 주소 양식**의 예를 보여 줍니다.
![\[사용자 지정 패널의 DefaultValue 및 샘플 데이터 섹션입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/no-code-ui-builder-sample-data-example.png)
+ **거리 주소**는 동적 기본값입니다. 런타임 시 고객 프로필에 있는 주소로 채워집니다.
+ 최종 UI가 에이전트에 어떻게 표시되는지 확인하려면 텍스트 기본값을 입력할 수 있습니다.
+ `7 W 34th St` 값은 Amazon Connect 관리 웹 사이트에서 표시 목적으로만 사용됩니다. 에이전트에는 표시되지 않습니다.
# 뷰가 있는 워크스페이스 명명
사용자 지정 테마와 함께 Workspace 또는 에이전트 Workspace에서 뷰를 사용하는 경우 UI 구성 요소는 워크스페이스 테마를 상속하거나 사용자 지정 스타일을 사용할 수 있습니다. 몇 가지 원칙에 유의하세요.
+ 워크스페이스 테마가 설정되면 사용자가 사용자 지정 편집을 하지 않을 때 뷰의 글로벌 기본 색상, 보조 색상, 기본 색상 및 구성 요소가 기본적으로 워크스페이스 수준 스타일을 상속합니다.
+ 뷰에 UI 빌더에 정의된 기본, 보조 및 기본 색상과 같은 사용자 지정 글로벌 스타일이 있는 경우 사용자 지정 스타일이 워크스페이스 테마보다 우선합니다.
+ 구성 요소에 UI 빌더에 정의된 사용자 지정 스타일이 있는 경우 구성 요소 스타일이 워크스페이스 테마보다 우선합니다.
+ 사용자 지정 구성 요소 색상은 여러 워크스페이스에 보존됩니다.
# 뷰를 사용하여 조건부 UIs 빌드
뷰의 UI 조건 기능을 사용하면 동일한 뷰 내의 다른 구성 요소와의 사용자 상호 작용을 기반으로 뷰 내에서 구성 요소의 속성을 변경할 수 있습니다. 예를 들어 사용자가 드롭다운과 같은 구성 요소 A의 입력 값을 업데이트하면 컨테이너와 같은 구성 요소 B가 보기에 숨겨집니다. 조건을 사용하면 작업 또는 상호 작용의 주어진 요구 사항에 따라 에이전트, 최종 고객 또는 감독자에게 맞춤형 경험을 제공할 수 있습니다.
UI 조건을 생성하려면 UI 빌더를 방문하여 지원되는 구성 요소를 캔버스로 드래그합니다. 화면 오른쪽에 있는 구성 요소의 설정 패널을 방문하여 UI 조건 탭을 클릭합니다. UI 조건 탭은 다음 입력을 수집하도록 구성되어 있습니다.
1. 변경 유형: 조건에 따라 업데이트하려는 선택한 구성 요소의 속성입니다.
+ 가시성: 구성 요소를 표시하거나 숨깁니다.
+ DefaultValue: 구성 요소의 기본값(들)을 업데이트합니다.
+ 필수: 구성 요소의 필수 속성을 업데이트합니다.
+ 비활성화: 구성 요소를 비활성화하거나 활성화합니다.
+ 옵션: 사용자가 구성 요소에서 선택할 수 있는 옵션을 업데이트합니다.
1. 트리거 구성 요소 선택: 적용된 조건을 트리거할 구성 요소
1. 조건 적용 시기: 트리거 구성 요소의 값을 기반으로 평가된 작업
1. 값이 일치할 때 적용: 조건을 트리거하기 위해 평가할 트리거 구성 요소의 값입니다.
1. 결과 적용: 트리거 구성 요소에 대한 평가가 충족되면 선택한 구성 요소에 원하는 변경 사항
구성 요소에 조건이 설정되면 UI 빌더에서 점선으로 요약됩니다. 구성 요소 설정 패널의 조건 탭에서 휴지통 아이콘을 클릭하여 조건을 제거할 수 있습니다.
# Amazon Connect에서 고객 응대 시작 시 가이드 간접 호출
흐름을 생성한 후 사용자에게 표시할 가이드를 동적으로 결정할 수 있습니다. 방법:
1. 흐름에 [Amazon Connect에서 흐름 블록: 이벤트 흐름 설정](set-event-flow.md) 블록을 추가합니다.
1. **이벤트 흐름 설정** 블록에서 **DefaultFlowForAgentUI** 이벤트 후크를 구성합니다.
가이드는 고객 응대가 에이전트에 제공되는 즉시 시작됩니다. 고객 응대가 수락될 때까지 기다리지 않습니다.
예를 들어 IVR 응답, 대기열 이름 및 고객 정보를 확인하여 설정할 흐름 ID를 결정하는 분기 로직을 흐름에 만들 수 있습니다. **확인 속성** 블록을 사용하여 조건부 로직을 설정하고 **이벤트 흐름 설정** 블록을 사용하여 에이전트에게 보낼 흐름을 설정합니다.
다음은 **이벤트 흐름 설정** 블록의 **속성** 페이지를 보여 주는 이미지입니다. 이벤트 후크가 **에이전트 UI의 기본 흐름**으로 설정되어 있습니다.
![\[이벤트 흐름 설정 블록, 에이전트 UI 이벤트 후크의 기본 흐름입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/example-flow-id-sq.png)
# Amazon Connect 채팅에 단계별 가이드 배포
Amazon Connect 채팅에서 단계별 가이드를 활성화하여 대화형 셀프 서비스 경험을 생성할 수 있습니다. 이 기능을 사용하면 컨텍스트를 수집하고 에이전트에 전송하여 고객 문제를 더 빠르게 해결할 수 있습니다. 더 나은 구성 관리를 위해 에이전트용으로 구축한 것과 동일한 가이드를 고객에게 제공할 수 있습니다.
## Amazon Connect 채팅에서 단계별 가이드 활성화
1. 에이전트에 대한 [단계별 가이드](step-by-step-guided-experiences.md)를 활성화하고 구성했는지 확인합니다. 가이드를 구성한 후 에이전트가 응답할 수 있도록 연락처가 예약되어 있을 때 팝업이 표시되는지 확인합니다.
1. 에이전트에 대해 구성한 것과 동일한 방식으로 보기 블록 표시를 사용하여 채팅 흐름에서 보기를 간접적으로 호출하도록 흐름을 설정합니다. 다음 예제는 고객이 채팅 버블을 선택하면 가이드를 트리거합니다. 채팅을 에이전트에게 전송하기 전에 흐름은 두 가지 보기를 거칩니다.
![\[보기 블록 표시를 사용하여 채팅 흐름에서 보기를 간접적으로 호출하도록 흐름을 설정합니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/step-by-step-guides-chat-enable-1.png)
1. 관리자 페이지에서 호스팅 채팅 위젯을 생성합니다. 채팅 흐름을 생성한 채팅 흐름으로 설정합니다.
![\[관리자 페이지에서 호스팅 채팅 위젯을 생성합니다. 채팅 흐름을 생성한 채팅 흐름으로 설정합니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/step-by-step-guides-chat-enable-2.png)
이 호스팅 채팅은 다음과 유사한 스크립트를 생성합니다.
```
```
마지막 줄에는 허용되는 메시지 배열이 포함되어 있습니다. 대화식 메시지를 추가하여 채팅 내에서 가이드를 활성화할 수 있습니다. 예제:
```
amazon_connect('supportedMessagingContentTypes', ['text/plain', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response']);
```
1. 단계별 가이드가 채팅 내에서 작동할 수 있도록 URL의 허용 목록에 다음을 추가합니다.
+ `your-website-url/views/renderer/`
채팅 위젯에 CSP를 사용하여 웹 사이트에서 작업하는 경우 이미 클라우드프런트 URL이 있어야 합니다. 예제:
+ `https://unique-id.cloudfront.net/amazon-connect-chat-interface.js`
**참고**
사용자 지정 빌드 커뮤니케이션 위젯과 채팅할 때 가이드를 사용할 수도 있습니다. 사용자 지정 커뮤니케이션 위젯에 단계별 가이드를 추가하는 방법에 대한 자세한 내용은 Github의 [Amazon Connect 채팅 인터페이스](https://github.com/amazon-connect/amazon-connect-chat-interface)를 참조하세요.
# Amazon Connect에서 고객 응대가 시작될 때 에이전트 Workspace에 고객 응대 컨텍스트 표시
에이전트 Workspace용 단계별 가이드를 설계할 때, 고객 응대 시작 부분에 연락처 속성이 표시되도록 설정할 수 있습니다. 이렇게 하면 에이전트가 고객 응대를 시작할 때 필요한 컨텍스트를 얻을 수 있으므로 문제 해결을 바로 살펴볼 수 있습니다. 이 기능을 화면 팝업이라고도 합니다.
고객 응대 시작 시 고객 응대 속성을 표시하려면 [AWS 관리형 보기](view-resources-managed-view.md)인 **세부 정보 보기**를 구성합니다.
**세부 정보 보기**는 에이전트에게 정보를 표시하고 에이전트가 취할 수 있는 작업 목록을 제공합니다. **세부 정보 보기**의 일반적인 사용 사례는 통화가 시작될 때 에이전트에게 화면 팝업을 표시하는 것입니다.
+ 이 보기에서 제공하는 작업은 단계별 안내에서 에이전트가 다음 단계로 진행할 수 있도록 하는 데 사용될 수 있습니다. 작업을 사용하여 완전히 새로운 워크플로를 간접적으로 호출할 수도 있습니다.
+ **Sections**는 유일한 필수 구성 요소입니다. 에이전트에게 표시할 페이지의 본문을 구성할 수 있는 곳입니다.
+ 이 보기에서는 **AttributeBar**와 같은 선택적 구성 요소도 지원됩니다.
**작은 정보**
**세부 정보 보기**의 미리 보기를 보여 주는 대화형 설명서는 [세부 정보](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-detail--with-all)를 참조하세요.
다음은 **세부 정보 보기**의 예를 보여 주는 이미지입니다. 여기에는 페이지 제목, 설명 및 네 가지 예가 있습니다.
![\[페이지 제목, 설명 및 속성이 있는 네 가지 예가 포함된 세부 정보 보기.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/details-view-page-heading-sq.png)
**Sections**
+ 콘텐츠는 정적 문자열, 템플릿 문자열 또는 키-값 쌍일 수 있습니다. 단일 데이터 포인트 또는 목록일 수 있습니다. 자세한 내용은 [TemplateString](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#templatestring) 또는 [AtrributeSection](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute-section)을 참조하세요.
**AttributeBar(선택 사항)**
+ 선택 사항으로, 제공된 경우 보기 상단에 Attribute 막대가 표시됩니다.
+ 필수 속성인 **Label**, **Value**와 선택 속성인 **LinkType**, **ResourceId**, **Copyable** 및 **Url**이 있는 객체 목록입니다. 자세한 내용은 [Attribute](https://d3irlmavjxd3d8.cloudfront.net/?path=/docs/aws-managed-views-common-configuration--page#attribute)를 참조하세요.
+ **LinkType**은 외부 애플리케이션이거나 Amazon Connect 애플리케이션(예: Amazon Connect Cases)일 수 있습니다.
+ *외부*인 경우 에이전트는 **Url**로 구성된 새 브라우저 페이지로 이동할 수 있습니다.
+ *사례*인 경우 사용자는 ResourceId로 구성된 에이전트 Workspace의 새 사례 세부 정보로 이동할 수 있습니다.
+ **Copyable**을 선택하면 에이전트가 입력 디바이스로 ResourceId를 선택하여 복사할 수 있습니다.
**Back(선택 사항)**
+ 선택 사항이지만 작업이 포함되지 않은 경우 필수 항목입니다. 제공된 경우 돌아가기 탐색 링크가 표시됩니다.
+ 링크 텍스트에 표시되는 내용을 제어하는 **Label이 있는 객체입니다.
**Heading(선택 사항)**
+ 선택 사항으로, 제공된 경우 텍스트가 제목으로 표시됩니다.
**Description(선택 사항)**
+ 선택 사항으로, 제공된 경우 제목 아래에 설명 텍스트가 표시됩니다.
**Actions(선택 사항)**
+ 선택 사항으로, 제공된 경우 페이지 하단에 작업 목록이 표시됩니다.
**입력 예제**
```
{
"AttributeBar": [
{"Label": "Example", "Value": "Attribute"},
{ "Label": "Example 2", "Value": "Attribute 3", "LinkType": "case", "ResourceId": "123456", "Copyable": true }
],
"Back": {
"Label": "Back"
},
"Heading": "Hello world",
"Description": "This view is showing off the wonders of a detail page",
"Sections": [{
"TemplateString": "This is an intro paragraph"
}, "abc"],
"Actions": ["Do thing!", "Update thing 2!"],
}
```
**출력 예제**
```
{
Action: "ActionSelected",
ViewResultData: {
actionName: "Action 2"
}
}
```
# Amazon Connect 콜센터 에이전트가 고객 응대가 종료될 때 처리 코드를 입력하도록 활성화
단계별 가이드의 간단한 사용 사례는 문의 끝에 에이전트가 처리 코드를 입력하도록 하는 것입니다. 에이전트가 문의 끝에 처리 코드를 설정하거나 기타 통화 후 작업을 완료할 수 있도록 하려면 [보기 표시](show-view-block.md) 블록과 [연락처 속성 설정](set-contact-attributes.md) 블록이 하나씩 있는 흐름을 만듭니다.
+ [보기 표시](show-view-block.md) 블록을 사용하여 에이전트에게 필수 입력 필드를 제공하는 **양식** 보기를 만듭니다.
+ [연락처 속성 설정](set-contact-attributes.md) 블록을 사용하여 응답을 문의 속성으로 저장합니다.
또한 [AWS Lambda 함수](invoke-lambda-function-block.md) 블록을 사용하여 입력한 데이터를 외부 시스템으로 보낼 수도 있습니다.
흐름을 만든 후에는 문의 흐름에서 사용자 지정 속성으로 **DisconnectFlowForAgentUI**를 설정하여 문의가 끝날 때 어떤 흐름을 표시할지 동적으로 결정할 수 있습니다. 문의가 종료되기 전에 이 속성이 설정되어 있으면 문의가 종료된 후 에이전트 UI가 이 양식을 표시합니다.
다음 [연락처 속성 설정](set-contact-attributes.md)의 속성 페이지를 보여 주는 이미지입니다. 사용자 정의 속성에 응답을 저장하도록 구성되어 있습니다.
![\[고객 응대 속성 설정 블록의 속성 페이지.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/dispo-codes-sq.png)
# Amazon Connect Contact Lens를 사용하여 연락처 레코드 트랜스크립트에 PII가 표시되지 않도록 방지
기본적으로 가이드를 통해 전달된 모든 정보는 연락 레코드 트랜스크립트에 포함됩니다. 연락 트랜스크립트 사본에 PII가 표시되지 않도록 하려면 단계별 가이드 연락 흐름에서 [녹음 및 분석 동작 설정 블록](set-recording-behavior.md)을 사용하고, [Contact Lens를 활성화](sensitive-data-redaction.md)하고, 민감한 데이터의 수정을 활성화합니다.
PII 수정을 활성화하는 방법에 대한 자세한 내용은 [민감한 데이터 수정 활성화](enable-analytics.md#enable-redaction) 섹션을 참조하세요.
# 뷰를 Connect 리소스와 통합
통합 보기를 사용하여 지정된 간격을 통해 라이브 데이터 소스를 폴링하는 가이드에 사용되는 보기를 생성할 수 있습니다. 뷰 통합은 아래와 같이 UI 빌더의 글로벌 설정 패널에서 사용할 수 있는 뷰 수준 구성입니다.
뷰 통합 패널을 사용하면 뷰에서 데이터를 구성하고 참조할 수 있습니다. 먼저와 통합할 새 도구를 구성합니다. 도구는 보기와 Connect 리소스 간의 특정 통합 지점입니다. 도구를 구성하려면 다음 속성이 필요합니다.
1. 통합 이름: 나중에 뷰 자체의 데이터를 참조하는 데 사용할 통합의 사용자 지정 이름입니다.
1. 통합 유형: 보기와 Connect 리소스 간의 통합 형식입니다.
1. 도구: 흐름 모듈과 같이 뷰가 통합할 통합 소스입니다.
1. 버전 또는 별칭: 뷰가 새 정보를 가져오기 위해 호출할 흐름 모듈 버전/별칭입니다.
1. 새로 고침 활성화(초): 가이드에서 뷰가 실행 중일 때 통합을 호출하는 부울 값입니다.
1. 새로 고침 간격: 뷰가 통합을 호출하여 정보를 가져오는 간격입니다.
+ 라이브 데이터 소스 폴링은 단일 탭 환경에서 가장 잘 작동합니다. 가이드 애플리케이션에서 여러 탭이 열려 있는 경우 각 보기는 데이터 소스를 폴링하여 스로틀과 일부 보기가 오래된 것일 수 있습니다.
1. 도구 입력 객체: 뷰에서 소스(예: 흐름 모듈)로 전송된 데이터를 나타내는 JSON 객체로, 뷰를 업데이트하기 위한 최신 관련 정보를 가져옵니다.
통합이 구성되면 해당 뷰를 사용하여 통합의 출력을 참조할 수 있습니다. UI 빌더에 표시되는 참조는 특정 통합에서 사용 가능한 출력 데이터를 기반으로 합니다.
통합의 참조 데이터를 활용하려면 먼저 UI 구성 요소 및 해당 속성의 데이터를 참조하는 방법을 이해해야 합니다. 흐름 및 보기에서 고객 응대 속성을 참조하는 방법과 마찬가지로 다음 구문을 사용하여 통합에 대한 출력 데이터를 참조`($.Attributes.MyCustomAttribute)`할 수 있습니다`$.#[IntegrationName].[ReferenceObject]`. 사용된 참조 객체가 뷰의 구성 요소 속성에서 허용하는 올바른 형식으로 반환되는지 확인하는 것은 사용자의 책임입니다. 통합 출력 참조를 이해하려면 모듈 구성 페이지를 참조하세요.
런타임 시 통합이 있는 뷰가 로드되면 뷰 스키마에 정의된 대로 통합의 데이터가 채워집니다. 또한 새로 고침 간격을 설정하면 뷰가 각 간격으로 통합을 호출하고 새 데이터가 있는 경우 사용자에게 최신 정보로 뷰를 새로 고치라는 메시지가 표시됩니다.
# 관리자용 Workspace에서 단계별 가이드 사용
페르소나 기반 Workspace의 가이드를 활용하여 거의 모든 Connect 사용자가 따를 수 있는 구조화된 워크플로를 실행할 수 있습니다. 계속하기 전에 먼저 페르소나 기반 워크스페이스를 생성했는지 확인합니다.
UI 빌더에서 "애플리케이션 연결" 구성 요소를 찾아 캔버스로 끕니다. 이 구성 요소를 사용하면 보기에 자사 Connect 애플리케이션을 포함할 수 있습니다. 다음 속성을 사용하여 구성 요소를 구성할 수 있습니다.
1. 애플리케이션 네임스페이스: 구성 요소에 포함할 애플리케이션 유형입니다.
1. ContactFlowId: 애플리케이션 네임스페이스로 'Guide'를 선택한 경우 구성 요소에서 실행할 가이드의 고객 응대 흐름 ID를 선택합니다.
Connect 애플리케이션 구성 요소를 사용하는 경우 사용자는 "시작" 버튼을 클릭하여 가이드를 시작할 수 있습니다. 그러면 백그라운드 채팅 연락처가 생성되어 가이드를 운영할 수 있습니다. 안내 워크플로가 완료되면 사용자는 "다시 시작" 버튼을 클릭하여 흐름 시작부터 가이드를 시작할 수 있습니다. 가이드에 이미 사용된 뷰에 가이드 애플리케이션 구성 요소를 중첩하는 것은 지원되지 않습니다. Connect 애플리케이션 구성 요소의 가이드는 페르소나 기반 Workspace의 페이지로 사용되는 정적 보기에만 포함할 수 있습니다.
# 보기를 사용하여 페르소나 기반 Workspace 페이지 생성
보기를 사용하면 다른 Connect 사용자에게 할당된 페르소나 기반 Workspace 내에서 사용자 지정 페이지를 생성할 수 있습니다. 새 뷰를 생성하려면 먼저 적절한 Workspace 목적을 선택합니다. UI 빌더에 액세스한 후 Workspace 보기에서 사용할 준비가 된 사용 가능한 UI 구성 요소를 필터링하고 선택할 수 있습니다.
Workspace 페이지용으로 설계된 뷰는 특정 사용자 그룹에 맞게 조정된 단일 단계 인터페이스로 작동합니다. 최적의 기능을 보장하려면 알림, 캐러셀 및 컨테이너와 같은 호환 가능한 구성 요소를 사용합니다. Workspace 뷰에는 비즈니스 사용자가 콜센터 운영을 실시간으로 관리할 수 있는 데이터 테이블 구성 요소도 포함될 수 있습니다. 여기에는 통화 라우팅 조정 및 비상 프로토콜 구현과 같은 중요한 사용 사례가 포함됩니다.
## Workspace에서 보기로 입력 데이터 전달
보기를 사용하여 Workspace 페이지를 생성할 때 페이지 구성 마법사를 통해 런타임에 입력 데이터를 전달할 수 있습니다. 이 동적 접근 방식을 사용하면 각 사용 사례에 대해 별도의 구현 없이 다양한 컨텍스트에 맞게 조정되는 재사용 가능한 뷰를 생성할 수 있습니다.
예를 들어 사용자 홈페이지에 대한 보기를 생성할 때 다른 사용자에게 개인화된 인사말을 표시할 수 있습니다. 각 Workspace에 대해 고유한 보기를 빌드하는 대신 동적 헤더 구성 요소가 있는 단일 보기를 생성하고 각각 고유한 사용자 지정 메시지 콘텐츠가 있는 여러 Workspace에서 해당 보기를 재사용할 수 있습니다.
# 에이전트 워크스페이스의 테마 사용자 지정
기본적으로 에이전트 워크스페이스는 로고, 파비콘, 글꼴 패밀리 및 색상 팔레트가 포함된 Amazon Connect 테마를 사용합니다. 테마를 사용하여 조직의 브랜드 자격 증명에 맞게 에이전트 워크스페이스의 시각적 모양을 사용자 지정할 수 있습니다. 에이전트 워크스페이스의 시각적 모양을 사용자 지정하려면 [워크스페이스를 생성하고](amazon-connect-workspaces.md) [테마를 사용자 지정](custom-theme.md)하여 에이전트에게 할당합니다.
![\[사용자 지정 테마가 있는 에이전트 워크스페이스입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/agent-workspace-custom-theme.png)
에이전트는 선호도에 맞게 밝은 모드와 어두운 모드 중에서 선택할 수 있습니다. 모드를 변경하려면 에이전트 워크스페이스의 오른쪽 상단에 있는 사용자 설정으로 이동합니다.
![\[라이트 모드의 에이전트 워크스페이스입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/agent-workspace-light-mode.png)
![\[다크 모드의 에이전트 워크스페이스입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/agent-workspace-dark-mode.png)
# Amazon Connect 에이전트 Workspace에 서드파티 애플리케이션(서드파티 앱) 통합
Amazon Connect 에이전트 워크스페이스는 에이전트가 문제를 효율적으로 해결하고, 고객 경험을 개선하고, 더 빠르게 온보딩하는 데 필요한 도구와 step-by-step 지침을 제공하는 직관적인 단일 애플리케이션입니다. Customer Profiles, Cases 및 Connect AI 에이전트와 같은 에이전트 워크스페이스에서 자사 애플리케이션을 사용하는 것 외에도 타사 애플리케이션을 통합할 수 있습니다.
**참고**
이 기능은 기본 에이전트 Workspace에서만 지원되며 사용자 지정 CCP를 사용할 때는 지원되지 않습니다.
예를 들어 독점 예약 시스템 또는 공급업체 제공 지표 대시보드를 Amazon Connect 에이전트 워크스페이스에 통합할 수 있습니다.
서드파티 애플리케이션 구축에 관심이 있는 개발자는 [에이전트 Workspace 개발자 안내서](https://docs.aws.amazon.com/agentworkspace/latest/devguide/getting-started.html)를 참조하세요.
**Topics**
+ [요구 사항](#onboard-3p-apps-requirements)
+ [통합을 추가하는 방법](#onboard-3p-apps-how-to-integrate)
+ [통합 삭제](#delete-3p-apps)
+ [권한 할당](assign-security-profile-3p-apps.md)
+ [서드파티 애플리케이션 액세스 권한 부여 시 iframe 권한](3p-apps-iframe-permissions.md)
+ [MCP 서버 통합](3p-apps-mcp-server.md)
+ [이벤트 및 요청](3p-apps-events-requests.md)
+ [에이전트 Workspace에서 서드파티 애플리케이션에 액세스](3p-apps-agent-workspace.md)
+ [작업 목록 앱에 액세스](worklist-app.md)
+ [서드파티 애플리케이션 SSO 페더레이션 설정](3p-apps-sso.md)
+ [Amazon Connect 에이전트 Workspace에서 서드파티 애플리케이션의 화면 팝업 기능 사용](no-code-ui-builder-app-integration.md)
+ [서드파티 앱 구축을 위한 워크숍](https://catalog.workshops.aws/amazon-connect-agent-empowerment/en-US/third-party-applications/test)
## 요구 사항
사용자 지정 IAM 정책을 사용하여 서드파티 애플리케이션에 대한 액세스를 관리하는 경우, 사용자가 AWS Management Console에서 서드파티 애플리케이션을 통합하려면 다음과 같은 IAM 권한이 필요합니다. 사용자에게는 `AmazonConnect_FullAccess` 외에도 다음 권한이 필요합니다.
------
#### [ JSON ]
****
```
{
"Version":"2012-10-17",
"Statement": [
{
"Action": [
"app-integrations:CreateApplication",
"app-integrations:GetApplication",
"iam:GetRolePolicy",
"iam:PutRolePolicy",
"iam:DeleteRolePolicy"
],
"Resource": "arn:aws:app-integrations:us-east-1:111122223333:application/*",
"Effect": "Allow"
}
]
}
```
------
## 통합
**참고**
인스턴스에 통합을 추가하려면 인스턴스가 서비스 연결 역할(SLR)을 사용하고 있는지 확인합니다. 인스턴스가 현재 SLR을 사용하지 않지만 통합을 추가하려는 경우 SLR로 마이그레이션해야 합니다. 통합은 SLR을 사용하는 인스턴스에만 추가할 수 있습니다. 자세한 내용은 [2018년 10월 이전에 만든 인스턴스의 경우](connect-slr.md#migrate-slr) 단원을 참조하십시오.
1. Amazon Connect [Console](https://console.aws.amazon.com/connect/)(https://console.aws.amazon.com/connect/)을 엽니다.
1. 왼쪽 탐색 창에서 **통합을** 선택합니다. 이 메뉴가 표시되지 않는다면 해당 리전에서 이 기능을 사용할 수 없기 때문입니다. 이 기능을 사용할 수 있는 리전을 확인하려면 [리전별 Amazon Connect 기능 가용성](regions.md) 섹션을 참조하세요.
1. **통합** 페이지에서 **통합 추가**를 선택합니다.
![\[고객 응대 속성 설정 블록의 속성 페이지.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/integrations-list.png)
1. **통합 추가** 페이지에서 다음을 입력합니다.
1. **기본 정보**
1. **표시 이름**: 통합에 대한 표시 이름입니다. 이 이름은 보안 프로필과 에이전트 Workspace 내의 탭에 있는 에이전트에게 표시됩니다. 나중에 돌아와서 이 이름을 변경할 수 있습니다.
1. **설명(선택 사항)**:이 통합에 대한 설명을 선택적으로 제공할 수 있습니다. 이 설명은 에이전트에게 표시되지 않습니다.
1. **통합 유형**: 통합이 표준 웹 애플리케이션, 서비스 또는 MCP 서버인지 여부를 나타냅니다. 이는 시스템 내에서 통합에 액세스하는 방법을 결정합니다.
1. **통합 식별자**: 유형 표준 애플리케이션 또는 서비스의 통합에 고유한 공식 이름입니다. 액세스 URL당 애플리케이션이 하나만 있는 경우에는 액세스 URL의 오리진을 사용하는 것이 좋습니다. 이 이름은 변경할 수 없습니다.
1. **초기화 타임아웃**: 워크스페이스와의 연결을 설정하는 데 허용되는 최대 시간입니다. 허용된 시간은 밀리초 단위입니다. 이 설정은 연결 문제를 관리하고 시기 적절한 애플리케이션 시작을 보장하는 데 도움이 됩니다.
1. **애플리케이션 세부 정보**
1. **고객 응대 범위**: 웹 애플리케이션이 각 고객 응대에 대해 새로 고칠지 아니면 새 브라우저 세션마다 새로 고칠지 여부를 나타냅니다. 이 설정은 애플리케이션이 데이터를 업데이트하는 빈도에 영향을 줍니다.
1. **초기화 타임아웃**: 워크스페이스와의 연결을 설정하는 데 허용되는 최대 시간입니다. 허용된 시간은 밀리초 단위입니다. 이 설정은 연결 문제를 관리하고 시기 적절한 애플리케이션 시작을 보장하는 데 도움이 됩니다.
1. **액세스**
1. **액세스 URL**: 애플리케이션이 호스팅되는 URL입니다. 로컬 호스트가 아닌 경우 URL은 https로 시작하는 보안 URL이어야 합니다.
**참고**
모든 URL이 iframe이 가능한 것은 아닙니다. URL에서 iframe이 가능한지 확인하는 두 가지 방법은 다음과 같습니다.
URL의 iframe 가능 여부를 확인하는 데 도움이 되는 서드파티 도구가 있는데, 이를 [Iframe Tester](http://iframetester.com/)라고 합니다.
URL에서 iframe이 가능한 경우 이 페이지에서 미리 보기로 렌더링됩니다.
URL에서 iframe이 가능하지 않은 경우 이 페이지의 미리 보기에 오류가 표시됩니다.
이 웹 사이트에 오류가 표시되어도 에이전트 Workspace에서 앱이 여전히 iframe으로 표시될 수 있습니다. 이는 앱 개발자가 앱을 Workspace에만 임베드할 수 있고 다른 곳에는 임베드할 수 없도록 잠글 수 있기 때문입니다. 앱 개발자로부터 이 앱을 받은 경우에는 이 앱을 에이전트 Workspace에 연동해 보는 것이 좋습니다.
기술 관련 사용자의 경우: 연동하려는 애플리케이션의 보안 정책 내용을 확인하세요.
Firefox: 햄버거 메뉴 > 기타 도구 > 웹 개발자 도구 > 네트워크
Chrome: 점 3개 메뉴 > 기타 도구 > 개발자 도구 > 네트워크
기타 브라우저: 개발자 도구에서 네트워크 설정을 찾습니다.
Content-Security-Policy 프레임 상위 지시문은 `https://your-instance.my.connect.aws`이어야 합니다.
지시어가 `same origin` 또는 `deny`인 경우 이 URL은 AWS/Amazon Connect에서 iframe을 사용 수 없습니다.
앱을 iframe할 수 없는 경우 수행할 수 있는 작업은 다음과 같습니다.
+ 앱/URL을 제어하는 경우 앱의 콘텐츠 보안 정책을 업데이트할 수 있습니다. [여기](https://docs.aws.amazon.com/agentworkspace/latest/devguide/recommendations-and-best-practices.html)에서 앱 개발자를 위한 모범 사례/앱이 Amazon Connect 에이전트 Workspace에만 임베드될 수 있도록 보장 섹션을 참조하세요.
+ 앱/URL을 제어할 수 없는 경우에는 앱 개발자에게 연락하여 앱의 콘텐츠 보안 정책을 업데이트하도록 요청할 수 있습니다.
1. **승인된 오리진(선택 사항)**: 액세스 URL과 다른 경우 허용해야 하는 URL을 허용 목록에 추가합니다. 로컬 호스트가 아닌 경우 URL은 https로 시작하는 보안 URL이어야 합니다.
1. [이벤트 및 요청](3p-apps-events-requests.md)에 권한을 추가합니다.
다음은 AWS Management Console을 사용하여 새 애플리케이션을 온보딩하고 권한을 할당하는 방법의 예입니다. 이 예시에서는 애플리케이션에 6가지 권한이 할당됩니다.
**기본 정보 및 액세스 세부 정보 제공**
1. **인스턴스 연결**
1. 이 계정 리전 내의 모든 인스턴스에 이 애플리케이션에 대한 액세스 권한을 부여할 수 있습니다.
1. 인스턴스와 통합을 연결하는 것은 선택 사항이지만 인스턴스(들)와 연결할 때까지이 애플리케이션을 사용할 수 없습니다.
**참고**
MCP 서버의 경우 선택한 게이트웨이의 검색 URL로 구성된 인스턴스만 선택할 수 있습니다.
![\[기본 정보 및 액세스 세부 정보 제공.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/integrations-add-basic-info.png)
**워크스페이스 데이터 통합을 위해 애플리케이션에 권한 부여**
![\[워크스페이스 데이터 통합을 위해 애플리케이션에 권한 부여.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/integrations-add-permissions.png)
**iframe 구성**
![\[iframe 구성.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/integrations-add-iframe-config.png)
1. **통합 추가**(Add Integrations)를 선택합니다.
1. 통합이 성공적으로 생성되면 **통합 세부 정보** 페이지로 이동하고 성공 배너가 표시됩니다.
![\[워크스페이스 데이터 통합을 위해 애플리케이션에 권한 부여.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/integrations-view.png)
표시 이름, 액세스 URL, 권한 등 기존 앱의 특정 속성을 편집할 수 있습니다.
1. 애플리케이션을 만들거나 애플리케이션을 인스턴스에 연결하는 과정에서 오류가 발생한 경우 오류 메시지가 표시되며, 해당 조치를 취하여 문제를 해결할 수 있습니다.
## 통합 삭제
가까운 장래에 통합을 더 이상 사용하지 않으려면 삭제할 수 있습니다. 일시적으로 사용을 중단하고 싶지만 가까운 장래에 다시 사용하려는 경우 다시 추가하지 않아도 되도록 인스턴스와 연결을 끊는 것이 좋습니다. 통합을 삭제하려면 로 이동하여 통합을 AWS Management Console선택한 다음 **삭제**를 선택합니다.
**문제 해결**
+ 통합이 인스턴스와 연결된 경우 작업이 실패합니다. 먼저 모든 인스턴스에서 통합의 연결을 해제해야 합니다. 그런 다음 다시 돌아와 삭제할 수 있습니다.
**작은 정보**
2023년 12월 15일 이전에 통합을 생성한 경우 인스턴스(들)에 대한 통합 연결을 업데이트할 때 문제가 발생할 수 있습니다. IAM 정책을 업데이트해야 하기 때문입니다.
![\[권한 부족으로 인해 통합을 삭제하려고 할 때 IAM 오류 발생\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/delete-3p-apps.png)
다음 권한을 포함하도록 IAM 정책을 업데이트해야 합니다.
+ `app-integrations:CreateApplicationAssociation`
+ `app-integrations:DeleteApplicationAssociation`
------
#### [ JSON ]
****
```
{
"Version":"2012-10-17",
"Statement": [
{
"Action": [
"app-integrations:CreateApplication",
"app-integrations:GetApplication"
],
"Resource": "arn:aws:app-integrations:us-east-1:111122223333:application/*",
"Effect": "Allow"
},
{
"Action": [
"app-integrations:CreateApplicationAssociation",
"app-integrations:DeleteApplicationAssociation"
],
"Resource": "arn:aws:app-integrations:us-east-1:111122223333:application-association/*",
"Effect": "Allow"
},
{
"Action": [
"iam:GetRolePolicy",
"iam:PutRolePolicy",
"iam:DeleteRolePolicy"
],
"Resource": "arn:aws:iam::111122223333:role/aws-service-role/connect.amazonaws.com/AWSServiceRoleForAmazonConnect_*",
"Effect": "Allow"
}
]
}
```
------
# Amazon Connect에서 서드파티 애플리케이션을 사용하기 위한 보안 프로필 권한
이 주제에서는 온보딩하고 연결한 서드파티 애플리케이션에 액세스하는 데 필요한 보안 프로필 권한에 대해 설명합니다. 서드파티 애플리케이션 권한 및 해당 API 이름 목록은 [Amazon Connect 보안 프로필 권한 목록](security-profile-list.md) 섹션을 참조하세요.
## 서드파티 애플리케이션 권한
**참고**
애플리케이션을 인스턴스에 연결한 후, **보안 프로필** 페이지의 **에이전트 애플리케이션** 섹션에 애플리케이션이 표시되기까지 최대 10분 정도 기다려야 할 수 있습니다.
Amazon Connect 인스턴스에 온보딩 AWS 하고 연결한 모든 애플리케이션은 다음 이미지와 같이 **보안 프로필** 페이지의 **에이전트 애플리케이션** 섹션에 표시됩니다.
![\[보안 프로필 페이지의 에이전트 애플리케이션 섹션.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/assign-security-profile-3p-apps-displayed.png)
또한 앱 런처 메뉴가 표시되려면 CCP에 대한 액세스 권한을 부여해야 합니다.
![\[CCP 연락 제어판 액세스에 대한 액세스 권한을 적용했습니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/assign-security-profile-3p-apps-ccp-permissions.png)
권한을 할당한 후 [Amazon Connect 에이전트 Workspace에서 서드파티 애플리케이션에 액세스](3p-apps-agent-workspace.md)를 수행하는 방법을 검토합니다.
# 서드파티 애플리케이션에 Amazon Connect에 대한 액세스 권한을 부여할 때의 iframe 권한
AWS Console의 `onboarding` UI 또는 API를 통해 서드파티 애플리케이션을 구성할 때 `iframe` 권한 설정을 지정할 수 있습니다. 이러한 권한은 애플리케이션이 설정된 후에도 수정할 수 있습니다.
기본적으로 모든 서드파티 애플리케이션에는 `allow-forms`, `allow-popups`, `allow-same-origin`, `allow-scripts` 등의 네 가지 기본 `iframe` 권한이 부여됩니다. 일부 애플리케이션에는 향상된 기능이 필요할 수 있으므로 애플리케이션 등록 프로세스 중에 추가 `iframe` 권한을 요청할 수 있습니다.
**참고**
다음 권한에 대한 브라우저 호환성은 브라우저 구현에 따라 다를 수 있습니다.
| 권한 | 설명 |
| --- | --- |
| 허용 | |
| clipboard-read | 애플리케이션이 클립보드에서 데이터를 읽을 수 있는지 여부를 제어합니다. 현재 Chrome에서 지원되지만 Firefox 및 Safari에서는 지원되지 않습니다. |
| clipboard-write | 애플리케이션이 클립보드에 데이터를 쓸 수 있는지 여부를 제어합니다. 현재 Chrome에서 지원되지만 Firefox 및 Safari에서는 지원되지 않습니다. |
| 마이크 | 애플리케이션이 오디오 입력 디바이스를 사용할 수 있는지 여부를 제어합니다. |
| camera | 애플리케이션이 비디오 입력 디바이스를 사용할 수 있는지 여부를 제어합니다. |
| 샌드박스 | |
| allow-forms | 페이지가 양식을 제출하도록 허용합니다. 기본적으로 지원됩니다. |
| allow-popups | 애플리케이션이 팝업을 열 수 있도록 허용합니다. 기본적으로 지원됩니다. |
| allow-same-origin | 이 토큰을 사용하지 않으면 리소스는 항상 동일한 오리진 정책(데이터 스토리지/쿠키 및 일부 JavaScript API에 대한 액세스를 차단할 수 있음)에 실패하는 특수 오리진에서 가져온 것으로 처리됩니다. 기본적으로 지원됩니다. |
| allow-scripts | 페이지가 스크립트를 실행하도록 허용합니다. 기본적으로 지원됩니다. |
| allow-downloads | 또는 요소에 download 속성을 지정하여 파일을 다운로드할 수 있도록 허용하며, 파일 다운로드로 이어지는 탐색 경로를 통해서도 다운로드가 가능하도록 합니다. |
| allow-modal | 이 키워드와 관계없이