카드에 텍스트 및 이미지 추가

이 페이지에서는 카드에 텍스트와 이미지를 추가하고 형식을 지정하는 방법을 설명합니다.

카드 빌드에 대한 자세한 내용은 Google Chat 앱용 카드 빌드를 참고하세요.

카드 빌더를 사용하여 Chat 앱의 메시지 및 사용자 인터페이스를 설계하고 미리 봅니다.

카드 빌더 열기

기본 요건

상호작용 이벤트를 수신하고 이에 응답하도록 구성된 Google Chat 앱입니다. 상호작용형 Chat 앱을 만들려면 사용하려는 앱 아키텍처에 따라 다음 빠른 시작 중 하나를 완료하세요.

이미지 또는 아이콘 추가

이 섹션에서는 이미지, 이미지 구성요소, 아이콘과 같은 시각적 요소를 카드에 추가하는 방법을 설명합니다.

이미지 추가

Image 위젯 은 HTTPS URL에서 호스팅되는 PNG 또는 JPG 이미지를 표시합니다. 표시되는 이미지의 너비는 표시된 카드의 전체 너비를 채우고 높이는 이미지의 가로세로 비율을 유지하도록 조정됩니다. Image 위젯 은 onclick 작업 을 지원합니다. 사용자가 이미지를 클릭할 때 발생합니다. onclick 작업의 예는 다음과 같습니다.

Google Chat 개발자 문서의 하이퍼링크와 같은 OpenLink, 하이퍼링크를 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 구성요소로 구성된 카드입니다.

다음 표에는 카드 메시지에 사용할 수 있는 기본 제공 아이콘이 나와 있습니다.

	AIRPLANE		BOOKMARK
	BUS		CAR
	CLOCK		CONFIRMATION_NUMBER_ICON
	DESCRIPTION		DOLLAR
	EMAIL		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	INVITE		MAP_PIN
	MEMBERSHIP		MULTIPLE_PEOPLE
	PERSON		PHONE
	RESTAURANT_ICON		SHOPPING_CART
	STAR		STORE
	TICKET		TRAIN
	VIDEO_CAMERA		VIDEO_PLAY

카드에 텍스트 추가

이 섹션에서는 카드에 텍스트를 추가하고 형식을 지정하는 방법을 설명합니다.

서식이 지정된 텍스트 단락 추가

TextParagraph 위젯 은 선택적 HTML 서식이 있는 텍스트 단락을 표시합니다. 이러한 위젯의 텍스트 콘텐츠를 설정할 때는 해당 HTML 태그만 포함하면 됩니다. 지원되는 HTML 태그에 대한 자세한 내용은 카드에 표시되는 텍스트 형식 지정을 참고하세요.

예를 들어 단락 텍스트에 다음 서식을 사용할 수 있습니다.

HTML , ,  태그를 사용하여 굵게, 밑줄 또는 기울임꼴 텍스트를 표시합니다.
HTML <a href="https://www.google.com">hyperlinks</a>로 웹사이트에 연결합니다.
HTML font tags로 색상을 추가합니다.

각 TextParagraph 위젯은 새 단락으로 렌더링되며 HTML  태그와 유사하다고 생각할 수 있습니다.

다음은 간단한 HTML 서식이 있는 두 단락을 표시하는 데 사용되는 두 개의 TextParagraph 위젯으로 구성된 카드입니다.

접을 수 있는 텍스트 단락 추가

접을 수 있는 텍스트 단락을 사용하면 사용자가 필요에 따라 더 많은 정보를 표시할 수 있습니다. 이 위젯은 선택 시 탐색할 수 있는 긴 콘텐츠 또는 추가 세부정보를 표시하여 동적이고 상호작용형 사용자 환경을 만드는 데 적합합니다.

장식 요소가 있는 텍스트 표시

DecoratedText 위젯 은 선택적 레이아웃과 기능이 있는 텍스트를 표시합니다. 예를 들면 다음과 같습니다.

startIcon을 사용하여 텍스트 앞에 icon을 표시합니다.
topLabel을 사용하여 텍스트 앞에 제목을 표시합니다.
button으로 클릭 가능한 버튼을 추가하거나 switchControl로 전환 가능한 전환 버튼을 추가합니다.

정보를 사용하기 쉽고 상호작용형 방식으로 표시해야 하는 경우 DecoratedText 위젯을 사용합니다. 이 위젯은 연락처 카드, 주문 상태 업데이트, 작업 티켓 알림과 같은 사용 사례에 적합합니다.

DecoratedText 위젯은 간단한 텍스트 HTML 서식을 지원합니다. 이러한 위젯의 텍스트 콘텐츠를 설정할 때는 해당 HTML 태그만 포함하면 됩니다. 지원되는 HTML 태그에 대한 자세한 내용은 카드 텍스트 서식 지정을참고하세요.

다음은 이메일 주소, 온라인 상태, 전화번호, 웹사이트와 같은 연락처 세부정보를 표시하는 데 사용되는 DecoratedText 위젯으로 구성된 카드입니다.

문제 해결

Google Chat 앱 또는 카드가 오류를 반환하면 Chat 인터페이스에 '문제가 발생했습니다.' 또는 '요청을 처리할 수 없습니다.' Chat UI 에 오류 메시지가 표시되지 않지만 Chat 앱 또는 카드에서 예기치 않은 결과가 발생하는 경우도 있습니다. 예를 들어 카드 메시지가 표시되지 않을 수 있습니다.

Chat UI에 오류 메시지가 표시되지 않더라도 Chat 앱의 오류 로깅이 사용 설정되어 있으면 오류를 해결하는 데 도움이 되는 설명 오류 메시지와 로그 데이터를 사용할 수 있습니다. 오류를 보고, 디버깅하고, 수정하는 데 도움이 필요하면 Google Chat 오류 문제 해결 및 수정을 참고하세요.

카드에 텍스트 및 이미지 추가 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.