편집기 부가기능 사용자 인터페이스
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
편집기 부가기능을 사용하면 맞춤 메뉴, 대화상자, 사이드바를 통해 사용자가 상호작용할 수 있습니다. 다음 링크에서는 이러한 유형의 인터페이스를 빌드하는 방법을 설명합니다.
부가기능 메뉴는 Apps Script의 기본 Ui 서비스를 사용하여 생성됩니다.
메뉴 항목은 부가기능 사용의 초기 시작점을 제공하지만 부가기능 승인 수명 주기를 고려하여 설계해야 합니다.
사이드바와 대화상자는 Apps Script의 HTML 서비스를 사용하여 만들어집니다. 이 서비스를 사용하면 HTML과 CSS를 사용하여 인터페이스 구조와 모양을 정의할 수 있습니다.
자세한 내용은 HTML 만들기 및 게재를 참고하세요.
- 인터페이스의 사용자 작업으로 인해 편집기 파일이 있는 Google 서버에서 작업이 실행되거나 그 반대가 되도록 클라이언트-서버 통신 호출을 설정할 수도 있습니다.
- Apps Script는 동적 인터페이스를 더 쉽게 빌드할 수 있는 템플릿 구문도 제공합니다.
편집기 부가기능용 HTML 인터페이스를 빌드할 때는 편집기 부가기능 CSS 패키지를 사용하여 부가기능이 확장하는 Google Workspace 편집기와 유사한 디자인을 갖도록 해야 합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-31(UTC)
[null,null,["최종 업데이트: 2025-07-31(UTC)"],[[["\u003cp\u003eEditor add-ons enhance user interaction with custom menus, dialogs, and sidebars, built using Apps Script's UI and HTML services.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on menus initiate add-on usage and should be designed considering the add-on authorization lifecycle.\u003c/p\u003e\n"],["\u003cp\u003eSidebars and dialogs, created with HTML service, allow for defining the add-on's interface structure and appearance using HTML, CSS, and client-server communication for dynamic interactions.\u003c/p\u003e\n"],["\u003cp\u003eThe Editor add-on CSS package ensures visual consistency with Google Workspace editors.\u003c/p\u003e\n"]]],["Editor add-ons allow user interaction via custom menus, dialogs, and sidebars. Menus, built with the Ui service, serve as starting points, requiring design consideration for the add-on authorization lifecycle. Sidebars and dialogs, created using the HTML service, utilize HTML and CSS for interface design. Client-server communication enables actions on the server based on user interface interactions. The editor add-on CSS package maintains a consistent look and feel with Google Workspace editors. Dynamic interface creation is supported via a template syntax.\n"],null,["# Editor add-on user interfaces\n\n[Editor add-ons](/workspace/add-ons/concepts/types#editor_add-ons)\nenable user interaction through customized menus, dialogs, and\nsidebars. The following links provide information building these types of\ninterfaces.\n\n- [Add-on menus](/workspace/add-ons/concepts/menus) are created using\n Apps Script's base [Ui service](/apps-script/reference/base/ui).\n Menus items provide initial starting points for using your add-on,\n but you must design them to take into account the add-on\n [authorization lifecycle](/workspace/add-ons/concepts/editor-auth-lifecycle#the_complete_lifecycle).\n\n- [Sidebars and dialogs](/workspace/add-ons/concepts/dialogs) are created using\n Apps Script's [HTML service](/apps-script/reference/html). This service\n lets you define the interface structure and appearence using HTML and CSS.\n See [Create and serve HTML](/apps-script/guides/html) for more details.\n\n - You can also set up [client-server communication](/apps-script/guides/html/communication) calls so that user actions in the interface result in actions taken on the Google servers where the editor file resides, or vice versa.\n - Apps Script also provides a [template syntax](/apps-script/guides/html/templates) to make building dynamic interfaces easier.\n- When building HTML interfaces for Editor add-ons, you should use the\n [Editor add-on CSS package](/workspace/add-ons/guides/css) to help your add-on\n look and feel like the Google Workspace editors\n they extend."]]
