카드 기반 인터페이스

부가기능 카드 예

Google Workspace 부가기능은 정보와 사용자 정보를 제공합니다. 컨트롤의 사이드바에 호스트 애플리케이션 있습니다. 부가기능은 기본 식별 툴바와 하나 이상의 툴바로 구성됩니다. 카드를 입력합니다.

각 카드는 특정 '페이지'를 나타냅니다. 부가기능 UI를 추가하고 새로운 카드로 이동하는 것은 대개 카드를 생성하고 내부 카드 스택으로 푸시합니다. 풍부한 상호작용 경험을 위해 카드 간 탐색 흐름을 정의할 수 있습니다.

카드는 비맥락 또는 문맥일 수 있습니다. 컨텍스트 카드가 표시됩니다 사용자에게 요청을 보낼 수 있습니다 예를 들어 Gmail 메일이나 Calendar 일정을 열 때 표시됩니다. 문맥에 맞지 않는 카드 (예: 홈페이지)가 사용자에게 표시됩니다. 외부 IP 주소를 액세스할 수 있습니다 예를 들어 사용자가 Gmail 받은편지함, 기본 드라이브 폴더 또는 캘린더 보기

Apps Script에 내장된 Google Workspace 부가기능은 카드 서비스: 카드. 다른 언어로 빌드된 부가기능 인터페이스가 카드로 렌더링되도록 하려면 올바른 형식의 JSON을 반환해야 합니다.

각 카드는 헤더와 하나 이상의 카드 섹션으로 구성됩니다. 각 섹션은 위젯 세트로 구성됩니다. 위젯 사용자에게 정보를 표시하거나 버튼과 같은 상호작용 컨트롤을 제공할 수 있습니다.

카드 기반 인터페이스에는 다음과 같은 이점이 있습니다.

  • 카드 기반 인터페이스를 만드는 데는 HTML이나 CSS에 대한 지식이 필요하지 않습니다.
  • 카드와 위젯은 확장되는 Google Workspace 애플리케이션입니다.

  • 카드 기반 인터페이스는 데스크톱과 모바일 기기에서 모두 작동하지만 인터페이스를 한 번 정의해야 합니다.

카드 기반 인터페이스 생성

카드 기반 부가기능을 빌드할 때는 개념과 디자인 패턴을 살펴봅니다. 다음 가이드에서는 효과적인 카드 기반 부가기능을 빌드해야 합니다.

카드를 만들고 구현할 때 이 페이지를 참고하세요. UI 동작 또한 다음의 추가 샘플이 참고하시기 바랍니다.

  • Google Workspace 부가기능 'Cats' 빠른 시작

    이 부가기능 샘플은 여러 페이지와 애플리케이션이 포함된 간단한 Google Workspace 부가기능 UI를 보여줍니다. 홈페이지.

  • Google Workspace 부가기능: '번역'

    이 부가기능 샘플은 사용자가 다음 언어로 텍스트를 번역할 수 있는 Google Workspace 부가기능을 보여줍니다. 문서, 스프레드시트, 프레젠테이션 내에서 사용 가능.

  • Google Workspace 부가기능: '팀 목록'

    이 부가기능 샘플은 Google Workspace 부가기능 샘플: Gmail 메일 수신자, Drive 파일 편집기, 캘린더 일정 참석자입니다. 이 부가기능은 도메인 내에서만 사용할 수 있습니다. Directory API를 사용하여 사용자 정보를 수집합니다.