카드 기반 인터페이스

Google Workspace 부가기능은 카드 기반입니다. 편집기 부가기능은 HTML 기반입니다.

Google Workspace 부가기능 카드 인터페이스의 예

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

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

카드는 비컨텍스트 또는 컨텍스트 일 수 있습니다. 컨텍스트 카드는 호스트 애플리케이션이 Gmail 메시지 또는 Google Calendar 일정과 같은 특정 컨텍스트에 있을 때 사용자에게 표시됩니다. 비컨텍스트 카드 (예: 홈페이지)는 호스트의 특정 컨텍스트 외부에서 사용자에게 표시됩니다. 예를 들어 사용자가 Gmail 받은편지함, 기본 Google Drive 폴더 또는 캘린더를 보고 있을 때 표시됩니다.

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

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

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

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

Gmail은 휴대기기에서 Google Workspace 부가기능으로 확장할 수 있는 유일한 호스트 애플리케이션입니다.

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

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

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