Cards v2

Card(카드)

카드는 정의된 레이아웃, 버튼과 같은 대화형 UI 요소 및 이미지와 같은 리치 미디어를 지원합니다. 카드를 사용하여 자세한 정보를 표시하고, 사용자로부터 정보를 수집하고, 사용자가 다음 단계로 이동하도록 안내합니다.

Google Chat에서는 카드가 다음과 같은 여러 위치에 표시됩니다.

  • 독립형 메시지로 사용합니다.
  • 문자 메시지 바로 아래에 문자 메시지 추가
  • 대화상자

다음 JSON 예에서는 특성이 포함된 '연락처 카드'를 만듭니다.

  • 연락처 이름, 직책, 아바타 사진이 포함된 헤더입니다.
  • 서식이 지정된 텍스트를 비롯하여 연락처 정보가 포함된 섹션
  • 사용자가 클릭하여 연락처를 공유하거나 정보를 더 많이 또는 적게 볼 수 있는 버튼

연락처 카드의 예

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
          "title": "Sasha",
          "subtitle": "Software Engineer",
          "imageUrl":
          "https://developers.google.com/chat/images/quickstart-app-avatar.png",
          "imageType": "CIRCLE",
          "imageAltText": "Avatar for Sasha",
        },
        "sections": [
          {
            "header": "Contact Info",
            "collapsible": true,
            "uncollapsibleWidgetsCount": 1,
            "widgets": [
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "EMAIL",
                  },
                  "text": "sasha@example.com",
                }
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PERSON",
                  },
                  "text": "<font color=\"#80e27e\">Online</font>",
                },
              },
              {
                "decoratedText": {
                  "startIcon": {
                    "knownIcon": "PHONE",
                  },
                  "text": "+1 (555) 555-1234",
                }
              },
              {
                "buttonList": {
                  "buttons": [
                    {
                      "text": "Share",
                      "onClick": {
                        "openLink": {
                          "url": "https://example.com/share",
                        }
                      }
                    },
                    {
                      "text": "Edit",
                      "onClick": {
                        "action": {
                          "function": "goToView",
                          "parameters": [
                            {
                              "key": "viewType",
                              "value": "EDIT",
                            }
                          ],
                        }
                      }
                    },
                  ],
                }
              },
            ],
          },
        ],
      },
    }
  ],
}
JSON 표현
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  }
}
필드
header

object ( CardHeader )

카드의 헤더입니다. 헤더에는 일반적으로 선행 이미지와 제목이 포함됩니다. 헤더는 항상 카드 상단에 표시됩니다.

sections[]

object ( Section )

위젯 컬렉션을 포함합니다. 각 섹션에는 고유한 선택적 헤더가 있습니다. 섹션은 선 구분선으로 시각적으로 구분됩니다.

cardActions[]

object ( CardAction )

카드의 작업입니다. 작업이 카드 툴바 메뉴에 추가됩니다.

Chat 앱 카드에는 툴바가 없으므로 cardActions[] 는 Chat 앱에서 지원되지 않습니다.

예를 들어 다음 JSON은 설정 및 의견 보내기 옵션을 사용하여 카드 작업 메뉴를 구성합니다.

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

카드 이름입니다. 카드 탐색에서 카드 식별자로 사용됩니다.

채팅 앱은 카드 탐색을 지원하지 않으므로 이 필드는 무시됩니다.

displayStyle

enum ( DisplayStyle )

Google Workspace 부가기능에서 peekCardHeader 의 표시 속성을 설정합니다.

Chat 앱에서는 지원되지 않습니다.

peekCardHeader

object ( CardHeader )

문맥 콘텐츠를 표시할 때 미리보기 카드 헤더는 자리표시자 역할을 하여 사용자가 홈페이지 카드와 문맥 카드 간에 이동할 수 있도록 합니다.

Chat 앱에서는 지원되지 않습니다.

카드 헤더

카드 헤더를 나타냅니다.

JSON 표현
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
필드
title

string

필수 항목입니다. 카드 헤더의 제목입니다. 헤더의 높이는 고정되어 있습니다. 제목과 부제목을 모두 지정하면 각 행은 한 줄씩 표시됩니다. 제목만 지정하면 두 줄이 모두 사용됩니다.

subtitle

string

카드 헤더의 부제목입니다. 지정된 경우 title 아래의 한 줄에 표시됩니다.

imageType

enum ( ImageType )

이미지를 자르는 데 사용되는 도형입니다.

imageUrl

string

카드 헤더에 있는 이미지의 HTTPS URL입니다.

imageAltText

string

접근성을 위해 사용되는 이 이미지의 대체 텍스트입니다.

이미지 유형

이미지를 자르는 데 사용되는 도형입니다.

열거형
SQUARE 기본값 이미지에 정사각형 마스크를 적용합니다. 예를 들어 4x3 이미지는 3x3이 됩니다.
CIRCLE 이미지에 원형 마스크를 적용합니다. 예를 들어 4x3 이미지는 지름이 3인 원형이 됩니다.

섹션

섹션에는 지정된 순서대로 세로로 렌더링되는 위젯 모음이 포함됩니다.

JSON 표현
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer
}
필드
header

string

섹션 상단에 표시되는 텍스트입니다. 간단한 HTML 형식의 텍스트를 지원합니다.

widgets[]

object ( Widget )

섹션의 모든 위젯입니다. 위젯을 1개 이상 포함해야 합니다.

collapsible

boolean

이 섹션을 접을 수 있는지 여부를 나타냅니다.

접을 수 있는 섹션은 일부 또는 모든 위젯을 숨기지만 사용자는 더보기를 클릭하여 섹션을 펼쳐 숨겨진 위젯을 표시할 수 있습니다. 사용자는 간략히 보기를 클릭하여 위젯을 다시 숨길 수 있습니다.

숨겨진 위젯을 확인하려면 uncollapsibleWidgetsCount 를 지정합니다.

uncollapsibleWidgetsCount

integer

섹션을 접을 때도 계속 표시되는 축소 불가능한 위젯의 수입니다.

예를 들어 섹션에 위젯 5개가 포함되어 있고 uncollapsibleWidgetsCount 2 로 설정된 경우 처음 두 위젯은 항상 표시되고 나머지 세 개는 기본적으로 접힙니다. uncollapsibleWidgetsCount collapsible true 인 경우에만 고려됩니다.

위젯

각 카드는 위젯으로 구성됩니다.

위젯은 텍스트, 이미지, 버튼 및 기타 객체 유형 중 하나를 나타내는 복합 객체입니다.

JSON 표현
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  }
  // End of list of possible types for union field data.
}
필드
공용체 필드 data . 위젯에는 다음 중 하나만 사용할 수 있습니다. 여러 위젯 필드를 사용하여 더 많은 항목을 표시할 수 있습니다. data 는 다음 중 하나여야 합니다.
textParagraph

object ( TextParagraph )

텍스트 단락을 표시합니다. 간단한 HTML 형식의 텍스트를 지원합니다.

예를 들어 다음 JSON은 굵게 표시된 텍스트를 만듭니다.

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object ( Image )

이미지를 표시합니다.

예를 들어 다음 JSON은 대체 텍스트로 이미지를 만듭니다.

"image": {
  "imageUrl":
  "https://developers.google.com/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object ( DecoratedText )

장식된 텍스트 항목을 표시합니다.

예를 들어 다음 JSON은 이메일 주소를 표시하는 장식된 텍스트 위젯을 만듭니다.

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object ( ButtonList )

버튼 목록입니다.

예를 들어 다음 JSON은 버튼 두 개를 만듭니다. 첫 번째는 파란색 텍스트 버튼이고 두 번째는 링크를 여는 이미지 버튼입니다.

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
        "alpha": 1
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object ( TextInput )

사용자가 입력할 수 있는 텍스트 상자를 표시합니다.

예를 들어 다음 JSON은 이메일 주소의 텍스트 입력을 만듭니다.

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

또 다른 예로, 다음 JSON은 정적 제안을 사용하여 프로그래밍 언어에 대한 텍스트 입력을 만듭니다.

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object ( SelectionInput )

사용자가 항목을 선택할 수 있는 선택 컨트롤을 표시합니다. 선택 컨트롤은 체크박스, 라디오 버튼, 스위치 또는 드롭다운 메뉴가 될 수 있습니다.

예를 들어 다음 JSON은 사용자가 크기를 선택할 수 있는 드롭다운 메뉴를 만듭니다.

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object ( DateTimePicker )

날짜, 시간 또는 날짜 및 시간에 대한 선택/입력 위젯을 표시합니다.

Chat 앱에서는 지원되지 않습니다. Chat 앱의 지원이 곧 제공될 예정입니다.

예를 들어 다음 JSON은 약속 일정을 예약하는 날짜/시간 선택 도구를 만듭니다.

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": "796435200000"
}
divider

object ( Divider )

위젯 사이에 가로 줄 구분선을 표시합니다.

예를 들어 다음 JSON은 구분선을 만듭니다.

"divider": {
}
grid

object ( Grid )

항목 컬렉션이 있는 그리드를 표시합니다.

그리드는 모든 열과 항목을 지원합니다. 행 수는 개수의 상한값을 열 수로 나눈 값에 따라 결정됩니다. 항목이 10개이고 열이 2개인 그리드에는 행이 5개 있습니다. 항목 11개와 열 2개가 있는 그리드에는 행이 6개 있습니다.

예를 들어 다음 JSON은 단일 항목으로 2열 그리드를 만듭니다.

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}

텍스트 단락

서식을 지원하는 텍스트 단락 자세한 내용은 텍스트 형식을 참조하세요.

JSON 표현
{
  "text": string
}
필드
text

string

위젯에 표시되는 텍스트입니다.

이미지

URL로 지정되고 onClick 작업을 포함할 수 있는 이미지입니다.

JSON 표현
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
필드
imageUrl

string

이미지를 호스팅하는 https URL입니다.

예를 들면 다음과 같습니다.

https://developers.google.com/chat/images/quickstart-app-avatar.png
onClick

object ( OnClick )

사용자가 이미지를 클릭하면 이 작업이 트리거됩니다.

altText

string

접근성을 위해 사용되는 이 이미지의 대체 텍스트입니다.

클릭 시

사용자가 카드에서 버튼과 같은 상호작용 요소를 클릭할 때 응답하는 방법을 나타냅니다.

JSON 표현
{

  // Union field data can be only one of the following:
  "action": {
    object (Action)
  },
  "openLink": {
    object (OpenLink)
  },
  "openDynamicLinkAction": {
    object (Action)
  },
  "card": {
    object (Card)
  }
  // End of list of possible types for union field data.
}
필드

공용체 필드 data .

data 는 다음 중 하나여야 합니다.

action

object ( Action )

지정하면 작업이 이 onClick 에 의해 트리거됩니다.

card

object ( Card )

지정된 경우 카드 카드를 클릭하면 새 카드가 카드 스택으로 푸시됩니다.

Google Workspace 부가기능에서는 지원되지만 Chat 앱에서는 지원되지 않습니다.

작업

양식 제출 시의 동작을 설명하는 작업입니다. 예를 들어 Apps Script를 호출하여 양식을 처리할 수 있습니다. 작업이 트리거되면 양식 값이 서버로 전송됩니다.

JSON 표현
{
  "function": string,
  "parameters": [
    {
      object (ActionParameter)
    }
  ],
  "loadIndicator": enum (LoadIndicator),
  "persistValues": boolean,
  "interaction": enum (Interaction)
}
필드
function

string

포함하는 요소가 클릭되거나 부정확하게 활성화된 경우 호출할 맞춤 함수입니다.

사용 예는 대화형 카드 만들기를 참조하세요.

parameters[]

object ( ActionParameter )

작업 매개변수 목록입니다.

loadIndicator

enum ( LoadIndicator )

작업을 호출하는 동안 작업에 표시되는 로드 표시기를 지정합니다.

persistValues

boolean

작업 후 양식 값이 유지되는지 여부를 나타냅니다. 기본값은 false 입니다.

true 인 경우 작업이 트리거된 후에도 양식 값이 유지됩니다. 작업이 처리되는 동안 사용자가 변경할 수 있도록 하려면 LoadIndicator NONE 로 설정합니다. 채팅 앱의 카드 메시지의 경우 작업의 ResponseType UPDATE_MESSAGE 로 설정하고 작업이 포함된 카드에서 cardId 를 동일하게 사용해야 합니다.

false 인 경우 작업이 트리거될 때 양식 값이 삭제됩니다. 작업이 처리되는 동안 사용자가 변경하지 못하도록 하려면 LoadIndicator SPINNER 로 설정합니다.

interaction

enum ( Interaction )

선택사항. 대화상자를 열 때 필요합니다.

사용자와의 상호작용에 따른 조치(예: 사용자가 카드 메시지의 버튼을 클릭하는 경우)

지정하지 않으면 앱은 정상적으로 링크 열기 또는 함수 실행과 같은 action 를 실행하여 응답합니다.

interaction 를 지정하면 앱이 특별한 대화형 방식으로 응답할 수 있습니다. 예를 들어 interaction OPEN_DIALOG 로 설정하면 앱이 대화상자를 열 수 있습니다.

지정된 경우 로드 표시기는 표시되지 않습니다.

Chat 앱에서는 지원되지만 Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.

작업 매개변수

작업 메서드가 호출될 때 제공할 문자열 매개변수의 목록입니다. 예를 들어 다시 알림 버튼 3개(지금 일시중지, 1일 일시중지, 다음 주 다시 알림)를 사용하는 것이 좋습니다. 문자열 매개변수 목록에 다시 알림 유형 및 다시 알림 시간을 전달하여 작업 메서드 = pause()를 사용할 수 있습니다.

자세한 내용은 CommonEventObject를 참조하세요.

JSON 표현
{
  "key": string,
  "value": string
}
필드
key

string

액션 스크립트에 해당하는 매개변수의 이름입니다.

value

string

매개변수 값입니다.

부하 표시기

작업을 호출하는 동안 작업에 표시되는 로드 표시기를 지정합니다.

열거형
SPINNER 콘텐츠가 로드 중임을 나타내는 스피너를 표시합니다.
NONE 아무것도 표시되지 않습니다.

상호작용

선택사항. 대화상자를 열 때 필요합니다.

사용자와의 상호작용에 따른 조치(예: 사용자가 카드 메시지의 버튼을 클릭하는 경우)

지정하지 않으면 앱은 정상적으로 링크 열기 또는 함수 실행과 같은 action 를 실행하여 응답합니다.

interaction 를 지정하면 앱이 특별한 대화형 방식으로 응답할 수 있습니다. 예를 들어 interaction OPEN_DIALOG 로 설정하면 앱이 대화상자를 열 수 있습니다.

지정된 경우 로드 표시기는 표시되지 않습니다.

Chat 앱에서는 지원되지만 Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.

열거형
INTERACTION_UNSPECIFIED 기본값 action 는 정상적으로 실행됩니다.
OPEN_DIALOG

채팅 앱이 사용자와 상호작용하는 데 사용하는 창 형식의 카드 기반 인터페이스인 대화상자를 엽니다.

카드 메시지의 버튼 클릭에 응답하여 채팅 앱에서만 지원됩니다.

Google Workspace 부가기능에서는 지원되지 않습니다. 부가기능에 지정하는 경우 전체 카드가 삭제되고 클라이언트에 아무것도 표시되지 않습니다.

OpenAs

OnClick에서 링크를 열면 클라이언트는 링크를 전체 크기 창 (클라이언트에서 사용하는 프레임인 경우) 또는 오버레이 (예: 팝업)로 열 수 있습니다. 구현은 클라이언트 플랫폼 기능에 따라 달라지며, 클라이언트가 이 값을 지원하지 않으면 선택한 값이 무시될 수 있습니다. FULL_SIZE 는 모든 클라이언트에서 지원됩니다.

Google Workspace 부가기능에서는 지원되지만 Chat 앱에서는 지원되지 않습니다.

열거형
FULL_SIZE 링크는 전체 크기 창으로 열립니다 (클라이언트에서 사용하는 프레임인 경우).
OVERLAY 링크가 팝업 등의 오버레이로 열립니다.

닫기

OnClick 작업으로 열린 링크가 닫히면 클라이언트가 실행하는 작업

구현은 클라이언트 플랫폼 기능에 따라 다릅니다. 예를 들어 웹브라우저에서 OnClose 핸들러가 있는 링크를 팝업 창에서 열 수도 있습니다.

OnOpen OnClose 핸들러가 모두 설정되어 있고 클라이언트 플랫폼이 두 값을 모두 지원할 수 없는 경우 OnClose 이 우선 적용됩니다.

Google Workspace 부가기능에서는 지원되지만 Chat 앱에서는 지원되지 않습니다.

열거형
NOTHING 기본값 카드가 새로고침되지 않고 아무 일도 일어나지 않습니다.
RELOAD

하위 창이 닫힌 후 카드를 새로고침합니다.

OpenAs.OVERLAY와 함께 사용하면 하위 창이 모달 대화상자 역할을 하며 하위 창이 닫힐 때까지 상위 카드가 차단됩니다.

장식 텍스트

텍스트 위 또는 아래에 있는 라벨, 텍스트 앞에 있는 아이콘, 선택 위젯, 텍스트 뒤의 버튼과 같은 선택적인 장식이 있는 텍스트를 표시하는 위젯입니다.

JSON 표현
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "topLabel": string,
  "text": string,
  "wrapText": boolean,
  "bottomLabel": string,
  "onClick": {
    object (OnClick)
  },

  // Union field control can be only one of the following:
  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
  // End of list of possible types for union field control.
}
필드
icon
(deprecated)

object ( Icon )

지원 중단되었으며 startIcon 로 대체했습니다.

startIcon

object ( Icon )

텍스트 앞에 표시되는 아이콘입니다.

topLabel

string

text 위에 표시되는 텍스트입니다. 항상 자릅니다.

text

string

필수 항목입니다. 기본 텍스트입니다.

간단한 형식 지원 형식 지정에 대한 자세한 내용은 텍스트 형식 지정을 참조하세요.

wrapText

boolean

줄바꿈 설정 true 인 경우 텍스트가 여러 줄로 줄바꿈되고 표시됩니다. 그렇지 않으면 텍스트가 잘립니다.

text topLabel 에만 적용되고 bottomLabel 에는 적용되지 않습니다.

bottomLabel

string

text 아래에 표시되는 텍스트입니다. 항상 자릅니다.

onClick

object ( OnClick )

사용자가 topLabel 또는 bottomLabel 를 클릭하면 이 작업이 트리거됩니다.

공용체 필드 control . decoratedText 위젯에서 텍스트 오른쪽에 표시되는 버튼, 스위치, 체크박스 또는 이미지 control 는 다음 중 하나여야 합니다.
button

object ( Button )

클릭하여 작업을 트리거할 수 있는 버튼입니다.

switchControl

object ( SwitchControl )

스위치 위젯을 클릭하여 상태를 변경하고 작업을 트리거할 수 있습니다.

endIcon

object ( Icon )

텍스트 뒤에 표시되는 아이콘입니다.

내장커스텀 아이콘을 지원합니다.

아이콘

카드의 위젯에 표시되는 아이콘

내장커스텀 아이콘을 지원합니다.

JSON 표현
{
  "altText": string,
  "imageType": enum (ImageType),

  // Union field icons can be only one of the following:
  "knownIcon": string,
  "iconUrl": string
  // End of list of possible types for union field icons.
}
필드
altText

string

선택사항. 접근성에 사용되는 아이콘에 관한 설명입니다. 지정하지 않으면 기본값 'Button'이 제공됩니다. 아이콘에 표시되는 내용과 아이콘의 기능에 관한 유용한 설명을 설정하는 것이 좋습니다. 예를 들면 다음과 같습니다. A user's account portrait 또는 Opens a new browser tab and navigates to the Google Chat developer documentation at https://developers.google.com/chat

아이콘이 Button 에 설정된 경우 사용자가 버튼 위로 마우스를 가져가면 altText 가 도우미 텍스트로 표시됩니다. 그러나 버튼에 text 도 설정되어 있으면 아이콘의 altText 이 무시됩니다.

imageType

enum ( ImageType )

이미지에 적용되는 자르기 스타일입니다. 경우에 따라 CIRCLE 자르기를 적용하면 이미지가 기본 제공 아이콘보다 더 크게 그려집니다.

공용체 필드 icons . 카드의 위젯에 표시되는 아이콘입니다. icons 는 다음 중 하나여야 합니다.
knownIcon

string

Google Workspace에서 제공하는 기본 제공 아이콘 중 하나를 표시합니다.

예를 들어 비행기 아이콘을 표시하려면 AIRPLANE 를 지정합니다. 버스의 경우 BUS 를 지정합니다.

지원되는 아이콘의 전체 목록은 기본 제공 아이콘을 참고하세요.

iconUrl

string

HTTPS URL에서 호스팅되는 맞춤 아이콘을 표시합니다.

예를 들면 다음과 같습니다.

"iconUrl":
"https://developers.google.com/chat/images/quickstart-app-avatar.png"

지원되는 파일 형식에는 .png .jpg 이 포함됩니다.

버튼

사용자가 클릭할 수 있는 텍스트, 아이콘 또는 텍스트 + 아이콘 버튼

이미지를 클릭 가능한 버튼으로 만들려면 ImageComponent 가 아닌 Image 를 지정하고 onClick 작업을 설정합니다.

현재 Chat 앱 (대화상자카드 메시지 포함) 및 Google Workspace 부가기능에서 지원됩니다.

JSON 표현
{
  "text": string,
  "icon": {
    object (Icon)
  },
  "color": {
    object (Color)
  },
  "onClick": {
    object (OnClick)
  },
  "disabled": boolean,
  "altText": string
}
필드
text

string

버튼 안에 표시되는 텍스트입니다.

icon

object ( Icon )

아이콘 이미지입니다. icon text 가 모두 설정된 경우 아이콘이 텍스트 앞에 표시됩니다.

color

object ( Color )

설정하면 버튼이 단색 배경으로 채워지고 배경 색상과 대비를 유지하기 위해 글꼴 색상이 변경됩니다. 예를 들어 파란색 배경을 설정하면 흰색 텍스트가 될 수 있습니다.

설정되지 않은 경우 이미지 배경이 흰색이고 글꼴 색상은 파란색입니다.

빨간색, 녹색, 파란색의 경우 각 필드의 값은 float 숫자입니다. 두 값은 0과 255를 255 (153/255)로 나눈 값 또는 0과 1 (0.6) 사이의 값 중 하나로 표현할 수 있습니다. 0은 색상이 없음을 나타내며 1 또는 255/255는 RGB 눈금에서 해당 색상의 전체 존재를 나타냅니다.

원하는 경우 알파를 설정합니다. 이 방정식을 사용하여 투명도 수준을 설정합니다.

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

알파의 경우 값 1은 단색에 상응하고 값 0은 완전한 투명한 색상에 해당합니다.

예를 들어 다음 색상은 투명한 투명한 빨간색을 나타냅니다.

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
   "alpha": 0.5
}
onClick

object ( OnClick )

필수 항목입니다. 버튼을 클릭할 때 실행할 작업입니다(예: 하이퍼링크 열기 또는 맞춤 함수 실행).

disabled

boolean

true 인 경우 버튼은 비활성 상태로 표시되고 사용자 작업에 응답하지 않습니다.

altText

string

접근성에 사용되는 대체 텍스트입니다.

사용자가 버튼의 기능을 알 수 있도록 설명 텍스트를 설정합니다. 예를 들어 버튼이 하이퍼링크를 여는 경우 '새 브라우저 탭을 열고 Google Chat 개발자 문서(https://developers.google.com/chat)로 이동합니다.'와 같이 쓸 수 있습니다.

색상

RGBA 색상 공간의 색상을 나타냅니다. 이 표현은 간결성에 비해 다양한 언어로 된 색상 표현 간의 변환을 단순화하기 위해 설계되었습니다. 예를 들어 이 표현의 필드는 자바에서 java.awt.Color 의 생성자에 쉽게 제공될 수 있고 iOS에서 UIColor의 +colorWithRed:green:blue:alpha 메서드에도 간단하게 제공될 수 있으며, 조금만 작업하면 자바스크립트에서 CSS rgba() 문자열로 쉽게 형식을 지정할 수 있습니다.

이 참조 페이지에는 RGB 값을 해석하는 데 사용해야 하는 절대 색상 공간에 대한 정보는 포함되지 않습니다 (예: sRGB, Adobe RGB, DCI-P3, BT.2020 등). 기본적으로 애플리케이션은 sRGB 색상 공간을 가정해야 합니다.

색상 동등성을 결정해야 하는 경우 구현은 달리 문서화되지 않는 한 두 색상을 빨간색, 녹색, 파란색, 알파 값이 각각 최대 1e~5만큼 차이가 나는 대로 동일하게 취급합니다.

예시(자바):

 import com.google.type.Color;

 // ...
 public static java.awt.Color fromProto(Color protocolor) {
   float alpha = protocolor.hasAlpha()
       ? protocolor.getAlpha().getValue()
       : 1.0;

   return new java.awt.Color(
       protocolor.getRed(),
       protocolor.getGreen(),
       protocolor.getBlue(),
       alpha);
 }

 public static Color toProto(java.awt.Color color) {
   float red = (float) color.getRed();
   float green = (float) color.getGreen();
   float blue = (float) color.getBlue();
   float denominator = 255.0;
   Color.Builder resultBuilder =
       Color
           .newBuilder()
           .setRed(red / denominator)
           .setGreen(green / denominator)
           .setBlue(blue / denominator);
   int alpha = color.getAlpha();
   if (alpha != 255) {
     result.setAlpha(
         FloatValue
             .newBuilder()
             .setValue(((float) alpha) / denominator)
             .build());
   }
   return resultBuilder.build();
 }
 // ...

예시(iOS / obj-C):

 // ...
 static UIColor* fromProto(Color* protocolor) {
    float red = [protocolor red];
    float green = [protocolor green];
    float blue = [protocolor blue];
    FloatValue* alpha_wrapper = [protocolor alpha];
    float alpha = 1.0;
    if (alpha_wrapper != nil) {
      alpha = [alpha_wrapper value];
    }
    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
 }

 static Color* toProto(UIColor* color) {
     CGFloat red, green, blue, alpha;
     if (![color getRed:&red green:&green blue:&blue alpha:&alpha]) {
       return nil;
     }
     Color* result = [[Color alloc] init];
     [result setRed:red];
     [result setGreen:green];
     [result setBlue:blue];
     if (alpha <= 0.9999) {
       [result setAlpha:floatWrapperWithValue(alpha)];
     }
     [result autorelease];
     return result;
}
// ...

예시(자바스크립트):

// ...

var protoToCssColor = function(rgb_color) {
   var redFrac = rgb_color.red || 0.0;
   var greenFrac = rgb_color.green || 0.0;
   var blueFrac = rgb_color.blue || 0.0;
   var red = Math.floor(redFrac * 255);
   var green = Math.floor(greenFrac * 255);
   var blue = Math.floor(blueFrac * 255);

   if (!('alpha' in rgb_color)) {
      return rgbToCssColor(red, green, blue);
   }

   var alphaFrac = rgb_color.alpha.value || 0.0;
   var rgbParams = [red, green, blue].join(',');
   return ['rgba(', rgbParams, ',', alphaFrac, ')'].join('');
};

var rgbToCssColor = function(red, green, blue) {
  var rgbNumber = new Number((red << 16) | (green << 8) | blue);
  var hexString = rgbNumber.toString(16);
  var missingZeros = 6 - hexString.length;
  var resultBuilder = ['#'];
  for (var i = 0; i < missingZeros; i++) {
     resultBuilder.push('0');
  }
  resultBuilder.push(hexString);
  return resultBuilder.join('');
};

// ...
JSON 표현
{
  "red": number,
  "green": number,
  "blue": number,
  "alpha": number
}
필드
red

number

[0, 1] 간격의 값으로 표시되는 색상의 빨간색 양입니다.

green

number

[0, 1] 간격의 값으로 표시되는 색상의 녹색 양입니다.

blue

number

[0, 1] 간격의 값으로 표시되는 색상의 파란색 양입니다.

alpha

number

픽셀에 적용해야 하는 이 색상의 비율입니다. 즉, 최종 픽셀 색상은 등식으로 정의됩니다.

pixel color = alpha * (this color) + (1.0 - alpha) * (background color)

즉, 1.0 값은 단색에 해당하는 반면 0.0 값은 완전히 투명한 색상에 해당합니다. 이 옵션은 단순한 부동 소수점 스칼라 대신 래퍼 메시지를 사용하므로 기본값과 설정되지 않은 값을 구분할 수 있습니다. 생략하면 이 색상 객체는 단색으로 렌더링됩니다 (알파 값이 1.0에 명시적으로 지정된 것처럼).

SwitchControl

전환 스위치 또는 decoratedText 위젯 내의 체크박스.

decoratedText 위젯에서만 지원됩니다.

JSON 표현
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
필드
name

string

양식 입력 이벤트에서 스위치 위젯이 식별되는 이름입니다.

양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

value

string

사용자가 입력한 값으로, 양식 입력 이벤트의 일부로 반환됩니다.

양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

selected

boolean

true 인 경우 스위치가 선택됩니다.

onChangeAction

object ( Action )

실행할 함수가 있는 것처럼 전환 상태가 변경될 때 실행할 작업입니다.

controlType

enum ( ControlType )

사용자 인터페이스에 스위치가 표시되는 방식입니다.

컨트롤 유형

사용자 인터페이스에 스위치가 표시되는 방식입니다.

열거형
SWITCH 전환 스타일 스위치.
CHECKBOX 지원 중단되었으며 CHECK_BOX 로 대체했습니다.
CHECK_BOX 체크박스.

버튼 목록

가로로 배치된 버튼 목록입니다.

JSON 표현
{
  "buttons": [
    {
      object (Button)
    }
  ]
}
필드
buttons[]

object ( Button )

버튼 배열입니다.

TextInput

사용자가 텍스트를 입력할 수 있는 필드입니다. 추천 및 변경 시 작업을 지원합니다.

채팅 앱은 양식 입력 이벤트 중에 입력된 텍스트의 값을 수신하고 처리할 수 있습니다. 양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

사용자로부터 추상 데이터를 수집해야 하는 경우 텍스트 입력을 사용하세요. 사용자로부터 정의된 데이터를 수집하려면 선택 입력 위젯을 대신 사용하세요.

JSON 표현
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  }
}
필드
name

string

양식 입력 이벤트에서 텍스트 입력이 식별되는 이름입니다.

양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

label

string

사용자 인터페이스의 텍스트 입력란 위에 표시되는 텍스트입니다.

사용자가 앱에 필요한 정보를 입력하는 데 도움이 되는 텍스트를 지정합니다. 예를 들어 이름을 물어보면서 구체적으로 성이 필요한 경우 'name' 대신 'surname'을 입력합니다.

hintText 이 지정되지 않은 경우 필요합니다. 그렇지 않으면 선택사항입니다.

hintText

string

사용자에게 특정 값을 입력하라는 메시지를 표시하여 사용자를 지원하기 위한 텍스트 입력란 아래에 표시되는 텍스트입니다. 이 텍스트는 항상 표시됩니다.

label 이 지정되지 않은 경우 필요합니다. 그렇지 않으면 선택사항입니다.

value

string

사용자가 입력한 값으로, 양식 입력 이벤트의 일부로 반환됩니다.

양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

type

enum ( Type )

사용자 인터페이스에 텍스트 입력란이 표시되는 방식입니다. 예를 들면 필드가 한 줄인지 여러 줄인지 나타냅니다.

onChangeAction

object ( Action )

텍스트 입력란에서 변경이 발생한 경우 취해야 할 조치

변경 예시로는 사용자가 필드에 추가하거나 텍스트를 삭제하는 경우가 있습니다.

실행할 작업의 예로는 맞춤 함수를 실행하거나 Google Chat에서 대화상자를 여는 작업이 있습니다.

initialSuggestions

object ( Suggestions )

사용자가 입력할 수 있는 권장 값입니다. 이 값은 사용자가 텍스트 입력란 내부를 클릭할 때 표시됩니다. 사용자가 값을 입력할 때 추천 값은 사용자가 입력한 내용과 일치하도록 동적으로 필터링됩니다.

예를 들어 프로그래밍 언어의 텍스트 입력란에 자바, 자바스크립트, Python 및 C++를 제안할 수 있습니다. 사용자가 'Jav'를 입력하기 시작하면 자바와 자바스크립트만 표시되도록 추천 필터 목록이 표시됩니다.

추천 값은 사용자가 앱에서 이해할 수 있는 값을 입력하는 데 도움이 됩니다. 자바스크립트를 언급할 때 일부 사용자는 'javascript'를 입력하고 다른 사용자는 '자바스크립트'를 입력할 수 있습니다. '자바스크립트'를 사용하면 사용자가 앱과 상호작용하는 방식을 표준화할 수 있습니다.

지정된 경우 TextInput.type MULTIPLE_LINE 로 설정되어 있어도 항상 SINGLE_LINE 입니다.

autoCompleteAction

object ( Action )

선택사항. 텍스트 입력란이 입력란과 상호작용하는 사용자에게 제안을 제공할 때 실행할 작업을 지정합니다.

지정하지 않으면 initialSuggestions 에서 추천을 설정하고 클라이언트에서 처리합니다.

지정하면 앱이 여기에 지정된 작업(예: 맞춤 함수 실행)을 실행합니다.

Google Workspace 부가기능에서는 지원되지만 Chat 앱에서는 지원되지 않습니다. Chat 앱에서도 곧 지원될 예정입니다.

유형

사용자 인터페이스에 텍스트 입력란이 표시되는 방식입니다. 예를 들어 입력란이 한 줄인지, 여러 줄인지 확인합니다.

initialSuggestions 이 지정되면 type MULTIPLE_LINE 로 설정되더라도 항상 SINGLE_LINE 입니다.

열거형
SINGLE_LINE 텍스트 입력란의 높이가 한 줄로 고정되어 있습니다.
MULTIPLE_LINE 텍스트 입력란에 여러 줄의 높이가 고정되어 있습니다.

추천

사용자가 입력할 수 있는 권장 값입니다. 이 값은 사용자가 텍스트 입력란 내부를 클릭할 때 표시됩니다. 사용자가 값을 입력할 때 추천 값은 사용자가 입력한 내용과 일치하도록 동적으로 필터링됩니다.

예를 들어 프로그래밍 언어의 텍스트 입력란에 자바, 자바스크립트, Python 및 C++를 제안할 수 있습니다. 사용자가 'Jav'를 입력하기 시작하면 자바와 자바스크립트만 표시되도록 추천 필터 목록이 표시됩니다.

추천 값은 사용자가 앱에서 이해할 수 있는 값을 입력하는 데 도움이 됩니다. 자바스크립트를 언급할 때 일부 사용자는 'javascript'를 입력하고 다른 사용자는 '자바스크립트'를 입력할 수 있습니다. '자바스크립트'를 사용하면 사용자가 앱과 상호작용하는 방식을 표준화할 수 있습니다.

지정된 경우 TextInput.type MULTIPLE_LINE 로 설정되어 있어도 항상 SINGLE_LINE 입니다.

JSON 표현
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
필드
items[]

object ( SuggestionItem )

텍스트 입력란의 자동 완성 추천에 사용되는 제안 목록입니다.

추천 항목

사용자가 텍스트 입력란에 입력할 수 있는 한 가지 추천 값입니다.

JSON 표현
{

  // Union field content can be only one of the following:
  "text": string
  // End of list of possible types for union field content.
}
필드

공용체 필드 content .

content 는 다음 중 하나여야 합니다.

text

string

텍스트 입력란에 대한 추천 입력 값입니다. 사용자가 직접 입력하는 것과 같습니다.

선택 입력

사용자가 선택할 수 있는 옵션이 있는 UI 항목을 만드는 위젯 예: 드롭다운 메뉴 또는 확인 목록

채팅 앱은 양식 입력 이벤트 중에 입력된 텍스트의 값을 수신하고 처리할 수 있습니다. 양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

설정한 옵션과 일치하는 사용자로부터 데이터를 수집해야 하는 경우 선택 입력을 사용합니다. 사용자로부터 추상 데이터를 수집하려면 텍스트 입력 위젯을 대신 사용하세요.

JSON 표현
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  }
}
필드
name

string

양식 입력 이벤트에서 선택 입력이 식별되는 이름입니다.

양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

label

string

사용자 인터페이스의 선택 입력란 위에 표시되는 텍스트입니다.

사용자가 앱에 필요한 정보를 입력하는 데 도움이 되는 텍스트를 지정합니다. 예를 들어 사용자가 드롭다운 메뉴에서 작업 티켓의 긴급도를 선택하는 경우 라벨은 '긴급' 또는 '긴급 선택'일 수 있습니다.

type

enum ( SelectionType )

옵션이 사용자에게 표시되는 방식입니다. 옵션마다 지원하는 상호작용 유형이 다릅니다. 예를 들어 사용자는 여러 체크박스를 사용 설정할 수 있지만 드롭다운 메뉴에서 하나의 값만 선택할 수 있습니다.

각 선택 입력은 한 가지 유형의 선택을 지원합니다. 예를 들어 체크박스와 스위치를 함께 사용하는 것은 지원되지 않습니다.

items[]

object ( SelectionItem )

선택한 항목의 배열입니다. 예: 선택한 모든 체크박스

onChangeAction

object ( Action )

지정된 경우 선택이 변경될 때 양식이 제출됩니다. 지정하지 않으면 양식을 제출하는 별도의 버튼을 지정해야 합니다.

양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

선택 유형

옵션이 사용자에게 표시되는 방식입니다. 옵션마다 지원하는 상호작용 유형이 다릅니다. 예를 들어 사용자는 여러 체크박스를 사용 설정할 수 있지만 드롭다운 메뉴에서 하나의 값만 선택할 수 있습니다.

각 선택 입력은 한 가지 유형의 선택을 지원합니다. 예를 들어 체크박스와 스위치를 함께 사용하는 것은 지원되지 않습니다.

열거형
CHECK_BOX 체크박스 세트 사용자는 선택 항목당 여러 개의 체크박스를 선택할 수 있습니다.
RADIO_BUTTON 라디오 버튼 모음 사용자는 선택 입력당 하나의 라디오 버튼을 선택할 수 있습니다.
SWITCH 스위치 세트 사용자는 선택 항목당 한 번에 여러 스위치를 사용 설정할 수 있습니다.
DROPDOWN 드롭다운 메뉴 사용자는 선택 항목당 하나의 드롭다운 메뉴 항목을 선택할 수 있습니다.

선택 항목

선택 입력에 있는 선택 가능한 항목입니다(예: 체크박스 또는 스위치).

JSON 표현
{
  "text": string,
  "value": string,
  "selected": boolean
}
필드
text

string

사용자에게 표시되는 텍스트입니다.

value

string

이 항목과 연결된 값입니다. 클라이언트는 이 값을 양식 입력 값으로 사용해야 합니다.

양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

selected

boolean

true 인 경우 항목이 두 개 이상 선택됩니다. 라디오 버튼과 드롭다운 메뉴에 항목이 2개 이상 선택된 경우 첫 번째로 선택한 항목이 수신되고 그 이후의 항목은 무시됩니다.

날짜/시간 선택 도구

사용자가 날짜, 시간 또는 날짜와 시간을 모두 지정할 수 있습니다.

사용자의 텍스트 입력이 허용되지만 사용자가 올바른 형식의 날짜와 시간을 입력하는 데 도움이 되는 대화형 날짜 및 시간 선택기가 제공됩니다. 사용자가 날짜 또는 시간을 잘못 입력하면 위젯에 올바른 형식을 입력하라는 오류 메시지가 표시됩니다.

Chat 앱에서는 지원되지 않습니다. Chat 앱에서도 곧 지원될 예정입니다.

JSON 표현
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  }
}
필드
name

string

양식 입력 이벤트에서 날짜/시간 선택 도구가 식별되는 이름입니다.

양식 입력 작업에 관한 자세한 내용은 양식 데이터 수신을 참고하세요.

label

string

사용자에게 날짜, 시간 또는 날짜/시간을 입력하라는 메시지를 표시하는 텍스트입니다.

사용자가 앱에 필요한 정보를 입력하는 데 도움이 되는 텍스트를 지정합니다. 예를 들어 사용자가 약속을 설정하는 경우 '약속 날짜' 또는 '약속 날짜 및 시간'과 같은 라벨이 적합합니다.

type

enum ( DateTimePickerType )

날짜/시간 선택 도구에서 지원하는 날짜 및 시간 유형

valueMsEpoch

string ( int64 format)

사용자 입력 또는 이전 사용자 입력 이전의 기본값으로 표시되는 값으로, 밀리초(에포크 시간)로 표시됩니다.

DATE_AND_TIME 유형의 경우 전체 에포크 값이 사용됩니다.

DATE_ONLY 유형의 경우 에포크 시간 날짜만 사용됩니다.

TIME_ONLY 유형의 경우 에포크 시간만 사용됩니다. 예를 들어 오전 3시를 나타내려면 에포크 시간을 3 * 60 * 60 * 1000 로 설정합니다.

timezoneOffsetDate

integer

UTC 기준의 시간대 오프셋을 나타내는 숫자입니다. 설정된 경우 valueMsEpoch 은 지정된 시간대로 표시됩니다. 설정하지 않으면 클라이언트 측의 사용자 시간대 설정을 사용합니다.

onChangeAction

object ( Action )

사용자가 날짜/시간 선택 도구에서 저장 또는 삭제를 클릭하면 트리거됩니다.

DateTimePickerType

날짜/시간 선택 도구에서 지원하는 날짜 및 시간 유형

열거형
DATE_AND_TIME 사용자가 날짜와 시간을 선택할 수 있습니다.
DATE_ONLY 사용자는 날짜만 선택할 수 있습니다.
TIME_ONLY 사용자는 시간만 선택할 수 있습니다.

구분선

위젯, 가로선 사이에 구분선을 표시합니다.

예를 들어 다음 JSON은 구분선을 만듭니다.

"divider": {}

그리드

항목 컬렉션이 있는 그리드를 표시합니다.

그리드는 모든 열과 항목을 지원합니다. 행 수는 열을 기준으로 나눈 값입니다. 항목이 10개이고 열이 2개인 그리드에는 행이 5개 있습니다. 항목 11개와 열 2개가 있는 그리드에는 행이 6개 있습니다.

예를 들어 다음 JSON은 단일 항목으로 2열 그리드를 만듭니다.

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
JSON 표현
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
필드
title

string

그리드 헤더에 표시되는 텍스트입니다.

items[]

object ( GridItem )

그리드에 표시할 항목입니다.

borderStyle

object ( BorderStyle )

각 그리드 항목에 적용할 테두리 스타일입니다.

columnCount

integer

그리드에 표시할 열의 개수입니다. 이 필드를 지정하지 않으면 기본값이 사용되며 그리드가 표시되는 위치 (대화상자 또는 컴패니언)에 따라 기본값이 달라집니다.

onClick

object ( OnClick )

이 콜백은 각 개별 그리드 항목에서 재사용되지만 항목 식별자와 항목 목록의 색인은 콜백의 매개변수에 추가됩니다.

그리드 항목

그리드 레이아웃에서 단일 항목을 나타냅니다.

JSON 표현
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
필드
id

string

이 그리드 항목의 사용자 지정 식별자입니다. 이 식별자는 상위 그리드의 onClick 콜백 매개변수에 반환됩니다.

image

object ( ImageComponent )

그리드 항목에 표시되는 이미지입니다.

title

string

그리드 항목의 제목입니다.

subtitle

string

그리드 항목의 부제목입니다.

layout

enum ( GridItemLayout )

그리드 항목에 사용할 레이아웃입니다.

ImageComponent

이미지를 나타냅니다.

JSON 표현
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
필드
imageUri

string

이미지 URL입니다.

altText

string

이미지의 접근성 라벨입니다.

cropStyle

object ( ImageCropStyle )

이미지에 적용할 자르기 스타일입니다.

borderStyle

object ( BorderStyle )

이미지에 적용할 테두리 스타일입니다.

이미지 자르기 스타일

이미지에 적용된 자르기 스타일을 나타냅니다.

예를 들어 16:9 가로세로 비율을 적용하는 방법은 다음과 같습니다.

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
JSON 표현
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
필드
type

enum ( ImageCropType )

자르기 유형입니다.

aspectRatio

number

자르기 유형이 RECTANGLE_CUSTOM 인 경우에 사용하는 가로세로 비율입니다.

예를 들어 16:9 가로세로 비율을 적용하는 방법은 다음과 같습니다.

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

이미지 자르기 유형

이미지에 적용된 자르기 스타일을 나타냅니다.

열거형
IMAGE_CROP_TYPE_UNSPECIFIED 값이 지정되지 않았습니다. 사용하지 마세요.
SQUARE 기본값 정사각형으로 잘라냅니다.
CIRCLE 원형 자르기를 적용합니다.
RECTANGLE_CUSTOM 맞춤 가로세로 비율이 있는 직사각형 자르기를 적용합니다. aspectRatio 를 사용하여 맞춤 가로세로 비율을 설정합니다.
RECTANGLE_4_3 4:3 가로세로 비율의 직사각형 자르기를 적용합니다.

테두리 스타일

위젯의 항목에 적용되는 전체 테두리 스타일을 나타냅니다.

JSON 표현
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
필드
type

enum ( BorderType )

테두리 유형입니다.

strokeColor

object ( Color )

유형이 BORDER_TYPE_STROKE 인 경우에 사용할 색상입니다.

cornerRadius

integer

테두리의 모서리 반경입니다.

테두리 유형

위젯에 적용되는 테두리 유형을 나타냅니다.

열거형
BORDER_TYPE_UNSPECIFIED 값이 지정되지 않았습니다.
NO_BORDER 기본값 테두리 없음
STROKE Outline을 선택합니다.

그리드 항목 레이아웃

그리드 항목에 사용할 수 있는 다양한 레이아웃 옵션을 나타냅니다.

열거형
GRID_ITEM_LAYOUT_UNSPECIFIED 지정된 레이아웃이 없습니다.
TEXT_BELOW 제목과 부제목이 그리드 항목의 이미지 아래에 표시됩니다.
TEXT_ABOVE 제목과 부제목이 그리드 항목의 이미지 위에 표시됩니다.

카드 액션

카드 작업은 카드와 연결된 작업입니다. 예를 들어 인보이스 카드에는 인보이스 삭제, 이메일 인보이스 또는 브라우저에서 인보이스 열기와 같은 작업이 포함될 수 있습니다.

Chat 앱에서는 지원되지 않습니다.

JSON 표현
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
필드
actionLabel

string

작업 메뉴 항목으로 표시되는 라벨입니다.

onClick

object ( OnClick )

이 작업 항목의 onClick 작업입니다.

Card고정 바닥글

카드 하단에 표시되는 영구 (고정) 바닥글입니다.

primaryButton 또는 secondaryButton 를 지정하지 않고 fixedFooter 를 설정하면 오류가 발생합니다.

채팅 앱은 대화상자에서 fixedFooter 를 지원하지만 카드 메시지에서는 지원하지 않습니다.

JSON 표현
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
필드
primaryButton

object ( Button )

고정 바닥글의 기본 버튼입니다. 버튼은 텍스트와 색상이 설정된 텍스트 버튼이어야 합니다.

secondaryButton

object ( Button )

고정 바닥글의 보조 버튼입니다. 버튼은 텍스트와 색상이 설정된 텍스트 버튼이어야 합니다. secondaryButton 가 설정된 경우 primaryButton 가 설정되어야 합니다.

디스플레이 스타일

Google Workspace 부가기능에서 카드가 표시되는 방식을 결정합니다.

Chat 앱에서는 지원되지 않습니다.

열거형
DISPLAY_STYLE_UNSPECIFIED 사용하지 마세요.
PEEK 카드 헤더는 사이드바 하단에 나타나며 현재 스택의 최상위 카드를 부분적으로 가립니다. 헤더를 클릭하면 카드가 카드 스택에 표시됩니다. 카드에 헤더가 없으면 생성된 헤더가 대신 사용됩니다.
REPLACE 기본값 카드 스택의 상단 카드 뷰를 대체하여 카드가 표시됩니다.