카드 또는 대화상자의 구조 형식 지정

이 페이지에서는 카드 또는 대화상자에서 위젯의 형식을 지정하고 구조화하는 방법을 설명합니다. 메시지가 표시됩니다.

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

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

기본 요건

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

열로 카드 및 대화상자 표시

이 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 필드가 정의되지 않은 경우 열의 위젯이 정렬됩니다. 있습니다.

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

다음 예에서는 중앙의 열 안에서 텍스트를 세로로 정렬합니다.

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

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

이 divider 위젯 카드 너비에 걸쳐 있는 가로선을 표시합니다. 할 수 있습니다. 선은 시각적으로 구분되어 사용자는 위젯과 위젯을 구별하여 카드를 더 쉽게 스캔할 수 있습니다. 이해하게 될 것입니다.

다음은 다른 유형 간의 divider 위젯으로 구성된 카드입니다. 위젯:

항목 컬렉션이 있는 그리드 표시

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

위젯은 사용자가 균일한 데이터를 입력하는 데 도움이 되는 추천을 지원합니다. 즉, 변경 시 작업을 Actions 텍스트 입력란에 변경사항이 발생할 때(예: 사용자가 텍스트를 삭제할 수 있습니다.

다음 예는 단일 항목이 있는 2열 그리드입니다.

그리드의 이미지와 함께 텍스트가 표시되는 위치 정의

이 gridItemLayout 필드 를 사용하면 텍스트가 위 또는 아래에 표시되는지 각 gridItem 내에서 정의할 수 있습니다. 그리드에 있는 항목을 선택합니다. gridItemLayout가 정의되지 않은 경우 텍스트는 기본적으로 그리드의 항목 아래에 표시됨

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

UI 요소에 테두리 추가

column 또는 grid 위젯에 표시되는 항목의 경우 테두리를 추가할 수 있습니다. 이러한 UI 요소를 borderType 필드 및 borderStyle 필드를 사용하세요. borderStyle 필드가 정의되지 않으면 기본적으로 테두리가 표시되지 않습니다. 다음을 수행할 수 있습니다. borderType를 정의하여 위젯 내의 모든 항목에 적용하거나 스타일을 적용합니다. 할 수 있습니다.

다음 예는 각 그리드에 이미지가 있는 2열 그리드입니다. 테두리 유형, 스타일, 색상이 그리드

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

문제 해결

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

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