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

# 인앱, 웹 및 영상 통화, 화면 공유 기능 설정
<a name="inapp-calling"></a>

 Amazon Connect 인앱, 웹 및 영상 통화 기능을 사용하면 고객이 웹 또는 모바일 애플리케이션을 떠나지 않고도 연락할 수 있습니다. 이러한 기능을 사용하여 Amazon Connect에 맥락 정보를 전달할 수 있습니다. 이를 통해 고객 프로필과 같은 속성이나 기타 정보(예: 앱 내에서 이전에 수행한 작업)를 기반으로 고객 경험을 개인화할 수 있습니다.

## 중요한 참고 사항
<a name="inapp-calling-important"></a>
+ 영상 통화 또는 화면 공유 세션 중에 에이전트는 고객이 대기 중인 경우에도 고객의 영상 또는 화면 공유를 볼 수 있습니다. 그에 따라 PII를 처리하는 것은 고객의 책임입니다. 이 동작을 변경하려면 사용자 지정 CCP 및 커뮤니케이션 위젯을 빌드하면 됩니다. 자세한 내용은 [인앱, 웹 및 영상 통화 및 화면 공유를 애플리케이션에 네이티브 방식으로 통합](config-com-widget2.md) 단원을 참조하십시오.

## 커뮤니케이션 위젯: 채팅, 음성, 영상을 모두 한 곳에서 구성
<a name="one-page"></a>

인앱, 웹 및 영상 통화를 설정하려면 **커뮤니케이션 위젯** 페이지를 사용합니다. 채팅, 음성, 영상, 화면 공유를 지원합니다. 다음 이미지는 이 모든 옵션을 구성한 해당 페이지의 **커뮤니케이션 옵션** 섹션을 보여 줍니다.

![\[커뮤니케이션 위젯 생성 페이지의 커뮤니케이션 옵션 섹션.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/comm-widget-all.png)


## 다중 사용자 인앱, 웹 및 영상 통화
<a name="multi-user"></a>

진행 중이거나 예약된 웹, 인앱 또는 영상 통화에 최대 4명의 사용자를 추가하여 총 6명의 참가자, 즉 에이전트, 첫 번째 사용자 및 기타 4명의 참가자(사용자 또는 에이전트)를 추가할 수 있습니다.

예를 들어, 모기지 거래를 성사시키기 위해 에이전트와 고객, 고객의 배우자, 번역자, 심지어 감독자(즉, 다른 에이전트)가 통화에 참여하여 문제를 신속하게 해결하도록 할 수 있습니다.

다중 사용자 웹, 인앱 및 영상 통화를 활성화하는 방법을 알아보려면 [다중 사용자 인앱, 웹 및 영상 통화 활성화](enable-multiuser-inapp.md) 섹션을 참조하세요.

## 인앱, 웹 및 영상 통화, 화면 공유를 설정하는 방법
<a name="inapp-options"></a>

 Amazon Connect 인앱, 웹 및 영상 통화와 화면 공유를 웹 사이트 또는 모바일 애플리케이션에 임베드하는 두 가지 방법이 있습니다.
+ 옵션 1: [기본 제공 커뮤니케이션 위젯 구성](config-com-widget1.md). UI 빌더를 사용하여 글꼴과 색상을 사용자 지정하고 웹 사이트에서만 시작할 수 있도록 위젯을 보호할 수 있습니다.
+ 옵션 2: [인앱, 웹, 영상 통화를 모바일 애플리케이션에 네이티브 방식으로 통합](config-com-widget2.md). 이 옵션을 선택하면 커뮤니케이션 위젯을 처음부터 빌드하고 모바일 애플리케이션 또는 웹 사이트와 통합할 수 있습니다. Amazon Connect APIs 및 Amazon Chime SDK 클라이언트 APIs 사용하여 모바일 애플리케이션 또는 웹 사이트에 기본적으로 통합할 수 있습니다.

**참고**  
사용자 지정 에이전트 데스크톱이 있는 경우 Amazon Connect 인앱 및 웹 통화를 위해 변경할 필요가 없습니다. 하지만 [영상 통화 및 화면 공유를 통합](integrate-video-calling-for-agents.md)해야 합니다.

# Amazon Connect에서 기본 제공 커뮤니케이션 위젯 구성
<a name="config-com-widget1"></a>

이 옵션을 사용하여 데스크톱 및 모바일 [브라우저](connect-supported-browsers.md#browsers-inapp)용 커뮤니케이션 위젯을 만들 수 있습니다. 이 절차가 끝나면 Amazon Connect는 사용자 지정 HTML 코드 스니펫을 생성하며, 이 스니펫을 웹 사이트의 소스 코드에 복사하면 됩니다.

1. 관리자 계정 또는 **채널 및 흐름**이 있는 사용자 계정을 사용하여 Amazon Connect 관리자 웹 사이트에 로그인합니다. **커뮤니케이션 위젯 - 보안 프로필에 권한을 생성합니다**.

1.  Amazon Connect왼쪽 탐색 메뉴에서 **채널**, **커뮤니케이션 위젯을** 선택합니다.

1. 마법사가 다음 3가지 단계를 안내합니다.

## 1단계: 커뮤니케이션 채널 선택
<a name="widgetdetails"></a>

1. **커뮤니케이션 위젯** 페이지에서 커뮤니케이션 위젯의 **이름** 및 **설명**을 입력합니다.
**참고**  
이름은 Amazon Connect 인스턴스에서 만든 각 커뮤니케이션 위젯마다 고유해야 합니다.

1. **커뮤니케이션 옵션** 섹션에서 고객이 위젯을 사용할 수 있는 방법을 선택합니다. 다음 이미지는 고객에게 웹 통화, 영상, 화면 공유를 허용하는 옵션을 보여 줍니다.  
![\[웹 통화, 영상, 화면 공유를 위해 구성된 커뮤니케이션 위젯 페이지입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/comm-widget-page-call.png)

1. **웹 통화** 섹션에서 고객을 위한 비디오 또는 화면 공유 경험 활성화 여부를 선택합니다. 이전 이미지는 고객이 에이전트 영상을 보고, 영상을 켜고, 에이전트와 고객이 화면을 공유할 수 있도록 허용하는 옵션을 보여 줍니다. 화면 공유에 대한 제한 설정에 대한 자세한 내용은 [화면 공유에 URL 제한 활성화](screen-sharing-url-restriction.md) 섹션을 참조하세요.

1. [**Save and continue**]를 선택합니다.

## 2단계: 위젯 사용자 지정
<a name="customizewidget"></a>

이러한 옵션을 선택하면 위젯 미리 보기가 자동으로 업데이트되어 고객 경험이 어떨지 확인할 수 있습니다.

![\[커뮤니케이션 위젯의 미리 보기.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/netra-call-preview.png)


**위젯 액세스 버튼 스타일 정의**

1. 16진수 값([HTML 색상 코드](https://htmlcolorcodes.com/))을 입력하여 버튼 배경색을 선택합니다.

1. 아이콘 색상으로 **흰색** 또는 **검은색**을 선택합니다. 아이콘 색상은 사용자 지정할 수 없습니다.

**표시 이름 및 스타일 사용자 지정**

1. 헤더 메시지 및 색상, 위젯 배경색 값을 입력합니다.

1. **로고 URL**: Amazon S3 버킷 또는 다른 온라인 소스에서 로고 배너의 URL을 삽입합니다.
**참고**  
Amazon S3 버킷이 아닌 온라인 소스에서 로고를 가져온 경우에는 사용자 지정 페이지의 커뮤니케이션 위젯 미리 보기에 로고가 표시되지 않습니다. 그러나 사용자 지정 커뮤니케이션 위젯이 페이지에 구현되면 로고가 표시됩니다.

   배너는 .svg, .jpg 또는 .png 형식이어야 합니다. 이미지는 280px(너비) x 60px(높이)까지 가능합니다. 이 크기보다 큰 이미지는 280x60 로고 구성 요소 공간에 맞게 크기가 조정됩니다.

   1. 로고 배너와 같은 파일을 S3에 업로드하는 방법에 대한 지침은 **Amazon Simple Storage Service 사용 설명서의 [객체 업로드](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) 섹션을 참조하세요.

   1. 커뮤니케이션 위젯이 이미지에 액세스할 수 있는 권한을 갖도록 이미지 권한이 올바르게 설정되어 있는지 확인하세요. S3 객체에 공개적으로 액세스할 수 있도록 설정하는 방법에 대한 자세한 내용은 *웹 사이트 액세스 권한 설정* 주제의 [2단계: 버킷 정책 추가](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) 섹션을 참조하세요.

## 3단계: 위젯에 도메인 추가
<a name="widgetdomain"></a>

이 단계를 통해 커뮤니케이션 위젯을 보호하여 내 웹 사이트에서만 실행되도록 할 수 있습니다.

1. 커뮤니케이션 위젯을 배치할 웹 사이트 도메인을 입력합니다. 커뮤니케이션 위젯은 이 단계에서 선택한 웹 사이트에서만 로드됩니다.

   **도메인 추가**를 선택하여 최대 50개의 도메인을 추가합니다.  
![\[도메인 추가 옵션.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/chatwidget-add-domain.png)
**중요**  
웹 사이트 URL이 유효한지, 오류가 없는지 다시 한 번 확인합니다. https:// 으로 시작하는 전체 URL을 포함합니다.
프로덕션 웹 사이트 및 애플리케이션에는 https://를 사용하는 것이 좋습니다.

1. **커뮤니케이션 위젯 요청에 대한 보안 추가**에서 가장 빠른 설정을 위해 **아니요 - 이 단계를 건너뜁니다**를 선택합니다.

   사용자가 인증되었는지 확인하는 기능을 사용하려면 **예**를 선택하는 것이 좋습니다. 자세한 내용은 [Amazon Connect에서 인앱, 웹 및 영상 통화에 대한 고객 경험 개인화](optional-widget-steps.md) 섹션을 참조하세요.

1. [**Save and continue**]를 선택합니다.

   성공\$1 위젯이 생성되었습니다. 생성된 코드를 복사하여 커뮤니케이션 위젯을 표시할 웹 사이트의 각 페이지에 붙여넣습니다.

## 에이전트가 인앱, 웹, 영상 통화, 화면 공유를 사용할 수 있도록 활성화
<a name="agent-cx-cw"></a>

에이전트가 영상 통화 및 화면 공유를 사용할 수 있도록 하려면 **연락 제어판(CCP)**, **영상 통화 - 액세스** 권한을 보안 프로필에 할당하세요.

 Amazon Connect 에이전트 워크스페이스는 Amazon Connect 인앱, 웹 및 영상 통화, 화면 공유를 지원합니다. 전화 통신 통화 및 채팅과 동일한 구성, 라우팅, 분석 및 에이전트 애플리케이션을 사용할 수 있습니다. 시작하기 위해 거쳐야 할 단계는 영상 통화 및 화면 공유를 할 수 있는 권한으로 에이전트의 보안 프로필을 활성화하는 것뿐입니다.

사용자 지정 에이전트 데스크톱의 경우 Amazon Connect 인앱 및 웹 호출을 변경할 필요가 없습니다. 영상 통화 및 화면 공유를 할 수 있는 권한으로 에이전트의 보안 프로필을 활성화하고 영상 통화를 에이전트 데스크톱에 통합하는 방법에 대한 아래 가이드를 따르세요.

## 클라이언트 디바이스가 인앱 또는 웹 통화를 시작하는 방법
<a name="diagram-option1"></a>

다음 다이어그램은 클라이언트 디바이스(모바일 애플리케이션 또는 브라우저)가 인앱 또는 웹 통화를 시작하는 이벤트 순서를 보여 줍니다.

![\[클라이언트 디바이스가 통화를 시작하는 방법을 보여 주는 개념도.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. (선택 사항) 웹 사이트에서 캡처한 속성을 전달하고 JSON 웹 토큰(JWT)으로 유효성을 검사할 수 있습니다.

1. 고객이 웹 사이트 또는 모바일 앱의 커뮤니케이션 위젯을 클릭합니다.

1. 커뮤니케이션 위젯은 JWT에 포함된 속성을 전달 Amazon Connect 하여에 대한 웹 호출을 시작합니다.

1. 연락이 흐름에 도달하여 라우팅되고 대기열에 배치됩니다.

1. 에이전트가 이 연락을 수락합니다.

1. (선택 사항) 고객과 에이전트가 영상을 사용할 수 있도록 설정한 경우, 고객과 에이전트는 영상을 시작할 수 있습니다.

## 추가 정보
<a name="cw-more-resources"></a>

인앱, 웹 및 영상 통화 기능의 요구 사항에 대한 추가 정보는 다음 주제를 참조하세요.
+ [Amazon Connect에서 앱, 웹 및 영상 통화를 위한 에이전트 워크스테이션 요구 사항](videocalling-networking-requirements.md)
+ [인앱, 웹 및 영상 통화 기능을 지원하는 브라우저 및 모바일 OS](connect-supported-browsers.md#browsers-inapp) 

# 인앱, 웹 및 영상 통화 및 화면 공유를 애플리케이션에 네이티브 방식으로 통합
<a name="config-com-widget2"></a>

Amazon Connect 인앱, 웹, 영상 통화 및 화면 공유를 애플리케이션과 통합하는 방법:

1. Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API를 사용하여 연락처를 생성합니다.

1. 그런 다음 API 직접 호출에서 반환된 세부 정보를 사용하여 [iOS](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android) 또는 [JavaScript](https://github.com/aws/amazon-chime-sdk-js)용 Amazon Chime 클라이언트 라이브러리를 사용하여 통화에 조인합니다.

추가 참가자 생성에 대한 자세한 내용은 [다중 사용자 인앱, 웹 및 영상 통화 활성화](enable-multiuser-inapp.md) 섹션을 참조하세요.

샘플 애플리케이션에 대한 다음 GitHub 리포지토리는 [amazon-connect-in-app-calling-examples](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples) 섹션을 참조하세요.

**Topics**
+ [클라이언트 디바이스가 인앱 또는 웹 통화를 시작하는 방법](#diagram-option2)
+ [시작하기](#diagram-option2-gs)
+ [선택적 단계](#optional-steps)

## 클라이언트 디바이스가 인앱 또는 웹 통화를 시작하는 방법
<a name="diagram-option2"></a>

다음 다이어그램은 클라이언트 디바이스(모바일 애플리케이션 또는 브라우저)가 인앱 또는 웹 통화를 시작하는 이벤트 순서를 보여 줍니다.

![\[클라이언트 디바이스가 통화를 시작하는 방법을 보여 주는 개념도.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/netra-gs-diagram.png)


1. 고객은 클라이언트 애플리케이션(웹 사이트 또는 애플리케이션)을 사용하여 인앱 또는 웹 통화를 시작합니다.

1. 클라이언트 애플리케이션(웹 사이트 또는 모바일 애플리케이션) 또는 웹 서버는 Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API를 사용하여 속성 또는 맥락을 Amazon Connect에 전달하는 연락을 시작합니다.

1. 클라이언트 애플리케이션은 2단계의 [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)에서 반환된 세부 정보를 사용하여 통화에 참여합니다.

1. (선택 사항) 클라이언트는 [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) API를 사용하여 [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html) API를 통해 DTMF를 보내는 데 사용되는 `ConnectionToken`을 수신합니다.

1. 연락이 흐름에 도달하고 흐름를 기반으로 라우팅되어 대기열에 배치됩니다.

1. 에이전트가 이 연락을 수락합니다.

1. (선택 사항) 고객과 에이전트가 영상을 사용할 수 있도록 설정한 경우, 고객과 에이전트는 영상을 시작할 수 있습니다.

1. (선택 사항 - 다이어그램에 표시되지 않음) [CreateParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html) 및 [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) API를 사용하여 추가 참가자를 추가할 수 있습니다.

## 시작하기
<a name="diagram-option2-gs"></a>

시작하기 위한 대략적인 단계는 다음과 같습니다.

1. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API를 사용하여 연락을 생성합니다. API는 Amazon Chime SDK 클라이언트가 통화에 조인하는 데 필요한 세부 정보를 반환합니다.

1. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)에서 반환한 구성을 사용하여 Amazon Chime SDK 클라이언트 `MeetingSessionConfiguration` 객체를 인스턴스화합니다.

1. 2단계에서 생성한 `MeetingSessionConfiguration`으로 Amazon Chime SDK 클라이언트 `DefaultMeetingSession`을 인스턴스화하여 클라이언트 회의 세션을 생성합니다.
   + iOS

     ```
     let logger = ConsoleLogger(name: "logger") 
     let meetingSession = DefaultMeetingSession(
         configuration: meetingSessionConfig, 
         logger: logger
     )
     ```
   + Android

     ```
     val logger = ConsoleLogger()
     val meetingSession = DefaultMeetingSession(
         configuration = meetingSessionConfig,
         logger = logger,
         context = applicationContext
     )
     ```
   + JavaScript

     ```
     const logger = new ConsoleLogger('MeetingLogs', LogLevel.INFO);
     const deviceController = new DefaultDeviceController(logger);
     const configuration = new MeetingSessionConfiguration(
         meetingResponse, 
         attendeeResponse
     );
     const meetingSession = new DefaultMeetingSession(
         configuration, 
         logger, 
         deviceController
     );
     ```

1. `meetingSession.audioVideo.start()` 메서드를 사용하여 WebRTC 연락에 오디오로 합류합니다.
   + iOS/Android

     ```
     meetingSession.audioVideo.start()
     ```
   + JavaScript

     ```
     await meetingSession.audioVideo.start();
     ```

1. `meetingSession.audioVideo.stop()` 메서드를 사용하여 WebRTC 연락을 끊습니다.
   + iOS/Android

     ```
     meetingSession.audioVideo.stop()
     ```
   + JavaScript

     ```
     meetingSession.audioVideo.stop();
     ```

## 선택적 단계
<a name="optional-steps"></a>

추가 작업 및 포괄적인 API 설명서는 플랫폼별 API 개요 가이드를 참조하세요.
+ **iOS**: [API 개요](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html)
+ **Android**: [API 개요](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**: [API 개요](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)

### DTMF 톤 전송
<a name="send-dtmf-tones"></a>

통화에 DTMF를 보내려면 [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) 및 [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)라는 두 개의 Amazon Connect 참가자 서비스 API가 각각 필요합니다.

**참고**  
SendMessage API `contentType`은 `audio/dtmf`여야 합니다.

1. [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)을 간접 호출하여 `ConnectionToken`을 검색합니다. 이 API를 호출하려면 `ParticipantToken`이 필요합니다. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) 응답에서 찾을 수 있습니다.

1. `ConnectionToken`을 사용하여 [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)를 호출하여 DTMF 숫자를 전송합니다.

### 오디오 디바이스 선택
<a name="select-audio-devices"></a>

오디오 입력/출력 디바이스를 선택하려면 Android 및 iOS용 Amazon Chime SDK 클라이언트의 메서드 또는 iOS용 [네이티브 iOS 기능](https://developer.apple.com/documentation/avkit/avroutepickerview)을 사용할 수 있습니다.

**iOS/Android**

```
meetingSession.audioVideo.listAudioDevices()
meetingSession.audioVideo.chooseAudioDevice(mediaDevice)
```

**JavaScript**

```
await meetingSession.audioVideo.listAudioInputDevices();
await meetingSession.audioVideo.listAudioOutputDevices();
await meetingSession.audioVideo.startAudioInput(device);
await meetingSession.audioVideo.chooseAudioOutput(deviceId);
```

### 오디오 음소거 및 음소거 해제하기
<a name="mute-unmute-audio"></a>

음소거 및 음소거 해제의 경우 `meetingSession.audioVideo.realtimeLocalMute()` 및 `meetingSession.audioVideo.realtimeLocalUnmute()`를 사용합니다.

**iOS/Android**

```
meetingSession.audioVideo.realtimeLocalMute()
meetingSession.audioVideo.realtimeLocalUnmute()
```

**JavaScript**

```
meetingSession.audioVideo.realtimeMuteLocalAudio();
meetingSession.audioVideo.realtimeUnmuteLocalAudio();
```

### 셀프 비디오 시작
<a name="start-self-video"></a>

셀프 비디오를 시작하려면 `meetingSession.audioVideo.startLocalVideo()`를 사용합니다. 특정 디바이스를 열거하고 선택하는 방법에 대한 자세한 내용은 클라이언트 라이브러리 API 가이드를 참조하세요.

**iOS/Android**

```
meetingSession.audioVideo.startLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.startLocalVideoTile();
```

### 셀프 비디오 중지
<a name="stop-self-video"></a>

셀프 비디오를 중지하려면 `meetingSession.audioVideo.stopLocalVideo()`를 사용합니다.

**iOS/Android**

```
meetingSession.audioVideo.stopLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.stopLocalVideoTile();
```

### 에이전트 비디오 활성화
<a name="enable-agent-video"></a>

애플리케이션 내에서 에이전트의 영상을 수신하고 로드할 수 있도록 하려면 `meetingSession.audioVideo.startRemoteVideo()`를 사용합니다. 또한 비디오 타일 관찰자를 구현하고 비디오 타일을 바인딩하여 뷰를 표시해야 합니다.

**iOS/Android**

```
meetingSession.audioVideo.startRemoteVideo()
// Implement VideoTileObserver to handle video tiles
meetingSession.audioVideo.addVideoTileObserver(observer)
// In videoTileDidAdd callback:
meetingSession.audioVideo.bindVideoView(videoView, tileId: tileState.tileId)
```

**JavaScript**

```
// Remote video is received automatically when available
// Implement AudioVideoObserver to handle video tiles
meetingSession.audioVideo.addObserver(observer);
// In videoTileDidUpdate callback:
meetingSession.audioVideo.bindVideoElement(tileId, videoElement);
```

전체 비디오 타일 구현 세부 정보는 플랫폼별 SDK 가이드를 참조하세요.

### 에이전트 비디오 비활성화
<a name="disable-agent-video"></a>

애플리케이션 내에서 에이전트의 영상을 수신하고 로드하도록 허용하지 않으려면 `meetingSession.audioVideo.stopRemoteVideo()`를 사용합니다.

**iOS/Android**

```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```

**JavaScript**

```
meetingSession.audioVideo.unbindVideoElement(tileId);
```

### 데이터 메시지 사용
<a name="use-data-messages"></a>

에이전트 측에서 최종 사용자에게 상태를 전송해야 하는 경우 [데이터 메시지](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional)를 사용할 수 있습니다. 예를 들어 고객이 대기 중인 경우 고객의 애플리케이션에 데이터 메시지를 보내 고객이 대기 중이고 비디오/화면 공유가 여전히 전송 중임을 알리는 메시지를 표시하거나 비디오/화면 공유를 끌 수 있습니다.

**iOS/Android**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs)
meetingSession.audioVideo.addRealtimeDataMessageObserver(topic, observer)
```

**JavaScript**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs);
meetingSession.audioVideo.realtimeSubscribeToReceiveDataMessage(topic, callback);
```

### 중지 이벤트 수신 대기
<a name="listen-for-stop-events"></a>

연락처의 참가가 `audioVideoDidStop` 관찰자를 통해 종료될 때 이벤트를 수신할 수 있습니다. 특정 상태 코드는 플랫폼에 따라 다를 수 있습니다.

#### 통화가 용량에 도달함
<a name="call-reaches-capacity"></a>

6명 이상의 사용자가 통화에 조인하려고 하면 추가 참가자는 다음 오류를 수신하고 다른 참가자가 나갈 때까지 조인할 수 없습니다.
+ **iOS:** `MeetingSessionStatusCode.audioCallAtCapacity` 또는 `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioCallAtCapacity` 또는 `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallAtCapacity` 또는 `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### 통화에서 참가자 제거됨
<a name="participant-removed-from-call"></a>

에이전트가 참가자를 통화에서 제거했지만 다른 참가자에 대해 연락처가 계속되면 다음 상태 코드를 받게 됩니다. 참가자 제거로 인해 연락처가 종료되는 경우 이 상태 또는 연락처 종료 상태가 수신됩니다.
+ **iOS:** `MeetingSessionStatusCode.audioServerHungup` 또는 `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioServerHungup` 또는 `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` 또는 `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### 연락처 종료
<a name="contact-ends"></a>

실제 연락처가 모든 참가자에 대해 완전히 종료되면 다음 상태 코드를 받게 됩니다.
+ **iOS:** `MeetingSessionStatusCode.audioCallEnded`
+ **Android:** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`

# 다중 사용자 인앱, 웹 및 영상 통화 활성화
<a name="enable-multiuser-inapp"></a>

Amazon Connect 는 기존 통화에서 인앱, 웹 및 비디오 통화에 참여할 사용자를 추가할 수 있도록 지원합니다. 진행 중이거나 예약된 웹, 인앱 또는 영상 통화에 최대 4명의 사용자를 추가하여 총 6명의 참가자, 즉 에이전트, 첫 번째 사용자 및 기타 4명의 참가자(사용자 또는 에이전트)를 추가할 수 있습니다.

## 다중 사용자 통화에 참가자를 추가하는 방법
<a name="how-to-add-participants"></a>

1. 다중 사용자 통화를 활성화하려면 Amazon Connect 콘솔에서 [향상된 다자간 고객 응대 모니터링을](monitor-conversations.md) 활성화해야 합니다.

1. 이 작업이 완료되면 기존 Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API를 활용하여 연락처를 생성하고 이 연락처를 에이전트에게 라우팅할 수 있습니다.

1. 참가자를 추가하려면 먼저 [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API 응답에서 [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html) API로 `ContactId`를 전달하는 참가자를 생성합니다. [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)는 원래 통화자가 에이전트에 연결될 때까지 성공하지 못합니다. 참가자의 비디오 및 화면 공유 기능은 `ParticipantDetails.ParticipantCapabilities` 필드에서 설정할 수 있습니다.

1. [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)가 성공적으로 완료되면 [참가자 토큰](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html#connect-CreateParticipant-response-ParticipantCredentials)을 반환합니다. 이 토큰은 `Type`이 `WEBRTC_CONNECTION`으로 설정된 [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)에 대한 요청에 사용할 수 있습니다. 응답에는 생성된 추가 참가자의 [Amazon Chime SDK 클라이언트 라이브러리](https://docs.aws.amazon.com/chime-sdk/latest/dg/mtgs-sdk-client-lib.html)로 회의에 조인하는 데 사용 가능한 [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)가 포함됩니다. [통합 지침](config-com-widget2.md)에 따라 애플리케이션 최종 사용자가 회의에 조인할 수 있도록 허용합니다.
**참고**  
[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)는 에이전트가 아직 연락처에 연결되지 않은 경우 잘못된 요청 오류를 반환합니다. 에이전트가 연결되기 전에 사용자가 조인을 시도할 수 있는 비즈니스 애플리케이션은 [동시 사용자 조인 처리](#handling-concurrent-joins) 섹션을 참조하세요.

1. [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)이 반환된 후 추가 고객은 언제든지 연결할 수 있습니다. 참가자가 조인한 후 [모든 추가 음성 및 레코딩 동작은 다자간 기능과 유사합니다](multi-party-calls.md). 새 참가자는 [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html) 요청에서 기능이 활성화된 경우 비디오 및 화면 공유를 활성화할 수 있습니다.
**참고**  
언제든지 총 6명의 참가자(고객 및 에이전트)만 활성 통화에 조인할 수 있습니다. Amazon Chime SDK 클라이언트 라이브러리는 회의 조인 중에 한도를 초과하는 참가자를 추가하는 작업이 수행될 때 통화가 용량에 도달했음을 나타내는 상태 코드를 반환합니다.

1. 참가자가 통화에 연결된 후 정상적으로 연결 해제되거나 미리 구성된 시간 동안 비정상적으로 연결 해제되면 참가자 자격 증명이 더 이상 유효하지 않습니다. 클라이언트 라이브러리 `onAudioVideoDidStop` 관찰자가 참석자가 더 이상 유효하지 않음을 나타내는 상태 코드를 수신하면 애플리케이션은 비즈니스 백엔드에서 [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html) 및 [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)에 대한 직접 호출을 새로 트리거하여 통화에 다시 조인할 수 있습니다.

1. 모든 추가 사용자 연결에 대해는 새 연락처 및 [연락처 레코드](ctr-data-model.md)를 Amazon Connect 생성합니다. 모든 추가 연락처에는 원래 연락처로 추적하기 위해 PreviousContactId가 InitialContactId(즉, [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API에서 생성한 연락처)로 설정되어 있습니다. 각 연락처 레코드:
   + **"InitiationMethod": "WEBRTC\$1API"**가 있습니다.
   + 다음과 같은 세그먼트 속성이 있습니다.

     ```
        "SegmentAttributes": {
           "connect:Subtype": {
             "ValueString": "connect:WebRTC"
           }
         },
     ```

   또한 각 연락처 레코드에는 `CreateParticipant`에 제공된 표시 이름이 있습니다. 추가 사용자 연락처에 대한 에이전트 정보는 채워지지 않습니다. 이는 에이전트 정보가 중복되는 것을 방지하기 위한 것입니다.

   다음 다이어그램은 웹, 인앱 또는 영상 통화에 여러 참가자와 에이전트가 추가되는 시나리오에서 이전 및 다음 연락처 ID가 매핑되는 방법을 보여 줍니다.  
![\[다자간 WebRTC 통화에 대한 연락처 ID 매핑 방법을 보여 주는 다이어그램입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/multiparty-webrtc-contact-mapping.png)

## 동시 사용자 조인 처리
<a name="handling-concurrent-joins"></a>

기업은 언제든지 어떤 순서로든 사용자가 조인할 수 있는 애플리케이션을 만들려고 할 수 있습니다. 예를 들어 애플리케이션은 예약된 시간에 통화에 조인하는 데 사용해야 하는 외부 약속 ID가 있는 링크를 여러 사용자에게 이메일로 보낼 수 있습니다. 이러한 동작을 달성하려면 비즈니스 백엔드가 다음을 보장해야 합니다.
+ 조인하는 첫 번째 사용자는 StartWebRTCContact 요청을 트리거합니다.
+ 모든 추가 사용자는 **첫 번째 사용자가 에이전트에 연결한 후에만** CreateParticipant 및 CreateParticipantConnection을 사용합니다.

이 섹션에서는 비즈니스 백엔드에 예약된 약속에 대한 메타데이터를 보관할 수 있는 스토어(예: DynamoDB)가 포함되어 있다고 가정했을 때 가능한 구현을 설명합니다. 예약된 약속은의 기능이 Amazon Connect아니라 예제 구현의 기능입니다.

사용자가 페이지로 이동하면 백엔드에 요청을 보내야 합니다. 백엔드는 다음을 확인합니다.
+ 사용자가 약속을 시작할 수 있는지 여부와 올바른 시간인지 여부.
+ [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)를 호출하여 Amazon Connect 연락처가 이미 생성되었는지 여부입니다.

**연락처가 아직 생성되지 않은 경우** 고객은 사용자 지정 [흐름](connect-contact-flows.md)과 통화에 조인할 것으로 예상되는 해당 에이전트의 에이전트 대기열을 나타내는 [속성](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html#connect-StartWebRTCContact-request-Attributes)을 사용하여 [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html) API를 직접 호출해야 합니다. 흐름에는 속성에 제공된 에이전트 대기열을 사용하도록 구성된 [작업 대기열 설정](set-working-queue.md) 블록이 포함되어야 합니다. 그러면 흐름은 [대기열로 전송](transfer-to-queue.md) 블록으로 종료되어야 합니다. API를 직접적으로 호출하기 전에 백엔드는 스토어를 원자적으로 업데이트하여 통화를 '없음'에서 '생성 중' 상태로 이동하고 동시 수정 예외를 처리해야 합니다.

[StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)의 자격 증명은 고객에게 반환되어야 하며 즉시 통화에 조인해야 합니다. 연락처는 연락처 ID와 함께 비즈니스 스토어에서 '생성됨'으로 표시되어야 합니다. **이 비즈니스 API는 조인할 수 있는 모든 참석자 간에 동기화되어야 합니다**. DB에서 제공하는 원자 작업을 사용하여 이 작업을 수행할 수 있습니다.

**연락처가 상태를 생성 중인 경우** 추가 사용자가 이 상태로 반환되어 관련 정보를 표시하고 잠시 기다린 후 다시 시도해야 합니다.

**연락처가 생성된 경우**: 연락처 ID를 검색하고 [DescribeContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_DescribeContact.html) API를 직접적으로 호출해야 합니다. 비즈니스 백엔드는 **`Contact.AgentInfo.ConnectedToAgentTimestamp`** 필드를 찾아야 합니다. 존재하지 않는 경우 첫 번째 사용자는 에이전트에 연결하지 않았으며, 추가 사용자는 관련 정보를 표시하고 잠시 기다린 후 다시 시도해야 합니다.

필드가 있는 경우 백엔드는 이전 섹션에 설명된 대로 [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)를 직접 호출한 다음 [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)을 직접적으로 호출하여 [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)를 가져와야 합니다.

백엔드 흐름은 다음과 같아야 합니다.

![\[동시 사용자 조인 처리를 위한 백엔드 흐름 다이어그램\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/multiparty-backend-flow.png)


구현을 위해 GitHub에서 [Amazon Connect 인앱 직접 호출 예제](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Web)를 참조할 수 있습니다.

**에이전트는 동일한 웹사이트를 사용하여 조인하지 않습니다**. 에이전트는 [연락 제어판](launch-ccp.md)에서 상태를 **사용 가능**으로 설정해야 합니다. 첫 번째 고객이 조인하면 에이전트가 자동으로 직접적으로 호출됩니다.

## 결제
<a name="multiuser-billing"></a>

추가 참가자에 대한 청구는 초기 고객 및 에이전트 연락에 대한 기존 청구와 동일합니다. 오디오, 비디오 및 화면 공유에는 모두 참가자별로 요금이 발생합니다.

## 대기 동작
<a name="multiuser-hold-behavior"></a>

영상 통화 또는 화면 공유 세션 중에 에이전트는 참가자가 대기 중인 경우에도 참가자의 영상 또는 화면 공유를 볼 수 있습니다. 그에 따라 PII를 처리하는 것은 참가자의 책임입니다. 네이티브 CCP 애플리케이션을 사용하는 경우 에이전트가 아닌 참가자가 대기 중이면 에이전트 비디오가 비활성화됩니다. 이 동작을 변경하려면 사용자 지정 CCP 및 커뮤니케이션 위젯을 빌드하면 됩니다.

자세한 내용은 [인앱, 웹 및 영상 통화 및 화면 공유를 애플리케이션에 네이티브 방식으로 통합](config-com-widget2.md) 단원을 참조하십시오.

## 제한 사항
<a name="multiuser-limitations"></a>

추가 인앱, 웹, 영상 통화 및 화면 공유 참가자를 생성할 때 다음과 같은 제한 사항이 적용됩니다.
+ 고객 비디오 기능이 **없음**으로 설정된 상태에서 원래 연락처가 생성된 경우 추가 참가자는 비디오 기능을 **전송**으로 설정할 수 없습니다.

# Amazon Connect에서 인앱, 웹 및 영상 통화에 대한 고객 경험 개인화
<a name="optional-widget-steps"></a>

이 주제의 단계는 선택 사항이지만 권장됩니다. 이를 통해 이전에 앱 내에서 수행한 행동을 기반으로 고객 경험을 개인화할 수 있습니다. 이 옵션을 사용하면 컨텍스트 정보를 속성으로 전달하는 기능을 포함하여 새 통화를 시작할 때 더 세밀하게 제어할 수 있습니다.

 이 단계를 수행한 후에는 웹 사이트 관리자와 협력하여 새 통화에 대해 JSON 웹 토큰(JWT)을 발행하도록 웹 서버를 설정해야 합니다.

1. 커뮤니케이션 위젯을 이미 만든 경우 **커뮤니케이션 위젯** 페이지에서 편집할 위젯을 선택합니다.

1. **도메인 및 보안** 섹션에서 **편집**을 선택합니다.

1. **커뮤니케이션 위젯 요청에 보안 추가**에서 **예**를 선택합니다.  
![\[예 옵션.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/chatwidget-choose-security.png)

1. [**Save and continue**]를 선택합니다. Amazon Connect는 다음과 함께 위젯을 생성합니다.
   + Amazon Connect는 다음 페이지에서 44자 보안 키를 제공하며, 이 키를 사용하여 JWT를 만들 수 있습니다.
   + Amazon Connect는 커뮤니케이션 위젯 임베드 스크립트 내에 통화가 시작될 때 JWT를 확인하는 콜백 함수를 추가합니다.

     다음 예시와 같이 임베디드 조각에 콜백 함수를 구현해야 합니다.

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   다음 단계에서는 웹 사이트에서 시작되는 모든 통화에 대한 보안 키를 받게 됩니다. 웹 사이트 관리자에게 이 보안 키를 사용하여 JWT를 발급하도록 웹 서버를 설정해 달라고 요청하세요.

1. [**Save and continue**]를 선택합니다.

1. 사용자 지정 HTML 코드 스니펫을 복사하여 웹 사이트의 소스 코드에 삽입합니다.

## 대체 방법: 스니펫 코드에서 직접 연락처 속성 전달
<a name="pass-attrib-from-code"></a>

**참고**  
이러한 속성의 범위는 `HostedWidget-` 접두사로 지정되지만 여전히 변경 가능한 클라이언트 사이트입니다. 고객 응대 흐름에 PII 또는 변경 불가능한 데이터가 필요한 경우 JWT 설정을 사용합니다.

다음 예시에서는 위젯 보안을 활성화하지 않고 스니펫 코드에서 직접 연락처 속성을 전달하는 방법을 보여 줍니다.

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...
  
  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### 연락처 흐름에서 속성 사용
<a name="contact-flow-usage-voice"></a>

[연락처 속성 확인](check-contact-attributes.md) 흐름 블록은 다음 이미지와 같이 **사용자 정의** 네임스페이스를 통해 이러한 속성에 대한 액세스를 제공합니다. 흐름 블록을 사용하여 분기 로직을 추가할 수 있습니다. 전체 경로는 `$Attribute.HostedWidget-attributeName`입니다.

![\[유효한 프롬프트와 잘못된 프롬프트로 흐름 블록 분기를 보여 주는 이미지입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## 커뮤니케이션 위젯 코드 및 보안 키 복사
<a name="copy-widget-script4"></a>

이 단계에서는 선택 사항을 확인하고 커뮤니케이션 위젯의 코드를 복사하여 웹 사이트에 임베드합니다. JWT 생성을 위한 비밀 키를 복사할 수도 있습니다.

### 보안 키
<a name="widget-security-key4"></a>

이 44자 보안 키를 사용하여 웹 서버에서 JSON 웹 토큰을 생성할 수 있습니다. 키를 변경해야 하는 경우 키를 업데이트하거나 회전할 수도 있습니다. 이렇게 하면 Amazon Connect에서 새 키를 제공하고 교체할 기회가 있을 때까지 이전 키를 유지합니다. 새 키를 배포한 후에는 Amazon Connect로 돌아와서 이전 키를 삭제할 수 있습니다.

![\[보안 키입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/chatwidget-security-key.png)


고객이 웹 사이트의 통화 시작 아이콘과 상호 작용하면 커뮤니케이션 위젯이 웹 서버에 JWT를 요청합니다. 이 JWT가 제공되면 위젯은 최종 고객이 Amazon Connect에 거는 전화의 일부로 포함됩니다. 그런 다음 Amazon Connect는 비밀 키를 사용하여 토큰을 해독합니다. 성공하면 웹 서버에서 JWT를 발행한 것으로 확인되며 Amazon Connect가 통화 요청을 고객 센터 에이전트에게 라우팅합니다.

#### JSON 웹 토큰에 대한 세부 내용
<a name="jwts4"></a>
+ 알고리즘: **HS256**
+ 클레임: 
  + **하위**: *widgetId*

    `widgetId`를 자체 widgetId ID로 바꿉니다. widgetId를 찾으려면 커뮤니케이션 [커뮤니케이션 위젯 스크립트](add-chat-to-website.md#chat-widget-script) 예시를 참조하세요.
  + **iat**: \$1즉시 발급(Issued At Time).
  + **exp**: \$1예외(최대 10분).

  날짜 형식에 대한 자세한 내용은 다음 Internet Engineering Task Force(IETF) 문서, [JSON Web Token (JWT)](https://tools.ietf.org/html/rfc7519), 5페이지를 참조하세요.

다음은 Python에서 JWT를 생성하는 방법의 예를 보여 주는 코드 조각입니다.

```
payload = {
'sub': widgetId, // don't add single quotes, such as 'widgetId'
'iat': datetime.utcnow(),
'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS)
}

header = {
'typ': "JWT",
'alg': 'HS256'
}

encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

#### 커뮤니케이션 위젯 스크립트
<a name="chat-widget-script4"></a>

다음은 고객이 고객 센터에 전화할 수 있도록 하려는 웹 사이트의 위치에 임베드하는 JavaScript의 예를 보여 주는 이미지입니다. 이 스크립트는 웹 사이트 오른쪽 하단에 위젯을 표시합니다.

다음 이미지에서는 widgetId를 찾을 수 있는 위치의 예를 확인할 수 있습니다.

![\[커뮤니케이션 위젯 스크립트.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/chatwidget-code.png)


웹 사이트가 로드되면 고객은 먼저 **시작** 아이콘을 보게 됩니다. 고객이 이 아이콘을 선택하면 커뮤니케이션 위젯이 열리고 고객이 에이전트에게 전화를 걸 수 있습니다.

언제든지 커뮤니케이션 위젯을 변경하려면 **편집**을 선택합니다.

**참고**  
저장된 변경 사항은 몇 분 안에 고객 경험을 업데이트합니다. 위젯 구성을 저장하기 전에 확인합니다.

![\[위젯 미리 보기의 편집 링크.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/chatwidget-call-edit.png)


웹 사이트의 위젯 아이콘을 변경하려면 웹 사이트를 직접 업데이트할 수 있는 새로운 코드 조각을 받게 됩니다.

# Amazon Connect 웹 직접 호출 위젯에 대한 추가 사용자 지정
<a name="more-customizations-web-calling-widget"></a>

웹 직접 호출 위젯에 다음과 같은 추가 사용자 지정을 추가할 수 있습니다.
+ 고객의 비디오 타일에 [배경 블러](#background-blur)를 적용합니다.
+ 위젯을 [전체 화면](#fullscreen-mode)으로 설정합니다.
+ [기본 카메라 디바이스](#choose-default-camera)를 선택합니다.
+ 컨테이너에 맞게 [비디오 크기를 조정](#resize-video)합니다.

다음 섹션에서는 사용자 지정, 사용 사례 및 구성 방법에 대한 세부 정보를 설명합니다. `WebCallingCustomizationObject`를 구성하여 이러한 사용자 지정을 관리합니다.

**Topics**
+ [배경 흐림](#background-blur)
+ [전체 화면 모드](#fullscreen-mode)
+ [기본 카메라 디바이스 선택](#choose-default-camera)
+ [비디오 크기 조정](#resize-video)
+ [사용자 지정 객체 구성](#configure-customization-object-web)
+ [지원되는 옵션 및 제약 조건](#supported-options-web-calling)

## 배경 흐림
<a name="background-blur"></a>

이 사용자 지정은 고객 비디오의 배경 블러 동작을 제어합니다. 활성화하면 비디오가 활성 상태일 때 고객의 배경이 흐려집니다. 이렇게 하면 영상 통화 중에 배경에 표시될 수 있는 개인 정보 또는 프라이빗 공간을 보호하는 데 도움이 됩니다.

배경 블러를 활성화하려면 `WebCallingCustomizationObject`에서 `videoFilter.backgroundBlur.option`을 `ENABLED_ON_BY_DEFAULT`로 설정합니다.

## 전체 화면 모드
<a name="fullscreen-mode"></a>

이 사용자 지정을 사용하여 위젯의 전체 화면 동작을 제어합니다. 전체 화면을 활성화하는 방법에는 두 가지가 있습니다.
+ 위젯에 전체 화면 버튼을 추가합니다. 고객은 버튼을 사용하여 전체 화면을 켜거나 끌 수 있습니다.

  전체 화면 버튼을 추가하려면 `fullscreen.displayButton`을 `ENABLED`로 설정합니다.

또는
+ 로드 시 위젯을 전체 화면으로 설정합니다.

  로드 시 전체 화면을 활성화하려면 `fullscreen.fullscreenOnLoad`를 `ENABLED`로 설정합니다.

고객이 화면 공유와 같이 위젯에 집중해야 하는 경우 전체 화면 모드를 사용하는 것이 특히 유용합니다.

이 두 옵션을 개별적으로 또는 조합하여 사용할 수 있습니다.

## 기본 카메라 디바이스 선택
<a name="choose-default-camera"></a>

이 사용자 지정을 통해 위젯은 고객이 비디오를 활성화할 때 기본 카메라 디바이스를 선택하여 전방 또는 후방 카메라에 대한 옵션을 제공할 수 있습니다. 이 기능은 예를 들어 어플라이언스를 원격으로 진단하는 데 유용합니다. 고객은 후면 카메라를 사용하여 어플라이언스를 에이전트에게 표시할 수 있습니다.

후면 카메라를 기본값으로 다시 선택하려면 `devices.defaultCamera`를 `Back`으로 설정합니다.

## 비디오 크기 조정
<a name="resize-video"></a>

이 사용자 지정은 위젯에서 고객과 에이전트 모두에 대한 비디오 타일의 크기를 조정하는 방법을 제어합니다. 예를 들어 비디오 프레임의 종횡비가 비디오 타일과 일치하지 않는 경우 비디오 프레임의 크기를 조정하여 전체 비디오 타일을 채우거나 비디오 타일에 맞게 조정하여 빈 공간을 유지할 수 있습니다.
+ 고객의 비디오 크기를 조정하려면 `videoTile.localVideoObjectFit`을 대상 값으로 설정합니다.
+ 에이전트 비디오 크기를 조정하려면 `videoTile.remoteVideoObjectFit`을 대상 값으로 설정합니다.

자세한 내용은 [지원되는 옵션 및 제약 조건](#supported-options-web-calling) 단원을 참조하십시오.

## 사용자 지정 객체 구성
<a name="configure-customization-object-web"></a>

다음 예제에서는 웹 직접 호출에 대한 선택적 사용자 지정을 구현하는 방법을 보여 줍니다. 이러한 옵션에 대한 자세한 설명은 [지원되는 옵션 및 제약 조건](#supported-options-web-calling) 섹션을 참조하세요.

다음 예제에 표시된 필드의 일부 또는 전체를 구현할 수 있습니다. 사용자 지정을 구현하지 않으면 누락된 필드에 기본 동작이 사용됩니다.

```
amazon_connect('webCallingCustomizationObject', { 
        videoFilter: { 
            backgroundBlur: { 
                option: "ENABLED_OFF_BY_DEFAULT" 
            }
        },
        fullscreen: {
            displayButton: "ENABLED",
            fullscreenOnLoad: "DISABLED"
        },
        devices: { 
            defaultCamera: "Front" 
        },
        videoTile: {
            localVideoObjectFit: "cover",
            remoteVideoObjectFit: "cover"
        },
        copyDisplayNameFromAuthenticatedChat: true
});
```

다음 이미지는 전체 화면 모드가 아닐 때 사용자 지정이 어떻게 보이는지 보여 줍니다.

![\[전체 화면 모드가 아닌 경우의 사용자 지정.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/fullscreenmode.png)


다음 이미지는 전체 화면 모드에서 사용자 지정이 어떻게 보이는지 보여 줍니다.

![\[전체 화면 모드에서 사용자 지정.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/nonfullscreenmode.png)


## 지원되는 옵션 및 제약 조건
<a name="supported-options-web-calling"></a>

다음 테이블에는 지원되는 사용자 지정 필드와 권장되는 값 제약 조건이 나와 있습니다.


| 사용자 지정 레이아웃 옵션 | Type | 값 | 설명 | 
| --- | --- | --- | --- | 
|  `videoFilter.backgroundBlur.option`  |  문자열  |  `ENABLED_ON_BY_DEFAULT` \$1 `ENABLED_OFF_BY_DEFAULT`  |  고객의 비디오 타일 배경 블러를 설정합니다. 기본적으로 고객이 비디오를 활성화하면 배경 블러 필터가 비디오 타일에 적용됩니다. 기본적으로 필터를 활성화하지 않으려면 `ENABLED_OFF_BY_DEFAULT`로 설정할 수 있습니다. 고객은 위젯의 기본 설정 페이지에서 필터를 수동으로 활성화할 수 있습니다. | 
|  `fullscreen.displayButton`  |  문자열  |  `ENABLED`  |  위젯의 오른쪽 상단에 버튼을 추가하여 브라우저에서 전체 화면으로 만듭니다. 기본적으로 이 버튼은 위젯에 추가되지 않습니다. 이 버튼을 추가하려면 `ENABLED`로 설정할 수 있습니다. | 
|  `fullscreen.fullscreenOnLoad`  |  문자열  |  `ENABLED`  |  브라우저에서 위젯을 전체 화면으로 만듭니다. 기본적으로 위젯은 웹페이지의 오른쪽 하단 모서리에 고정되며, `ENABLED`로 설정하면 브라우저에서 위젯이 전체 화면으로 표시됩니다. | 
|  `devices.defaultCamera`  |  문자열  |  `Front` \$1 `Back`  | 고객이 비디오를 활성화할 때 기본 카메라 디바이스를 설정합니다. 모바일 또는 태블릿 사용 사례용입니다. 기본적으로 기본 카메라가 선택됩니다([세부 정보](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)). (자세한 내용은 Mozilla 개발자 설명서의 [MediaDevices: enumerateDevices() 메서드](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) 섹션을 참조하세요.) `Front\|Back`으로 설정하면 사용 가능한 경우 해당 카메라를 선택합니다. | 
|  `copyDisplayNameFromAuthenticatedChat`  |  부울  |  `true` \$1 `false`  | 최종 고객이 [고객 인증](authenticate-customer.md) 흐름 블록을 사용하여 인증되는 경우 값을 `true`로 설정하면 표시 이름이 음성 연락처에 복사됩니다. 기본값은 `false`입니다. | 
|  `videoTile.localVideoObjectFit`  |  문자열  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  |  위젯에서 고객 비디오 타일의 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 속성을 설정합니다. 기본적으로 값은 비디오 해상도의 너비와 높이에 따라 결정됩니다. 높이가 너비보다 크면 `contain`이 되고, 그렇지 않으면 `cover`가 됩니다. 각 값에 대한 자세한 설명은 Mozilla 개발자 설명서의 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 섹션을 참조하세요.  이 속성은 위젯에 있는 고객 비디오의 표시 높이 및 너비에만 적용됩니다. 에이전트로 전송된 고객 비디오의 높이와 너비는 변경되지 않습니다.  | 
|  `videoTile.remoteVideoObjectFit`  |  문자열  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  | 위젯에서 고객 비디오 타일의 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 속성을 설정합니다. 기본적으로 값은 비디오 해상도의 너비와 높이에 따라 결정됩니다. 높이가 너비보다 크면 `contain`이 되고, 그렇지 않으면 `cover`가 됩니다. 각 값에 대한 자세한 설명은 Mozilla 개발자 설명서의 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) 섹션을 참조하세요.  이 속성은 위젯에 있는 에이전트 비디오의 표시 높이와 너비에만 적용됩니다.  | 

# Amazon Connect Streams JS를 사용하여 사용자 지정 에이전트 데스크톱에 영상 통화 및 화면 공유 통합
<a name="integrate-video-calling-for-agents"></a>

이 주제는 개발자를 위한 것입니다. 사용자 지정 에이전트 데스크톱의 경우 영상 통화 및 화면 공유를 지원하도록 변경해야 합니다. 다음은 대략적인 단계입니다.

**참고**  
CCP를 사용자 지정 에이전트 애플리케이션에 직접 내장하는 경우 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams)를 사용하여 CCP를 시작할 때 `allowFramedVideoCall`이 true로 설정되어 있는지 확인하세요.

1. [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams)를 사용하여 수신 연락이 WebRTC 연락인지 확인하세요. 다음 코드 예시와 같이 `"connect:WebRTC"`라는 연락 하위 유형을 사용하세요.

   `contact.getContactSubtype() === "connect:WebRTC"`

1. ` contact contact.getName()`의 이름 필드를 사용하여 고객 표시 이름을 검색할 수 있습니다.

## 비디오에 대한 지원 추가
<a name="support-video"></a>

다음 단계를 완료하여 고객이 비디오 처리를 활성화한 경우 비디오 처리에 대한 지원을 추가합니다.

1. 연락에 영상 기능이 있는지 확인하는 방법:

   ```
   // Return true if any connection has video send capability
   contact.hasVideoRTCCapabilities()
   
   // Return true if the agent connection has video send capability
   contact.canAgentSendVideo()
   
   // Return true if other non-agent connection has video send capability
   contact.canAgentReceiveVideo()
   ```

1. 에이전트에게 영상 통화를 처리할 수 있는 영상 권한이 있는지 확인하는 방법:

   `agent.getPermissions().includes('videoContact');`

1. 영상 통화를 수락하려면 연락에 영상 기능이 있어야 하고 에이전트에게는 영상 권한이 있어야 합니다.

   ```
   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. 영상 세션에 합류하려면 `getVideoConnectionInfo`를 직접 호출합니다.

   ```
   if (shouldRenderVideoUI()) {
      const response = await
      contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. 영상 UI를 만들고 영상 회의 세션에 합류하려면 다음을 참조하세요.
   + GitHub의[Amazon Chime JavaScript용 SDK](https://github.com/aws/amazon-chime-sdk-js) 
   + GitHub의 [Amazon Chime SDK React Components Library](https://github.com/aws/amazon-chime-sdk-component-library-react) 

1. 간소화를 위해 다음 코드 조각은 Amazon Chime SDK React Components Library의 예제를 사용합니다.

   ```
   import { MeetingSessionConfiguration } from "amazon-chime-sdk-js";
   import {
     useMeetingStatus,
     useMeetingManager,
     MeetingStatus,
     DeviceLabels,
     useLocalAudioOutput
   } from 'amazon-chime-sdk-component-library-react';
   
   const App = () => (
     <MeetingProvider>
       <MyVideoManager />
     </MeetingProvider>
   );
   
   const MyVideoManager = () => {
       const meetingManager = useMeetingManager();
       if (shouldRenderVideoUI()) {
           const response = await contact.getAgentConnection().getVideoConnectionInfo();
           const configuration = new MeetingSessionConfiguration(
               response.meeting, response.attendee);
           await meetingManager.join(configuration, { deviceLabels: DeviceLabels.Video });
           await meetingManager.start();
       }
       
       function endContact() {
           meetingManager.leave();
       }
   }
   ```

1. 비디오 그리드를 렌더링하려면 Amazon Chime SDK React Components Library의 [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)를 사용하거나 [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page)를 사용하여 UI 동작을 사용자 지정합니다.

1. 영상 미리 보기를 렌더링하려면 [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page) 및 [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page) 구성 요소를 사용할 수 있습니다. 카메라 영상을 선택하거나 변경하려면 `meetingManager.selectVideoInputDevice`를 사용하거나 회의가 진행 중인 경우 `meetingManager.startVideoInput `을 사용할 수 있습니다.

   ```
   const meetingManager = useMeetingManager();
   const { isVideoEnabled } = useLocalVideo();
   if (isVideoEnabled) {
       await meetingManager.startVideoInputDevice(current);
    } else {
       meetingManager.selectVideoInputDevice(current);
   }
   ```

1. 배경 흐림 효과를 구현하려면 [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page)를 참조하세요.

1. 사용자 지정 영상 경험을 구축하는 방법에 대한 샘플 코드는 Amazon Chime SDK 샘플인 [Amazon Chime React Meeting demo](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting)를 참조하세요.

## 화면 공유에 대한 지원 추가
<a name="support-screen-sharing"></a>

**참고**  
CCP를 사용자 지정 에이전트 애플리케이션에 직접 내장하는 경우 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams)를 사용하여 CCP를 시작할 때 `allowFramedScreenSharing` 및 `allowFramedScreenSharingPopUp`이 true로 설정되어 있는지 확인하세요.  
`allowFramedScreenSharing`을 true로 설정하면 창 하나 또는 탭의 CCP 하나에서만 화면 공유 버튼이 활성화됩니다. `allowFramedScreenSharingPopUp`을 true로 설정하면 에이전트가 화면 공유 버튼을 선택할 때 별도의 창에서 화면 공유 앱이 시작됩니다. 자세한 지침은 [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) 설명서를 참조하세요.

다음 단계를 완료하여 사용자 지정 에이전트 데스크톱에서 화면 공유를 활성화합니다.

1. 연락처에게 화면 공유 기능이 있는지 확인합니다.

   ```
   // Return true if any connection has screen sharing send capability
   contact.hasScreenShareCapability()
   
   // Return true if the agent connection has screen sharing send capability
   contact.canAgentSendScreenShare()
   
   // Return true if customer connection has screen sharing send capability
   contact.canCustomerSendScreenShare()
   ```

1. 에이전트에 비디오 권한이 있는지 확인합니다.

   ```
   agent.getPermissions().includes('videoContact');
   ```

1. 에이전트가 적격 연락처에 대한 화면 공유 세션을 시작할 수 있는지 확인합니다.

   ```
   fun canStartScreenSharingSession() {
       return contactgetContactSubtype() === "connect:WebRTC" &&
       contact.hasScreenShareCapability() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. `startScreenSharing`을 직접적으로 호출하여 화면 공유 세션을 시작합니다. 이렇게 하면 연락처에 `ScreenSharingActivated`가 추가되어 [연락처 레코드](ctr-data-model.md) 에서 검색할 수 있습니다.

   ```
   contact.startScreenSharing();
   ```

1. `getVideoConnectionInfo`를 직접적으로 호출하여 세션에 참여합니다. 에이전트가 비디오를 처리하기 위해 비디오 세션에 참여한 경우 단계를 건너뛸 수 있습니다.

   ```
   if (canStartScreenSharingSession) {
       contact.startScreenSharing();
       const response = await
       contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Amazon Chime SDK React Components Library를 사용하여 세션에 참여합니다. 코드 스니펫은 [비디오에 대한 지원 추가](#support-video)의 6단계를 참조하세요.

1. Amazon Chime SDK React Components에서 동일한 [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)를 사용하여 화면 공유 비디오 타일을 렌더링합니다. 자세한 내용은 [useContentShareState](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) 및 [useContentShareControls](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page)를 참조하세요.

1. 세션을 종료할 때 `stopScreenSharing`을 직접적으로 호출합니다.

   ```
   contact.stopScreenSharing();
   ```

1. 다음 콜백을 구독하여 화면 공유 활동에 대한 이벤트를 수신할 수 있습니다.

   ```
   initScreenSharingListeners() {
       this.contact.onScreenSharingStarted(() => {
           // Screen sharing session started
       });
   
       this.contact.onScreenSharingStopped(() => {
           // Screen sharing session ended
       });
   
       this.contact.onScreenSharingError((error) => {
           // Screen sharing session error occurred
       });
     }
   }
   ```

# 화면 공유에 URL 제한 활성화
<a name="screen-sharing-url-restriction"></a>

고객 및 에이전트가 고객 응대 중에 공유할 수 있는 URL을 관리할 수 있습니다. 이를 통해 보안 및 프라이버시를 강화할 수 있습니다. 고객 또는 에이전트가 허용 목록에 없는 URL을 공유하면 오류 메시지가 표시되고 화면 공유 비디오가 자동으로 일시 중지되고 블랙아웃됩니다.

**중요**  
지원되는 웹 브라우저는 다음과 같습니다.  
Chrome 버전 109 이상
Edge 버전 4.0.0 이상
에이전트와 고객은 브라우저 탭만 공유할 수 있습니다. 창 또는 전체 화면을 공유할 수 없습니다. 이 기능을 활성화하고 고객 또는 에이전트가 지원되지 않는 브라우저, 창 또는 전체 화면을 사용하는 경우 오류가 발생합니다.

화면 공유에 대한 URL 제한을 활성화하려면 다음 단계를 완료하세요.

## 1단계: 허용된 URL 목록 생성
<a name="step1-url-restriction"></a>

사전 정의된 속성을 사용하여 허용되는 URL 목록을 구성합니다. 다음 단계를 완료합니다.

1.  Amazon Connect 관리자 웹 사이트에서 ****라우팅,**** **사전 정의된 속성**, **사전 정의된 속성 추가**를 선택합니다.

1. **사전 정의된 속성 추가** 섹션의 **사전 정의된 속성** 상자에 다음 중 하나를 추가합니다.
   + 고객 화면 공유에 허용되는 목록을 생성하려면 `screensharing:customer-allowed-urls`를 입력합니다.
   + 에이전트 화면 공유에 허용되는 목록을 생성하려면 `screensharing:agent-allowed-urls`를 입력합니다.

1. **값** 상자에 허용되는 URL을 입력합니다. 전체 형식의 URL이거나 ` https://mycompany` 또는 ` /mytransactions`와 같은 하위 문자열 매칭을 위한 문자열 패턴일 수 있습니다. 다음 테이블은 유효한 형식의 예를 보여 줍니다.    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/screen-sharing-url-restriction.html)

1. 목록을 저장합니다. URL은 다음 예시와 같이 **사전 정의된 속성** 페이지에 표시됩니다.  
![\[사전 정의된 속성 페이지입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/screen-sharing-restricted-urls.png)

## 2단계: 웹 사이트 목록에 스크립트 추가
<a name="step2-url-restriction"></a>

페이지의 URL이 캡처 애플리케이션에 노출될 수 있도록 웹 사이트에 스크립트를 내장해야 합니다. Amazon Connect가 호스팅하는 Amazon CloudFront 엔드포인트의 파일에서 캡처 핸들러를 가져옵니다. 다음 지침을 따릅니다.

1.  Amazon Connect 관리자 웹 사이트에서 **채널**, **커뮤니케이션 위젯을** 선택합니다. 커뮤니케이션 위젯 요약 페이지에서 위젯 스크립트를 찾습니다. 다음 예시와 같이 `s.src` 속성에서 엔드포인트를 가져옵니다.  
![\[위젯 스크립트입니다.\]](http://docs.aws.amazon.com/ko_kr/connect/latest/adminguide/images/screen-sharing-restricted-urls-step2.png)

   엔드포인트는 Amazon Connect 인스턴스와 다른 AWS 리전에 있을 수 있습니다. 최상의 성능을 위해 Amazon Connect 인스턴스와 동일한 리전을 사용하는 것이 좋습니다.

1. 다음 자리 표시자를 이전 단계의 값 `${endpoint}`로 바꿉니다. 전체 코드 스니펫을 복사하여 웹 사이트의 최상위 수준에 붙여 넣습니다.

   ```
   <script type="text/javascript" src='${endpoint}/amazon-connect-url-restriction.js'></script>
   ```