카드 기반 인터페이스

부가기능 카드 예

Google Workspace 부가기능은 호스트 애플리케이션 UI 사이드바에 정보 및 사용자 컨트롤을 표시합니다. 부가기능은 하나 이상의 카드와 함께 기본 식별 툴바로 구성됩니다.

각 카드는 부가기능 UI의 특정 '페이지'를 나타내며, 일반적으로 새 카드로 이동하는 것은 카드를 만들어 내부 카드 스택으로 푸시하는 것뿐입니다. 카드 간의 탐색 흐름을 정의하여 풍부한 상호작용 환경을 만들 수 있습니다.

카드는 문맥 또는 문맥 카드로 사용할 수 있습니다. 컨텍스트 카드는 호스트 애플리케이션이 특정 컨텍스트에 있을 때 사용자에게 표시됩니다. 예를 들어 Gmail 메일이나 캘린더 일정을 열 때 알림을 받을 수 있습니다. 컨텍스트가 아닌 카드 (예: 홈페이지)는 호스트의 특정 컨텍스트 외부에서 사용자에게 표시됩니다. 예를 들어 사용자가 Gmail 받은편지함, 기본 Drive 폴더 또는 캘린더를 보고 있는 경우입니다.

Apps Script에 기본 제공되는 Google Workspace 부가기능은 카드 서비스를 사용하여 카드로 사용자 인터페이스를 만듭니다. 다른 언어로 빌드된 부가기능은 인터페이스가 카드로 렌더링되도록 올바른 형식의 JSON을 반환해야 합니다.

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

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

  • 카드 기반 인터페이스를 만드는 데에는 HTML이나 CSS에 대한 지식이 필요하지 않습니다.
  • 카드와 위젯은 확장하는 Google Workspace 애플리케이션과 잘 작동하도록 스타일이 자동으로 지정됩니다.
  • 카드 기반 인터페이스는 데스크톱과 휴대기기 모두에서 작동하지만 인터페이스를 한 번만 정의하면 됩니다.

카드 기반 인터페이스 만들기

카드 기반 부가기능을 빌드할 때는 특정 개념과 디자인 패턴을 이해하는 것이 중요합니다. 다음 가이드에서는 효과적인 카드 기반 부가기능을 빌드하는 데 필요한 정보를 제공합니다.

카드를 만들고 UI 동작을 구현할 때는 다음 페이지를 참고하세요. 부가기능을 구현할 때 다음과 같은 추가 샘플도 참고하면 유용합니다.

  • Google Workspace 부가기능 '고양이' 빠른 시작

    이 부가기능 샘플은 여러 페이지와 홈페이지가 있는 간단한 Google Workspace 부가기능 UI를 보여줍니다.

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

    이 부가기능 샘플은 사용자가 Docs, Sheets, Slides 내에서 텍스트를 번역할 수 있는 Google Workspace 부가기능을 보여줍니다.

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

    이 부가기능 샘플은 Gmail 메시지 수신자, Drive 파일 편집기 또는 Calendar 일정 참석자에 대한 사용자 정보를 보여주는 보다 복잡한 Google Workspace 부가기능 샘플을 보여줍니다. 이 부가기능은 Directory API를 사용하여 사용자 정보를 검색하므로 도메인 내에서만 사용할 수 있습니다.