카드 기반 부가기능은 사이드바에 창으로 표시되거나 모바일에서는 메뉴를 통해 액세스하는 다른 활동 창으로 표시됩니다. 부가기능에는 부가기능을 식별하고 부가기능의 UI '페이지'인 카드를 표시하는 상단 툴바가 있습니다. Apps Script는 Card 객체를 사용하여 프로젝트 코드에서 카드를 나타냅니다.
카드 해부학
카드는 사용자가 디자인하는 UI 요소 그룹입니다. 카드는 다음 섹션으로 구성됩니다.
카드 헤더 이는 카드를 식별합니다. 제목 텍스트가 있으며 선택적으로 부제목과 아이콘이 있을 수 있습니다.
하나 이상의 카드 섹션 카드의 UI 영역의 하위 구분입니다.
섹션에는 선택적으로 텍스트 섹션 헤더가 있을 수 있습니다.
카드 섹션은 카드에서 가로 규칙으로 구분됩니다.
카드 섹션이 특히 큰 경우 사용자가 필요에 따라 펼치거나 접을 수 있는 접을 수 있는 섹션으로 자동 렌더링됩니다.
카드에는 100개 이하의 카드 섹션이 있을 수 있으며, 성능을 높이려면 몇 개만 있는 것이 좋습니다.
각 카드 섹션에는 하나 이상의 UI 위젯이 포함됩니다. 위젯은 사용자에게 정보나 대화형 컨트롤을 제공합니다. 카드와 카드 섹션은 구조적 위젯이므로 카드 섹션에 추가할 수 없습니다. 카드 섹션에는 위젯이 100개를 초과할 수 없으며 최상의 성능을 위해 최대한 간단해야 합니다.
특정 사용자 활동 또는 데이터 세트를 중심으로 카드를 설계해야 합니다. 예를 들어 Google Sheets에서 가져온 데이터를 표시하는 Google Workspace 부가기능에는 데이터를 가져오는 각 시트에 대한 별도의 카드가 있을 수 있습니다.
여러 카드 사용
부가기능은 일반적으로 두 개 이상의 카드로 구성됩니다. 이러한 카드를 여러 카드를 사용한 기본 탐색을 위한 간단한 목록으로 구성하거나, 사용자가 카드 간에 이동하는 방식을 제어하기 위해 더 복잡한 탐색 방법을 구성할 수 있습니다.
부가기능이 기본 탐색을 사용하는 경우 부가기능이 처음 열리면 부가기능이 확장하는 Google Workspace 애플리케이션이 카드 헤더 목록을 구성하고 이를 사용자에게 표시합니다. 카드 헤더를 클릭하면 해당 카드가 열립니다. 카드 헤더 목록으로 돌아갈 수 있는 뒤로 화살표도 제공됩니다. 헤더와 뒤로 화살표 기능을 코딩할 필요가 없습니다. 이는 부가기능에서 카드를 정의할 때 자동으로 실행됩니다.
[null,null,["최종 업데이트: 2025-08-04(UTC)"],[[["\u003cp\u003eGoogle Workspace add-ons utilize cards, essentially UI pages, displayed in a sidebar or activity window, to present information and interactive elements.\u003c/p\u003e\n"],["\u003cp\u003eEach card is structured with a header, sections containing widgets (like buttons or text fields), and is designed around specific user tasks or data sets.\u003c/p\u003e\n"],["\u003cp\u003eAdd-ons often employ multiple cards for navigation; basic navigation provides an automatic card header list and back arrow functionality.\u003c/p\u003e\n"],["\u003cp\u003eFor optimal performance and user experience, it's recommended to keep the number of cards, sections, and widgets to a minimum, prioritizing simplicity in card design.\u003c/p\u003e\n"],["\u003cp\u003eCards have technical limitations, restricting them to a maximum of 100 card sections and 100 widgets per section to maintain performance.\u003c/p\u003e\n"]]],["Add-on cards, displayed in a sidebar or activity window, are UI pages built with `Card` objects. Cards have a header, optional subtitle/icon, and sections. Sections, separated by horizontal rules, contain UI widgets, and large sections collapse. Add-ons use multiple cards for navigation, presented as a list of headers. Basic navigation provides automatic back arrow functionality. Each card section can hold a maximum of 100 widgets, and a card can hold no more than 100 card sections.\n"],null,["# Cards\n\nA card-based add-on appears as a pane in the sidebar (or, on mobile, as another\nactivity window reached through the menu). The add-on has a top toolbar that\nidentifies the add-on and displays a *card* ---essentially a \"page\" of the\nadd-on's UI. Apps Script represents cards in project code using\n[`Card`](/apps-script/reference/card-service/card) objects.\n\nCard anatomy\n------------\n\nA card is a group of UI elements you design. A card consists of the\nfollowing sections:\n\n- **A card header**. This identifies the cards. It has title text, and may optionally have a subtitle and an icon.\n- **One or more card sections** . These are sub-divisions of the card's UI area.\n A section may optionally have a text section header.\n Card sections are separated from each other on the card by a horizontal rule.\n If a card section is particularly large, it is automatically rendered as a\n collapsible section that users can expand or collapse as needed.\n A card can have [no more than 100 card sections](/workspace/add-ons/guides/workspace-restrictions#have_more_than_100_widgets),\n and should have only a few for better performance.\n\n- **Each card section contains one or more UI\n [widgets](/workspace/add-ons/concepts/widgets)** . Widgets provide the user with\n information or interactive controls. Cards and card sections are\n *structural* widgets, so you cannot add those to a card section. A card\n section can have [no more than 100 widgets](/workspace/add-ons/guides/workspace-restrictions#have_more_than_100_widgets),\n and should be as simple as possible for best performance.\n\nYou should design cards around particular user activities or data sets. For\nexample, a Google Workspace add-on that displays data\ntaken from Google Sheets might have a separate card for each sheet it pulls\ndata from.\n\nUsing multiple cards\n--------------------\n\nAdd-ons usually consist of more than one card. You can either configure these\ncards as a simple list for\n[basic navigation with multiple cards](/workspace/add-ons/how-tos/navigation#returning_multiple_cards),\nor configure more complex\n[navigation methods](/workspace/add-ons/how-tos/navigation#navigation_methods)\nto control how the user moves between the cards.\n\nIf the add-on uses basic navigation, when the\nadd-on is first opened the\nGoogle Workspace application it extends constructs a\nlist of the card headers and presents those to the user. Clicking on the card\nheader opens that card. A back arrow is also provided to get back to the card\nheader list. You do not have to code the header and back arrow\nfunctionality---this is done automatically when you define the cards in your\nadd-on.\n\nWhen designing add-ons, it's best to\n[limit the number of cards](/workspace/add-ons/guides/workspace-best-practices#_use_just_a_few_cards)\nyou display at once, since cards must share a limited amount of screen space.\nIt's also best to [avoid unnecessary complexity in cards](/workspace/add-ons/guides/workspace-best-practices#_keep_cards_simple).\n| **Note:** For performance reasons, you can't add more than 100 widgets or 100 card sections to a card."]]
