Google Chat 메시지 개요

이 페이지에서는 텍스트 메시지와 카드 메시지의 차이점을 설명합니다.

Chat 앱에서 기본 정보를 전달하기 위해 문자 메시지를 보내면 Google Chat에서 사용자가 메시지를 작성하는 것처럼 메시지가 인라인으로 표시됩니다. 텍스트 외의 내용이 포함된 메시지를 만들거나 사용자가 상호작용할 수 있는 메시지를 만들기 위해 Chat 앱은 카드를 사용할 수 있습니다. 채팅 앱은 카드가 포함된 문자 메시지를 추가할 수도 있습니다. 사용자에게 양식 작성과 같은 여러 단계의 절차를 완료하라는 메시지를 표시하기 위해 Chat 앱은 새 창에서 대화상자로 열리는 카드를 만들 수도 있습니다.

텍스트 메시지 분석

Google Chat API에서 메시지는 JSON 객체로 표현됩니다. 메시지 내에서 텍스트 메시지는 text 객체로 표현됩니다.

다음 예에서는 Chat 앱이 소프트웨어 개발자 팀을 위해 스페이스에 코드 동결이 다가오고 있음을 알리는 텍스트 메시지를 만듭니다.

{
  "text": "Attention <users/all>: Code freeze starts at `11:59 am` Pacific Standard Time! If you need a little more time, type `/moreTime` and I'll push the code freeze back one hour."
}

JSON은 다음 메시지를 반환합니다.

코드 동결을 알리는 Google Chat의 텍스트 메시지 예

카드 메시지 분석

Google Chat API에서 메시지는 JSON 객체로 표현됩니다. 메시지 내에서 카드는 cardsV2 배열로 표시되며 다음으로 구성됩니다.

  • 하나 이상의 CardWithId 객체
  • cardId: 카드를 식별하는 데 사용되며 특정 메시지 내에서 범위가 지정됩니다. (메시지 카드의 ID가 동일할 수 있습니다.)

  • 다음으로 구성된 card 객체

    • 제목, 부제목, 아바타 스타일 이미지 등을 지정하는 header 객체입니다.
    • 각각 하나 이상의 위젯을 포함하는 section 객체 하나 이상
    • 하나 이상의 widget 객체 각 위젯은 텍스트, 이미지, 버튼, 기타 객체 유형을 나타낼 수 있는 복합 객체입니다.

예를 들어 다음 카드 메시지에는 header, section, widget 객체가 포함되어 있습니다.

카드 메시지를 사용하여 Chat 스페이스에서 설문조사를 실행하는 Chat 앱

다음 코드는 카드 메시지의 JSON을 나타냅니다.

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"
                            }
                          ]
                        }
                      }
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    }
  ]
}

카드 작성 도구를 사용하여 Chat 앱의 메시지 및 사용자 인터페이스를 디자인하고 미리 볼 수 있습니다.

카드 작성 도구 열기