카드

카드 기반 Google Workspace 부가기능은 사이드바에 창으로 표시되거나 모바일에서는 메뉴를 통해 액세스하는 다른 활동 창으로 표시됩니다. 부가기능에는 부가기능을 식별하고 카드를 표시하는 상단 툴바가 있습니다. 카드는 기본적으로 부가기능 UI의 '페이지'입니다. Google Apps Script는 Card 객체를 사용하여 프로젝트 코드에서 카드를 나타냅니다.

카드 구조

연락처 세부정보를 보여주는 부가기능 카드의 예

카드는 사용자가 디자인하는 UI 요소 그룹입니다. 카드는 다음 섹션으로 구성됩니다.

  • 카드 헤더 이는 카드를 식별합니다. 제목 텍스트가 있으며 선택적으로 부제목과 아이콘이 있을 수 있습니다.
  • 하나 이상의 카드 섹션 카드의 UI 영역의 하위 구분입니다. 섹션에는 텍스트 섹션 헤더가 있을 수 있습니다. 카드 섹션은 카드에서 가로 규칙으로 구분됩니다. 카드 섹션이 특히 큰 경우 사용자가 필요에 따라 펼치거나 접을 수 있는 접을 수 있는 섹션으로 자동 렌더링됩니다. 카드에는 100개 이하의 카드 섹션이 있을 수 있으며, 성능을 높이려면 몇 개만 있는 것이 좋습니다.

  • 각 카드 섹션에는 하나 이상의 UI 위젯이 포함됩니다. 위젯은 사용자에게 정보나 대화형 컨트롤을 제공합니다. 카드와 카드 섹션은 구조적 위젯이므로 카드 섹션에 추가할 수 없습니다. 카드 섹션에는 위젯이 100개를 초과할 수 없으며 최상의 성능을 위해 최대한 간결해야 합니다.

특정 사용자 활동 또는 데이터 세트를 중심으로 카드를 설계해야 합니다. 예를 들어 Google Sheets에서 가져온 데이터를 표시하는 Google Workspace 부가기능에는 데이터를 가져오는 각 시트에 대한 별도의 카드가 있을 수 있습니다.

여러 카드 사용

간단한 UI를 표시하는 부가기능 카드 예시

부가기능은 일반적으로 두 개 이상의 카드로 구성됩니다. 이러한 카드를 기본 탐색을 위한 목록으로 구성하거나 더 복잡한 탐색 방법을 구성하여 사용자가 카드 간에 이동하는 방식을 제어할 수 있습니다. 자세한 내용은 여러 카드를 사용한 기본 탐색을 참고하세요.

부가기능이 기본 탐색을 사용하는 경우 부가기능이 처음 열리면 부가기능이 확장하는 Google Workspace 애플리케이션이 카드 헤더 목록을 구성하고 이를 사용자에게 표시합니다. 카드 헤더를 클릭하면 해당 카드가 열립니다. 카드 헤더 목록으로 돌아갈 수 있는 뒤로 화살표도 제공됩니다. 헤더와 뒤로 화살표 기능을 코딩할 필요가 없습니다. 이는 부가기능에서 카드를 정의할 때 자동으로 실행됩니다.

부가기능을 설계할 때는 카드가 제한된 화면 공간을 공유해야 하므로 한 번에 표시하는 카드 수를 제한하는 것이 좋습니다. 카드에서 불필요한 복잡성을 피하는 것도 좋습니다.

성능상의 이유로 카드에 위젯 또는 카드 섹션을 100개 이상 추가할 수 없습니다.