Google Chat 앱용 빌드 카드

이 페이지에서는 카드의 구성요소와 구조를 빌드하는 방법을 설명합니다. 카드는 Google Chat 앱이 Chat 사용자로부터 정보를 표시하고 수집하는 데 사용할 수 있는 사용자 인터페이스입니다. 채팅 앱은 다음 인터페이스에서 카드를 빌드하고 표시할 수 있습니다.

  • 하나 이상의 카드를 포함하는 메시지
  • 홈페이지: 채팅 앱과의 채팅 메시지에서 홈 탭에 표시되는 카드입니다.
  • 대화상자: 메시지 및 홈페이지에서 새 창으로 열리는 카드입니다.

이 페이지에서는 카드의 다음 구성요소를 알아봅니다.

  • 헤더: 일반적으로 카드 또는 카드 섹션의 제목이 포함됩니다.
  • 위젯 및 기타 상호작용 요소를 포함하는 카드 본문을 구성하는 섹션 카드 섹션에서는 열과 그리드 등 카드에 구조를 더 추가할 수 있습니다.
  • 고정 바닥글: 버튼과 같은 지속적인 UI 요소를 표시하기 위해 대화상자 하단에 표시됩니다.

기본 요건

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

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

카드 빌더 열기

헤더 추가

CardHeader 위젯은 카드의 헤더를 나타냅니다. 헤더에는 카드 제목, 부제목, 아바타 이미지가 포함될 수 있습니다.

다음은 CardHeader의 예시입니다.

카드 섹션 하나 이상 추가

CardSection 위젯은 카드 내의 상위 수준 컨테이너입니다. 카드 섹션을 사용하여 카드 내에서 위젯을 그룹화합니다. 각 카드 섹션에는 헤더와 하나 이상의 위젯을 포함할 수 있습니다.

다음은 textParagraph 위젯 두 개가 포함된 CardSection의 예시입니다.

위젯 사이에 가로 구분선 추가

divider 위젯은 세로로 쌓인 위젯 사이에 카드 너비에 걸쳐 있는 가로선을 표시합니다. 선은 사용자가 위젯을 구분하는 데 도움이 되는 시각적 구분선으로, 카드를 더 쉽게 스캔하고 이해할 수 있습니다.

다음은 다른 유형의 위젯 사이에 divider 위젯이 있는 카드입니다.

열 추가

columns 위젯은 카드에 최대 2개의 열을 표시합니다. 각 열에 위젯을 추가할 수 있습니다. 위젯은 지정된 순서대로 표시됩니다. 열을 3개 이상 포함하거나 행을 사용하려면 grid 위젯을 사용하세요.

각 열의 높이는 더 높은 열에 따라 결정됩니다. 예를 들어 첫 번째 열이 두 번째 열보다 높으면 두 열 모두 첫 번째 열의 높이를 갖습니다. 각 열에는 서로 다른 수의 위젯이 포함될 수 있으므로 열 간에 행을 정의하거나 위젯을 정렬할 수 없습니다.

다음 예에서는 텍스트가 2열로 표시되는 columns 위젯이 있는 카드를 보여줍니다. 열 레이아웃만 보고 코드 샘플을 접으려면 접기를 클릭합니다. 다음 예와 같이 공간이 제한된 경우 두 번째 열은 첫 번째 열 아래로 래핑됩니다.

열 너비 정의

열이 나란히 표시됩니다. horizontalSizeStyle 필드를 사용하여 각 열의 너비를 맞춤설정할 수 있습니다. 사용자의 화면 너비가 너무 좁으면 두 번째 열이 첫 번째 열 아래로 래핑됩니다.

  • 웹에서는 화면 너비가 480픽셀 이하인 경우 두 번째 열이 래핑됩니다.
  • iOS 기기에서 화면 너비가 300pt 이하인 경우 두 번째 열이 래핑됩니다.
  • Android 기기에서 화면 너비가 320dp 이하인 경우 두 번째 열이 래핑됩니다.

다음 예시에서는 열에 4개의 항목이 있는 2개의 텍스트 열이 있는 columns 위젯이 있는 카드를 표시합니다. 열의 각 항목에는 텍스트가 각 열을 채우는 공간의 양을 조작하기 위해 horizontalSizeStyle가 적용됩니다.

  • 첫 번째 텍스트 단락은 FILL_MINIMUM_SPACE를 사용하여 카드 너비의 30% 이하를 채웁니다.
  • 두 번째 텍스트 단락은 FILL_AVAILABLE_SPACE를 사용하여 카드 너비의 사용 가능한 공간을 채웁니다. 이 예시에서는 카드의 너비 중 70% 를 채웁니다.
  • 세 번째 텍스트 단락은 horizontalSizeStyle를 정의하지 않으므로 카드의 사용 가능한 공간을 채우도록 기본 설정됩니다.
  • 네 번째 텍스트 단락은 FILL_MINIMUM_SPACE를 사용하여 카드 너비의 30% 이하를 채웁니다.

열의 가로 정렬 정의

horizontalAligment 필드를 정의하여 위젯을 열의 왼쪽, 오른쪽 또는 가운데에 가로로 정렬할 수 있습니다. horizontalAlignment 필드가 정의되지 않은 경우 위젯은 열에서 왼쪽에 정렬됩니다.

다음 예에서는 열 내의 텍스트를 왼쪽으로 가로 정렬합니다.

다음 예에서는 열 내 텍스트를 가운데로 수평 정렬합니다.

다음 예에서는 열 내 텍스트를 오른쪽으로 가로 정렬합니다.

열의 세로 정렬 정의

verticalAlignment 필드를 정의하여 위젯을 열의 상단, 하단 또는 중앙에 세로로 정렬할 수 있습니다. verticalAlignment 필드가 정의되지 않은 경우 열의 위젯이 상단에 정렬됩니다.

다음 예에서는 열 내 텍스트를 상단으로 세로 정렬합니다.

다음 예에서는 열 내 텍스트를 세로로 가운데에 정렬합니다.

다음 예에서는 열 내 텍스트를 하단에 세로로 정렬합니다.

그리드를 추가하여 항목 컬렉션 표시

grid 위젯은 항목 모음이 있는 그리드를 표시합니다. 그리드는 원하는 수의 열과 항목을 지원합니다. 행 수는 상품 수를 열 수로 나눈 값으로 결정됩니다. 항목이 10개이고 열이 2개인 그리드에는 행이 5개 있습니다. 항목이 11개이고 열이 2개인 그리드에는 행이 6개 있습니다.

이 위젯은 사용자가 균일한 데이터를 입력할 수 있도록 지원하는 추천과 사용자가 텍스트를 추가하거나 삭제하는 등 텍스트 입력란에 변경사항이 발생할 때 실행되는 Actions인 변경 시 작업을 지원합니다.

다음은 항목이 하나인 2열 그리드의 예입니다.

그리드에서 이미지가 있는 텍스트가 표시되는 위치를 정의하려면 gridItemLayout 필드를 지정하면 됩니다. 이 필드를 사용하면 텍스트가 그리드의 항목 위 또는 아래에 표시되는지 정의할 수 있습니다. gridItemLayout이 정의되지 않은 경우 텍스트는 기본적으로 그리드의 항목 아래에 표시됩니다.

다음 예는 각 그리드에 텍스트와 이미지가 있는 3열 그리드입니다. 첫 번째 그리드는 이미지 위에 표시될 텍스트를 정의하고, 두 번째 그리드는 이미지 아래에 표시될 텍스트를 정의하며, 세 번째 그리드는 텍스트의 위치를 정의하지 않습니다.

그리드 또는 열에 테두리 추가

column 또는 grid 위젯에 표시되는 항목의 경우 borderType 필드와 borderStyle 필드를 정의하여 이러한 UI 요소에 테두리를 추가할 수 있습니다. borderStyle 필드가 정의되지 않은 경우 테두리가 표시되지 않는 것이 기본값입니다. borderType를 정의하여 위젯 내의 모든 항목에 적용하거나 위젯 내의 각 개별 항목에 스타일을 적용할 수 있습니다.

다음 예는 각 그리드에 이미지가 있는 2열 그리드입니다. 테두리 유형, 스타일, 색상이 그리드 내의 모든 항목에 적용되도록 정의되었습니다.

다음 예는 각 그리드에 이미지가 있고 테두리 스타일과 유형이 개별적으로 정의된 3열 그리드입니다. 첫 번째 이미지는 STROKE로 정의된 테두리가 있습니다. 두 번째 이미지는 NO_BORDER로 정의된 테두리가 있습니다. 세 번째 이미지에는 테두리가 정의되어 있지 않습니다.

캐러셀 추가

Carousel 위젯은 화면에서 스크롤할 수 있는 CarouselCard 객체의 컬렉션을 표시합니다. 각 CarouselCard에 여러 위젯을 추가할 수 있습니다.

CardFixedFooter 위젯은 채팅 앱에서 보낸 대화상자 메시지의 바닥글을 나타냅니다. 바닥글에는 기본 버튼과 보조 버튼이 포함될 수 있습니다.

CardFixedFooter 위젯은 대화상자에만 사용할 수 있습니다.

다음은 버튼이 두 개인 CardFixedFooter 위젯의 예입니다.

문제 해결

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

채팅 UI에 오류 메시지가 표시되지 않을 수도 있지만, 채팅 앱의 오류 로깅이 사용 설정된 경우 오류를 수정하는 데 도움이 되는 설명이 포함된 오류 메시지와 로그 데이터를 사용할 수 있습니다. 오류를 확인하고, 디버그하고, 수정하는 데 도움이 필요하면 Google Chat 오류 문제 해결 및 수정을 참고하세요.