적응형 카드 템플릿

적응형 카드를 만들고, 재사용하고, 공유하는 데 도움이 되는 새로운 도구의 미리 보기를 공유하게 되어 기쁩니다.

중요합니다

2020년 5월 릴리스 후보의주요 변경 내용

템플릿 릴리스 후보에는 이전 패키지를 사용한 경우 알아야 할 작은 사소한 호환성을 깨뜨릴 수 있는 변경 사항이 몇 가지 포함되어 있습니다. 자세한 내용은 다음을 참조하세요.

2020년 5월 현재 호환성이 손상되는 변경

바인딩 구문이 {...}에서 ${...}으로 변경되었습니다.
- 예를 들어: "text": "Hello {name}"가 "text": "Hello ${name}"로 됩니다.
JavaScript API에 더 이상 개체가 EvaluationContext 포함되지 않습니다. 데이터를 expand 함수에 그냥 전달하면 됩니다. 자세한 내용은 SDK 페이지를 참조하세요.
.NET API는 JavaScript API와 더 밀접하게 일치하도록 다시 디자인되었습니다. 자세한 내용은 SDK 페이지를 참조하세요.

템플릿을 사용하면 어떻게 도움이 될 수 있나요?

템플릿을 사용하면 적응형 카드의 레이아웃에서 데이터를 분리할 수 있습니다.

카드를 한 번 디자인한 다음 실제 데이터로 채우는 데 도움이 됩니다.

현재 적응 형 카드 디자이너 를 사용하여 카드를 만들고 해당 JSON을 사용하여 페이로드를 동적 콘텐츠로 채우는 것은 불가능합니다. 이를 위해서는 JSON 문자열을 빌드하는 사용자 지정 코드를 작성하거나 개체 모델 SDK를 사용하여 카드를 나타내는 OM을 빌드하고 JSON으로 직렬화해야 합니다. 두 경우 모두 디자이너는 일회성 단방향 작업이며 나중에 코드로 변환한 후에는 카드 디자인을 쉽게 조정할 수 없습니다.

데이터 전송을 네트워크에서 더 작게 만듭니다.

템플릿과 데이터를 클라이언트에서 직접 결합할 수 있는 세계를 상상해 보세요. 즉, 동일한 템플릿을 여러 번 사용하거나 새 데이터로 업데이트하려는 경우 디바이스에 새 데이터를 보내야 하며 동일한 템플릿을 반복해서 다시 사용할 수 있습니다.

제공하는 데이터에서 멋진 카드를 만드는 데 도움이 됩니다.

적응형 카드는 훌륭하다고 생각하지만 사용자에게 표시하려는 모든 항목에 대해 적응형 카드를 작성할 필요가 없다면 어떻게 해야 할까요? 템플릿 서비스(아래 설명)를 사용하면 모든 사용자가 모든 유형의 데이터에 대해 템플릿을 기여하고, 검색하고, 공유할 수 있는 세상을 만들 수 있습니다.

사용자 고유의 프로젝트, 조직 또는 전체 인터넷과 공유합니다.

AI 및 기타 서비스는 사용자 환경을 개선할 수 있습니다.

데이터를 콘텐츠와 분리하면 AI 및 기타 서비스가 표시되는 카드의 데이터에 대해 "추론"할 수 있는 문이 열리고 사용자 생산성이 향상되거나 사물을 찾는 데 도움이 됩니다.

적응형 카드 템플릿이란?

3가지 주요 구성 요소로 구성됩니다.

템플릿 언어는 템플릿을 작성하는 데 사용되는 구문입니다. 디자이너를 사용하면 "샘플 데이터"를 포함하여 디자인 타임에 템플릿을 미리 볼 수도 있습니다.
템플릿 SDK는 지원되는 모든 적응형 카드 플랫폼에 존재합니다. 이러한 SDK를 사용하면 템플릿을 백 엔드 또는 클라이언트에서 직접 실제 데이터로 채울 수 있습니다.
템플릿 서비스는 누구나 잘 알려진 템플릿 집합을 찾고, 기여하고, 공유할 수 있는 개념 증명 서비스입니다.

템플릿 언어

템플릿 언어는 적응형 카드 템플릿을 작성하는 데 사용되는 구문입니다.

비고

새 탭을 열어 아래 예제와 함께 다음을 수행합니다.

https://adaptivecards.io/designer

미리 보기 모드 단추를 클릭하여 디자인 모드와 미리 보기 모드 간에 전환합니다.

디자이너 스크린샷

새로 업데이트된 디자이너는 템플릿 작성 및 디자인 타임에 카드를 미리 볼 수 있는 샘플 데이터 제공에 대한 지원을 추가합니다.

아래 예제를 카드 페이로드 편집기 창에 붙여넣습니다.

EmployeeCardTemplate.json

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "style": "accent",
            "bleed": true,
            "columns": [
                {
                    "type": "Column",
                    "width": "auto",
                    "items": [
                        {
                            "type": "Image",
                            "url": "${photo}",
                            "altText": "Profile picture",
                            "size": "Small",
                            "style": "Person"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Hi ${name}!",
                            "size": "Medium"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Here's a bit about your org...",
                            "spacing": "None"
                        }
                    ]
                }
            ]
        },
        {
            "type": "TextBlock",
            "text": "Your manager is: **${manager.name}**"
        },
        {
            "type": "TextBlock",
            "text": "Your peers are:"
        },
        {
            "type": "FactSet",
            "facts": [
                {
                    "$data": "${peers}",
                    "title": "${name}",
                    "value": "${title}"
                }
            ]
        }
    ]
}

그런 다음 아래의 JSON 데이터를 샘플 데이터 편집기에 붙여넣습니다.

샘플 데이터를 사용하면 실제 데이터를 전달할 때 런타임에 카드가 표시되는 방식을 정확하게 확인할 수 있습니다.

EmployeeData

{
    "name": "Matt",
    "photo": "https://pbs.twimg.com/profile_images/3647943215/d7f12830b3c17a5a9e4afcc370e3a37e_400x400.jpeg",
    "manager": {
        "name": "Thomas",
        "title": "PM Lead"
    },
    "peers": [
        {
            "name": "Lei",
            "title": "Sr Program Manager"
        },
        {
            "name": "Andrew",
            "title": "Program Manager II"
        },
        {
            "name": "Mary Anne",
            "title": "Program Manager"
        }
    ]
}

미리 보기 모드 단추를 클릭합니다. 위에서 제공된 샘플 데이터에 따라 카드 렌더링이 표시됩니다. 샘플 데이터를 자유롭게 조정하고 실시간으로 카드 업데이트를 시청하세요.

축하합니다. 첫 번째 적응형 카드 템플릿을 작성했습니다. 다음으로 템플릿을 실제 데이터로 채우는 방법을 알아보겠습니다.

템플릿 언어에 대한 자세한 정보

SDK 지원

템플릿 SDK를 사용하면 템플릿을 실제 데이터로 채울 수 있습니다.

비고

현재 템플릿 SDK는 .NET 및 NodeJS에 사용할 수 있습니다. 시간이 지남에 따라 iOS, Android, UWP 등 나머지 모든 적응형 카드 플랫폼에 대한 템플릿 SDK를 릴리스할 예정입니다.

플랫폼	패키지	설치하다	문서
자바스크립트		`npm install adaptivecards-templating`	설명서
닷넷		`dotnet add package AdaptiveCards.Templating`	설명서

JavaScript 예제

아래 JavaScript는 템플릿을 데이터로 채우는 데 사용되는 일반적인 패턴을 보여 줍니다.

var template = new ACData.Template({ 
    // Card Template JSON
});

var card = template.expand({
    $root: {
        // Data Fields
    }
});

// Now you have an AdaptiveCard ready to render!

C# 예제

아래 C#에서는 템플릿을 데이터로 채우는 데 사용되는 일반적인 패턴을 보여 줍니다.

var template = new AdaptiveCards.Templating.AdaptiveCardTemplate(cardJson);
   
var card = template.Expand(new {Key="Value"});

// Now you have an AdaptiveCard ready to render!

템플릿 SDK에 대해 자세히 알아보기

템플릿 서비스

적응형 카드 템플릿 서비스는 누구나 잘 알려진 템플릿 집합을 찾고, 기여하고, 공유할 수 있는 개념 증명 서비스입니다.

일부 데이터를 표시하지만 사용자 지정 적응형 카드를 작성하지 않으려는 경우에 유용합니다.

템플릿을 가져오는 API는 충분히 간단하지만 실제로는 데이터를 분석하고 적합한 템플릿을 찾는 기능을 포함하여 훨씬 더 많은 것을 제공합니다.

HTTP GET https://templates.adaptivecards.io/graph.microsoft.com/Profile.json

모든 템플릿은 GitHub 리포지토리에 저장된 플랫 JSON 파일이므로 누구나 다른 오픈 소스 코드처럼 이 파일에 기여할 수 있습니다.

카드 템플릿 서비스에 대해 자세히 알아보기

다음 단계 및 피드백 보내기

템플릿을 작성하고 데이터에서 프레젠테이션을 분리하면 "앱과 서비스 간의 에코시스템 표준화된 콘텐츠 교환"이라는 사명에 훨씬 더 가까워졌습니다. 이 영역에서 많은 기능을 제공하므로 계속 지켜봐 주시기 바랍니다. GitHub에서 어떻게 작동하는지 알려주세요!

Last updated on 2025-07-03