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

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

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

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

카드 작성 도구를 사용하여 Chat 앱의 메시지 및 사용자 인터페이스를 디자인하고 미리 볼 수 있습니다.

카드 작성 도구 열기

기본 요건

대화형 기능이 사용 설정된 Google Chat 앱 대화형 Chat 앱을 만들려면 사용하려는 앱 아키텍처에 따라 다음 빠른 시작 중 하나를 완료하세요.

이미지 또는 아이콘 추가

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

이미지 추가

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

Google Chat 개발자 문서 https://developers.google.com/chat의 하이퍼링크와 같이 OpenLink로 하이퍼링크를 엽니다.
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
	EMAIL		EVENT_SEAT
	FLIGHT_ARRIVAL		FLIGHT_DEPARTURE
	HOTEL		HOTEL_ROOM_TYPE
	초대		MAP_PIN
	멤버십		MULTIPLE_PEOPLE
	사람		PHONE
	RESTAURANT_ICON		SHOPPING_CART
	STAR		매장
	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 오류 문제 해결하기를 참고하세요.