이 페이지에서는 카드 또는 대화상자 메시지에 텍스트와 이미지를 추가하고 메시지 내에 텍스트와 이미지가 표시되는 방식을 수정하는 방법을 설명합니다.
카드 빌더로 카드를 디자인하고 미리 봅니다.
카드 빌더 열기기본 요건
이미지 추가
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인 직사각형 자르기를 적용할 수 있습니다.
다음 예는 그리드에 이미지 5개와 서로 다른 cropStyle가 적용된 것을 보여줍니다.
아이콘 추가
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에는 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생하는 경우가 있습니다. 예를 들어 카드 메시지가 표시되지 않을 수 있습니다.
Chat UI에 오류 메시지가 표시되지 않더라도 채팅 앱에 대한 오류 기록이 사용 설정되어 있을 때 오류를 수정하는 데 도움이 되는 자세한 오류 메시지와 로그 데이터가 제공됩니다. 오류를 확인, 디버깅, 수정하는 데 도움이 필요하면 Google Chat 오류 문제 해결 및 수정하기를 참고하세요.