이 페이지에서는 카드에 텍스트와 이미지를 추가하고 서식을 지정하는 방법을 설명합니다.
카드를 빌드하는 방법을 자세히 알아보려면 Google Chat 앱용 카드 빌드를 참고하세요.
카드 빌더를 사용하여 Chat 앱의 메시지 및 사용자 인터페이스를 디자인하고 미리 봅니다.
카드 빌더 열기기본 요건
상호작용 이벤트를 수신하고 이에 응답하도록 구성된 Google Chat 앱 대화형 Chat 앱을 만들려면 사용하려는 앱 아키텍처에 따라 다음 빠른 시작 중 하나를 완료하세요.
- Google Cloud Functions를 사용하는 HTTP 서비스
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
이미지 또는 아이콘 추가
이 섹션에서는 이미지, 이미지 구성요소, 아이콘과 같은 시각적 요소를 카드에 추가하는 방법을 설명합니다.
이미지 추가
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 위젯은 내장 아이콘 또는 맞춤 아이콘을 나타냅니다. 다음과 같은 작업을 수행하기 위해 카드에 아이콘을 추가합니다.
- 독립형 아이콘을 표시합니다.
DecoratedText위젯의 일부로 관련 텍스트 앞에 아이콘을 표시합니다.ButtonList위젯의 일부로 아이콘을 대화형 버튼으로 표시합니다.
다음은 기본 제공 아이콘이 있는 Icon 구성요소로 구성된 카드입니다.
다음 표에는 카드 메시지에 사용할 수 있는 기본 제공 아이콘이 나와 있습니다.
| AIRPLANE | BOOKMARK | ||
| BUS | CAR | ||
| 시계 | CONFIRMATION_NUMBER_ICON | ||
| DESCRIPTION | DOLLAR | ||
| 이메일 | EVENT_SEAT | ||
| FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
| HOTEL | HOTEL_ROOM_TYPE | ||
| 초대 | MAP_PIN | ||
| 멤버십 | MULTIPLE_PEOPLE | ||
| PERSON | PHONE | ||
| RESTAURANT_ICON | SHOPPING_CART | ||
| STAR | 스토어 | ||
| TICKET | 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 인터페이스에 '문제가 발생했습니다'라는 메시지가 표시됩니다. 또는 '요청을 처리할 수 없습니다' Chat UI에 오류 메시지가 표시되지 않지만 Chat 앱이나 카드에서 예기치 않은 결과가 발생하는 경우가 있습니다. 예를 들어 카드 메시지가 표시되지 않을 수 있습니다.
채팅 UI에 오류 메시지가 표시되지 않을 수도 있지만, 채팅 앱의 오류 로깅이 사용 설정된 경우 오류를 수정하는 데 도움이 되는 설명이 포함된 오류 메시지와 로그 데이터를 사용할 수 있습니다. 오류를 확인하고, 디버그하고, 수정하는 데 도움이 필요하면 Google Chat 오류 문제 해결 및 수정을 참고하세요.