리치 응답은 시각적 요소를 추가하여 사용자와 작업의 상호작용을 향상합니다. 프롬프트의 일부로 다음과 같은 리치 응답 유형을 사용할 수 있습니다.
- 기본 카드
- 이미지 카드
- 테이블 카드
리치 응답을 정의할 때는 Google 어시스턴트가 지원되는 기기에서만 리치 응답을 반환하도록 RICH_RESPONSE
노출 영역 기능이 있는 후보를 사용합니다. 프롬프트에서 content
객체당 하나의 리치 응답만 사용할 수 있습니다.
기본 카드
기본 카드는 간결하고, 사용자에게 중요 (또는 요약) 정보를 표시하고, 개발자가 선택하는 경우 사용자가 자세히 알아볼 수 있도록 설계되었습니다 (웹 링크 사용).
기본 카드는 주로 디스플레이 용도로 사용합니다. 버튼이 없으면 상호작용 기능이 없기 때문입니다. 버튼을 웹에 연결하려면 노출 영역에 WEB_LINK
기능도 있어야 합니다.
![스마트 디스플레이에 표시된 기본 카드의 예](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/basic-card.png?authuser=7&hl=ko)
속성
기본 카드 응답 유형에는 다음과 같은 속성이 있습니다.
속성 | 유형 | 요구 사항 | 설명 |
---|---|---|---|
title |
string | 선택사항 | 카드의 일반 텍스트 제목입니다. 제목은 글꼴과 크기가 고정되어 있으며 첫 번째 줄을 넘어서는 문자는 잘립니다. 제목을 지정하지 않으면 카드 높이가 접힙니다. |
subtitle |
string | 선택사항 | 카드의 일반 텍스트 부제목입니다. 제목은 글꼴과 크기가 고정되어 있으며 첫 번째 줄을 넘어서는 문자는 잘립니다. 부제목이 지정되지 않으면 카드 높이가 접힙니다. |
text |
string | 조건부 |
카드의 일반 텍스트 콘텐츠입니다. 너무 긴 텍스트는 마지막 단어 분리에서 생략 부호와 함께 잘립니다. 이 속성에는 다음과 같은 제한사항이 있습니다.
마크다운의 제한된 하위 집합이 지원됩니다.
|
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개)을 정의할 수 있습니다. 우선순위와 함께 추가 열과 행을 정의할 수도 있습니다.
![스마트 디스플레이에 표시된 테이블 카드의 예](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/smart-display/table.png?authuser=7&hl=ko)
테이블은 정적 데이터를 표시하며 상호작용할 수 없습니다. 상호작용 선택 응답의 경우 대신 시각적 선택 응답을 사용하세요.
속성
테이블 카드 응답 유형에는 다음과 같은 속성이 있습니다.
속성 | 유형 | 요구 사항 | 설명 |
---|---|---|---|
title |
string | 조건부 | 표의 일반 텍스트 제목입니다. subtitle 가 설정된 경우 이 속성이 필요합니다. |
subtitle |
string | 선택사항 | 표의 일반 텍스트 부제목입니다. 표 카드의 자막은 테마 맞춤설정의 영향을 받지 않습니다. |
columns |
TableColumn 의 배열 |
필수 | 헤더 및 열 정렬 각 TableColumn 객체는 동일한 테이블에 있는 다른 열의 헤더와 정렬을 설명합니다. |
rows |
TableRow 의 배열 |
필수 |
테이블의 행 데이터입니다. 처음 3개 행은 항상 표시되지만 다른 행은 특정 노출 영역에 표시되지 않을 수도 있습니다. 시뮬레이터로 테스트하여 특정 노출 영역에 표시되는 행을 확인할 수 있습니다. 각 |
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." } } } }
응답 맞춤설정
작업 프로젝트에 대한 맞춤 테마를 만들어 리치 응답의 모양을 변경할 수 있습니다. 이러한 맞춤설정은 사용자가 화면이 포함된 노출 영역에서 작업을 호출할 때 대화에 고유한 디자인과 분위기를 정의하는 데 유용할 수 있습니다.
커스텀 응답 테마를 설정하려면 다음 단계를 따르세요.
- Actions 콘솔에서 개발 > 테마 맞춤설정으로 이동합니다.
- 다음 중 일부 또는 전체를 설정합니다.
- 배경 색상: 카드의 배경으로 사용됩니다. 일반적으로 카드 콘텐츠를 더 쉽게 읽을 수 있도록 배경에 밝은 색상을 사용합니다.
- 기본 색상: 카드 헤더 텍스트 및 인터페이스 요소의 기본 색상입니다. 일반적으로 배경 색상과 대비를 이루려면 더 어두운 기본 색상을 사용합니다.
- 글꼴 모음: 제목 및 기타 주요 텍스트 요소에 사용되는 글꼴 유형을 설명합니다.
- 이미지 모서리 스타일: 카드 모서리 모양을 변경합니다.
- 배경 이미지: 배경 색상 대신 사용할 맞춤 이미지입니다. 노출 영역 기기가 가로 모드 또는 세로 모드일 때 두 개의 서로 다른 이미지를 제공합니다. 배경 이미지를 사용하면 기본 색상은 흰색으로 설정됩니다.
- 저장을 클릭합니다.
![Actions 콘솔에서 테마 맞춤설정하기](https://developers-dot-devsite-v2-prod.appspot.com/static/assistant/conversational/images/theme-customization.png?authuser=7&hl=ko)