웹 사이트에 봇 포함Embed a bot in a website

적용 대상: SDK v4APPLIES TO: SDK v4

봇은은 일반적으로 웹 사이트 외부에 있지만 웹 사이트 내에 포함될 수도 있습니다.Although bots commonly exist outside of websites, they can also be embedded within a website. 예를 들어, 웹 사이트 내에 지식 봇을 포함하여 복잡한 웹 사이트 구조 내에서 찾기 어려울 수 있는 정보를 빠르게 찾도록 할 수 있습니다.For example, you may embed a knowledge bot within a website to enable users to quickly find information that might otherwise be challenging to locate within complex website structures. 또는 지원 센터 웹 사이트에 봇을 포함하여 들어오는 사용자 요청에 대한 첫 번째 응답자 역할을 하도록 할 수 있습니다.Or you might embed a bot within a help desk website to act as the first responder to incoming user requests. 봇은 간단한 문제는 독립적으로 해결하고 좀 더 복잡한 문제는 상담원에게 전달할 수 있습니다.The bot could independently resolve simple issues and handoff more complex issues to a human agent.

이 문서에서는 웹 사이트와 봇을 통합하고 백채널 메커니즘을 사용하여 웹 페이지 및 봇 간에 프라이빗 통신을 용이하게 하는 프로세스를 알아봅니다.This article explores integrating bots with websites and the process of using the backchannel mechanism to facilitate private communication between a web page and a bot.

Microsoft는 웹 사이트에서 봇을 통합하는 두 가지 방법인 Skype 웹 컨트롤과 오픈 소스 웹 컨트롤을 제공합니다.Microsoft provides two different ways to integrate a bot in a website: the Skype web control and an open source web control.

Skype 웹 컨트롤Skype web control

참고

2019년 10월 31일부터 Skype 채널은 더 이상 새 봇 게시 요청을 수락하지 않습니다.As of October 31, 2019 the Skype channel no longer accepts new Bot publishing requests. 즉, Skype 채널을 사용하여 봇 개발을 계속할 수 있지만 봇은 100명의 사용자로 제한되며,This means that you can continue to develop bots using the Skype channel, but your bot will be limited to 100 users. 더 많은 대상에게 봇을 게시할 수 없습니다.You will not be able to publish your bot to a larger audience. 현재 Skype 봇은 중단 없이 계속 실행됩니다.Current Skype bots will continue to run uninterrupted. 자세한 내용은 Skype에서 일부 기능을 더 이상 사용할 수 없는 이유를 참조하세요.Read more about why some features are not available in Skype anymore.

Skype 웹 컨트롤은 기본적으로 웹 지원 컨트롤의 Skype 클라이언트입니다.The Skype web control is essentially a Skype client in a web-enabled control. 기본 제공 Skype 인증을 통해 개발자가 사용자 지정 코드를 작성하지 않아도 봇이 사용자를 인증하고 인식할 수 있습니다.Built-in Skype authentication enables the bot to authenticate and recognize users, without requiring the developer to write any custom code. Skype는 해당 웹 클라이언트에서 사용되는 Microsoft 계정을 자동으로 인식합니다.Skype will automatically recognize Microsoft Accounts used in its web client.

Skype 웹 컨트롤은 단순히 Skype용 프런트 엔드의 역할을 하므로, 사용자의 Skype 클라이언트는 웹 컨트롤이 이용하는 모든 대화의 전체 컨텍스트에 자동으로 액세스합니다.Because the Skype web control simply acts as a front-end for Skype, the user's Skype client automatically has access to the full context of any conversation that the web control facilitates. 웹 브라우저를 닫은 후에도 사용자는 Skype 클라 이언트를 사용하여 봇과 계속 상호 작용할 수 있습니다.Even after the web browser is closed, the user may continue to interact with the bot using the Skype client.

오픈 소스 웹 컨트롤Open source web control

오픈 소스 웹 채팅 컨트롤은 ReactJS를 기반으로 하며, Direct Line API를 사용하여 Bot Framework와 통신합니다.The open source web chat control is based upon ReactJS and uses the Direct Line API to communicate with the Bot Framework. 웹 채팅 컨트롤은 웹 채팅을 구현하기 위한 빈 캔버스를 제공하고 사용자가 해당 동작 및 제공되는 사용자 환경을 완전히 제어할 수 있도록 합니다.The web chat control provides a blank canvas for implementing the web chat, giving you full control over its behaviors and the user experience that it delivers.

백채널 메커니즘을 통해 컨트롤을 호스트하는 웹 페이지는 사용자가 전혀 볼 수 없는 방식으로 봇과 직접 통신할 수 있습니다.The backchannel mechanism enables the web page that is hosting the control to communicate directly with the bot in a manner that is entirely invisible to the user. 이 기능을 사용하면 다음과 같은 다양한 시나리오가 지원될 수 있습니다.This capability enables a number of useful scenarios:

  • 웹 페이지에서 봇에 관련 데이터를 전송할 수 있습니다(예: GPS 위치).The web page can send relevant data to the bot (e.g., GPS location).
  • 웹 페이지에서 봇에게 사용자 작업에 대해 조언을 할 수 있습니다(예: "사용자가 방금 드롭다운에서 옵션을 선택했음).The web page can advise the bot about user actions (e.g., "user just selected Option A from the dropdown").
  • 웹 페이지에서 로그인한 사용자에 대한 인증 토큰을 봇에게 전송할 수 있습니다.The web page can send the bot the auth token for a logged-in user.
  • 봇에서 웹 페이지로 관련 데이터를 전송할 수 있습니다(예: 사용자 포트폴리오의 현재 값).The bot can send relevant data to the web page (e.g., current value of user's portfolio).
  • 봇에서 "명령"을 웹 페이지로 전송할 수 있습니다(예: 배경색 변경).The bot can send "commands" to the web page (e.g., change background color).

백채널 메커니즘 사용Using the backchannel mechanism

오픈 소스 웹 채팅 컨트롤은 클라이언트와 봇 사이에 activities를 전송하는 Direct Line API를 사용하여 봇과 통신합니다.The open source web chat control communicates with bots by using the Direct Line API, which allows activities to be sent back and forth between client and bot. 작업의 가장 일반적인 형식은 message이지만 다른 형식도 있습니다.The most common type of activity is message, but there are other types as well. 예를 들어, 작업 형식 typing은 사용자가 입력 중이거나 봇이 응답을 컴파일하기 위해 작업 중임을 나타냅니다.For example, the activity type typing indicates that a user is typing or that the bot is working to compile a response.

작업 형식을 event로 설정하면 백채널 메커니즘을 사용하여 사용자에게 이를 표시하지 않으면서 클라이언트와 봇 간에 정보를 교환할 수 있습니다.You can use the backchannel mechanism to exchange information between client and bot without presenting it to the user by setting the activity type to event. 웹 채팅 컨트롤은 자동으로 type="event"가 있는 작업을 무시합니다.The web chat control will automatically ignore any activities where type="event".

예제 코드Sample code

오픈 소스 웹 채팅 컨트롤은 GitHub를 통해 사용할 수 있습니다.The open source web chat control is available via GitHub. Node.js용 오픈 소스 웹 채팅 컨트롤 및 Bot Framework SDK를 사용하여 백채널 메커니즘을 구현하는 방법에 대한 자세한 내용은 백채널 메커니즘 사용을 참조하세요.For details about how you can implement the backchannel mechanism using the open source web chat control and the Bot Framework SDK for Node.js, see Use the backchannel mechanism.

추가 리소스Additional resources