시작하기Getting Started

적응형 카드는 JSON 직렬화된 카드 개체 모델입니다.An Adaptive Card is a JSON-serialized card object model.

적응형 카드 구조Adaptive Card structure

카드의 기본 구조는 다음과 같습니다.The basic structure of a card is as follows:

  • AdaptiveCard - 루트 개체는 적응형 카드의 요소 구성, 동작, 말하기 방식, 렌더링하는 데 필요한 스키마 버전을 포함한 적응형 카드 자체를 설명합니다.AdaptiveCard - The root object describes the AdaptiveCard itself, including its element makeup, its actions, how it should be spoken, and the schema version required to render it.
  • body - 카드의 본문은 elements로 알려진 빌딩 블록으로 구성됩니다.body - The body of the card is made up of building-blocks known as elements. 요소를 거의 무한의 정렬로 구성하여 여러 종류의 카드를 만들 수 있습니다.Elements can be composed in nearly infinite arrangements to create many types of cards.
  • actions - 여러 카드에 사용자가 취할 수 있는 일련의 동작이 있습니다.actions - Many cards have a set of actions a user may take on it. 이 속성은 일반적으로 하단의 "작업 모음"에서 렌더링되는 작업을 설명합니다.This property describes those actions which typically get rendered in an "action bar" at the bottom.

카드 예Example Card

텍스트 한 줄 다음에 이미지가 오는 이 샘플 카드입니다.This sample card which includes a single line of text followed by an image.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Type 속성Type property

각 요소에는 개체의 유형을 식별하는 type 속성이 있습니다.Every element has a type property which identifies what kind of object it is. 위의 카드를 보면 TextBlockImage라는 두 가지 요소가 있는 것을 볼 수 있습니다.Looking at the above card, you can see we have two elements, a TextBlock and an Image.

모든 적응형 카드 요소는 가로로 스택되며 부모 항목의 너비에 맞게 확장됩니다(예: HTML의 display: block).All Adaptive Card elements stack vertically and expand to the width of their parent (think display: block in HTML). 하지만 ColumnSet를 사용하여 컨테이너 열을 만들 수 있습니다.However, you can use a ColumnSet to create side-by-side columns of containers.

적응형 요소Adaptive Elements

가장 기본적인 요소는 다음과 같습니다.The most fundamental elements are:

  • TextBlock - 텍스트의 모양을 제어하는 속성을 사용하여 텍스트 블록을 추가합니다.TextBlock - adds a block of text with properties to control what the text looks like
  • Image - 이미지의 모양을 제어하는 속성을 사용하여 이미지를 추가합니다.Image - adds an image with properties to control what the image looks like

컨테이너 요소Container elements

카드에 자식 요소의 컬렉션을 정렬하는 컨테이너가 포함될 수도 있습니다.Cards can also have containers, which arrange a collection of child elements.

  • Container - 요소 컬렉션을 정의합니다.Container - Defines a a collection of elements
  • ColumnSet/Column - 열 컬렉션을 정의하며, 각 열이 컨테이너입니다.ColumnSet/Column - Defines a collection of columns, each column is a container
  • FactSet - 팩트의 컨테이너입니다.FactSet - Container of Facts
  • ImageSet - 이미지 컬렉션의 적절한 사진 갤러리 환경이 UI에 표시될 수 있도록 하는 이미지 컨테이너입니다.ImageSet - Container of Images so that UI can show appropriate photo gallery experience for a collection of images.

입력 요소Input elements

입력 요소를 사용하여 네이티브 UI에 간단한 양식을 빌드하도록 요청할 수 있습니다.Input elements allow you to ask for native UI to build simple forms:

  • Input.Text - 사용자로부터 텍스트 콘텐츠를 가져옵니다.Input.Text - get text content from the user
  • Input.Date - 사용자로부터 날짜를 가져옵니다.Input.Date - get a Date from the user
  • Input.Time - 사용자로부터 시간을 가져옵니다.Input.Time - get a Time from the user
  • Input.Number - 사용자로부터 숫자를 가져옵니다.Input.Number - get a Number from the user
  • Input.ChoiceSet - 사용자에게 일련의 옵션을 제공하고 선택하도록 합니다.Input.ChoiceSet - Give the user a set of choices and have them pick
  • Input.Toggle - 사용자에게 두 가지 옵션을 제공하고 선택하도록 합니다.Input.Toggle - Give the user a single choice between two items and have them pick

작업Actions

카드에 단추를 추가하는 작업입니다.Actions add buttons to the card. URL 열기 또는 일부 데이터 제출과 같은 다양한 작업을 수행할 수 있습니다.These can perform a variety of actions, like opening a URL or submitting some data.

  • Action.OpenUrl - 단추를 누르면 외부 URL이 열리고 볼 수 있습니다.Action.OpenUrl - the button opens an external URL for viewing
  • Action.ShowCard - 사용자에게 표시할 하위 카드를 요청합니다.Action.ShowCard - Requests a sub-card to be shown to the user.
  • Action.Submit - 모든 입력 요소를 하나의 개체로 합친 후 호스트 애플리케이션이 정의한 일부 메서드를 통해 사용자에게 전송하도록 요청합니다.Action.Submit - Ask for all of the input elements to be gathered up into an object which is then sent to you through some method defined by the host application.

Example Action.Submit: Action.Submit가 Skype를 통해 모든 입력 데이터가 합쳐진 개체가 포함된 Value 속성을 사용하여 Bot Framework 봇 활동 작업을 봇에 다시 전송합니다.Example Action.Submit: With Skype, an Action.Submit will send a Bot Framework bot activity back to the bot with the Value property containing an object with all of the input data on it.

자세한 정보Learn More