이 페이지에서는 애플리케이션의 구성요소와 구조를 빌드하는 방법을 카드를 사용 설정합니다. 사용자가 카드임 Google Chat 앱에서 표시하고 수집하는 데 사용할 수 있는 인터페이스 정보를 수집할 수 있습니다. 채팅 앱으로 빌드 가능 다음 인터페이스의 디스플레이 카드를 사용합니다.
- 메시지 500,000개 이상의 콘텐츠를 만들 수 있습니다
- 홈페이지, 이 카드는 홈 탭에서 채팅 앱으로 메시지를 주고받을 수 있습니다.
- 대화상자: 열려 있는 카드 새 창으로 표시됩니다.
이 페이지에서는 카드의 다음 구성요소에 대해 알아봅니다.
- 헤더: 일반적으로 카드 또는 카드의 제목을 포함합니다. 섹션으로 이동합니다.
- 섹션: 본문을 형성합니다. 카드 및 기타 상호작용 요소가 포함됩니다. 카드 섹션에서 열, 그리드 등 카드에 구조를 추가할 수 있습니다.
- 고정된 바닥글은 대화상자를 사용하여 버튼과 같은 영구 UI 요소를 표시할 수 있습니다.
기본 요건
양방향 기능이 사용 설정된 Google Chat 앱 대화식 채팅 앱에서 대화식 채팅 앱을 사용하려면 다음 빠른 시작 중 하나를 완료하세요. 앱 아키텍처에 따라 다음을 수행합니다.
- Google Cloud Functions를 사용하는 HTTP 서비스
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
카드 빌더를 사용하여 채팅 앱의 메시지와 사용자 인터페이스를 디자인하고 미리 봅니다.
카드 빌더 열기 <ph type="x-smartling-placeholder"></ph>
헤더 추가
CardHeader 위젯
카드의 헤더를 나타냅니다. 헤더에는
제목, 부제목, 아바타 이미지를 입력하세요.
다음은 CardHeader의 예입니다.
하나 이상의 카드 섹션 추가
CardSection 위젯
카드 내 상위 수준 컨테이너입니다. 카드 사용
섹션을 사용하면 카드 내에서 위젯을 그룹화할 수 있습니다. 각 카드 섹션에 다음과 같이
하나 이상의 위젯으로 구성됩니다.
다음은 두 개의 textParagraph가 포함된 CardSection의 예입니다.
위젯:
위젯 사이에 가로 구분선 추가
이
divider 위젯
카드 너비에 걸쳐 있는 가로선을 표시합니다.
할 수 있습니다. 선은 시각적으로 구분되어
사용자는 위젯과 위젯을 구별하여 카드를 더 쉽게 스캔할 수 있습니다.
이해하게 되실 겁니다
다음은 다른 유형 간의 divider 위젯으로 구성된 카드입니다.
위젯:
열 추가
이
columns 위젯
한 카드에 최대 2개의 열을 표시합니다. 추가할 수 있는 항목:
위젯을 각 열에 추가하고 선택한 순서대로 지정합니다.
열을 3개 이상 포함하거나 행을 사용하려면 grid 위젯을 사용합니다.
각 열의 높이는 더 긴 열에 의해 결정됩니다. 예를 들어 첫 번째 열이 두 번째 열보다 크면 두 열 모두 첫 번째 열의 높이입니다. 각 열은 서로 다른 숫자를 포함할 수 있기 때문입니다. 행을 정의하거나 열 사이에 위젯을 정렬할 수 없습니다.
다음 예는 columns 위젯이 있는 카드를 보여줍니다.
텍스트 열 2개 열 레이아웃만 보고 코드를 접으려는 경우
샘플의 경우 접기를 클릭합니다.
다음 예와 같이 공간이 제한되면
두 번째 열이 첫 번째 열 아래 래핑됩니다.
열 너비 정의
열이 나란히 표시됩니다. 각 열의 너비를 맞춤설정할 수 있습니다.
사용
horizontalSizeStyle 필드.
사용자의 화면 너비가 너무 좁으면 두 번째 열이 화면 아래로 줄바꿈됩니다.
이름:
- 웹에서 화면 너비가 작거나 같으면 두 번째 열이 줄바꿈됩니다. 480픽셀
- iOS 기기에서는 화면 너비가 300pt입니다.
- Android 기기에서는 화면 너비가 다음보다 작으면 두 번째 열이 줄바꿈됩니다. 또는 320dp와 같아야 합니다.
다음 예는 columns 위젯이 있는 카드를 보여줍니다.
텍스트 2열(열 4개) 열의 각 항목에는
텍스트 공간을 조작하기 위해 horizontalSizeStyle 적용됨
다음과 같이 각 열을 채웁니다.
- 첫 번째 텍스트 단락은
FILL_MINIMUM_SPACE를 사용하여 30% 이하로 채웁니다. 너비와 같습니다. - 두 번째 텍스트 단락은
FILL_AVAILABLE_SPACE를 사용하여 사용 가능한 공간을 넓히세요. 이 예에서는 카드 결제의 70% 를 너비를 기준으로 합니다. - 세 번째 텍스트 단락은
horizontalSizeStyle를 정의하지 않으므로 기본값입니다. 카드 공간의 사용 가능한 공간을 채웁니다. - 네 번째 텍스트 단락은
FILL_MINIMUM_SPACE를 사용하여 30% 이하로 채웁니다. 너비와 같습니다.
열의 가로 정렬 정의
다음과 같은 방법으로 위젯을 열의 왼쪽, 오른쪽 또는 가운데에 가로로 정렬할 수 있습니다.
Kubernetes의
horizontalAligment 필드.
horizontalAlignment 필드가 정의되지 않은 경우 위젯이
열에 남아 있게 됩니다.
다음 예에서는 한 열 내의 텍스트를 왼쪽으로 가로로 정렬합니다.
다음 예에서는 중앙의 열 내에서 텍스트를 가로로 정렬합니다.
다음 예에서는 열 안의 텍스트를 오른쪽으로 가로로 정렬합니다.
열의 세로 정렬 정의
다음과 같은 방법으로 위젯을 열의 상단, 하단 또는 중앙에 세로로 정렬할 수 있습니다.
Kubernetes의
verticalAlignment 필드.
verticalAlignment 필드가 정의되지 않은 경우 열의 위젯이 정렬됩니다.
맨 위로 이동하겠습니다.
다음 예에서는 열 내의 텍스트를 상단에 세로로 정렬합니다.
다음 예에서는 중앙의 열 안에서 텍스트를 세로로 정렬합니다.
다음 예에서는 하단의 열 안에서 텍스트를 세로로 정렬합니다.
그리드를 추가하여 항목 컬렉션 표시하기
이
grid 위젯
항목 모음이 있는 그리드를 표시합니다. 그리드는 원하는 수만큼
열과 항목으로 구성됩니다. 행 수는 항목을 열로 나눈 값으로 결정됩니다.
항목이 10개이고 열이 2개인 그리드에는 5개의 행이 있습니다. 11개의 항목과 2개의 항목이 있는 그리드
열에 6개 행이 있습니다.
위젯은 사용자가 균일한 데이터를 입력하는 데 도움이 되는 추천을 지원합니다.
즉, 변경 시 작업을
Actions 드림
텍스트 입력란에 변경사항이 발생할 때(예: 사용자가
텍스트를 삭제할 수 있습니다.
다음 예는 단일 항목이 있는 2열 그리드입니다.
그리드에서 이미지와 함께 텍스트가 표시되는 위치를 정의하려면
gridItemLayout 필드.
이 입력란을 사용하면 텍스트를 위 또는 아래에 표시할지 정의할 수 있습니다.
그리드에 있는 항목을 선택합니다. gridItemLayout가 정의되지 않은 경우 텍스트는 기본적으로
그리드의 항목 아래에 표시됩니다.
다음 예는 텍스트와 이미지가 있는 3열 그리드입니다. 표시할 수 있습니다. 첫 번째 그리드는 이미지 위에 표시될 텍스트를 정의하고 두 번째 그리드는 이미지 위에 표시할 텍스트를 정의합니다. 그리드는 이미지 아래에 표시될 텍스트를 정의하지만 세 번째 그리드는 정의하지 않습니다. 변경할 수 있습니다.
그리드 또는 열에 테두리 추가
column 또는 grid 위젯에 표시되는 항목의 경우 테두리를 추가할 수 있습니다.
이러한 UI 요소를
borderType 필드
및
borderStyle 필드를 사용하세요.
borderStyle 필드가 정의되지 않으면 기본적으로 테두리가 표시되지 않습니다. 다음을 수행할 수 있습니다.
borderType를 정의하여 위젯 내의 모든 항목에 적용하거나 스타일을 적용합니다.
할 수 있습니다.
다음 예는 각 그리드에 이미지가 있는 2열 그리드입니다. 테두리 유형, 스타일, 색상이 그리드
다음 예는 각 그리드에 이미지가 있는 3열 그리드와
테두리 스타일과 유형을 개별적으로 정의합니다. 첫 번째
이미지에 STROKE로 정의된 테두리가 있습니다. 두 번째 이미지에는
NO_BORDER 세 번째 이미지에는 정의된 테두리가 없습니다.
영구 바닥글 추가
CardFixedFooter
위젯은 개발자가 보내는 대화상자 메시지의 바닥글을 나타냅니다.
채팅 앱
바닥글에는 기본 버튼과 보조 버튼을 포함할 수 있습니다.
CardFixedFooter 위젯은
대화상자가 있습니다.
다음은 버튼이 두 개인 CardFixedFooter 위젯의 예입니다.
문제 해결
Google Chat 앱 또는 card가 오류를 반환하는 경우 Chat 인터페이스에 '문제가 발생했습니다'라는 메시지가 표시됨 또는 '요청을 처리할 수 없습니다'와 같은 메시지가 표시됩니다. 채팅 UI가 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생합니다. 예를 들어 카드 메시지가 나타납니다.
채팅 UI에 오류 메시지가 표시되지 않을 수도 있지만 오류 해결에 도움이 되는 오류 메시지 및 로그 데이터를 사용할 수 있음 채팅 앱의 오류 로깅이 사용 설정된 경우 보는 데 도움이 필요한 경우 오류를 수정하는 방법에 대한 자세한 내용은 Google Chat 오류 문제 해결하기