이 페이지에서는 카드 또는 대화상자 메시지에 텍스트와 이미지를 추가하고 메시지 내에 텍스트와 이미지가 표시되는 방식을 수정하는 방법을 설명합니다.
카드 빌더를 사용하여 채팅 앱용 JSON 카드 메시지를 디자인하고 미리 봅니다.
카드 빌더를 엽니다.기본 요건
이미지 추가
Image
위젯은 HTTPS URL에 호스팅된 PNG 또는 JPG 이미지를 표시합니다.
표시된 이미지의 너비는 표시된 카드의 전체 너비를 채우며, 이미지의 가로세로 비율을 유지하도록 높이가 조정됩니다. Image
위젯은 사용자가 이미지를 클릭할 때 발생하는 onclick
작업을 지원합니다. onclick
작업의 예는 다음과 같습니다.
OpenLink
가 있는 하이퍼링크(예: Google Chat 개발자 문서 하이퍼링크https://developers.google.com/chat
)를 엽니다.- 커스텀 함수를 실행하는 작업을 실행합니다(예: API 호출).
Image
위젯에는 다음과 같은 제한사항이 있습니다.
- PNG 및 JPG 이미지만 지원됩니다.
- 호스트 URL은
HTTPS
여야 합니다. - 성능 카드를 보장하기 위해 권장되는 최대 이미지 크기는 2MB입니다.
다음은 Image
위젯으로 구성된 카드입니다. Google Chat 개발자 문서 방문 페이지 이미지가 표시됩니다. 사용자가 이미지를 클릭하면 Google Chat 개발자 문서가 새 탭에서 열립니다.
이미지 구성요소 추가
Image
위젯은 스타일 지정이 제한된 이미지입니다. imageCompent
위젯을 사용하면 cropStyle
및 borderStyle
를 이미지에 적용할 수 있습니다.
다음 예에서는 이미지 중 하나가 잘린 그리드의 두 이미지를 보여줍니다.
이미지 자르기
cropStyle
를 적용하여 이미지의 모양을 조정할 수 있습니다.
이미지에 적용할 수 있는 여러 도형은 다음과 같습니다.
SQUARE
을 사용하여 정사각형 자르기를 적용합니다.CIRCLE
을 사용하여 원형으로 자를 수 있습니다.RECTANGLE_CUSTOM
를 사용하여 맞춤 가로세로 비율로 직사각형 자르기를 적용합니다. 예를 들어RECTANGLE_4_3
를 사용하여 가로세로 비율이 4:3인 직사각형 자르기를 적용할 수 있습니다.
다음 예에서는 각 이미지에 서로 다른 cropStyle
가 적용된 그리드의 이미지 5개를 보여줍니다.
아이콘 추가
Icon
위젯은 내장 아이콘 또는 맞춤 아이콘을 나타냅니다. 다음과 같은 방법으로 카드 메시지와 대화상자에서 Icon
를 사용할 수 있습니다.
- 독립형 아이콘을 표시합니다.
DecoratedText
위젯의 일부로 관련 텍스트 앞에 아이콘을 표시합니다.- 아이콘을
ButtonList
위젯의 일부로 대화형 버튼으로 표시합니다.
다음은 기본 제공 아이콘이 있는 Icon
구성요소로 구성된 카드입니다.
다음 표에는 카드 메시지에 사용할 수 있는 기본 제공 아이콘이 나와 있습니다.
비행기 | BOOKMARK | ||
BUS | 자동차 | ||
시계 | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | 달러 | ||
이메일 | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
호텔 | HOTEL_ROOM_TYPE | ||
초대 | MAP_PIN | ||
멤버십 | MULTIPLE_PEOPLE | ||
이름 | 전화 | ||
RESTAURANT_ICON | SHOPPING_CART | ||
별표 | 스토어 | ||
티켓 | TRAIN | ||
VIDEO_CAMERA | VIDEO_PLAY |
서식이 지정된 텍스트의 단락 추가
TextParagraph
위젯은 선택적 HTML 형식을 사용하여 텍스트 단락을 표시합니다. 이러한 위젯의 텍스트 콘텐츠를 설정할 때 해당하는 HTML 태그만 포함하면 됩니다.
지원되는 HTML 태그에 관한 자세한 내용은 카드 텍스트 형식 지정을 참고하세요.
예를 들어 단락 텍스트에는 다음과 같은 형식을 사용할 수 있습니다.
- HTML
<b>
,<u>
,<i>
태그를 사용하여 굵게, 밑줄 또는 기울임꼴이 적용된 텍스트를 표시합니다. - HTML
<a href="https://www.google.com">hyperlinks</a>
을(를) 사용하여 웹사이트를 연결하세요. - HTML
<font color="#ea9999">font tags</font>
을 사용하여 색상을 추가합니다.
각 TextParagraph
위젯은 새 단락으로 렌더링되며 HTML <p>
태그와 유사하다고 생각할 수 있습니다.
다음은 간단한 HTML 형식으로 두 단락을 표시하는 데 사용되는 두 개의 TextParagraph
위젯으로 구성된 카드입니다.
장식 요소가 있는 텍스트 표시
DecoratedText
위젯은 선택적 레이아웃과 기능을 사용하여 텍스트를 표시합니다. 예를 들면 다음과 같습니다.
startIcon
를 사용하여 텍스트 앞에icon
를 표시합니다.topLabel
로 텍스트 앞에 제목을 표시합니다.button
로 클릭 가능한 버튼을 추가하거나switchControl
로 전환 가능한 전환을 추가합니다.
사용하기 쉬운 대화형 방식으로 정보를 표시해야 하는 경우 DecoratedText
위젯을 사용합니다. 이 위젯은 연락처 카드, 주문 상태 업데이트, 업무 티켓 알림과 같은 사용 사례에 적합합니다.
DecoratedText
위젯은 간단한 텍스트 HTML 형식을 지원합니다. 이러한 위젯의 텍스트 콘텐츠를 설정할 때 해당하는 HTML 태그만 포함하면 됩니다. 지원되는 HTML 태그에 관한 자세한 내용은 카드 텍스트 형식 지정을 참고하세요.
다음은 이메일 주소, 온라인 상태, 전화번호, 웹사이트와 같은 연락처 세부정보를 표시하는 데 사용되는 DecoratedText
위젯으로 구성된 카드입니다.
문제 해결
Google Chat 앱 또는 카드가 오류를 반환하면 Chat 인터페이스에 '문제가 발생했습니다'라는 메시지가 표시됩니다. 또는 '요청을 처리할 수 없습니다'와 같은 메시지가 표시됩니다. 채팅 UI에는 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생하는 경우가 있습니다. 예를 들어 카드 메시지가 표시되지 않을 수 있습니다.
채팅 UI에 오류 메시지가 표시되지 않을 수 있지만 채팅 앱의 오류 로깅이 사용 설정된 경우 오류에 대해 설명하는 오류 메시지와 로그 데이터가 제공됩니다. 확인, 디버깅, 오류 수정에 관한 도움말은 Google Chat 오류 문제 해결을 참고하세요.