이 페이지에서는 사용자가 버튼을 클릭하거나 정보를 제출하는 등 Google Chat 앱과 상호작용할 수 있도록 카드 또는 대화상자 메시지에 위젯과 UI 요소를 추가하는 방법을 설명합니다.
카드 빌더로 카드를 디자인하고 미리 봅니다.
카드 빌더 열기기본 요건
버튼 추가
ButtonList 위젯은 버튼 집합을 표시합니다. 버튼은 텍스트나 아이콘을 표시하거나 텍스트와 아이콘을 모두 표시할 수 있습니다. 각 Button는 사용자가 버튼을 클릭할 때 발생하는 OnClick 작업을 지원합니다. 예를 들면 다음과 같습니다.
접근성을 위해 버튼은 대체 텍스트를 지원합니다.
맞춤 함수를 실행하는 버튼 추가
다음은 버튼 두 개가 있는 ButtonList 위젯으로 구성된 카드입니다.
버튼 하나를 누르면 새 탭에서 Google Chat 개발자 문서가 열립니다. 다른 버튼은 goToView()라는 맞춤 함수를 실행하고 viewType="BIRD EYE VIEW" 매개변수를 전달합니다.
맞춤 색상과 비활성화된 버튼이 있는 버튼 추가
"disabled": "true"를 설정하여 사용자가 버튼을 클릭하지 못하도록 할 수 있습니다.
다음은 버튼 두 개가 있는 ButtonList 위젯으로 구성된 카드를 표시합니다. 한 버튼은 Color 필드를 사용하여 버튼의 배경색을 맞춤설정합니다. 다른 버튼은 Disabled 필드로 비활성화되며, 이 경우 사용자가 버튼을 클릭하고 기능을 실행할 수 없습니다.
아이콘이 있는 버튼 추가
다음은 아이콘 Button 위젯이 두 개 있는 ButtonList 위젯으로 구성된 카드를 표시합니다. 한 버튼은 knownIcon 필드를 사용하여 Google Chat에 내장된 이메일 아이콘을 표시합니다. 다른 버튼은 iconUrl 필드를 사용하여 맞춤 아이콘 위젯을 표시합니다.
아이콘과 텍스트가 있는 버튼 추가
다음은 사용자에게 이메일을 보내라는 메시지를 표시하는 ButtonList 위젯으로 구성된 카드를 표시합니다. 첫 번째 버튼은 이메일 아이콘을 표시하고 두 번째 버튼은 텍스트를 표시합니다. 사용자는 아이콘 또는 텍스트 버튼을 클릭하여 sendEmail 함수를 실행할 수 있습니다.
선택 가능한 UI 요소 추가
SelectionInput 위젯은 체크박스, 라디오 버튼, 스위치, 드롭다운 메뉴와 같은 선택 가능한 항목 집합을 제공합니다. 이 위젯을 사용하여 사용자로부터 정의되고 표준화된 데이터를 수집할 수 있습니다. 사용자로부터 정의되지 않은 데이터를 수집하려면 TextInput 위젯을 대신 사용하세요.
SelectionInput 위젯은 사용자가 균일한 데이터를 입력하는 데 도움이 되는 추천과 사용자가 항목을 선택하거나 선택 해제하는 등 선택 입력 필드에 변경사항이 발생할 때 실행되는 Actions 작업인 변경 시 작업을 지원합니다.
채팅 앱은 선택된 항목의 값을 수신하고 처리할 수 있습니다. 양식 입력 작업에 대한 자세한 내용은 양식 데이터 수신을 참고하세요.
이 섹션에서는 SelectionInput 위젯을 사용하는 카드의 예를 제공합니다.
이 예에서는 다양한 유형의 섹션 입력을 사용합니다.
체크박스 추가
다음은 체크박스를 사용하는 SelectionInput 위젯을 사용하여 사용자에게 연락처가 전문적인지, 개인적인지, 아니면 둘 다인지 묻는 대화상자를 표시합니다.
라디오 버튼 추가
다음은 라디오 버튼을 사용하는 SelectionInput 위젯을 사용하여 사용자에게 연락처가 전문적인지 또는 개인적인지 지정하도록 요청하는 대화상자를 표시합니다.
스위치 추가
다음은 스위치를 사용하는 SelectionInput 위젯을 사용하여 사용자에게 연락처가 전문적인 것인지, 개인적인 것인지, 아니면 두 가지 모두인지 묻는 대화상자를 표시합니다.
드롭다운 메뉴 추가
다음은 드롭다운 메뉴를 사용하는 SelectionInput 위젯을 통해 사용자에게 연락처가 업무적인지 또는 개인적인지 지정하도록 요청하는 대화상자를 표시합니다.
다중 선택 메뉴 추가
다음은 사용자에게 다중 선택 메뉴에서 연락처를 선택하도록 요청하는 대화상자를 표시합니다.
다중 선택 메뉴에 데이터 소스 사용
다음 섹션에서는 다중 선택 메뉴를 사용하여 Google Workspace 애플리케이션 또는 외부 데이터 소스와 같은 동적 소스의 데이터를 채우는 방법을 설명합니다.
Google Workspace의 데이터 소스
Google Workspace의 다음 데이터 소스에서 다중 선택 메뉴의 항목을 채울 수 있습니다.
- Google Workspace 사용자: 동일한 Google Workspace 조직 내의 사용자만 채울 수 있습니다.
- Chat 공간: 다중 선택 메뉴에 항목을 입력하는 사용자는 Google Workspace 조직 내에서 자신이 속한 공간만 보고 선택할 수 있습니다.
Google Workspace 데이터 소스를 사용하려면 platformDataSource 필드를 지정합니다. 다른 선택 입력 유형과 달리 SectionItem 객체는 생략합니다. 이러한 선택 항목은 Google Workspace에서 동적으로 제공되기 때문입니다.
다음 코드는 Google Workspace 사용자의 다중 선택 메뉴를 보여줍니다.
사용자를 채우기 위해 선택 입력으로 commonDataSource를 USER로 설정합니다.
JSON
{
"selectionInput": {
"name": "contacts",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 5,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"commonDataSource": "USER"
}
}
}
다음 코드는 Chat 스페이스의 다중 선택 메뉴를 보여줍니다. 공백을 채우기 위해 선택 입력에 hostAppDataSource 필드가 지정됩니다. 또한 다중 선택 메뉴는 defaultToCurrentSpace를 true로 설정하여 현재 공간이 메뉴의 기본 선택이 되도록 합니다.
JSON
{
"selectionInput": {
"name": "spaces",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 3,
"multiSelectMinQueryLength": 1,
"platformDataSource": {
"hostAppDataSource": {
"chatDataSource": {
"spaceDataSource": {
"defaultToCurrentSpace": true
}
}
}
}
}
}
Google Workspace 외부의 데이터 소스
다중 선택 메뉴를 사용하여 서드 파티 또는 외부 데이터 소스의 항목을 채울 수도 있습니다. 예를 들어 다중 선택 메뉴를 사용하여 사용자가 고객 관계 관리 (CRM) 시스템의 영업 리드 목록에서 선택하도록 지원할 수 있습니다.
외부 데이터 소스를 사용하려면 externalDataSource 필드를 사용하여 데이터 소스에서 항목을 반환하는 함수를 지정합니다.
외부 데이터 소스에 대한 요청을 줄이려면 사용자가 메뉴를 입력하기 전에 다중 선택 메뉴에 표시되는 추천 항목을 포함하면 됩니다. 예를 들어 사용자를 위해 최근에 검색한 연락처를 채울 수 있습니다. 외부 데이터 소스에서 추천 항목을 채우려면 SelectionItem 객체를 지정합니다.
다음 코드는 사용자의 외부 연락처 세트에서 항목의 다중 선택 메뉴를 보여줍니다. 메뉴에는 기본적으로 연락처 한 개가 표시되며 getContacts 함수를 실행하여 외부 데이터 소스에서 항목을 검색하고 채웁니다.
JSON
{
"selectionInput": {
"name": "contacts",
"type": "MULTI_SELECT",
"label": "Selected contacts",
"multiSelectMaxSelectedItems": 5,
"multiSelectMinQueryLength": 2,
"externalDataSource": {
"function": "getContacts"
},
"items": [
{
"text": "Contact 3",
"value": "contact-3",
"startIconUri": "https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png",
"bottomText": "Contact three description",
"selected": false
}
]
}
}
외부 데이터 소스의 경우 사용자가 다중 선택 메뉴에 입력하기 시작하는 항목을 자동 완성할 수도 있습니다. 예를 들어 사용자가 미국의 도시를 채우는 메뉴에 Atl를 입력하기 시작하면 채팅 앱은 사용자가 입력을 완료하기 전에 Atlanta를 자동 추천할 수 있습니다. 최대 100개의 항목을 자동 완성할 수 있습니다.
항목을 자동 완성하려면 사용자가 다중 선택 메뉴에 입력할 때마다 외부 데이터 소스를 쿼리하고 항목을 반환하는 함수를 만듭니다. 함수는 다음을 실행해야 합니다.
- 메뉴와의 사용자 상호작용을 나타내는 이벤트 객체를 전달합니다.
- 상호작용 이벤트의
invokedFunction값이externalDataSource필드의 함수와 일치하는지 확인합니다. - 함수가 일치하면 외부 데이터 소스에서 추천 항목을 반환합니다. 사용자가 입력하는 내용을 기반으로 항목을 추천하려면
autocomplete_widget_query키 값을 가져옵니다. 이 값은 사용자가 메뉴에 입력하는 내용을 나타냅니다.
다음 코드는 외부 데이터 리소스에서 항목을 자동 완성합니다. 이전 예를 사용하여 채팅 앱은 getContacts 함수가 트리거된 시점을 기반으로 항목을 제안합니다.
Apps Script
Node.js
사용자가 텍스트를 입력할 수 있는 필드 추가
TextInput 위젯은 사용자가 텍스트를 입력할 수 있는 필드를 제공합니다. 이 위젯은 사용자가 균일한 데이터를 입력하는 데 도움이 되는 추천과 텍스트 입력 필드에 변경사항이 발생할 때 실행되는 Actions인 변경 시 작업(예: 사용자가 텍스트를 추가하거나 삭제하는 등)을 지원합니다.
사용자로부터 추상 데이터나 알 수 없는 데이터를 수집해야 한다면 이 TextInput 위젯을 사용하세요. 정의된 데이터를 사용자로부터 수집하려면 SelectionInput 위젯을 대신 사용하세요.
사용자가 입력한 텍스트를 처리하려면 양식 데이터 수신을 참고하세요.
다음은 TextInput 위젯으로 구성된 카드입니다.
사용자가 날짜 및 시간을 선택하도록 허용하기
DateTimePicker 위젯을 사용하면 사용자는 날짜, 시간 또는 날짜와 시간을 모두 입력할 수 있습니다. 또는 선택 도구를 사용하여 날짜와 시간을 선택할 수 있습니다. 사용자가 잘못된 날짜나 시간을 입력하면 선택 도구에 오류가 표시되어 정보를 올바르게 입력하라는 메시지가 표시됩니다.
사용자가 입력한 날짜 및 시간 값을 처리하려면 양식 데이터 수신을 참고하세요.
다음은 세 가지 유형의 DateTimePicker 위젯으로 구성된 카드를 표시합니다.
문제 해결
Google Chat 앱 또는 카드에서 오류를 반환하면 Chat 인터페이스에 '문제 발생' 또는 '요청을 처리할 수 없습니다'라는 메시지가 표시됩니다. 채팅 UI에는 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생하는 경우가 있습니다. 예를 들어 카드 메시지가 표시되지 않을 수 있습니다.
Chat UI에 오류 메시지가 표시되지 않더라도 채팅 앱에 대한 오류 기록이 사용 설정되어 있을 때 오류를 수정하는 데 도움이 되는 자세한 오류 메시지와 로그 데이터가 제공됩니다. 오류를 확인, 디버깅, 수정하는 데 도움이 필요하면 Google Chat 오류 문제 해결 및 수정하기를 참고하세요.