이 페이지에서는 카드 또는 대화상자 메시지에서 위젯의 형식을 지정하고 구조화하는 방법을 설명합니다.
카드 빌더로 카드를 디자인하고 미리 봅니다.
카드 빌더 열기기본 요건
열에 카드 및 대화상자 표시
columns 위젯은 카드 또는 대화상자에 열을 최대 2개까지 표시합니다. 각 열에 위젯을 추가할 수 있습니다. 위젯은 지정된 순서대로 표시됩니다.
3개 이상의 열을 포함하거나 행을 사용하려면 grid 위젯을 사용합니다.
각 열의 높이는 더 큰 열에 따라 결정됩니다. 예를 들어 첫 번째 열의 높이가 두 번째 열보다 높으면 두 열 모두 첫 번째 열의 높이가 됩니다. 각 열에는 서로 다른 수의 위젯이 포함될 수 있으므로 행을 정의하거나 열 간에 위젯을 정렬할 수 없습니다.
다음 예는 텍스트 열이 2개인 columns 위젯이 있는 카드를 표시합니다. 열 레이아웃만 보고 코드 샘플을 접으려면 접기를 클릭합니다.
다음 예와 같이 공간이 제한되어 있으면 두 번째 열이 첫 번째 열 아래로 래핑됩니다.
열 너비 정의
열은 나란히 표시됩니다. horizontalSizeStyle 필드를 사용하여 각 열의 너비를 맞춤설정할 수 있습니다.
사용자의 화면 너비가 너무 좁으면 두 번째 열이 첫 번째 열 아래로 줄바꿈됩니다.
- 웹에서 화면 너비가 480픽셀 이하인 경우 두 번째 열이 래핑됩니다.
- iOS 기기에서는 화면 너비가 300pt보다 작거나 같으면 두 번째 열이 줄바꿈됩니다.
- Android 기기에서는 화면 너비가 320dp 이하인 경우 두 번째 열이 래핑됩니다.
다음 예시는 2개의 텍스트 열과 열에 4개의 항목이 있는 columns 위젯이 있는 카드를 표시합니다. 열의 각 항목에는 텍스트가 각 열을 채우는 공간을 조작하기 위해 horizontalSizeStyle가 적용됩니다.
- 첫 번째 텍스트 단락에서는
FILL_MINIMUM_SPACE를 사용하여 카드 너비의 30% 이상을 채우지 않습니다. - 두 번째 텍스트 단락에서는
FILL_AVAILABLE_SPACE를 사용하여 카드 너비에 사용 가능한 공간을 채웁니다. 이 예에서는 카드 너비의 70% 를 채웁니다. - 세 번째 텍스트 단락은
horizontalSizeStyle를 정의하지 않으므로 기본적으로 카드 공간의 사용 가능한 공간을 채웁니다. - 네 번째 텍스트 단락에서는
FILL_MINIMUM_SPACE를 사용하여 카드 너비의 30% 이하를 채우지 않습니다.
열의 가로 정렬 정의
horizontalAligment 필드를 정의하여 열의 왼쪽, 오른쪽 또는 중앙에 위젯을 가로로 정렬할 수 있습니다.
horizontalAlignment 필드가 정의되지 않은 경우 위젯은 열의 왼쪽에 정렬됩니다.
다음 예는 열 내의 텍스트를 왼쪽으로 가로로 정렬합니다.
다음 예는 열 내의 텍스트를 가운데에 가로로 정렬합니다.
다음 예는 열 내의 텍스트를 오른쪽으로 가로로 정렬합니다.
열의 세로 정렬 정의
verticalAlignment 필드를 정의하여 열의 상단, 하단 또는 중앙에 위젯을 세로로 정렬할 수 있습니다.
verticalAlignment 필드가 정의되지 않은 경우 열의 위젯이 상단에 정렬됩니다.
다음 예는 열 내의 텍스트를 맨 위에 세로로 정렬합니다.
다음 예는 열 내의 텍스트를 가운데로 세로로 정렬합니다.
다음 예는 열의 하단에서 텍스트를 세로로 정렬합니다.
위젯 사이에 가로 구분선 추가
divider 위젯은 세로로 쌓인 위젯 사이의 카드 너비에 걸쳐 가로선을 표시합니다. 이 선은 사용자가 한 위젯과 다른 위젯을 구분하는 데 도움이 되는 시각적 구분선으로, 카드를 더 쉽게 스캔하고 이해할 수 있습니다.
다음은 다른 유형의 위젯 사이에 있는 divider 위젯으로 구성된 카드입니다.
항목 컬렉션이 있는 그리드 표시하기
grid 위젯은 항목 컬렉션이 있는 그리드를 표시합니다. 그리드는 개수에 제한 없이 열과 항목을 지원합니다. 행 수는 항목을 열로 나눈 값으로 결정됩니다.
항목이 10개이고 열이 2개인 그리드에는 행이 5개 있습니다. 11개의 항목과 2개의 열이 있는 그리드에는 6개의 행이 있습니다.
이 위젯은 사용자가 균일한 데이터를 입력하는 데 도움이 되는 추천과 텍스트 입력 필드에 변경사항이 발생할 때 실행되는 Actions(예: 사용자가 텍스트를 추가하거나 삭제하는 등) 작업을 실행하는 변경 시 작업을 지원합니다.
다음 예는 단일 항목이 있는 2열 그리드입니다.
그리드에서 이미지와 함께 텍스트가 표시되는 위치 정의
gridItemLayout 필드를 사용하면 텍스트가 그리드의 항목 위 또는 아래에 표시되는지 여부를 각 gridItem 내에서 정의할 수 있습니다. gridItemLayout가 정의되지 않은 경우 텍스트는 기본적으로 그리드의 항목 아래에 표시됩니다.
다음 예는 각 그리드에 텍스트와 이미지가 있는 3열 그리드입니다. 첫 번째 그리드는 이미지 위에 표시할 텍스트를 정의하고, 두 번째 그리드는 이미지 아래에 표시할 텍스트를 정의하며, 세 번째 그리드는 텍스트의 위치를 정의하지 않습니다.
UI 요소에 테두리 추가
column 또는 grid 위젯에 표시되는 항목의 경우 borderType 필드와 borderStyle 필드를 정의하여 이러한 UI 요소에 테두리를 추가할 수 있습니다.
borderStyle 필드가 정의되지 않으면 기본적으로 테두리를 표시하지 않습니다. borderType를 정의하여 위젯 내의 모든 항목에 적용하거나 위젯 내의 각 개별 항목에 스타일을 적용할 수 있습니다.
다음 예는 각 그리드에 이미지가 있는 2열 그리드이며, 여기에서 테두리 유형, 스타일, 색상이 그리드 내의 모든 항목에 적용되도록 정의됩니다.
다음 예는 각 그리드에 이미지가 있고 개별적으로 정의된 테두리 스타일과 유형이 있는 3열 그리드입니다. 첫 번째 이미지에는 STROKE로 정의된 테두리가 있습니다. 두 번째 이미지에는 NO_BORDER로 정의된 테두리가 있습니다. 세 번째 이미지에는 정의된 테두리가 없습니다.
문제 해결
Google Chat 앱 또는 카드에서 오류를 반환하면 Chat 인터페이스에 '문제 발생' 또는 '요청을 처리할 수 없습니다'라는 메시지가 표시됩니다. 채팅 UI에는 오류 메시지가 표시되지 않지만 채팅 앱 또는 카드에서 예기치 않은 결과가 발생하는 경우가 있습니다. 예를 들어 카드 메시지가 표시되지 않을 수 있습니다.
Chat UI에 오류 메시지가 표시되지 않더라도 채팅 앱에 대한 오류 기록이 사용 설정되어 있을 때 오류를 수정하는 데 도움이 되는 자세한 오류 메시지와 로그 데이터가 제공됩니다. 오류를 확인, 디버깅, 수정하는 데 도움이 필요하면 Google Chat 오류 문제 해결 및 수정하기를 참고하세요.
관련 주제
columnshorizontalSizeStylehorizontalAligmentverticalAlignmentdividergridgridItemLayoutborderStyleborderType