UI 라이브러리 개요
Azure Communication Services를 사용하면 UI 라이브러리를 통해 최신 통신 사용자 환경을 쉽게 구축할 수 있습니다. 애플리케이션에 배치할 수 있는 프로덕션 준비 UI 구성 요소의 라이브러리를 제공합니다.
참고 항목
웹 UI 라이브러리에 대한 자세한 문서는 웹 UI 라이브러리 스토리북을 참조하세요. 여기에서 추가 개념 설명서, 빠른 시작 및 예를 찾을 수 있습니다.
복합 구성 요소. 이러한 구성 요소는 일반적인 통신 시나리오를 구현하는 턴키 솔루션입니다. 애플리케이션에 비디오 호출 또는 채팅(현재 웹 UI 라이브러리를 통해서만 사용 가능) 환경을 빠르게 추가할 수 있습니다. 복합 구성 요소는 UI 구성 요소를 사용하여 빌드된 오픈 소스 상위 순서 구성 요소입니다.
UI 구성 요소. 이러한 구성 요소는 사용자 지정 통신 환경을 구축하는 데 사용할 수 있는 오픈 소스 구성 요소입니다. 구성 요소는 환경을 구축하기 위해 결합할 수 있는 통화 및 채팅 기능 모두에 제공됩니다.
이러한 UI 클라이언트 라이브러리는 모두 Microsoft의 Fluent 디자인 언어 및 자산을 사용합니다. Fluent UI는 UI 라이브러리에 대한 기본 계층을 제공하며 Microsoft 제품에서 적극적으로 사용됩니다.
UI 구성 요소와 함께 UI 라이브러리는 통화 및 채팅을 위한 상태 저장 클라이언트 라이브러리를 노출합니다. 이 클라이언트는 특정 상태 관리 프레임워크에 독립적이며 Redux 또는 React 컨텍스트와 같은 일반 상태 관리자와 통합할 수 있습니다. 이 상태 저장 클라이언트 라이브러리는 UI 구성 요소와 함께 사용하여 UI 구성 요소가 데이터를 렌더링하는 데 필요한 속성 및 메서드를 전달할 수 있습니다. 자세한 내용은 상태 저장 클라이언트 개요를 참조하세요.
참고 항목
UI 라이브러리에서 제공되는 동일한 구성 요소 및 복합 구성 요소는 Figma용 디자인 키트에서 사용할 수 있으므로 호출 및 채팅 환경을 신속하게 디자인하고 프로토타입을 만들 수 있습니다.
복합 구성 요소 개요
복합 구성 요소는 Azure Communication Services를 사용하여 일반적인 통신 시나리오에 대한 턴키 솔루션을 제공하는 UI 구성 요소로 구성된 상위 수준 구성 요소입니다. 개발자는 Azure Communication Services 액세스 토큰 및 통화 또는 채팅에 필요한 구성을 사용하여 복합 구성 요소를 쉽게 인스턴스화할 수 있습니다.
| 복합 | 사용 사례 |
|---|---|
| CallwithChatComposite | 사용자가 호출 및 채팅 스레드를 시작하거나 참가할 수 있도록 호출 및 채팅 기능을 결합한 경험. 이 환경에서 사용자는 음성 및 비디오를 사용하여 통신할 수 있을 뿐만 아니라 참가자 간에 메시지를 교환하는 풍부한 채팅 스레드에 액세스할 수 있습니다. 여기에는 Teams Interop에 대한 지원이 포함됩니다. |
| CallComposite | 사용자가 통화를 시작하거나 참가할 수 있는 통화 환경입니다. 환경 내에서 사용자가 디바이스를 구성하고, 비디오를 사용하여 통화에 참여하고, 비디오를 켜는 참가자를 포함하여 다른 참가자를 볼 수 있습니다. Teams Interop의 경우 사용자가 잠깐 대기할 수 있는 기능이 포함되어 있습니다. |
| ChatComposite | 사용자가 메시지를 보내고 받을 수 있는 채팅 환경입니다. 입력, 읽기, 들어오고 나가는 참가자와 같은 스레드 이벤트는 채팅 스레드의 일부로 사용자에게 표시됩니다. |
UI 구성 요소 개요
비디오 타일을 그리드에 붙여 원격 참가자를 소개하는 것부터 애플리케이션 사양에 맞게 구성 요소를 구성하는 것까지 개발자가 통신 환경을 구성하는 데 사용할 수 있는 순수 UI 구성 요소입니다. UI 구성 요소는 사용자 지정을 지원하여 구성 요소에 적절한 느낌을 제공하고 애플리케이션 브랜딩 및 스타일과 일치하는지 확인합니다.
| 지역 | 구성 요소 | 설명 |
|---|---|---|
| 통화 중 | 그리드 레이아웃 | 비디오 타일을 NxN 그리드로 구성하는 그리드 구성 요소 |
| 비디오 타일 | 사용 가능한 경우 비디오 스트리밍을 표시하는 구성 요소와 그렇지 않은 경우 기본 정적 구성 요소 | |
| 컨트롤 막대 | 음소거 또는 공유 화면과 같은 특정 통화 작업에 연결하는 DefaultButtons를 구성하는 컨테이너 | |
| VideoGallery | 참가자가 추가되면 동적으로 변경되는 턴키 비디오 갤러리 구성 요소 | |
| 다이얼패드 | 전화 번호 입력 및 DTMF 톤을 지원하는 구성 요소. | |
| 채팅 | 메시지 스레드 | 채팅 메시지, 시스템 메시지 및 사용자 지정 메시지를 렌더링하는 컨테이너 |
| 보내기 상자 | 불연속 송신 단추가 있는 텍스트 입력 구성 요소 | |
| 서식 있는 텍스트 전송 상자 | 서식 옵션과 개별 전송 단추가 있는 서식 있는 텍스트 입력 구성 요소 | |
| 메시지 상태 표시기 | 보낸 메시지의 상태를 표시하는 다중 상태 읽기 수신 구성 요소 | |
| 입력 표시기 | 스레드에 적극적으로 입력하는 참가자를 렌더링하는 텍스트 구성 요소 | |
| 공통 | 참가자 항목 | 아바타와 표시 이름을 포함하여 통화 또는 채팅 참가자를 렌더링하기 위한 공통 구성 요소 |
| 참가자 목록 | 아바타 및 표시 이름을 포함하여 통화 또는 채팅 참가자 목록을 렌더링하는 공통 구성 요소 |
웹 UI 라이브러리 설치
상태 저장 클라이언트는 @azure/communication-react 패키지의 일부로 발견됩니다.
npm i --save @azure/communication-react
내 프로젝트에 가장 적합한 UI 아티팩트
다음 요구 사항을 이해하면 올바른 클라이언트 라이브러리를 선택하는 데 도움이 됩니다.
- 원하는 사용자 지정이 얼마나 많은가요? Azure Communication Services 핵심 클라이언트 라이브러리에는 UX가 없으며, 원하는 UX를 구축할 수 있도록 설계되었습니다. UI 라이브러리 구성 요소는 축소된 사용자 지정 비용으로 UI 자산을 제공합니다.
- 대상 플랫폼은 무엇인가요? 플랫폼마다 기능이 다릅니다.
UI Library의 기능 가용성에 대한 자세한 내용은 여기서 제공되지만, 주요 장단점은 다음 표에 요약되어 있습니다.
| 클라이언트 라이브러리/SDK | 구현 복잡성 | 사용자 지정 기능 | 통화 중 | 채팅 | Teams 상호 운용성 |
|---|---|---|---|---|---|
| 복합 구성 요소 | 낮음 | 낮음 | ✔ | ✔ | ✔ |
| 기본 구성 요소 | 중간 | 중간 | ✔ | ✔ | ✔ |
| 핵심 클라이언트 라이브러리 | 높음 | 높음 | ✔ | ✔ | ✔ |
복합 구성 요소는 일반적인 통신 시나리오를 구현하는 턴키 솔루션입니다. 화상 호출 환경을 애플리케이션에 추가할 수 있습니다. 복합 구성 요소는 개발자가 개발 시간과 엔지니어링 복잡성을 줄이기 위해 활용할 수 있는 오픈 소스 고차 구성 요소입니다.
복합 구성 요소 개요
| 복합 | 사용 사례 |
|---|---|
| CallComposite | 사용자가 통화를 시작하거나 참가할 수 있는 통화 환경입니다. 환경 내에서 사용자가 디바이스를 구성하고, 비디오를 사용하여 호출에 참여하고, 비디오를 켜는 참가자를 포함하여 다른 참가자를 볼 수 있습니다. Teams 상호 운용성의 경우 CallComposite은 로비 기능을 포함하므로 사용자는 허용되기를 기다릴 수 있습니다. |
| ChatComposite | ChatComposite는 사용자에게 실시간 문자 메시지 환경을 제공합니다. 특히 사용자는 입력 표시기 및 읽음 확인의 이벤트가 포함된 채팅 메시지를 보내고 받을 수 있습니다. 또한 사용자는 참가자 추가 또는 제거 및 채팅 제목 변경과 같은 시스템 메시지를 받을 수도 있습니다. |
통화에 대한 복합 시나리오
비디오/오디오 통화 참가
사용자는 Teams 모임 URL을 사용하여 호출에 참여하거나 Azure Communication Services 호출을 설정할 수 있습니다. 이 방법은 Teams 애플리케이션과 마찬가지로 더 간단한 환경을 제공합니다.
사전 호출 환경
통화의 참가자로서 이름을 제공하고 오디오 및 비디오 디바이스에 대한 기본 구성을 설정할 수 있습니다. 그러면 호출로 이동할 준비가 된 것입니다.
호출 환경
호출 복합 구성 요소는 엔드투엔드 환경을 제공하고, 개발 시간을 최적화하며, 완전한 레이아웃에 중점을 둡니다.
호출 환경은 하나의 복합 구성 요소에서 이러한 모든 기능을 제공하여 복잡한 코드 없이 명확한 경로를 제공하므로 개발 시간이 빨라집니다.
품질 및 보안
호출에 대한 모바일 복합 구성 요소는 Azure Communication Services 액세스 토큰을 사용하여 초기화됩니다.
기타 세부 정보
호출 관련 모바일 복합 구성 요소에 대한 자세한 내용은 사용 사례를 참조하세요.
채팅에 대한 복합 시나리오
Important
Azure Communication Services의 이 기능은 현재 미리 보기 상태입니다.
미리 보기 API 및 SDK는 서비스 수준 계약 없이 제공됩니다. 프로덕션 워크로드에는 사용하지 않는 것이 좋습니다. 일부 기능은 지원되지 않거나 기능이 제한될 수 있습니다.
자세한 내용은 Microsoft Azure 미리 보기에 대한 추가 사용 약관을 검토하세요.
채팅 환경
ChatComposite는 실시간 문자 메시지 환경을 제공합니다. 유연성과 확장성을 염두에 두고 작동하는 ChatComposite는 복잡하지 않게 애플리케이션의 다양한 레이아웃 또는 뷰에 맞게 조정될 수 있습니다. ChatComposite 뷰를 표시하지 않고 다른 비즈니스 요구 사항에 맞게 알림만 받도록 선택할 수도 있습니다.
| iOS | Android |
|---|---|
|
|
품질 및 보안
ChatComposite는 CallComposite와 마찬가지로 Azure Communication Services 액세스 토큰을 활용합니다. 적절한 권한이 있는 사용자만 채팅에 액세스할 수 있도록 하려면 채팅 환경을 시작하기 전에 사용자 토큰을 유효한 채팅 스레드에 추가해야 합니다.
기타 세부 정보
채팅 관련 모바일 복합 구성 요소에 대한 자세한 내용은 사용 사례를 참조하세요.
내 프로젝트에 가장 적합한 UI 아티팩트
이러한 요구 사항은 올바른 클라이언트 라이브러리를 선택하는 데 도움이 됩니다.
원하는 사용자 지정이 얼마나 많은가요? Azure Communication Services 핵심 클라이언트 라이브러리에는 UX가 없으며, 원하는 UX를 구축할 수 있도록 설계되었습니다. UI 라이브러리 구성 요소는 축소된 사용자 지정 비용으로 UI 자산을 제공합니다.
대상 플랫폼은 무엇인가요? 플랫폼마다 기능이 다릅니다.
다음은 몇 가지 주요 장단점입니다.
| 클라이언트 라이브러리/SDK | 구현 복잡성 | 사용자 지정 기능 | 통화 중 | 채팅 | Teams 상호 운용성 |
|---|---|---|---|---|---|
| 복합 구성 요소 | 낮음 | 낮음 | ✔ | ✔ | ✔ |
| 핵심 클라이언트 라이브러리 | 높음 | 높음 | ✔ | ✔ | ✔ |
UI 라이브러리의 기능 가용성에 대한 자세한 내용은 UI 라이브러리 사용 사례를 참조하세요.