리치 응답

리치 응답은 시각적 요소를 추가하여 사용자와 작업의 상호작용을 향상합니다. 프롬프트의 일부로 다음과 같은 리치 응답 유형을 사용할 수 있습니다.

  • 기본 카드
  • 이미지 카드
  • 테이블 카드

리치 응답을 정의할 때는 Google 어시스턴트가 지원되는 기기에서만 리치 응답을 반환하도록 RICH_RESPONSE 노출 영역 기능이 있는 후보를 사용합니다. 프롬프트에서 content 객체당 하나의 리치 응답만 사용할 수 있습니다.

기본 카드

기본 카드는 간결하고, 사용자에게 중요 (또는 요약) 정보를 표시하고, 개발자가 선택하는 경우 사용자가 자세히 알아볼 수 있도록 설계되었습니다 (웹 링크 사용).

기본 카드는 주로 디스플레이 용도로 사용합니다. 버튼이 없으면 상호작용 기능이 없기 때문입니다. 버튼을 웹에 연결하려면 노출 영역에 WEB_LINK 기능도 있어야 합니다.

스마트 디스플레이에 표시된 기본 카드의 예

속성

기본 카드 응답 유형에는 다음과 같은 속성이 있습니다.

속성 유형 요구 사항 설명
title string 선택사항 카드의 일반 텍스트 제목입니다. 제목은 글꼴과 크기가 고정되어 있으며 첫 번째 줄을 넘어서는 문자는 잘립니다. 제목을 지정하지 않으면 카드 높이가 접힙니다.
subtitle string 선택사항 카드의 일반 텍스트 부제목입니다. 제목은 글꼴과 크기가 고정되어 있으며 첫 번째 줄을 넘어서는 문자는 잘립니다. 부제목이 지정되지 않으면 카드 높이가 접힙니다.
text string 조건부

카드의 일반 텍스트 콘텐츠입니다. 너무 긴 텍스트는 마지막 단어 분리에서 생략 부호와 함께 잘립니다. image가 없으면 이 속성은 필수입니다.

이 속성에는 다음과 같은 제한사항이 있습니다.

  • 이미지 없는 경우 최대 15줄 또는 image의 경우 10줄입니다. 글자 수가 약 750자 (이미지 제외) 또는 500자(이미지 포함)입니다. 휴대기기는 화면이 큰 노출 영역보다 먼저 텍스트를 자릅니다.
  • 텍스트에 링크를 포함할 수 없습니다.

마크다운의 제한된 하위 집합이 지원됩니다.

  • 두 줄의 공백이 있고 그 뒤에 \n가 오는 줄바꿈
  • **bold**
  • *italics*
image Image 선택사항 카드에 표시되는 이미지입니다. 이미지는 JPG, PNG, GIF (애니메이션 및 애니메이션 아님)일 수 있습니다.
image_fill ImageFill 선택사항 이미지의 가로세로 비율이 이미지 컨테이너의 가로세로 비율과 일치하지 않을 때 사용할 카드와 이미지 컨테이너 사이의 테두리입니다.
button Link 선택사항 탭하면 사용자를 URL에 연결하는 버튼입니다. 버튼에는 버튼 텍스트를 포함하는 name 속성과 링크 URL이 포함된 url 속성이 있어야 합니다. 버튼 텍스트는 오해의 소지가 없어야 하며 검토 과정에서 확인됩니다.

샘플 코드

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is a card.
          text: This is a card.
    content:
      card:
        title: Card Title
        subtitle: Card Subtitle
        text: Card Content
        image:
          url: 'https://developers.google.com/assistant/assistant_96.png'
          alt: Google Assistant logo

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a card.",
            "text": "This is a card."
          }
        ]
      },
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "alt": "Google Assistant logo"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Card', conv => {
  conv.add('This is a card.');
  conv.add(new Card({
    "title": "Card Title",
    "subtitle": "Card Subtitle",
    "text": "Card Content",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    })
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "card": {
          "title": "Card Title",
          "subtitle": "Card Subtitle",
          "text": "Card Content",
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          }
        }
      },
      "firstSimple": {
        "speech": "This is a card.",
        "text": "This is a card."
      }
    }
  }
}

이미지 카드

이미지 카드는 이미지도 포함된 기본 카드를 대신할 더 간단한 대안으로 설계되었습니다. 이미지를 제시하고 보조 텍스트 또는 대화형 구성요소가 필요하지 않은 경우 이미지 카드를 사용합니다.

속성

이미지 카드 응답 유형에는 다음과 같은 속성이 있습니다.

속성 유형 요구 사항 설명
url string 필수 이미지의 소스 URL입니다. 이미지는 JPG, PNG, GIF (애니메이션 및 애니메이션 이외)일 수 있습니다.
alt string 필수 접근성을 위해 사용할 이미지의 텍스트 설명입니다.
height int32 선택사항 픽셀 단위의 이미지 높이입니다.
width int32 선택사항 픽셀 단위의 이미지 너비입니다.

샘플 코드

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is an image prompt.
          text: This is an image prompt.
    content:
      image:
        alt: Google Assistant logo
        url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is an image prompt.",
            "text": "This is an image prompt."
          }
        ]
      },
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "url": "https://developers.google.com/assistant/assistant_96.png"
        }
      }
    }
  ]
}

Node.js

app.handle('Image', conv => {
  conv.add("This is an image prompt!");
  conv.add(new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "image": {
          "alt": "Google Assistant logo",
          "height": 0,
          "url": "https://developers.google.com/assistant/assistant_96.png",
          "width": 0
        }
      },
      "firstSimple": {
        "speech": "This is an image prompt.",
        "text": "This is an image prompt."
      }
    }
  }
}

표 카드

표 카드를 사용하면 응답에 표 형식 데이터 (예: 스포츠 순위, 선거 결과, 항공편)를 표시할 수 있습니다. 어시스턴트가 테이블 카드에 표시하는 열과 행 (각각 최대 3개)을 정의할 수 있습니다. 우선순위와 함께 추가 열과 행을 정의할 수도 있습니다.

스마트 디스플레이에 표시된 테이블 카드의 예

테이블은 정적 데이터를 표시하며 상호작용할 수 없습니다. 상호작용 선택 응답의 경우 대신 시각적 선택 응답을 사용하세요.

속성

테이블 카드 응답 유형에는 다음과 같은 속성이 있습니다.

속성 유형 요구 사항 설명
title string 조건부 표의 일반 텍스트 제목입니다. subtitle가 설정된 경우 이 속성이 필요합니다.
subtitle string 선택사항 표의 일반 텍스트 부제목입니다. 표 카드의 자막은 테마 맞춤설정의 영향을 받지 않습니다.
columns TableColumn의 배열 필수 헤더 및 열 정렬 각 TableColumn 객체는 동일한 테이블에 있는 다른 열의 헤더와 정렬을 설명합니다.
rows TableRow의 배열 필수

테이블의 행 데이터입니다. 처음 3개 행은 항상 표시되지만 다른 행은 특정 노출 영역에 표시되지 않을 수도 있습니다. 시뮬레이터로 테스트하여 특정 노출 영역에 표시되는 행을 확인할 수 있습니다.

TableRow 객체는 동일한 테이블에 있는 다른 행에 있는 셀을 설명합니다.

image Image 선택사항 테이블과 연결된 이미지입니다.
button Link 선택사항 탭하면 사용자를 URL에 연결하는 버튼입니다. 버튼에는 버튼 텍스트를 포함하는 name 속성과 링크 URL이 포함된 url 속성이 있어야 합니다. 버튼 텍스트는 오해의 소지가 없어야 하며 검토 과정에서 확인됩니다.

샘플 코드

다음 스니펫은 표 카드를 구현하는 방법을 보여줍니다.

YAML

candidates:
  - first_simple:
      variants:
        - speech: This is a table.
          text: This is a table.
    content:
      table:
        title: Table Title
        subtitle: Table Subtitle
        columns:
          - header: Column A
          - header: Column B
          - header: Column C
        rows:
          - cells:
              - text: A1
              - text: B1
              - text: C1
          - cells:
              - text: A2
              - text: B2
              - text: C2
          - cells:
              - text: A3
              - text: B3
              - text: C3
        image:
          alt: Google Assistant logo
          url: 'https://developers.google.com/assistant/assistant_96.png'

JSON

{
  "candidates": [
    {
      "first_simple": {
        "variants": [
          {
            "speech": "This is a table.",
            "text": "This is a table."
          }
        ]
      },
      "content": {
        "table": {
          "title": "Table Title",
          "subtitle": "Table Subtitle",
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "url": "https://developers.google.com/assistant/assistant_96.png"
          }
        }
      }
    }
  ]
}

Node.js

app.handle('Table', conv => {
  conv.add('This is a table.');
  conv.add(new Table({
    "title": "Table Title",
    "subtitle": "Table Subtitle",
    "image": new Image({
      url: 'https://developers.google.com/assistant/assistant_96.png',
      alt: 'Google Assistant logo'
    }),
    "columns": [{
      "header": "Column A"
    }, {
      "header": "Column B"
    }, {
      "header": "Column C"
    }],
    "rows": [{
      "cells": [{
        "text": "A1"
      }, {
        "text": "B1"
      }, {
        "text": "C1"
      }]
    }, {
      "cells": [{
        "text": "A2"
      }, {
        "text": "B2"
      }, {
        "text": "C2"
      }]
    }, {
      "cells": [{
        "text": "A3"
      }, {
        "text": "B3"
      }, {
        "text": "C3"
      }]
    }]
  }));
});

JSON

{
  "responseJson": {
    "session": {
      "id": "session_id",
      "params": {}
    },
    "prompt": {
      "override": false,
      "content": {
        "table": {
          "button": {},
          "columns": [
            {
              "header": "Column A"
            },
            {
              "header": "Column B"
            },
            {
              "header": "Column C"
            }
          ],
          "image": {
            "alt": "Google Assistant logo",
            "height": 0,
            "url": "https://developers.google.com/assistant/assistant_96.png",
            "width": 0
          },
          "rows": [
            {
              "cells": [
                {
                  "text": "A1"
                },
                {
                  "text": "B1"
                },
                {
                  "text": "C1"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A2"
                },
                {
                  "text": "B2"
                },
                {
                  "text": "C2"
                }
              ]
            },
            {
              "cells": [
                {
                  "text": "A3"
                },
                {
                  "text": "B3"
                },
                {
                  "text": "C3"
                }
              ]
            }
          ],
          "subtitle": "Table Subtitle",
          "title": "Table Title"
        }
      },
      "firstSimple": {
        "speech": "This is a table.",
        "text": "This is a table."
      }
    }
  }
}

응답 맞춤설정

작업 프로젝트에 대한 맞춤 테마를 만들어 리치 응답의 모양을 변경할 수 있습니다. 이러한 맞춤설정은 사용자가 화면이 포함된 노출 영역에서 작업을 호출할 때 대화에 고유한 디자인과 분위기를 정의하는 데 유용할 수 있습니다.

커스텀 응답 테마를 설정하려면 다음 단계를 따르세요.

  1. Actions 콘솔에서 개발 > 테마 맞춤설정으로 이동합니다.
  2. 다음 중 일부 또는 전체를 설정합니다.
    • 배경 색상: 카드의 배경으로 사용됩니다. 일반적으로 카드 콘텐츠를 더 쉽게 읽을 수 있도록 배경에 밝은 색상을 사용합니다.
    • 기본 색상: 카드 헤더 텍스트 및 인터페이스 요소의 기본 색상입니다. 일반적으로 배경 색상과 대비를 이루려면 더 어두운 기본 색상을 사용합니다.
    • 글꼴 모음: 제목 및 기타 주요 텍스트 요소에 사용되는 글꼴 유형을 설명합니다.
    • 이미지 모서리 스타일: 카드 모서리 모양을 변경합니다.
    • 배경 이미지: 배경 색상 대신 사용할 맞춤 이미지입니다. 노출 영역 기기가 가로 모드 또는 세로 모드일 때 두 개의 서로 다른 이미지를 제공합니다. 배경 이미지를 사용하면 기본 색상은 흰색으로 설정됩니다.
  3. 저장을 클릭합니다.
Actions 콘솔에서 테마 맞춤설정하기