이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

카드 제작에 대한 자세한 내용은 다음을 참조하세요. Google Chat 앱용 빌드 카드

카드 빌더를 사용하여 채팅 앱용 JSON 카드 메시지를 디자인하고 미리 봅니다.

카드 빌더 열기 <ph type="x-smartling-placeholder">

</ph>

기본 요건

양방향 기능이 사용 설정된 Google Chat 앱 대화식 채팅 앱에서 대화식 채팅 앱을 사용하려면 다음 빠른 시작 중 하나를 완료하세요. 앱 아키텍처에 따라 다음을 수행합니다.

이미지 또는 아이콘 추가

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

이미지 추가

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 구성요소로 구성된 카드입니다.

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

	비행기		북마크
	버스		자동차
	시계		CONFIRMATION_NUMBER_ICON
	DESCRIPTION		달러
	이메일		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	호텔		HOTEL_ROOM_TYPE
	초대		MAP_PIN
	멤버십		MULTIPLE_PEOPLE
	이름		전화
	RESTAURANT_ICON		SHOPPING_CART
	STAR		스토어
	티켓		학습
	VIDEO_CAMERA		VIDEO_PLAY

카드에 텍스트 추가

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

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

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

예를 들어 단락 텍스트에는 다음과 같은 형식을 사용할 수 있습니다.

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

각 TextParagraph 위젯은 새 단락으로 렌더링되며 HTML  태그와 유사합니다.

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

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

접을 수 있는 텍스트 단락을 통해 사용자는 필요할 때 더 많은 정보를 표시할 수 있습니다. 이 위젯은 긴 콘텐츠나 추가 세부정보를 표시하기에 선택 시 탐색이 가능하여 동적인 양방향 사용자 생성 경험해 볼 수 있습니다

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

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

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

화면에 정보를 표시해야 하는 경우 DecoratedText 위젯을 사용합니다. 대화형 방식으로 배포됩니다 이 위젯은 연락처 카드, 주문 상태 업데이트, 업무 티켓 알림

DecoratedText 위젯은 간단한 텍스트 HTML 형식을 지원합니다. 설정 시 텍스트 콘텐츠를 추가하려면 해당 HTML 태그만 포함하면 됩니다. 대상 지원되는 HTML 태그에 대한 자세한 내용은 카드 텍스트 서식 지정.

다음은 표시하는 데 사용되는 DecoratedText 위젯으로 구성된 카드입니다. 전화번호, 이메일 주소, 온라인 상태, 전화번호 등 웹사이트:

문제 해결

Google Chat 앱 또는 card가 오류를 반환하는 경우 Chat 인터페이스에 '문제가 발생했습니다'라는 메시지가 표시됨 또는 '요청을 처리할 수 없습니다'와 같은 메시지가 표시됩니다. 채팅 UI가 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생합니다. 예를 들어 카드 메시지가 나타납니다.

채팅 UI에 오류 메시지가 표시되지 않을 수도 있지만 오류 해결에 도움이 되는 오류 메시지 및 로그 데이터를 사용할 수 있음 채팅 앱의 오류 로깅이 사용 설정된 경우 보는 데 도움이 필요한 경우 오류를 수정하는 방법에 대한 자세한 내용은 Google Chat 오류 문제 해결하기