사용자 환경 디자인Design the user experience

적용 대상: SDK v4APPLIES TO: SDK v4

회전식 보기 또는 목록 형식으로 표시되는 텍스트, 단추, 이미지, 서식 있는 카드와 같은 다양한 기능을 사용하여 봇을 만들 수 있습니다.You can create bots with a variety of features such as text, buttons, images, rich cards displayed in carousel or list format, and more. 그러나 Facebook, Slack 등과 같은 각 채널은However, each channel such as Facebook, Slack, etc. 궁극적으로 해당 메시징 클라이언트가 기능을 렌더링하는 방식을 제어합니다.ultimately controls how its messaging clients render features. 여러 채널이 기능을 지원하는 경우에도 각 채널은 약간 다른 방식으로 기능을 렌더링할 수 있습니다.Even when multiple channels support a feature, each channel may render the feature in a slightly different way. 메시지에 채널이 기본적으로 지원하지 않는 기능이 포함된 경우, 채널은 메시지 콘텐츠를 텍스트나 정적 이미지로 다운렌더링하여 클라이언트에서 해당 메시지의 모양에 크게 영향을 줄 수 있습니다.In cases where a message contains feature(s) that a channel does not natively support, the channel may attempt to down-render message contents as text or as a static image, which can significantly impact the message's appearance on the client. 일부 경우에 채널이 특정 기능을 전혀 지원하지 않을 수도 있습니다.In some cases, a channel may not support a particular feature at all. 예를 들어, GroupMe 클라이언트는 입력 표시기를 표시할 수 없습니다.For example, GroupMe clients cannot display a typing indicator.

서식 있는 사용자 컨트롤Rich user controls

서식 있는 사용자 컨트롤 은 봇이 사용자에게 제공하고, 사용자가 선택 항목 및 의도를 전달하기 위해 사용하는 단추, 이미지, 회전식 보기 및 메뉴와 같은 일반적인 UI 컨트롤입니다.Rich user controls are common UI controls such as buttons, images, carousels, and menus that the bot presents to the user and the user engages with to communicate choice and intent. 봇은 UI 컨트롤 컬렉션을 사용하여 앱을 모방하거나 앱 내에 포함된 상태로 실행될 수도 있습니다.A bot can use a collection of UI controls to mimic an app, or can even run embedded within an app. 봇이 앱 또는 웹 사이트 내에 포함되면 봇을 호스트하는 앱의 기능을 활용하여 거의 모든 UI 컨트롤을 시각적으로 나타낼 수 있습니다.When a bot is embedded within an app or website, it can represent virtually any UI control by leveraging the capabilities of the app that is hosting it.

지난 수십 년 동안 애플리케이션 및 웹 사이트 개발자는 UI 컨트롤에 의존하여 사용자가 해당 애플리케이션과 상호 작용하도록 했으며 이러한 동일한 UI 컨트롤이 봇에서도 매우 효과적일 수 있습니다.For decades, application and website developers have relied on UI controls to enable users to interact with their applications and these same UI controls can also be very effective in bots. 예를 들어, 단추는 사용자에게 간단한 선택 항목을 제공하는 유용한 방법입니다.For instance, buttons are a great way to present the user with a simple choice. 사용자가 호텔 레이블이 붙은 단추를 클릭하여 "호텔"이라는 표현을 전달할 수 있도록 하는 것은 사용자에게 “호텔”을 입력하도록 하는 것보다 더 쉽고 빠른 방법입니다.Allowing the user to communicate "Hotels" by clicking a button labeled Hotels is easier and quicker than forcing the user to type "Hotels." 입력하는 방식보다 클릭하는 방식이 훨씬 더 선호되는 모바일 디바이스에서는 특히 그렇습니다.This especially holds true on mobile devices, where clicking is greatly preferred over typing.

카드Cards

카드를 사용하여 다양한 시각적, 오디오 및/또는 선택 가능한 메시지를 사용자엑 제공하고 대화 흐름을 지원할 수 있습니다.Cards allow you to present your users with a variety of visual, audio, and/or selectable messages and help to assist conversation flow. 사용자가 고정된 항목 집합 중에서 선택해야 할 경우, 각각이 이미지, 텍스트 설명 및 단일 선택 단추를 포함하는 회전식 카드를 표시할 수 있습니다.If a user needs to select from within a fixed set of items you can display a carousel of cards, each containing an image, a text description, and a single selection button. 단일 항목에 대해 선택 옵션 집합이 있는 경우 선택할 수 있는 다양한 옵션을 포함하는 좀 더 작은 단일 이미지와 단추 컬렉션을 제공할 수 있습니다.If a user has a set of choices for a single item, you can present a smaller single image and a collection of buttons with various options to choose between. 사용자가 특정 주제에 대해 추가 정보를 요청했나요?Did they ask for more information on a subject? 카드는 오디오 또는 비디오 출력이나 쇼핑 경험을 자세히 나타내는 영수증을 사용하여 자세한 정보를 제공할 수 있습니다.Cards can provide in depth information using audio or video output, or a receipt that details their shopping experience. 카드를 사용 하 여 사용자와 봇 간의 대화를 안내 하는 데 많은 도움이 됩니다.There is an incredibly wide range of uses for cards to help guide the conversation between your user and your bot. 사용되는 카드 종류는 애플리케이션의 요구 사항에 따라 결정됩니다.The type of card you use will be determined by the needs of your application. 카드, 해당 작업 및 몇 가지 권장 사용에 대해 자세히 살펴보겠습니다.Let's take a closer look at cards, their actions, and some recommended uses.

Microsoft Bot Service 카드는 다양한 채널에서 인식되는 서식 있는 사용자 컨트롤의 표준화된 컬렉션을 포함하는 프로그래밍 가능 개체입니다.Microsoft Bot Service cards are programmable objects containing standardized collections of rich user controls that are recognized across a wide range of channels. 다음 표에는 각 카드 종류에 대해 사용 가능한 카드 및 추천되는 모범 사례 목록이 나와 있습니다.The following table describes the list of available cards and best practice suggestions of usage for each type of card.

카드 형식Card type 예제Example DescriptionDescription
AdaptiveCardAdaptiveCard 적응형 카드 이미지 JSON 개체로 렌더링되는 개방형 카드 교환 형식입니다.An open card exchange format rendered as a JSON object. 일반적으로 카드의 채널 간 배포에 사용됩니다.Typically used for cross-channel deployment of cards. 카드는 각 호스트 채널의 모양과 느낌에 맞게 조정됩니다.Cards adapt to the look and feel of each host channel.
AnimationCardAnimationCard 애니메이션 카드 이미지 애니메이션 GIF 또는 짧은 비디오를 재생할 수 있는 카드입니다.A card that can play animated GIFs or short videos.
AudioCardAudioCard 오디오 카드 이미지 오디오 파일을 재생할 수 있는 카드입니다.A card that can play an audio file.
HeroCardHeroCard Hero 카드 이미지 하나의 큰 이미지, 하나 이상의 단추 및 텍스트를 포함하는 카드입니다.A card that contains a single large image, one or more buttons, and text. 일반적으로 사용자가 선택할 수 있는 항목을 시각적으로 강조 표시하는 데 사용됩니다.Typically used to visually highlight a potential user selection.
ThumbnailCardThumbnailCard 미리 보기 카드 이미지 하나의 미리 보기 이미지, 하나 이상의 단추 및 텍스트를 포함하는 카드입니다.A card that contains a single thumbnail image, one or more buttons, and text. 일반적으로 사용자가 선택할 수 있는 단추를 시각적으로 강조 표시하는 데 사용됩니다.Typically used to visually highlight the buttons for a potential user selection.
ReceiptCardReceiptCard 수신 카드 이미지 봇이 사용자에게 수신 확인을 제공할 수 있는 카드입니다.A card that enables a bot to provide a receipt to the user. 일반적으로 수신 확인, 세금 및 합계 정보에 포함할 항목 목록과 기타 텍스트를 포함합니다.It typically contains the list of items to include on the receipt, tax and total information, and other text.
SignInCardSignInCard 로그인 카드 이미지 봇이 사용자 로그인을 요청하는 데 사용되는 카드입니다.A card that enables a bot to request that a user sign-in. 일반적으로 사용자가 로그인 프로세스를 시작하기 위해 클릭할 수 있는 하나 이상의 단추와 텍스트를 포함합니다.It typically contains text and one or more buttons that the user can click to initiate the sign-in process.
SuggestedActionSuggestedAction 제안된 작업 카드 이미지 사용자 선택 항목을 나타내는 CardActions 집합을 사용자에게 제공합니다.Presents your user with a set of CardActions representing a user choice. 이 카드는 제안된 작업 중 하나가 선택되면 사라집니다.This card disappears once any of the suggested actions is selected.
VideoCardVideoCard 비디오 카드 이미지 비디오를 재생할 수 있는 카드입니다.A card that can play videos. 일반적으로 URL을 열고 사용할 수 있는 비디오를 스트리밍하는 데 사용됩니다.Typically used to open a URL and stream an available video.
CardCarouselCardCarousel 회전식 카드 이미지 사용자가 선택 가능한 일련의 항목을 쉽게 볼 수 있도록 하는 가로로 스크롤 가능한 카드 모음입니다.A horizontally scrollable collection of cards that allows your user to easily view a series of possible user choices.

카드를 사용하여 봇을 한 번 디자인한 후 다양한 채널에서 사용할 수 있습니다.Cards allow you to design your bot once, and have it work across a variety of channels. 그러나 모든 카드 종류가 사용 가능한 모든 채널에서 완전히 지원되는 것은 아닙니다.However, not all card types are fully supported across all available channels.

봇에 카드를 추가하기 위한 자세한 지침은 서식 있는 미디어 첨부 파일 추가메시지에 제안된 작업 추가 섹션에서 찾을 수 있습니다.Detailed instructions for adding cards to your bot can be found within these sections Add rich card media attachments and Add suggested actions to messages. 카드의 샘플 코드는 아래에서도 확인할 수 있습니다. C#/JS 적응형 카드: C#/JS, 첨부 파일: C#/JS 및 제안된 작업: C#/JS.Sample code can also be found here for cards: C#/JS adaptive cards: C#/JS, attachments: C#/JS, and suggested actions: C#/JS.

봇을 디자인할 때 “그렇게 스마트하지 않으므로” 일반적인 UI 요소를 자동으로 닫지 않도록 합니다.When designing your bot, do not automatically dismiss common UI elements as not being "smart enough." 이전에 살펴본 것처럼 봇은 가장 빠르고 쉬운 최선의 방법으로 사용자 문제를 해결하도록 디자인되어야 합니다.As discussed previously, your bot should be designed to solve the user's problem in the best, quickest, and easiest manner possible. 자연어 인식은 종종 불필요하며 타당하지 않은 복잡성을 유발하므로 포함하지 않는 것이 좋습니다.Avoid the temptation to start by incorporating natural language understanding, as it is often unnecessary and introduces unjustified complexity.

처음에는 봇이 사용자 문제를 해결하도록 하는 최소한의 UI 컨트롤을 사용한 후 나중에 해당 컨트롤로 더 이상 충분하지 않게 되면 다른 요소를 추가합니다.Start by using the minimum UI controls that enable the bot to solve the user's problem, and add other elements later if those controls are no longer sufficient.

텍스트 및 자연어 인식Text and natural language understanding

봇은 사용자의 텍스트 입력을 수락하고 정규식 일치 또는 자연어 인식 API(예: LUIS)를 사용하여 해당 입력을 구문 분석하려고 합니다.A bot can accept text input from users and attempt to parse that input using regular expression matching or natural language understanding APIs, such as LUIS. 사용자가 제공하는 입력의 유형에 따라 자연어 인식이 적합한 솔루션이 될 수도 있고 그렇지 않을 수도 있습니다.Depending on the type of input that the user provides, natural language understanding may or may not be a good solution.

일부 경우에 사용자는 매우 구체적인 질문에 답변 할 수 있습니다.In some cases, a user may be answering a very specific question. 예를 들어, 봇이 "What is your name?"이라고 물어보면 사용자는 "John"이라고 이름만 지정하는 텍스트로 답변하거나 “My name is John”이라고 문장으로 답변할 수 있습니다.For example, if the bot asks, "What is your name?", the user may answer with text that specifies only the name, "John", or with a sentence, "My name is John".

구체적인 질문을 하면 봇이 수신할 수 있는 타당한 응답 범위가 감소하여 응답을 구문 분석하고 이해하는 데 필요한 논리의 복잡성이 줄어듭니다.Asking specific questions reduces the scope of potential responses that the bot might reasonably receive, which decreases the complexity of the logic necessary to parse and understand the response. 예를 들어 “How are you feeling?”과 같은 광범위한 주관식 질문을 고려해 보세요.For example, consider the following broad, open-ended question: "How are you feeling?". 이러한 질문에 대해 가능한 많은 답변 조합을 이해하는 일은 매우 복잡한 작업입니다.Understanding the many possible permutations of potential answers to such a question is a very complex task.

반면, "Are you feeling pain? yes/no" 및 "Where are you feeling pain? chest/head/arm/leg"와 같은 구체적인 질문은 봇이 자연어 인식을 구현하지 않고도 구문 분석하고 이해할 수 있는 보다 구체적인 답변을 얻기 쉽습니다.In contrast, specific questions such as "Are you feeling pain? yes/no" and "Where are you feeling pain? chest/head/arm/leg" would likely prompt more specific answers that a bot can parse and understand without needing to implement natural language understanding.

가능한 경우 응답을 구문 분석하기 위해 자연어 인식 기능이 필요하지 않은 구체적인 질문을 하세요.Whenever possible, ask specific questions that will not require natural language understanding capabilities to parse the response. 이렇게 하면 봇이 간소화되고 봇이 사용자를 이해할 가능성이 높아집니다.This will simplify your bot and increase the success your bot will understand the user.

다른 경우에 사용자가 특정 명령을 입력 할 수 있습니다.In other cases, a user may be typing a specific command. 예를 들어, 개발자가 가상 머신을 관리할 수 있도록 하는 DevOps 봇은 "/STOP VM XYZ" 또는 "/START VM XYZ"와 같은 특정 명령을 수락하도록 디자인될 수 있습니다.For example, a DevOps bot that enables developers to manage virtual machines could be designed to accept specific commands such as "/STOP VM XYZ" or "/START VM XYZ". 이와 같은 명령을 수락하도록 봇을 디자인하면 구문을 학습하기 쉽고 각 명령의 예상되는 결과가 명확하므로 좋은 사용자 환경이 구현될 수 있습니다.Designing a bot to accept specific commands like this makes for a good user experience, as the syntax is easy to learn and the expected outcome of each command is clear. 또한 정규식을 사용하여 사용자의 입력을 쉽게 구문 분석할 수 있으므로 봇에 자연어 인식 기능이 필요하지 않습니다.Additionally, the bot will not require natural language understanding capabilities, since the user's input can be easily parsed using regular expressions.

사용자의 특정 명령을 요구하도록 봇을 디자인하면 자연어 인식 기능에 대한 필요성을 없애면서 적절한 사용자 환경을 제공할 수 있습니다.Designing a bot to require specific commands from the user can often provide a good user experience while also eliminating the need for natural language understanding capability.

기술 자료 봇 또는 질문 및 답변 봇의 경우 사용자는 일반적인 질문을 제기 할 수 있습니다.In the case of a knowledge base bot or questions and answers bot, a user may be asking general questions. 예를 들어, 수천 개의 문서 콘텐츠를 기준으로 질문에 대답할 수 있는 봇이 있다고 가정합니다.For example, imagine a bot that can answer questions based on the contents of thousands of documents. QnA MakerAzure Search는 이러한 종류의 시나리오에 맞게 디자인된 두 가지 기술입니다.QnA Maker and Azure Search are both technologies which are designed specifically for this type of scenario. 자세한 내용은 기술 봇을 디자인을 참조하세요.For more information, see Design knowledge bots.

데이터베이스, 웹 페이지 또는 문서의 구조적 또는 비구조적 데이터를 기준으로 질문에 답변하는 봇을 디자인할 경우 자연어 인식으로 문제를 해결하지 않고 이 시나리오를 해결하도록 특별히 디자인된 기술을 사용하는 것이 좋습니다.If you are designing a bot that will answer questions based on structured or unstructured data from databases, web pages, or documents, consider using technologies that are designed specifically to address this scenario rather than attempting to solve the problem with natural language understanding.

다른 시나리오에서 사용자는 자연어에 따라 간단한 요청을 입력 할 수 있습니다.In other scenarios, a user may be typing simple requests based on natural language. 예를 들어 사용자는 "I want a pepperoni pizza" 또는 "Are there any vegetarian restaurants within 3 miles from my house open now?"를 입력할 수 있습니다.For example, a user may type "I want a pepperoni pizza" or "Are there any vegetarian restaurants within 3 miles from my house open now?". 자연어 인식 API(예: LUIS.ai)는 이와 같은 시나리오에 매우 적합합니다.Natural language understanding APIs such as LUIS.ai are a great fit for scenarios like this.

이 API를 통해 봇은 사용자 텍스트의 핵심 구성 요소를 추출하여 사용자 의도를 식별할 수 있습니다.Using the APIs, your bot can extract the key components of the user's text to identify the user's intent. 봇에서 자연어 인식 기능을 구현할 경우 사용자가 입력에서 제공할 수 있는 세부 수준의 실제 기준을 설정합니다.When implementing natural language understanding capabilities in your bot, set realistic expectations for the level of detail that users are likely to provide in their input.

사용자의 대화 방법

자연어 모델을 빌드하는 경우 사용자가 초기 쿼리에서 필요한 모든 정보를 제공할 것이라고 가정하지는 않도록 합니다.When building natural language models, do not assume that users will provide all the required information in their initial query. 필요한 경우 일련의 질문을 제기하고 사용자에게 필요한 정보를 구체적으로 제공하도록 요청하는 봇을 디자인합니다.Design your bot to specifically request the information it requires, guiding the user to provide that information by asking a series of questions, if necessary.

SpeechSpeech

봇은 음성 입력 및/또는 출력을 사용하여 사용자와 소통할 수 있습니다.A bot can use speech input and/or output to communicate with users. 봇이 키보드 또는 모니터 없는 디바이스를 지원하도록 디자인된 경우 음성은 사용자와 소통하기 위한 유일한 수단입니다.In cases where a bot is designed to support devices that have no keyboard or monitor, speech is the only means of communicating with the user.

서식 있는 사용자 컨트롤, 텍스트와 자연어, 음성 중에서 선택Choosing between rich user controls, text and natural language, and speech

제스처, 음성 및 기호를 조합하여 서로 소통하는 사람들처럼, 봇은 서식 있는 사용자 컨트롤, 텍스트(경우에 따라 자연어 포함) 및 음성의 조합을 사용하여 사용자와 소통할 수 있습니다.Just like people communicate with each other using a combination of gestures, voice, and symbols, bots can communicate with users using a combination of rich user controls, text (sometimes including natural language), and speech. 이러한 소통 방법은 함께 사용할 수 있으며 하나만 선택할 필요는 없습니다.These communication methods can be used together; you do not need to choose one over another.

예를 들어, 사용자에게 요리법을 알려주는 "요리 봇"의 경우 동영상을 재생하거나 일련의 사진을 표시하여 요리를 진행하는 과정을 설명하면서 지침을 제공할 수 있습니다.For example, imagine a "cooking bot" that helps users with recipes, where the bot may provide instructions by playing a video or displaying a series of pictures to explain what needs to be done. 일부 사용자는 요리법 페이지를 뒤집거나 요리법을 조합하면서 음성으로 봇에게 질문을 할 수 있습니다.Some users may prefer to flip pages of the recipe or ask the bot questions using speech while they are assembling a recipe. 봇과 음성으로 상호 작용하기보다 디바이스 화면을 터치하려는 사용자도 있을 수 있습니다.Others may prefer to touch the screen of a device instead of interacting with the bot via speech. Bot을 디자인할 때 지원 하려는 특정 사용 사례를 고려 하 여 사용자가 봇과 상호 작용 하는 방법을 지 원하는 UX 요소를 통합 합니다.When designing your bot, incorporate the UX elements that support the ways in which users will likely prefer to interact with your bot, given the specific use cases that it is intended to support.