KO
English
Deutsch
Español
Français
Italiano
Português
Nederlands
Polski
Bahasa Indonesia
Русский
Українська
العربية
עברית
日本語Teams에서 첫 번째 Adaptive Card를 만드는 단계별 가이드
By Mirko Peters · · Updated
블로그에 다시 와 주셔서 감사합니다! 채팅 알림, 채널 메시지, 자동 경고가 끊임없이 울리는 탓에 완전히 압도당하는 느낌을 받은 적이 있다면, 여러분은 확실히…
Automatically translated with AI from the original post. Read the English original
블로그에 다시 오신 것을 환영합니다. 채팅 알림, 채널 메시지, 자동 경고가 끊임없이 울려서 압도당하는 느낌을 받은 적이 있다면, 여러분만 그런 것이 아닙니다. 오늘날의 디지털 업무자는 엄청난 양의 정보를 다루며, 하루에도 수십 건의 알림을 받는 경우가 많습니다. 이렇게 끊임없이 밀려드는 정보는 집중력을 흩트리고, 잦은 업무 전환을 유발하며, 하루가 끝날 무렵에는 정신적으로 지치게 만듭니다. 저희 팟캐스트 에피소드 Build Actionable Teams Notifications with Adaptive Cards에서는 쓸모없고 정적인 알림을 버리고 스마트하고 상호작용이 가능한 메시지로 바꿈으로써 커뮤니케이션 방식을 완전히 바꿀 수 있는 방법을 살펴보았습니다.
오늘은 그 이야기를 이어서 직접 해보는 방식으로 살펴보겠습니다. 이 가이드에서는 Microsoft Teams용 첫 번째 Adaptive Card를 만드는 과정을 단계별로 안내합니다. 내부 승인 절차를 간소화하든, 중요한 장애 알림을 전파하든, 아니면 팀의 일상 업무 흐름을 조금 더 매끄럽게 만들고 싶든, Adaptive Card를 익히는 것은 Microsoft 365 생태계에서 가장 높은 효과를 내는 역량 중 하나입니다. 그럼 바로 시작하여 준비에 무엇이 필요한지 살펴보겠습니다.
기본 이해: 기존 알림이 실패하는 이유
무언가를 만들기 전에, 먼저 우리가 해결하려는 핵심 문제를 이해하는 것이 도움이 됩니다. Microsoft Teams의 대부분의 표준 알림은 무슨 일이 일어났는지는 알려주지만, 그에 대해 바로 응답할 수 있는 방법은 제공하지 않습니다. 새 구매 주문서에 대한 승인이 필요하다는 알림을 받았다고 상상해 보십시오. 일반 텍스트 알림으로는 알림을 읽은 뒤 웹 브라우저를 열고, 별도의 업무용 애플리케이션에 로그인하고, 해당 레코드를 찾아가 마지막으로 "승인"을 클릭해야 합니다.
이처럼 여러 단계를 거치는 과정은 집중을 깨뜨리고 소중한 시간을 잡아먹습니다. 이런 방해가 시간당 60번씩 반복된다고 생각해 보십시오. 생산성은 사라지고 맙니다. Adaptive Card는 애플리케이션 인터페이스를 채팅 창 안으로 직접 가져와 이 문제를 해결합니다. Teams 클라이언트를 떠나지 않고도 데이터를 읽고, 입력 양식을 작성하고, 작업 버튼을 클릭할 수 있습니다. 다만 이런 카드를 성공적으로 구현하려면, 카드를 실제로 구현하는 데 필요한 기반 도구와 사전 요구 사항을 먼저 이해해야 합니다.
사전 요구 사항 및 도구
Adaptive Card를 만드는 데 대규모 소프트웨어 개발 경험이 필요한 것은 아니지만, Microsoft가 제공하는 표준 작성 도구 세트에는 익숙해질 필요가 있습니다. 필요한 유틸리티를 손닿는 곳에 두면 구상 단계부터 배포까지 설계 과정이 원활하게 진행됩니다.
카드 디자이너를 위한 필수 리소스
- Adaptive Card Designer: 요소를 끌어다 놓고, 기기별 미리 보기를 실시간으로 확인하며, 기반 JSON 스키마를 즉시 생성할 수 있는 브라우저 기반 시각적 작업 공간입니다.
- Microsoft Teams UI Kit (Figma): 디자인 가이드라인, 테마, 접근성 표준, 여러 클라이언트 애플리케이션 간의 반응형 크기 조정에 매우 유용합니다.
- 공식 문서 허브: 지원되는 스키마 버전, 카드 작업, Teams에서의 호스트별 렌더링 제약 사항을 확인할 수 있는 확실한 가이드입니다.
- 샘플 템플릿: 승인, 투표, 리치 미디어 알림 같은 일반적인 패턴을 빠르게 시작할 수 있도록 오픈 소스 커뮤니티에서 제공하는 사전 구성된 JSON 템플릿입니다.
디자인 환경을 설정했다면, 이제 카드의 시각적 레이아웃과 데이터 구조를 구성할 준비가 된 것입니다.
Adaptive Card 만들기
Adaptive Card를 만드는 작업은 기본적으로 레이아웃 구성과 JSON 구조를 다루는 일입니다. Adaptive Card는 플랫폼에 종속되지 않은 스키마를 사용하므로, 하나의 카드 정의로 Windows, macOS, iOS, Android, 웹 클라이언트 전반에서 네이티브하게 렌더링할 수 있습니다.
Adaptive Card Designer 사용하기
첫 번째 카드를 만드는 가장 쉬운 방법은 웹 기반 디자이너 도구를 사용하는 것입니다. 다음 간단한 작업 흐름을 따라 해보십시오.
- 웹 브라우저에서 공식 Adaptive Card Designer로 이동합니다.
- 기본 알림이나 입력 양식처럼 든든한 기반이 될 시작 템플릿을 선택합니다.
- TextBlock, FactSet, 이미지, ActionSet 같은 시각 요소를 캔버스로 드래그 앤 드롭합니다.
- 글꼴 크기, 간격, 버튼 제목 같은 속성을 조직의 커뮤니케이션 스타일에 맞게 구성합니다.
- 미리 보기 대상을 "Microsoft Teams"로 전환하여 최종 사용자에게 카드가 어떻게 보일지 확인합니다.
- 코드 보기 패널에서 자동으로 생성된 JSON 코드를 복사합니다.
JSON 구조 기본 이해하기
모든 Adaptive Card는 궁극적으로 구조화된 JSON 페이로드로 구동됩니다. 아래는 기본 인사말과 작업 버튼을 정의하는 간단한 Adaptive Card JSON 스키마 예제입니다:
{
"type": "AdaptiveCard",
"version": "1.4",
"body": [
{
"type": "TextBlock",
"text": "Welcome to your first adaptive card!",
"size": "Medium",
"weight": "Bolder"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Acknowledge"
}
]
}이 스니펫에서 루트 객체는 카드 유형과 스키마 버전을 지정합니다. body 배열은 텍스트 블록과 같은 시각 구성 요소를 담고, actions 배열은 사용자가 백그라운드 워크플로를 트리거할 수 있도록 Action.Submit이나 Action.OpenUrl 같은 상호작용 버튼을 정의합니다.
봇 또는 Graph API로 카드 보내기
JSON 페이로드가 디자이너에서 최종 확정되고 테스트되면, 다음 단계는 해당 카드를 Microsoft Teams 안에서 사용자에게 직접 전달하는 것입니다. 기술 아키텍처에 따라 배포 방법은 여러 가지가 있습니다.
저코드 워크플로 통합에는 Power Automate를 활용할 수 있고, 고급 엔터프라이즈급 전달 방식에는 사용자 지정 봇이나 Microsoft Graph API를 사용할 수 있습니다. 등록된 Azure AD 애플리케이션을 Bot Framework REST API와 함께 사용하면 특정 사용자나 주요 채널에 상호작용형 카드를 자동으로 보낼 수 있습니다.
Bot Framework 메시지 첨부 파일로 Adaptive Card를 감쌀 때의 페이로드 구조 예제는 다음과 같습니다:
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.4",
"body": [
{
"type": "TextBlock",
"text": "New Service Request Pending Review"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Approve"
},
{
"type": "Action.Submit",
"title": "Reject"
}
]
}
}
]
}이 페이로드를 SharePoint 목록에 새 항목이 추가되거나 Power Automate에서 시스템 실행이 실패하는 것 같은 자동 트리거에 연결하면, 수동적인 알림이 능동적으로 의사결정을 유도하는 메시지로 바뀝니다.
카드 테스트 및 디버그
배포 전에는 반드시 철저한 테스트를 거쳐야 합니다. Teams 데스크톱, 모바일 앱, Outlook 이메일 클라이언트처럼 클라이언트마다 고유한 호스트 구성으로 Adaptive Card를 렌더링하기 때문에, 미묘한 레이아웃 오류가 간혹 나타날 수 있습니다.
카드를 디버그할 때는 다음 모범 사례를 염두에 두십시오:
- 스키마 버전 검증: 카드 버전이 현재 Microsoft Teams 클라이언트 아키텍처에서 지원하는 기능과 일치하는지 확인합니다.
- 텍스트 렌더링 확인: 변수 데이터 바인딩이 올바르게 채워지는지, 데이터 필드가 비어 있을 때 빈 공간이 생기지 않는지 확인합니다.
- 여러 기기에서 테스트: 좁은 모바일 화면에서 카드를 미리 보고, 열 레이아웃과 버튼 세트가 어색하게 줄바꿈되지 않고 깔끔하게 쌓이는지 확인합니다.
- 제출 작업 처리: 사용자 상호작용 버튼으로 발생한 JSON 페이로드를 백엔드 서비스가 올바르게 처리하는지 확인합니다.
결론
일상적인 Microsoft Teams 경험을 바꾸는 핵심은 마찰을 줄이고 디지털 소음을 걷어내는 데 있습니다. 정적이고 쓸모없는 알림 대신 동적이고 상호작용하는 Adaptive Card를 사용하면, 여러 분리된 애플리케이션 사이를 끊임없이 오가지 않고도 자신과 팀이 단호하게 행동할 수 있습니다. 오늘 우리는 이러한 카드를 설계하고, 구조화하고, 배포하는 기본 원리를 살펴보았지만, 이것은 여러분이 달성할 수 있는 것의 시작에 불과합니다.
생산성 전략을 더 깊이 알아보고 최신 도구가 디지털 작업 공간을 어떻게 바꿀 수 있는지 알고 싶다면, 관련 팟캐스트 에피소드 Build Actionable Teams Notifications with Adaptive Cards를 꼭 들어 보십시오. 오늘부터 자신만의 사용자 지정 카드를 실험해 보고, 워크플로를 간소화하며, 깊은 집중력을 되찾으십시오!