UI 라이브러리 사용 사례

Azure Communication Services UI 라이브러리의 구성 요소 및 복합 요소를 사용하여 애플리케이션에서 통화 및 채팅 환경을 만듭니다.

복합 요소의 통화 및 채팅 기능은 애플리케이션에 복합 요소를 통합하면 직접 빌드되고 노출됩니다. UI 구성 요소에서 통화 및 채팅 기능은 UI 기능과 기본 상태 저장 라이브러리의 조합을 통해 노출됩니다. 이러한 기능을 완벽하게 활용하려면 상태 저장 통화 및 채팅 클라이언트 라이브러리와 함께 UI 구성 요소를 사용하는 것이 좋습니다.

UI 라이브러리 스토리북에서 더 많은 개념 설명서, 빠른 시작 및 예제를 확인하세요.

통화 사용 사례

채팅 사용 사례

*서식 있는 문자 메시지 보내기 및 파일 첨부 지원은 현재 공개 미리 보기로 제공됩니다. 미리 보기 API 및 SDK는 서비스 수준 계약 없이 제공됩니다. 프로덕션 워크로드에는 사용하지 않는 것이 좋습니다. 일부 기능은 지원되지 않거나 기능이 제한될 수 있습니다. 자세한 내용은 Microsoft Azure 미리 보기에 대한 보충 사용 약관을 검토하세요.

**Teams 사용자의 입력 이벤트의 표시 이름이 제대로 표시되지 않을 수 있습니다.

지원되는 ID

복합 요소를 초기화하고 서비스에 인증하려면 사용자에게 Azure Communication Services ID가 있어야 합니다. 자세한 내용은 Azure Communication Services에 인증 및 빠른 시작: 액세스 토큰 만들기 및 관리를 참조하세요.

Teams 상호 운용성

Teams 상호 운용성 시나리오의 경우 UI 라이브러리 복합을 사용하여 Azure Communication Services를 통해 Teams 모임에 사용자를 추가할 수 있습니다. Teams 상호 운용성을 사용하도록 설정하려면 통화 복합 또는 채팅 복합의 기본 기능을 사용합니다. UI 구성 요소를 사용하여 사용자 지정 환경을 빌드할 수도 있습니다.

애플리케이션에 통화 및 채팅을 모두 추가할 때는 참가자가 통화에 입장할 때까지 채팅 클라이언트를 초기화할 수 없습니다. 참가자가 입장되면 채팅 클라이언트를 초기화하여 모임 채팅 스레드에 참가할 수 있습니다. 패턴은 다음 그림에 설명되어 있습니다.

UI 구성 요소를 사용하여 Teams 상호 운용성 환경을 제공하는 경우 먼저 UI 라이브러리 예제를 사용하여 환경의 주요 부분을 만듭니다.

• 로비 예제: 참가자가 통화에 참가할 때까지 기다릴 수 있는 샘플 로비입니다.
• 준수 배너: 통화가 기록되는 경우 사용자를 표시하는 샘플 배너입니다.
• Teams 테마: UI 라이브러리 요소를 Microsoft Teams처럼 보이게 하는 샘플 테마입니다.
• 이미지 공유*: Azure Communication Services 사용자가 Teams 사용자가 보낸 이미지를 수신하는 방법을 보여 주는 샘플입니다.
• 파일 공유*: Azure Communication Services 사용자가 Teams 사용자가 보낸 파일 첨부 파일을 받는 방법을 보여 주는 샘플입니다.

사용자 지정

UI 라이브러리 패턴을 사용하여 애플리케이션의 모양과 느낌에 맞게 구성 요소를 수정하세요. 사용자 지정은 Azure Communication Services의 복합 구성 요소와 UI 구성 요소 간의 주요 차이점입니다. 복합 요소는 사용자 지정 옵션이 더 적으므로 통합 환경이 더 단순합니다.

다음 표에서는 사용자 지정 사용 사례에 대한 복합 구성 요소와 UI 구성 요소를 비교합니다.

가시성

상태 저장 통화 및 채팅 클라이언트에 직접 액세스할 수 있도록 UI 라이브러리의 상태 관리 아키텍처가 분리됩니다. 상태 저장 클라이언트에 연결하여 상태를 읽고, 이벤트를 처리하고, 동작을 재정의하여 UI 구성 요소에 전달합니다.

다음 표에서는 복합 구성 요소와 UI 구성 요소를 비교하여 관찰성 사용 사례를 비교합니다.

권장 아키텍처

Azure Communication Services 액세스 토큰을 사용하여 복합 요소 및 기본 구성 요소를 초기화합니다. 자신이 관리하는 신뢰할 수 있는 서비스를 통해 Azure Communication Services에서 액세스 토큰을 가져오는 것이 중요합니다. 자세한 내용은 빠른 시작: 액세스 토큰 만들기 및 관리 및 신뢰할 수 있는 서비스 자습서를 참조하세요.

통화 및 채팅 클라이언트 라이브러리에는 참가하는 통화 또는 채팅에 대한 컨텍스트가 있어야 합니다. 사용자 고유의 신뢰할 수 있는 서비스를 사용하여 클라이언트에 컨텍스트를 전파합니다. 예를 들어 사용자 액세스 토큰을 사용합니다.

다음 표에는 클라이언트 라이브러리에 컨텍스트를 추가하는 데 필요한 초기화 및 리소스 관리 함수가 요약되어 있습니다.

플랫폼 지원

*현재 버전의 Chrome과 이전 두 릴리스가 지원됩니다.

**Safari 버전 13.1 이상 버전이 지원됩니다. Safari macOS에 대한 보내는 비디오는 아직 지원되지 않지만 iOS에서 지원됩니다. 보내는 화면 공유는 데스크톱 iOS에서만 지원됩니다.

접근성

설계상의 접근성은 Microsoft 제품에 대한 원칙입니다. UI 라이브러리는 이 원칙을 따르며, 모든 UI 구성 요소에 완전히 액세스할 수 있습니다.

지역화

지역화는 다양한 언어를 사용하는 전 세계 사용자를 위한 제품을 만드는 데 핵심적인 요소입니다. UI 라이브러리는 일부 언어 및 기능에 대한 기본 지원을 제공합니다. 이 지원에는 오른쪽에서 왼쪽 언어가 포함됩니다. UI 라이브러리와 함께 사용할 자체 지역화 파일을 제공할 수 있습니다.

알려진 문제

UI 라이브러리는 현재 기존 메시지를 편집할 때 메시지 유형 업데이트를 지원하지 않습니다. 기존 메시지에 서식 있는 텍스트 서식을 추가하면 텍스트 콘텐츠에 HTML 스타일이 추가됩니다. 메시지 유형이 변경되지 않으므로 결과는 메시지 스레드에서 일반 텍스트로 표시되는 HTML 콘텐츠일 수 있습니다.

ChatComposite Azure Communication Services UI 라이브러리를 사용하여 CallComposite iOS 및 Android 애플리케이션에서 통화 환경을 만듭니다. 몇 줄의 코드를 사용하여 전체 통화 및 채팅 환경을 애플리케이션에 쉽게 통합할 수 있습니다. Azure Communication Services의 복합은 설정부터 통화 및 채팅 종료까지 통화 및 채팅의 전체 수명 주기를 관리합니다.

통화 사용 사례

Azure Communication Services에서 호출 복합을 사용하여 이러한 사용 사례를 만듭니다.

통화 통합

이 섹션에서는 호출 통합에 대해 설명합니다.

Teams 상호 운용성

Teams 상호 운용성 시나리오의 경우 UI 라이브러리 복합을 사용하여 Azure Communication Services를 통해 Teams 모임에 사용자를 추가할 수 있습니다. Teams 상호 운용성을 사용하도록 설정하려면 통화 복합 요소를 사용합니다. 이 복합 요소는 Teams 상호 운용성 통화 참가의 전체 수명 주기를 관리합니다.

다음 그림에서는 발신자가 Teams 모임에 추가되기 전의 사용자 환경의 예를 보여 줍니다.

룸 통합

Azure Communication Services는 가상 약속 또는 가상 이벤트와 같은 구조적 대화를 빌드하는 개발자를 위한 공간의 개념을 제공합니다. 대화방은 현재 음성 및 영상 통화를 허용합니다.

회의실은 Azure Communication Services 사용자 간의 활동을 관리하는 컨테이너입니다. 회의실에서는 애플리케이션 개발자가 통화에 참가할 수 있는 사용자, 모임 시기 및 공동 작업 방법을 더 잘 제어할 수 있습니다. 회의실에 대한 자세한 내용은 개념 설명서를 참조하세요.

사용자는 다음 세 가지 역할 중 하나에서 룸 API를 사용하여 회의실에 초대됩니다.

• 발표자(기본값)
• 참석자
• 소비자

각 역할 간의 구분은 사용 시 CallComposite 회의실 호출 중에 보유한 기능에 있습니다. 각 역할과 관련된 특정 기능은 Virtual Rooms 개요에 설명되어 있습니다.

일대일 통화 및 푸시 알림 지원

UI 라이브러리는 통신 식별자를 통해 사용자에게 전화를 걸기 위한 일대일 VoIP 호출을 지원합니다. UI 라이브러리는 수신 전화를 받기 위해 PUSH 알림 등록도 지원합니다. Android 및 iOS 플랫폼 통합 및 API 사용에 대한 자세한 내용은 일대일 호출 및 푸시 알림 수신을 참조 하세요.

통화 기능

몇 가지 기능을 호출할 수 있습니다.

접근성

접근성은 통화 라이브러리의 핵심 과제입니다. 화면 읽기 프로그램을 사용하여 통화 상태에 대한 중요한 알림을 작성하고 시각 장애가 있는 사용자가 애플리케이션을 사용할 때 효과적으로 참여할 수 있도록 합니다.

폐쇄 자막

선택 자막을 사용하면 Teams와의 상호 운용성, Azure Communication Services 그룹 호출, 회의실 호출 및 일대일 호출을 비롯한 다양한 시나리오를 사용할 수 있습니다. 이 기능을 사용하면 사용자가 다양한 통화 환경의 대화를 따를 수 있어 접근성 및 사용자 환경이 향상됩니다.

시스템에서 음성 언어를 자동으로 검색하지 않으므로 사용자는 기본적으로 UI 라이브러리를 사용하여 캡션 언어를 수동으로 선택해야 합니다.

선택 자막에 대한 자세한 내용은 설명 및 사용 지침을 검토하는 설명서를 참조하세요. UI 라이브러리 내에서 직접 선택 자막을 구성하려면 자습서를 따라 쉽게 설정할 수 있습니다.

이벤트

개발자는 이제 속성 내 CallComposite 의 이벤트를 구독할 수 있습니다. 이 기능을 사용하면 호출 수명 주기 내내 수신기를 특정 이벤트에 연결할 수 있습니다. 이 향상된 기능은 더 큰 제어 및 사용자 지정 기회를 제공합니다. 개발자는 참가자 참가 또는 통화를 떠난 참가자와 같은 이벤트에 따라 사용자 지정 작업을 트리거할 수 있습니다. 또한 이벤트를 사용하여 상호 작용을 로깅하거나, 사용자 인터페이스를 동적으로 업데이트하거나, 전반적인 기능을 향상시킬 수 있습니다.

자세한 내용은 UI 라이브러리의 이벤트 처리를 참조 하세요.

지역화

지역화는 다양한 언어를 사용하는 전 세계 사용자를 위한 제품을 만드는 데 핵심적인 요소입니다. UI 라이브러리는 영어, 스페인어, 프랑스어, 독일어, 이탈리아어, 일본어, 한국어, 네덜란드어, 포르투갈어, 러시아어, 터키어 및 중국어를 포함한 12개 언어를 지원합니다. 또한 오른쪽에서 왼쪽 언어를 지원합니다. 자세한 내용은 앱에 지역화 추가를 참조하세요.

멀티태스킹 및 그림 모드

UI 라이브러리는 통화 화면의 그림 모드를 지원합니다. 통화하는 동안 사용자는 통화 화면에서 뒤로 단추를 선택하여 멀티태스킹을 사용하여 이전 화면으로 돌아갈 수 있습니다. 그림 내 그림 모드를 사용하도록 설정하면 호출에 대한 시스템 그림이 나타납니다. Android 및 iOS 플랫폼 및 API 사용에 대한 멀티태스킹 및 그림 모드에 대한 자세한 내용은 UI 라이브러리를 사용하여 그림 켜기를 참조 하세요.

화면 방향

UI 라이브러리는 라이브러리 환경이 시작되기 전에 각 화면에 대한 화면 방향 설정을 개별적으로 지원합니다. 애플리케이션 개발자는 호출 환경에 대한 고정 방향을 설정하여 애플리케이션 방향을 맞출 수 있습니다. Android 및 iOS 플랫폼에 지원되는 방향 목록과 API 사용에 대한 자세한 내용은 UI 라이브러리를 사용하여 화면 방향 설정을 참조 하세요.

화면 크기

5인치에서 태블릿 크기까지 화면 크기에 맞게 Azure Communication Services 호출 복합을 조정합니다. 통화 복합 요소에서 분할 모드 및 태블릿 모드를 사용하여 동적 참가자의 명단 레이아웃을 확인하고, 보기에 대한 명확성을 제공하고, 대화에 집중합니다.

분할 모드	태블릿 모드

데이터 삽입 보기

모바일 네이티브 플랫폼용 UI 라이브러리를 사용하여 로컬 및 원격 참가자에게 통화에서 사용자로 표시되는 방식을 사용자 지정할 수 있는 옵션을 제공합니다. 로컬 참가자는 통화가 시작될 때 설정 화면에서 로컬 아바타, 사용자 지정 표시 이름, 탐색 제목 및 부제목을 선택할 수 있습니다. 원격 사용자는 모임에 참가할 때 사용자 지정된 아바타를 만들 수 있습니다. 자세한 내용은 UI 라이브러리에 사용자 지정 데이터 모델 삽입을 참조 하세요.

공유 콘텐츠 보기

모바일 네이티브 플랫폼용 UI 라이브러리를 통해 다른 참가자가 Teams 통화 중에 화면을 공유할 때 통화 참가자가 공유 콘텐츠를 볼 수 있습니다. 원격 참가자는 스트레치 및 손가락 모으기 제스처를 사용하여 통화 중에 공유되는 콘텐츠를 확대 또는 축소할 수 있습니다.

OS 통합

OS와 통합합니다.

CallKit 지원

UI 라이브러리는 호출에 CallKit 대한 상호 작용 CallKit 을 처리하는 통합을 지원합니다. iOS 플랫폼 통합 및 API 사용에 대한 자세한 내용은 CallKit을 UI 라이브러리에 통합을 참조 하세요.

TelecomManager 지원

이제 UI 라이브러리는 호출 보류 및 다시 시작 함수와의 TelecomManager 통합을 지원하고 이를 처리할 수 있습니다. Android 플랫폼 통합 및 API 사용에 대한 자세한 내용은 TelecomManager를 UI 라이브러리에 통합하는 방법을 참조 하세요.

통화 환경 사용자 지정

통화 환경을 사용자 지정할 수 있습니다.

오디오 전용 모드

UI 라이브러리의 오디오 전용 모드를 사용하면 참가자가 비디오를 공유하거나 받지 않고 오디오만 사용하여 통화에 참여할 수 있습니다. 이 기능은 대역폭을 보존하고 개인 정보 보호를 최대화하는 데 사용됩니다. 활성화되면 오디오 전용 모드는 스트림 보내기 및 수신 모두에 대한 비디오 기능을 자동으로 사용하지 않도록 설정합니다. 비디오 관련 컨트롤을 제거하여 이 변경 사항을 반영하도록 UI를 조정합니다. 구성을 통해 이 모드를 CallComposite 사용하도록 설정합니다. 자세한 내용은 오디오 전용 빠른 시작을 참조 하세요.

통화 종료 프롬프트 사용 안 함

호출 기능을 통합하는 애플리케이션을 개발하는 경우 원활하고 직관적인 사용자 환경을 보장하는 것이 중요합니다. 사용자 환경을 간소화할 수 있는 한 가지 영역은 통화 종료 프로세스 중입니다. 특히 개발자는 사용자가 통화를 종료하려고 할 때 표시되는 왼쪽 통화 확인 프롬프트를 사용하지 않도록 설정하는 것이 도움이 될 수 있습니다. 이 기능은 우발적인 통화 종료를 방지하는 데 유용하지만, 속도와 효율성이 특히 중요한 환경에서 사용자 경험에 방해가 될 수 있습니다. 자세한 내용은 통화 확인 사용 안 함을 참조하세요.

빠르게 진행되는 통신 환경: 거래 현장, 응급 콜 센터 또는 고객 서비스 센터와 같은 설정에서 의사 결정 및 조치를 신속하게 수행해야 합니다. 호출 종료를 확인하는 추가 단계는 워크플로 효율성을 저해할 수 있습니다.

단추 모음 사용자 지정

이 기능을 사용하면 개발자가 상황에 맞는 메뉴에 새 작업을 추가하거나 단추 모음에서 현재 단추를 제거할 수 있습니다. 사용자 지정 작업을 도입하고 특정 애플리케이션 요구 사항에 따라 사용자 인터페이스를 조정할 수 있는 유연성을 제공할 수 있습니다.

• 사용자 지정 단추 추가: 개발자는 상황에 맞는 단추 모음에 새 단추를 도입하여 사용자 지정 작업을 트리거할 수 있습니다.
• 기존 단추 제거: 개발자는 불필요한 기본 단추를 제거하여 카메라, 마이크 또는 오디오 선택과 같은 인터페이스를 간소화할 수 있습니다.

이 기능을 구현하는 동안 다음 제약 조건을 고려합니다.

• 아이콘 및 레이블: 아이콘은 새 작업에 대해서만 추가됩니다. 단추 모음 아이콘은 미리 정의된 아이콘을 유지하고 레이블은 메뉴 차원에 맞게 간결해야 합니다.
• 접근성 고려 사항: 개발자는 화면 읽기 프로그램을 위한 적절한 레이블 지정을 포함하여 모든 사용자 지정 단추에 액세스할 수 있는지 확인해야 합니다.

단추 제거	사용자 지정 작업 추가

사용 사례

• 사용자 지정 통화 내 작업: 비즈니스 애플리케이션은 사용자가 통화 중에 기술 문제를 직접 보고할 수 있는 사용자 지정 보고서 문제 단추를 추가할 수 있습니다.
• 브랜딩 및 사용자 환경: 엔터프라이즈 앱은 사용 사례와 관련이 없는 단추를 제거하고 사용자 환경을 향상시키는 브랜드 단추를 추가할 수 있습니다.

일관된 통화 환경을 보장하려면 Fluent UI 아이콘을 프로젝트에 통합하는 것이 좋습니다. Fluent UI GitHub 리포지토리에서 사용할 수 있습니다. 이렇게 하면 사용자 지정 아이콘이 속성의 CallComposite 디자인과 일치하고 응집력 있고 전문적인 모양을 만듭니다.

모범 사례

• 깔끔한 디자인: 상황에 맞는 메뉴 모음의 과밀을 방지합니다. 사용자 환경에 필수적인 단추만 추가합니다.
• 사용자 테스트: 사용자 지정이 사용자 요구를 충족하고 혼동하거나 과부하가 발생하지 않도록 사용자 테스트를 수행합니다.
• 피드백 메커니즘: 보고서 문제와 같은 단추를 추가하면 수집된 피드백을 처리할 수 있는 강력한 백 엔드 시스템을 사용할 수 있습니다. UI 라이브러리에서 기본적으로 제공하는 메커니즘을 다시 사용합니다.

자세한 내용은 사용자 지정 단추를 참조 하세요.

설정 화면 건너뛰기

UI 라이브러리는 통화 조인 환경의 설정 화면을 건너뛰어 통화에 참가하는 기능을 제공합니다. 기본적으로 설정 화면을 통해 통화에 참가합니다. 여기서는 통화에 참가하기 전에 카메라 켜기/끄기, 마이크 켜기 또는 끄기, 오디오 장치 선택 등의 통화 구성을 설정합니다. 이 화면에서는 통화에 참가하기 위해 사용자 상호 작용이 필요하며 일부 사용자에게는 설정이 필요하지 않을 수 있습니다. 따라서 Microsoft에서는 설정 화면을 건너뛰고 통화 구성 API를 제공하여 통화에 참가하는 기능을 제공합니다. 자세한 내용은 설치 화면 기능 건너뛰기 기능을 참조하세요.

테마 및 색

iOS 및 Android용 UI 라이브러리 호출 복합을 사용하여 호출자 환경의 사용자 지정 테마를 만듭니다. 특정 브랜딩 요구 사항에 맞게 색 구성표를 조정할 수 있도록 기본 색을 유연하게 사용자 지정할 수 있습니다. 기본 색을 조정하여 인터페이스가 브랜드의 시각적 ID와 통합되도록 할 수 있습니다. 애플리케이션 전체에서 일관성을 유지하면서 사용자 환경을 향상시킬 수 있습니다. 자세한 내용은 테마 만들기를 참조하세요.

Android	iOS

제목 및 부제목

UI 라이브러리를 사용하여 사용자 지정 문자열을 입력하면 특정 요구 사항에 맞게 호출 인터페이스를 보다 쉽게 조정할 수 있습니다. 설정 단계 중과 통화가 진행되는 동안 통화의 제목과 자막을 사용자 지정할 수 있습니다.

예를 들어 회사 환경에서 모임의 안건과 부제목을 반영하도록 제목을 설정하여 발표를 나타낼 수 있습니다. 고객 지원을 위해 에이전트는 제목을 사용하여 문의 특성을 표시하여 명확성과 의사 소통을 향상시킬 수 있습니다.

시간에 민감한 토론이 있는 통화 중에는 부제목을 사용하여 모든 참가자가 시간 제약 조건을 인식하도록 통화 기간을 표시할 수도 있습니다.

자세한 내용은 제목 및 부제목 설정을 참조 하세요.

채팅 사용 사례

유연성

이 속성은 ChatComposite 애플리케이션의 다양한 레이아웃과 보기에 맞게 설계되었습니다. 예를 들어 탐색 보기, 모달 보기 또는 다른 보기에 채팅을 배치하도록 선택할 수 있습니다. 속성 ChatComposite 자체를 조정 하 고 사용자가 원활한 환경을 보장 합니다.

탐색 보기	모달 보기

지원되는 ID

복합 요소를 초기화하고 서비스에 인증하려면 사용자에게 Azure Communication Services ID가 있어야 합니다. 자세한 내용은 Azure Communication Services에 인증 및 빠른 시작: 액세스 토큰 만들기 및 관리를 참조하세요.

권장 아키텍처

Azure Communication Services 액세스 토큰을 사용하여 복합 요소를 초기화합니다. 자신이 관리하는 신뢰할 수 있는 서비스를 통해 Azure Communication Services에서 액세스 토큰을 가져오는 것이 중요합니다. 자세한 내용은 빠른 시작: 액세스 토큰 만들기 및 관리 및 신뢰할 수 있는 서비스 자습서를 참조하세요.

통화 및 채팅 클라이언트 라이브러리에는 참가하는 통화에 대한 컨텍스트가 있어야 합니다. 사용자 고유의 신뢰할 수 있는 서비스를 사용하여 클라이언트에 컨텍스트를 전파합니다. 예를 들어 사용자 액세스 토큰을 사용합니다. 다음 표에는 클라이언트 라이브러리에 컨텍스트를 추가하는 데 필요한 초기화 및 리소스 관리 함수가 요약되어 있습니다.

플랫폼 지원

문제 해결 가이드

음성 또는 영상 통화에 대한 문제 해결이 발생하는 경우 통화 ID를 제공하라는 메시지가 표시될 수 있습니다. 이 ID는 Azure Communication Services 호출을 식별하는 데 사용됩니다.

이 호출 ID를 검색하려면 통화 화면 아래쪽의 작업 표시줄을 사용합니다. 줄임표 단추를 선택하여 진단 정보 공유를 확인합니다. 지원 팀의 문제를 추적하는 데 필요한 진단 정보를 공유하려면 이 옵션을 사용합니다.

호출 ID에 프로그래밍 방식으로 액세스하려면 프로그래밍 방식으로 디버그 정보 가져오기를 참조 하세요.

문제 해결에 대한 자세한 내용은 Azure Communication Services의 문제 해결을 참조 하세요.

호출 화면	진단 정보 메뉴	통화 ID 공유