Google Chat 앱용 빌드 카드

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

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

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

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

기본 요건

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

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

카드 작성 도구 열기

헤더 추가

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

다음은 CardHeader 예시입니다.

카드 섹션을 하나 이상 추가합니다.

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

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

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

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

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

열 추가

columns 위젯은 카드에 최대 2개의 열을 표시합니다. 각 열에 위젯을 추가할 수 있습니다. 위젯은 지정된 순서대로 표시됩니다. 열을 2개 이상 포함하거나 행을 사용하려면 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로 정의된 테두리가 있습니다. 세 번째 이미지에는 정의된 테두리가 없습니다.

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

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

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

문제 해결

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

Chat UI에 오류 메시지가 표시되지 않을 수 있지만 Chat 앱의 오류 로깅이 사용 설정된 경우 오류를 수정하는 데 도움이 되는 설명 오류 메시지와 로그 데이터를 사용할 수 있습니다. 오류를 보고, 디버그하고, 수정하는 방법에 관한 도움말은 Google Chat 오류 문제 해결하기를 참고하세요.