카드 또는 대화상자의 구성요소 디자인

이 페이지에서는 Google Chat에서 카드 메시지의 주요 UI 구성요소를 디자인하고 만드는 방법을 설명합니다.

카드는 정의된 레이아웃, 대화형 UI 요소(예: 버튼) 및 리치 미디어(예: 이미지)를 지원합니다. 카드를 사용하여 카드 메시지 및 대화상자를 통해 정보를 표시하거나, 의견을 수집하거나, 사용자에게 다음 단계를 제공할 수 있습니다.

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

카드 빌더를 엽니다.

카드와 대화상자에는 일반적으로 다음과 같은 구성요소가 있습니다.

  • 카드 제목이 포함된 CardHeader.
  • 카드의 기본을 구성하는 하나 이상의 CardSection 위젯입니다.
  • 대화상자 전용 CardFixedFooter 위젯

기본 요건

  • Google Chat에 액세스할 수 있는 Google Workspace 계정
  • 게시된 채팅 앱입니다. 채팅 앱을 빌드하려면 이 quickstart을 따르세요.

    • 헤더 추가

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

    카드 메시지와 대화상자에 CardHeader를 포함할 수 있습니다.

    다음은 CardHeader의 예입니다.

    카드의 섹션 정의

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

    카드 메시지와 대화상자에 CardSection를 포함할 수 있습니다.

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

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

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

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

    문제 해결

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

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