이 문서에서는 Azure Communication Services 인스턴스와 상호 작용하는 Microsoft Teams 사용자 지정 앱을 만드는 방법을 설명합니다. 이 채팅 앱은 분리된 백 엔드 환경과 ID 구성을 유지하면서 두 시스템 간의 상호 작용 함수를 지원합니다.
사용 사례
판매 시점 및 판매 후 지원
소비자 웹 사이트는 자동화된 봇이나 영업 직원 또는 둘 다에 대한 채팅 채널에 대한 빠른 액세스를 제공할 수 있습니다. 격리된 Azure Communication Service 인스턴스를 사용하는 것이 좋습니다.
마찬가지로, 판매 후 지원 및 조정은 Teams에 통합된 상태에서 채팅을 독립적으로 사용할 수 있는 기능으로부터 이점을 얻습니다.
보호된 원격 상담 서비스
의료 원격 회의 애플리케이션, 뱅킹 서비스 및 기타 개인 정보 보호에 중요한 시나리오의 경우 Azure Communication Services가 제공하는 암호화 및 보안을 통해 원격 참여자가 Teams를 사용하지 않고도 이러한 사용 사례를 구현할 수 있습니다. 필요에 따라 솔루션에 브랜드를 지정할 수 있으며 조직의 직원은 기존에 설치된 Teams에서 컨설팅에 액세스할 수 있습니다.
데이터 분리 요구 사항 시나리오
일부 지역에서는 특정 관할 구역에 대한 데이터의 지리적 격리를 보장해야 할 수도 있습니다. 회사의 법적 데이터 저장 영역은 고객 데이터를 저장하는 데 필요한 위치와 다를 수 있습니다. 인스턴스를 만들 때 Azure Communications Services 스토리지 위치를 사용하여 이러한 시나리오를 구성할 수 있습니다. 위치는 Teams의 스토리지 위치와 다를 수 있습니다.
아키텍처
다음 다이어그램은 Teams 확장성 채팅 앱의 전반적인 모습을 보여 줍니다.
Azure Communications Services 인스턴스를 통해 솔루션을 사용할 수 있습니다.
웹 API는 솔루션의 내부 및 외부 애플리케이션 모두를 위한 서버 쪽 함수를 제공합니다.
Contoso 고객은 클라이언트(웹 또는 모바일) 애플리케이션을 사용하여 직원과 상호 작용합니다. 이 예에서는 콘텐츠를 호스팅하는 데 사용되는 웹앱을 보여 줍니다.
Contoso 직원은 Teams 클라이언트 내에서 Teams 앱을 사용합니다. Teams 클라이언트는 Teams 사용자 지정 앱 내에 호스트되는 웹앱이며 Teams 클라이언트 내부의 iframe을 통해 Teams에 배포됩니다.
Azure Communication Services 인스턴스는 Teams 환경에 직접 연결되지 않았습니다. 커뮤니케이션 서비스 환경은 Teams 사용자 지정 앱을 통해 제공됩니다.
Teams 사용자 지정 앱은 Teams 사용자 ID를 앱에 제공하는 Teams의 SSO(Single Sign-On) 기능을 사용합니다. 사용자 지정 메시징 앱은 Teams 사용자 ID를 사용하여 커뮤니케이션 서비스 사용자 ID에 매핑합니다.
솔루션 빌드
채팅 앱을 만들려면 다음과 같은 구성 요소가 필요합니다.
Azure Communication Services 인스턴스.
- 자세한 내용은 빠른 시작: Communication Services 리소스 만들기 및 관리를 참조하세요.
- 인스턴스를 만드는 동안 저장 영역을 구성합니다.
백 엔드 구성 요소를 호스팅하는 API 서버. API 서버는 필요한 백 엔드 논리를 제공합니다. 일반적인 사용 사례로는 사용자 인증, 채팅 스레드 관리 API 등이 있습니다.
프런트 엔드 구성 요소를 호스팅하는 웹앱 인스턴스. 고객 대상 웹과 포함된 iframe을 통해 Teams 사용자 지정 앱 레이아웃을 구동하는 데 필요한 프런트 엔드 구성 요소입니다.
Teams 사용자 지정 앱은 Teams에서 이 앱 설치를 사용하도록 설정하도록 구성되었습니다. 직원에게 이러한 환경을 제공하려면 웹앱이나 Teams 사용자 지정 앱 배포를 통해 제공되는 웹 콘텐츠를 사용하도록 Teams 사용자 지정 앱을 설정합니다.
앱 디자인
비즈니스 요구에 맞춰 고객 대상 포털 사이트를 필요에 따라 설계할 수 있습니다. 간단한 통화/채팅 웹앱에는 일반적으로 두 가지 기능이 필요합니다.
- 인증(등록/로그온)
- 기본 채팅(및 통화) 사용자 인터페이스
Teams SSO(Single Sign-On)는 직원이 사용하는 Teams 사용자 지정 앱에서 인증을 제공합니다. 이 경우, 직원은 메인 채팅(및 통화) 환경을 시작하기 전에 추가 고객 목록을 확인해야 합니다.
팀 내에서 디자인 작업을 수행할 때 고려해야 할 사항으로는 응집력 있고 포괄적이며 액세스 가능한 환경을 보장하기 위한 지침이 있습니다. 자세한 내용은 Microsoft Teams 앱 디자인을 참조하세요.
Teams 사용자 지정 앱 구현
시작 > 첫 번째 Teams 앱 만들기에서 전담 경험을 시작합니다.
Visual Studio Code용 개발 도구 키트, 학습 자료, 코드 샘플, 프로젝트 템플릿에 대한 빠른 참조를 가져오려면 Microsoft Teams 도구 키트 개요를 참조하세요.
Microsoft Teams 도구 키트에서 새 프로젝트>탭을 선택합니다.
탭 앱은 가장 간단한 프레임워크를 제공하며, Fluent UI와 함께 React를 사용하여 이를 더욱 개선할 수 있습니다.
Microsoft 365 개발자 계정을 사용하여 앱 구조를 빠르게 만들고 Teams에서 로컬로 사용해 볼 수 있습니다. Fluent UI 기능으로 React를 사용하고 Visual Studio Code에서 기본 설치를 따릅니다.
이 프로젝트에는 Azure Functions를 통한 템플릿 기반 API 구현이 있습니다. 이 시점에서는 채팅 플랫폼을 위한 완전한 백 엔드 구현을 만들어야 합니다. 기본 탭 옵션은 웹앱 프런트 엔드 구조를 제공합니다. 또한 Teams에서 Single Sign-On 환경 개발 | GitHub에 설명된 대로 앱에 대한 SSO도 사용하도록 설정합니다.
Teams 사용자 지정 앱을 구현하는 다른 방법
Teams 앱 manifest.json 파일을 사용하여 각 탭을 외부 앱에 연결하는 탭 앱을 만들 수 있습니다. 자세한 내용은 샘플 앱 매니페스트를 참조하세요.
TeamsFx 프로젝트에서 기존 Microsoft Entra 앱 사용에 설명된 대로 기존 Microsoft Entra 앱을 사용할 수도 있습니다.
탭 기능에 대한 자세한 내용은 Teams 앱 내에서 탭 기능 구성 | GitHub을 참조하세요.
채팅 앱 빌드
모든 함수를 갖춘 채팅 앱을 만들려면 몇 가지 주요 함수가 필요합니다.
채팅을 호스팅하고 메시지(및 기타 통신 형식)를 보내고 받는 함수를 제공하려면 Azure Communication Services 인스턴스가 필요합니다. 이 시스템 내에서 각 커뮤니케이션 ID는 앱의 API 서비스에서 제공하는 사용자를 나타냅니다. 사용자 인증 흐름이 완료되면 사용자는 통신 ID를 받습니다.
인증 흐름
Azure Communication Services 엔드포인트에는 전달자 토큰 형태로 제공되는 인증이 필요합니다. 인증 서비스는 통신 ID당 하나의 토큰을 제공합니다.
요구 사항에 따라 사용자가 등록, 로그인하거나 다른 형태의 일회성 인증 링크를 확인할 수 있는 수단을 제공해야 할 수도 있습니다.
보안을 위해 백 엔드 서비스 내에서 ID를 만들고 인증 토큰을 발급해야 합니다. 자세한 내용은 빠른 시작: 액세스 토큰 만들기 및 관리를 참조하세요.
채팅 UI
웹 UI에 메시지 입력이 가능한 채팅 창을 제공하는 가장 빠른 방법은 Azure communication-react 패키지의 React Web UI 라이브러리 복합 요소를 사용하는 것입니다. Storybook 설명서에서는 이러한 기능을 통합하는 방법과 Storybook 환경에서 직접 사용하는 방법을 설명합니다.
참가자 목록과 채팅 복합
채팅 복합 구성 요소에는 인증 흐름의 사용자 ID와 토큰, Communication Services 엔드포인트, 그리고 이를 연결해야 하는 스레드 ID가 필요합니다.
스레드 ID는 통신 식별자 그룹 간의 대화를 나타냅니다. 대화를 시작하기 전에 스레드를 만들고, 해당 스레드에 사용자를 추가해야 합니다. 이 절차를 자동화하거나 직원이 구성할 수 있는 Teams 앱의 탭에서 함수를 제공할 수 있습니다.
챗봇
채팅 앱에 봇을 추가할 수 있습니다. 자세한 내용은 빠른 시작: 채팅 앱에 봇 추가를 참조하세요.
Teams 앱 배포
조직에서 Teams 앱을 사용하려면 Teams 관리자가 앱을 승인해야 합니다. Teams 관리 센터를 통해 Teams 사용자 지정 앱을 빌드하고 앱 패키지를 설치할 수 있습니다. 자세한 내용은 Microsoft Teams 관리 센터에서 사용자 지정 앱 관리를 참조하세요.
다음 단계
관련된 문서
- Teams interop을 갖춘 앱을 빌드하는 방법에 대한 자세한 내용은 연락 센터를 참조하세요.