Google Workspace UI 확장

이 페이지에서는 Google Workspace 사용자 인터페이스 (UI)를 확장하는 옵션을 설명합니다. 다음과 같은 여러 이유로 Google Workspace UI를 확장할 수 있습니다.

  • 사용자가 하나 이상의 Google Workspace 앱에서 직접 앱을 사용할 수 있도록 앱 또는 서비스를 Google Workspace에 통합합니다. 예를 들어 Google Docs 내에서 서비스의 스마트 칩과 링크 미리보기를 만드는 Google Workspace 부가기능을 빌드합니다.
  • Google Workspace 사용자의 생산성을 높이거나 워크플로를 개선합니다. 예를 들어 사용자가 Google Chat에서 직접 주간 근무 시간을 보고할 수 있는 Google Chat 앱을 빌드합니다.
  • Google Workspace에서 기본적으로 사용할 수 없는 기능을 추가합니다. 예를 들어 Docs, Google Sheets 또는 Google Slides에 맞춤 메뉴를 추가합니다.

Google Workspace UI를 확장하는 대부분의 옵션을 Google Workspace Marketplace에 게시할 수 있습니다. Google Workspace Marketplace는 사용자가 Google Workspace와 통합되는 서드 파티 앱을 찾아 설치할 수 있는 온라인 상점입니다.

Google Workspace UI 확장 옵션 개요

다음 표에는 Google Workspace UI를 확장하는 옵션이 나열되어 있으며 이러한 특성에 따라 비교되어 있습니다.

  • 확장된 앱: 지정된 옵션으로 확장할 수 있는 Google Workspace 앱을 나열합니다.
  • 코딩 옵션: 다음을 비롯해 빌드할 수 있는 방법을 나열합니다.
    • AppSheet: 코딩이 필요 없는 개발 플랫폼입니다.
    • Apps Script: JavaScript 기반의 클라우드 기반 로우 코드 개발 플랫폼입니다.
    • 전체 개발: 선호하는 코딩 언어를 지원하는 자체 기술 스택입니다.
  • UI 프레임워크: 각 옵션을 빌드하는 데 사용할 수 있는 UI 프레임워크의 유형을 나타냅니다. 여기에는 다음이 포함됩니다.
    • 카드 기반: 카드 인터페이스는 Apps Script를 사용하여 카드 서비스로 빌드하거나 원하는 기술 스택 (전체 개발)으로 카드를 렌더링하기 위해 올바르게 포맷된 JSON을 반환하여 빌드된 사전 정의된 위젯과 카드입니다. 카드 기반 인터페이스는 HTML이나 CSS에 대한 지식이 필요하지 않으며 데스크톱과 모바일 클라이언트 모두에서 잘 작동합니다.
    • HTML: Apps Script는 서버 측 Apps Script 함수와 상호작용할 수 있는 웹페이지를 개발하기 위한 HTML 서비스를 제공합니다. HTML 서비스로 개발된 인터페이스는 맞춤설정 가능성이 높지만, 우수한 사용자 환경을 만들려면 수동 작업이 더 많이 필요합니다.
    • iframe: iframe은 외부 콘텐츠를 Google Workspace에 삽입하며 사용자 인터페이스의 맞춤설정 옵션이 가장 많습니다.

표 아래에는 각 옵션에 대한 설명이 나와 있습니다.

빌드할 수 있는 항목 미리보기 앱 확장 코딩 옵션 카드 기반 UI HTML UI iframe UI
Google Workspace 부가기능 사이드바 통합을 보여주는 Google Workspace 부가기능 예시
이메일 통합 사용 가능 여부를 보여주는 Gmail 로고 Gmail
파일 저장 지원을 위한 Google Drive 로고 Drive
일정 앱 확장 프로그램용 Google Calendar 로고 Calendar
메시지 앱 통합을 위한 Google Chat 로고 채팅
문서 수정 통합을 위한 Google Docs 로고 문서
화상 회의 통합을 위한 Google Meet 로고 Meet
스프레드시트 앱 확장 프로그램의 Google Sheets 로고 Sheets
프레젠테이션 앱 확장 프로그램용 Google Slides 로고 Slides
코딩 옵션용 Google Apps Script 로고 Apps Script
풀 스택 옵션용 Google Developers 로고 Full dev
링크 미리보기 및 스마트 칩 | Google Workspace 부가기능 스마트 칩을 보여주는 Google Workspace 부가기능 링크 미리보기 예시
스마트 칩 미리보기용 Google Docs 아이콘 문서
스마트 칩 미리보기를 위한 Google Sheets 아이콘 Sheets
스마트 칩 미리보기용 Google Slides 아이콘 Slides
코딩 없는 개발 옵션용 AppSheet 로고 AppSheet
로우 코드 코딩을 위한 Google Apps Script 로고 Apps Script
전문 코딩을 위한 Google Developers 로고 Full dev
이메일 초안 | Google Workspace 부가기능 Gmail의 이메일 답안 예시를 위한 Google Workspace 부가기능
이메일 임시보관함 확장 프로그램을 나타내는 Gmail 로고 Gmail
이메일 확장 프로그램용 Google Apps Script 아이콘 Apps Script
전체 개발을 위한 Google Developers 아이콘 Full dev
회의 기본 스테이지 및 측면 패널 | Google Workspace 부가기능 Google Meet 부가기능 인터페이스(기본 스테이지 및 측면 패널 포함)
회의 통합을 위한 Google Meet 로고 Meet
코딩 회의용 Google Developers 로고 Full dev
Google Chat 앱 | Google Workspace 부가기능 Chat에서 대화형 메시지를 보여주는 채팅 앱 예시
채팅 확장 프로그램용 Google Chat 로고 채팅
채팅 앱 옵션의 AppSheet 로고 AppSheet
채팅 확장 프로그램용 Google Apps Script 로고 Apps Script
풀 스택 채팅용 Google Developers 로고 Full dev
Calendar 회의 | Google Workspace 부가기능 Calendar 회의 인터페이스의 Google Workspace 부가기능 예시
회의 기능을 위한 Google Calendar 로고 Calendar
캘린더 확장 프로그램용 Google Apps Script 로고 Apps Script

기존 UI 사용
편집기 부가기능 Google Docs 확장 프로그램을 보여주는 편집기 부가기능 예시
문서 편집기용 Google Docs 로고 문서
스프레드시트 편집기용 Google Sheets 로고 Sheets
프레젠테이션 편집 도구용 Google Slides 로고 Slides
양식 편집자를 위한 Google Forms 로고 양식
스프레드시트 수정을 위한 Google Apps Script 로고 Apps Script
맞춤 함수 | 편집기 부가기능 스프레드시트 수식 사용을 보여주는 맞춤 함수 예시
맞춤 함수용 Google Sheets 로고 Sheets
스크립트 작성을 위한 Google Apps Script 로고 Apps Script

기존 UI 사용
매크로 | 편집기 부가기능 녹화된 스프레드시트 자동화 단계를 보여주는 매크로 예시
매크로를 만들기 위한 Google Sheets 로고 Sheets
작업 자동화를 위한 Google Apps Script 로고 Apps Script

기존 UI 사용
맞춤 메뉴, 대화상자, 사이드바 | 편집기 부가기능 편집기 UI 맞춤설정을 보여주는 메뉴 및 사이드바 예
문서 사이드바용 Google Docs 로고 문서
스프레드시트 대화상자의 Google Sheets 로고 Sheets
프레젠테이션 사이드바용 Google Slides 로고 Slides
양식 대화상자의 Google Forms 로고입니다. 양식
사이드바용 Google Apps Script 로고 Apps Script
Google Drive 앱 파일 메뉴 통합을 보여주는 Drive 앱 예시
파일 액세스를 위한 Google Drive 로고 Drive
풀 스택 지원을 위한 Google Developers 로고 Full dev

기존 UI 사용
Google 클래스룸 부가기능 과제 첨부파일 인터페이스를 보여주는 Google 클래스룸 부가기능 예시
교육자 도구용 Google 클래스룸 로고 클래스룸
클래스룸 통합을 위한 Google Developers 로고 Full dev

앱 통합 유형

다음 섹션에서는 Google Workspace UI를 확장하기 위해 빌드할 수 있는 앱 통합 유형을 설명합니다.

다른 Google Workspace 사용자와 기능을 공유하려면 Google Workspace Marketplace에 등록정보를 게시하면 됩니다. 함께 나열할 수 있는 앱 통합 유형을 알아보려면 Marketplace 문서의 앱 통합을 함께 나열을 참고하세요.

Google Workspace 부가기능

사이드바 앱 통합을 보여주는 Google Workspace 부가기능 예시

사이드바 앱 통합을 보여주는 Google Workspace 부가기능 예시

Google Workspace 부가기능은 Google Workspace 앱과 통합되는 애플리케이션입니다. 부가기능은 여러 Google Workspace 앱을 확장할 수 있습니다. 대부분의 경우 앱은 확장하는 Google Workspace 앱 내의 사이드바에서 열립니다.

사이드바를 빌드하는 것 외에도 부가기능에 대해 다음 기능을 빌드할 수 있습니다.

Google Workspace 부가기능 문서 보기

게시용 Google Workspace Marketplace 로고 게시 가능



코딩 옵션:

자동 코딩을 위한 Google Apps Script 로고 Apps Script
소프트웨어 개발을 위한 Google Developers 로고 Full dev

다음 앱을 확장합니다.

이메일 앱 통합을 위한 Gmail 로고 Gmail
파일 통합을 위한 Google Drive 아이콘 Drive
예약 앱용 Google Calendar 아이콘 Calendar
대화 도구용 Google Chat 로고 채팅

문서 수정을 위한 Google Docs 아이콘 문서
동영상 도구용 Google Meet 로고 Meet
스프레드시트 앱을 나타내는 Google Sheets 로고 Sheets
프레젠테이션 앱용 Google Slides 아이콘 Slides

사용 가능한 UI 프레임워크:

UI 디자인용 카드 프레임워크 아이콘 카드 프레임워크


설명적인 스마트 칩을 보여주는 링크 미리보기 예시

설명적인 스마트 칩을 보여주는 링크 미리보기 예시

Docs를 확장하는 Google Workspace 부가기능은 서드 파티 서비스에서 맞춤 링크 미리보기를 만들 수 있습니다. Google Workspace 애플리케이션 내에서 사람, 파일, 캘린더 일정 또는 기타 항목을 멘션할 때 Docs에서 생성하는 스마트 칩과 마찬가지로, 부가기능은 서드 파티 링크의 스마트 칩을 생성하고 사용자가 칩 위로 마우스를 가져갈 때 미리보기 카드를 표시할 수 있습니다.

기존 Google Workspace 부가기능에 링크 미리보기를 추가하거나 링크 미리보기 전용 부가기능을 별도로 만들 수 있습니다.

링크 미리보기 및 스마트 칩 문서 보기

게시용 Google Workspace Marketplace 로고 게시 가능



코딩 옵션:

코딩 없는 개발을 위한 AppSheet 로고 AppSheet
자동화 스크립트용 Google Apps Script 아이콘 Apps Script
풀 스택 개발자를 위한 Google Developers 아이콘 Full dev

다음 앱을 확장합니다.

문서 확장 프로그램 도구용 Google Docs 아이콘 문서
스프레드시트 도구 확장 프로그램의 Google Sheets 아이콘 Sheets
프레젠테이션 도구 확장 프로그램의 Google Slides 아이콘 Slides

사용 가능한 UI 프레임워크:

UI 구성요소의 카드 프레임워크 아이콘 카드 프레임워크


이메일 초안

맞춤 작성 인터페이스를 보여주는 이메일 초안의 예

맞춤 작성 인터페이스를 보여주는 이메일 초안의 예

Gmail을 확장하는 Google Workspace 부가기능은 사용자가 새 메일을 작성하거나 기존 메일에 답장할 때 맞춤 인터페이스를 제공할 수 있습니다. 이 인터페이스를 사용하려면 사용자가 이메일 초안 내에서 초안 하단 또는 더보기 메뉴에서 부가기능을 엽니다.

이메일 초안 문서 보기

게시용 Google Workspace Marketplace 로고 게시 가능



코딩 옵션:

코딩 도구용 Google Apps Script 아이콘 Apps Script
전문성 개발을 위한 Google Developers 로고 Full dev

다음 앱을 확장합니다.

이메일 통합을 나타내는 Gmail 로고 Gmail

사용 가능한 UI 프레임워크:

디자인 시스템의 카드 프레임워크 로고 카드 프레임워크


회의 기본 화면 및 측면 패널

기본 스테이지 공동작업을 보여주는 Meet 부가기능 예시

기본 스테이지 공동작업을 보여주는 Meet 부가기능 예시

Meet을 확장하는 Google Workspace 부가기능을 사용하면 앱을 회의의 기본 스테이지 또는 측면 패널 인터페이스에 삽입할 수 있습니다. 이를 통해 사용자는 Meet에서 나가지 않고도 앱에서 탐색하고 공유하며 협업할 수 있습니다.

다른 Google Workspace 부가기능과 달리 Meet 부가기능은 카드 프레임워크 UI를 사용하지 않습니다. 대신 iframe을 사용하여 앱을 삽입합니다.

Meet 부가기능 SDK 문서 보기

게시용 Google Workspace Marketplace 로고 게시 가능



코딩 옵션:

풀 스택 도구용 Google Developers 로고 Full dev

다음 앱을 확장합니다.

화상 회의용 Google Meet 로고 Meet

사용 가능한 UI 프레임워크:

삽입된 웹 애플리케이션의 iframe 아이콘입니다. iframe


Google Chat 앱

메시지 상호작용을 보여주는 채팅 앱 예

메시지 상호작용을 보여주는 채팅 앱 예

Chat 앱은 리소스와 서비스를 Chat으로 가져옵니다. 다음과 같은 다양한 방식으로 사용자와 상호작용하도록 Chat 앱을 설계할 수 있습니다.

  • 문자 메시지 또는 카드 메시지로 명령에 응답합니다.
  • 사용자가 양식 데이터 입력과 같은 다단계 프로세스를 완료할 수 있도록 대화상자를 엽니다.
  • 사용자가 대화에서 바로 조치를 취할 수 있는 유용한 정보가 포함된 카드를 첨부하여 링크를 미리보기합니다.

Chat 앱 문서 보기

앱 게시를 위한 Google Workspace Marketplace 아이콘입니다. 게시 가능



코딩 옵션:

노코드 앱 빌드를 위한 AppSheet 로고 AppSheet
자동화된 작업 코딩을 위한 Google Apps Script 아이콘 Apps Script
전문 소프트웨어 엔지니어링을 위한 Google Developers 로고 Full dev

다음 앱을 확장합니다.

대화 확장 프로그램용 Google Chat 로고 채팅

사용 가능한 UI 프레임워크:

사용자 인터페이스 설계를 위한 카드 프레임워크 아이콘 카드 프레임워크


Calendar 회의

회의 일정과의 통합을 보여주는 캘린더 회의 예시

회의 일정과의 통합을 보여주는 캘린더 회의 예시

웹 회의 제공업체는 회의 솔루션으로 Google Calendar를 확장하는 Google Workspace 부가기능을 빌드할 수 있습니다. 부가기능은 Calendar 일정에 회의 옵션을 추가하여 사용자가 Calendar에서 직접 회의를 만들고 참여할 수 있도록 합니다.

Calendar 회의 문서 보기

게시된 앱의 Google Workspace Marketplace 로고입니다. 게시 가능



코딩 옵션:

회의 통합 바로가기의 Google Apps Script 아이콘 Apps Script

다음 앱을 확장합니다.

일정 동기화 설정을 위한 Google Calendar 아이콘 Calendar

사용 가능한 UI 프레임워크:

기존 UI 사용

편집자 부가기능

Google Docs 확장 프로그램 기능을 보여주는 편집기 부가기능 예시

Google Docs 확장 프로그램 기능을 보여주는 편집기 부가기능 예시

편집기 부가기능은 Docs, Sheets, Slides 또는 Forms를 확장하는 앱입니다. 편집기 부가기능은 부가기능당 하나의 앱만 확장할 수 있지만 동일한 Marketplace 등록정보에 여러 편집기 부가기능을 게시할 수 있습니다. 사용자는 확장하는 앱의 확장 프로그램 메뉴에서 Editor 부가기능을 엽니다.

Editor 부가기능에 대해 다음 기능을 빌드할 수 있습니다.

Editor 부가기능 문서 보기

소프트웨어 게시용 Google Workspace Marketplace 아이콘 게시 가능



코딩 옵션:

편집기 확장 프로그램 개발을 위한 Google Apps Script 아이콘 Apps Script

다음 앱을 확장합니다.

문서 수정 확장 프로그램용 Google Docs 아이콘 문서
스프레드시트 자동화 기능을 위한 Google Sheets 아이콘 Sheets
프레젠테이션 제작 도구용 Google Slides 아이콘 Slides
설문조사 및 양식 도구용 Google Forms 아이콘 양식

사용 가능한 UI 프레임워크:

웹 기반 사용자 인터페이스 개발을 나타내는 HTML 아이콘 HTML
외부 웹 콘텐츠를 삽입하기 위한 iframe 아이콘 iframe


커스텀 함수

Google Sheets 수식 사용을 보여주는 맞춤 함수 예시

Google Sheets 수식 사용을 보여주는 맞춤 함수 예시

맞춤 함수를 사용하면 Sheets에 더 많은 함수를 추가할 수 있습니다. 사용자는 Sheets에서 사용할 수 있는 수백 개의 기본 제공 함수와 마찬가지로 이러한 함수를 찾아 사용할 수 있습니다. 맞춤 함수를 편집기 부가기능으로 게시할 수 있습니다.

맞춤 함수 문서 보기

게시 옵션용 Google Workspace Marketplace 로고 게시 가능



코딩 옵션:

Apps Script

다음 앱을 확장합니다.

스프레드시트 작업을 자동화하는 Google Sheets 아이콘 Sheets

사용 가능한 UI 프레임워크:

기존 UI 사용

매크로

녹화된 스프레드시트 자동화 단계를 보여주는 매크로 예시

녹화된 스프레드시트 자동화 단계를 보여주는 매크로 예시

매크로는 사용자가 정의한 특정 UI 상호작용 시리즈를 복제하는 Google Sheets의 녹화입니다. 매크로를 키보드 단축키에 연결하거나 확장 프로그램 > 매크로 메뉴에서 실행할 수 있습니다.

매크로를 기록하면 Sheets에서 UI 상호작용을 복제하는 Apps Script 함수를 자동으로 만듭니다. Apps Script 편집기 내에서 직접 매크로를 수정할 수 있습니다. Apps Script에서 매크로를 처음부터 작성하거나 이미 작성한 함수를 가져와 매크로로 변환할 수 있습니다. 매크로 정의는 편집기 부가기능에 포함될 수 있지만 게시할 수는 없습니다.

매크로 문서 보기

코딩 옵션:

매크로 기록 기능을 위한 Google Apps Script 로고 Apps Script

다음 앱을 확장합니다.

Sheets

사용 가능한 UI 프레임워크:

기존 UI 사용

맞춤 메뉴, 대화상자, 사이드바

편집기 툴바 맞춤설정 옵션을 보여주는 맞춤 메뉴 예

편집기 툴바 맞춤설정 옵션을 보여주는 맞춤 메뉴 예

Docs, Sheets, Slides, Forms의 파일에 맞춤 메뉴, 프롬프트, 알림, HTML 기반 대화상자 및 사이드바를 편집기 부가기능의 일부로 추가할 수 있습니다. 맞춤 메뉴는 확장하는 앱의 기본 메뉴 옆에 표시됩니다. 대화상자, 사이드바, 메시지, 알림은 일반적으로 메뉴 항목 클릭과 같은 사용자 작업이나 이벤트 기반 트리거와 같은 트리거에 의해 활성화됩니다.

맞춤 메뉴, 대화상자, 사이드바 문서 보기

코딩 옵션:

맞춤 메뉴 개발을 위한 Google Apps Script 아이콘 Apps Script

다음 앱을 확장합니다.

문서 확장 프로그램 통합을 위한 Google Docs 로고 문서
스프레드시트 사이드바 확장 프로그램의 Google Sheets 아이콘입니다. Sheets
프레젠테이션 측면 패널 확장 프로그램용 Google Slides 로고 Slides
양식 대화상자 확장 프로그램용 Google Forms 로고 양식

사용 가능한 UI 프레임워크:

맞춤 사용자 인터페이스를 빌드하기 위한 HTML 아이콘 HTML
서드 파티 웹 도구를 삽입하기 위한 iframe 아이콘 iframe


Google Drive 앱

파일 열기 옵션을 보여주는 Drive 앱 예시

파일 열기 옵션을 보여주는 Drive 앱 예시

앱에서 Drive 파일을 지원하는 경우 Drive 사용자 인터페이스와 통합하여 파일을 만들거나 여는 옵션으로 앱을 표시할 수 있습니다. 사용자가 Drive에서 파일을 마우스 오른쪽 버튼으로 클릭하면 앱이 새로 만들기 > 더보기 메뉴와 다음으로 열기 메뉴에 표시될 수 있습니다. 사용자가 두 메뉴 중 하나에서 앱을 선택하면 앱이 새 창에서 열립니다.

Drive 앱 문서 보기

앱 검색을 위한 Google Workspace Marketplace 아이콘 게시 가능



코딩 옵션:

전문적인 앱 제작을 위한 Google Developers 로고 Full dev

다음 앱을 확장합니다.

파일 스토리지 통합을 위한 Google Drive 아이콘 Drive

사용 가능한 UI 프레임워크:

기존 UI 사용

Google 클래스룸 부가기능

과제 첨부파일을 보여주는 클래스룸 부가기능 예시

과제 첨부파일을 보여주는 클래스룸 부가기능 예시

Google 클래스룸 부가기능을 사용하면 교육자가 학습 과제, 공지사항 또는 수업 자료에 첨부파일을 만들 수 있습니다. 이러한 첨부파일은 클래스룸의 iframe에서 서드 파티 콘텐츠를 엽니다. iframe은 사용자 유형과 클래스룸 컨텍스트에 따라 별도의 URL을 엽니다.

Classroom 부가기능 문서 보기

통합 게시를 위한 Google Workspace Marketplace 로고 게시 가능



코딩 옵션:

수업 도구 통합을 위한 Google Developers 아이콘 Full dev

다음 앱을 확장합니다.

교육자 워크플로 도구를 위한 Google 클래스룸 로고 클래스룸

사용 가능한 UI 프레임워크:

삽입된 교육용 웹 콘텐츠의 iframe 아이콘 iframe