카드 기반 인터페이스

부가기능 카드 예시

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

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

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

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를 사용하여 사용자 정보를 가져오므로 도메인 내에서만 사용할 수 있습니다.