Google Workspace 부가기능의 UI 스타일 가이드
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
Google Workspace 부가기능은 확장하는 호스트 애플리케이션의 스타일 및 레이아웃과 일치해야 합니다. 익숙한 컨트롤과 동작을 사용하여 UI를 자연스럽게 확장해야 합니다. 여기서 제시된 가이드라인에서는 고품질 사용자 환경을 촉진하는 텍스트, 이미지, 컨트롤, 브랜딩을 처리하는 방법을 설명합니다.
부가기능이 부가기능 작동의 필수적인 부분인 별도의 웹페이지 (예: 부가기능의 설정 페이지)를 여는 경우 이러한 웹페이지도 이 스타일 가이드라인을 따라야 합니다.
텍스트 및 이미지
이 섹션에서는 부가기능에서 텍스트와 이미지를 올바르게 사용하는 방법을 설명합니다.
부가기능 이름
프로젝트 매니페스트에서 그리고 게시를 위해 부가기능을 구성할 때 부가기능의 이름을 설정해야 합니다.
이 이름은 Google Workspace Marketplace 목록 및 메뉴 내 등 여러 위치에 표시됩니다. 이름을 선택할 때 다음 사항에 유의하세요.
- 단어 첫 글자를 대문자로 표기합니다.
- 브랜드의 일부가 아닌 한 구두점, 특히 괄호는 사용하지 마세요.
- 짧게 유지하세요. 15자(영문 기준) 이하여야 합니다. 긴 이름은 Google Workspace Marketplace 등록정보 및 기타 위치에서 자동으로 잘릴 수 있습니다.
- 부가기능 이름에 'Google', 'Gmail' 또는 기타 Google 제품 이름을 포함하지 마세요.
- 부가기능 이름에 '부가기능'이라는 단어를 포함하지 마세요.
- 버전 정보를 제외합니다.
작성 스타일
많이 작성할 필요는 없습니다. 대부분의 작업은 아이콘, 레이아웃, 짧은 라벨을 통해 명확하게 표시되어야 합니다. 부가기능의 일부에 짧은 라벨로 제공하기보다 더 자세한 설명이 필요한 경우 부가기능을 설명하는 별도의 웹페이지를 만들어 링크를 연결하는 것이 좋습니다.
UI 텍스트를 작성할 때는 다음을 참고하세요.
- 문장 첫 글자를 대문자로 표기하는 규칙을 사용합니다 (특히 버튼, 라벨, 카드 작업의 경우).
- 전문 용어나 약어를 사용하지 않는 짧고 간단한 텍스트를 사용하세요.
범용 및 카드 작업
부가기능에서 범용 작업 또는 카드 작업을 사용하면 정의한 카드에 메뉴 항목으로 표시됩니다. 이러한 작업에 대해 이러한 메뉴에 사용되는 텍스트를 선택할 수 있습니다. 사용할 텍스트를 선택할 때는 다음 사항을 고려하세요.
- 부가기능의 이름을 단순히 반복하는 메뉴 텍스트는 피하세요.
- 각 메뉴 항목을 '실행', '구성', '만들기'와 같은 작업 단어로 시작합니다.
- 작업을 설명하되 작업이 표시되는 UI 구성요소는 설명하지 마세요.
- 액션이 워크플로를 시작하고 액션의 기능을 설명하는 단일 동사가 없는 경우 '시작'이라고 합니다.
- 사용자가 긴 목록을 스크롤하지 않아도 되도록 메뉴 항목 수를 적게 유지합니다. 구현할 작업이 더 있는 경우 각 카드에 서로 다른 작업이 있는 여러 카드를 사용하는 것이 좋습니다.
오류 메시지
문제가 발생하면 평이한 언어를 사용하는 것이 중요합니다. 사용자의 관점에서 문제를 설명하고 해결 방법을 제안합니다.
- 사용자가 코드에서 발생하는 예외를 보지 못하도록 합니다. 대신
try...catch 문을 사용하여 예외를 가로챈 다음 사용자 친화적인 오류 메시지를 표시합니다.
- 게시하기 전에 부가기능이 UI에 디버그 정보를 표시하지 않는지 확인합니다.
헬프(도움말) 콘텐츠
도움말 정보를 표시하거나 사용자에게 부가기능 작동 방식을 설명하는 카드를 디자인할 수 있습니다. 부가기능의 도움말 콘텐츠를 빌드하는 경우 다음 사항을 기억하세요.
- 가능하면 글머리기호 또는 번호가 매겨진 목록으로 안내를 표시하세요. 이름이 지정된 UI 요소를 명확하게 참조하여 사용자를 최종 결과로 안내합니다.
- 특정 방식으로 스프레드시트를 설정하는 것과 같은 요구사항을 지침에 명확하게 설명해야 합니다.
- 지원 웹페이지와 같은 외부 도움말 콘텐츠로 자유롭게 연결하세요.
이미지
부가기능에 사용되는 이미지는 기본 제공 아이콘 유형 중 하나이거나 URL로 지정된 공개적으로 호스팅되는 이미지입니다. 호스팅된 이미지를 사용할 때는 부가기능을 사용할 수 있는 모든 사용자가 액세스할 수 있는지 확인하세요.
컨트롤
이 섹션에서는 대화형 위젯의 사용자 환경 가이드라인을 제공합니다.
버튼을 사용하여 다른 위젯이 아닌 사용자 인터페이스의 기본 작업을 제어합니다.
- 대부분의 텍스트 버튼 라벨은 동사로 시작해야 합니다.
- 대부분의 경우 버튼 행은 3개 이하로 제한해야 합니다.
DecoratedText
DecoratedText 위젯을 사용하면 아이콘, 버튼 또는 스위치로 텍스트 콘텐츠를 표시할 수 있습니다.
- 텍스트 콘텐츠에는 문장 첫 글자를 대문자로 표기하는 규칙을 사용합니다.
- 사용 가능한 공간에 맞지 않으면 DecoratedText 위젯의 텍스트가 잘립니다. 따라서 항상 텍스트 콘텐츠를 최대한 짧게 유지하세요.
드롭다운 선택 상자, 체크박스, 라디오 버튼 등 다양한 선택 입력 위젯을 부가기능에 사용할 수 있습니다.
- 사용자가 여러 옵션을 선택하거나 옵션을 선택하지 않을 수 있는 경우 체크박스를 사용합니다.
정확히 하나의 옵션을 선택해야 하는 경우 라디오 버튼 (또는 선택 메뉴)을 사용하세요.
UI의 공간을 절약하면서 대안의 짧은 목록을 제공할 때 드롭다운을 사용하세요.
- 각 옵션에 할당된 텍스트에는 문장 첫 글자를 대문자로 표기하는 규칙을 사용합니다.
- 선택 변경사항을 사용하여 되돌리기 어려운 주요 작업을 트리거하지 마세요. 사용자가 선택할 때 실수하는 경우가 많기 때문입니다. 대신 현재 선택 값을 읽은 다음 작업을 트리거하는 버튼을 추가하는 것이 좋습니다.
- 드롭다운의 경우 옵션을 알파벳순으로 정렬하거나 모든 사용자가 이해할 수 있는 논리적 스키마 (예: 일요일 또는 월요일부터 순서대로 요일 표시)에 따라 정렬합니다.
- 지정된 선택 입력 위젯의 옵션 수를 적절한 수로 제한합니다. 옵션이 너무 많으면 사용자가 위젯을 사용하기 어려울 수 있습니다. 이 경우 옵션을 여러 카테고리와 여러 위젯으로 나누는 것이 좋습니다.
텍스트 입력
텍스트 입력란은 사용자가 문자열 데이터를 입력할 수 있는 공간을 제공합니다.
- 사용자가 특정 가능한 항목 집합 중 하나를 입력하도록 텍스트 입력을 사용하지 마세요. 대신 드롭다운 선택을 사용하세요.
- 힌트와 추천을 사용하여 사용자가 올바른 형식과 콘텐츠로 텍스트를 입력할 수 있도록 지원합니다.
- 입력할 텍스트가 몇 단어를 넘는 경우 여러 줄 텍스트 입력을 사용하세요.
브랜딩
이 섹션에서는 부가기능 인터페이스에 브랜딩 요소를 추가하기 위한 사용자 환경 가이드라인을 제공합니다.
부가기능에서
부가기능 UI에 브랜딩을 포함하려면 간결하고 가볍게 유지하세요.
이렇게 하면 사용자가 부가기능에 집중할 수 있습니다.
- 부가기능의 모든 측면은 브랜딩 가이드라인을 준수해야 합니다.
- 'Google', 'Gmail' 또는 기타 Google 제품 이름은 포함하지 마세요.
- Google 제품 아이콘을 변경하더라도 포함하지 마세요.
- 브랜딩 텍스트에 '부가기능'이라는 단어를 포함하지 마세요.
- 브랜딩 텍스트는 몇 단어 이하여야 합니다.
Google Workspace Marketplace
게시를 위해 부가기능을 구성할 때 Google Workspace Marketplace 등록정보를 빌드하기 위해 여러 그래픽 및 텍스트 저작물을 제공합니다.
스토어 등록정보와 이러한 저작물의 모든 측면은 브랜딩 가이드라인을 따라야 합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2024-12-22(UTC)
[null,null,["최종 업데이트: 2024-12-22(UTC)"],[[["\u003cp\u003eGoogle Workspace add-ons should seamlessly integrate with the host application's style and layout using familiar controls and behaviors.\u003c/p\u003e\n"],["\u003cp\u003eAdd-on names should be concise, using title case, avoiding punctuation and Google product names, and kept to 15 characters or less.\u003c/p\u003e\n"],["\u003cp\u003eUI text should be minimal, using sentence case, simple language, and clear action verbs in menus and buttons.\u003c/p\u003e\n"],["\u003cp\u003eBranding should be subtle within the add-on, adhering to Google's branding guidelines, and avoiding Google product names or icons.\u003c/p\u003e\n"],["\u003cp\u003eError messages should be user-friendly, providing clear explanations and solutions instead of technical jargon or exceptions.\u003c/p\u003e\n"]]],["Add-ons must match the host application's style and extend the UI naturally. Key actions include: using title case for the add-on's name (15 characters or less), and avoiding punctuation, Google product names, \"add-on\", and version info. UI text should be in sentence case, short, and jargon-free, with menu items starting with action words. Error messages should use plain language. Images should be accessible, buttons should primarily use verbs, and text inputs should employ hints. Branding must be brief, adhering to specific guidelines.\n"],null,["# UI style guide for Google Workspace add-ons\n\nGoogle Workspace add-ons should be consistent with the\nstyle and layout of the\n[host application](/workspace/add-ons/guides/glossary#host_or_host_application)\nthey extend. They should extend the UI\nnaturally by using familiar controls and behaviors. The guidelines presented\nhere describe ways of handling text, images, controls, and branding that promote\na high-quality user experience.\n\nIf your add-on opens separate web pages that are an integral part of the add-on's\noperation (such as a settings page for the add-on), make sure those web pages\nalso follow these style guidelines.\n\nText and images\n---------------\n\nThis section tells you how to properly use text and images in your add-on.\n\n### Add-on name\n\nYou must set your add-on's name in its project\n[manifest](/workspace/add-ons/concepts/workspace-manifests) and when you\n[configure your add-on for publication](/workspace/marketplace/sdk#text_assets).\nThe name appears in many places, such as the [Google Workspace Marketplace](https://workspace.google.com/marketplace/)\nlisting and within menus. When choosing a name:\n\n- Use title case.\n- Avoid punctuation, especially parentheses, unless part of your brand.\n- Keep it short---15 or fewer characters is best. Long names may be automatically truncated in the Google Workspace Marketplace listing and elsewhere.\n- Don't include the words \"Google\", \"Gmail\", or other Google product names in your add-on name.\n- Don't include the word \"add-on\" in your add-on name.\n- Leave out version information.\n\n### Writing style\n\nYou shouldn't need to write much. Most actions should be made clear through\niconography, layout, and short labels. If you find a portion of your add-on\nneeds more extensive explanation than short labels can provide, it's a best\npractice to create a separate web page describing your add-on and link to it.\n\nWhen writing UI text:\n\n- Use sentence case (especially for buttons, labels, and card actions).\n- Prefer short, simple text without jargon or acronyms.\n\n### Universal and card actions\n\nIf you use [universal actions](/workspace/add-ons/how-tos/universal-actions)\nor [card actions](/apps-script/reference/card-service/card-action) in your\nadd-on, they appear as menu items in the [cards](/workspace/add-ons/concepts/cards)\nyou define. You can choose the text that is used in these menus for these\nactions. When choosing the text to use:\n\n- Avoid menu text that simply repeats your add-on's name.\n- Start each menu item with an action word such as \"Run\", \"Configure\", or \"Create\".\n- Describe the task, not the UI component that the action displays.\n- If your action begins a workflow and there's no single verb that describes what it does, call it \"Start\".\n- Keep the number of menu items small to avoid forcing the user to scroll through a large list. If you have more actions to implement, consider using multiple cards with different actions on each.\n\n### Error messages\n\nWhen something goes wrong, it's important to use plain language. Explain the\nproblem from the user's standpoint, and suggest how to fix it.\n\n- Don't allow the user to see any exceptions your code throws. Instead, use `try...catch` statements to intercept exceptions, then display a user-friendly error message.\n- Before you publish, check that your add-on doesn't display debug information in the UI.\n\n### Help content\n\nYou may wish to design cards that display help information or explain the\noperation of the add-on to the user. If you do build help content for your\nadd-on, remember to:\n\n- When possible, show instructions in a bulleted or numbered list. Walk users through to the end result, with clear references to named UI elements.\n- Make sure your instructions clearly explain any requirements, like setting up a spreadsheet in a certain way.\n- Feel free to link to external help content, such as supporting web pages.\n\n### Images\n\nImages used in your add-on are either one of the\n[built-in icon types](/apps-script/reference/card-service/icon)\nor a publicly hosted image specified by a URL. When using hosted images,\nbe sure that they are accessible by everyone who may use your add-on.\n\nControls\n--------\n\nThis section provide user experience guidelines for\n[interactive widgets](/workspace/add-ons/concepts/widgets#user_interaction_widgets).\n\n### Buttons\n\nUse buttons to control your user interface's main actions rather than\nother widgets.\n\n- Most text button labels should start with a verb.\n- Button rows should be limited to three or fewer buttons in most cases.\n\n### DecoratedText\n\n[DecoratedText widgets](/workspace/add-ons/concepts/widgets#informational_widgets)\nlet you present text content with icons, buttons or switches.\n\n- Use sentence case for the text content.\n- The text of a DecoratedText widget is truncated if it cannot fit into the available space. For this reason, always try to keep the text content as short as you can.\n\n### Selection inputs\n\nYou can use a variety of\n[selection input widgets](/workspace/add-ons/concepts/widgets#user_interaction_widgets)\nin your add-on: drop-down selection boxes, checkboxes, and radio buttons.\n\n- Use checkboxes when people can select multiple options, or no option at all. Use radio buttons (or a select menu) when exactly one option must be selected. Use dropdowns when providing a short list of alternatives while trying to save space in the UI.\n- Use sentence case for the text that is assigned to each option.\n- Avoid using selection changes to trigger major, hard-to-reverse actions, because people often make mistakes when making selections. Instead, consider adding a button that reads the current selection values and then triggers the action.\n- For dropdowns, sort the options alphabetically or by a logical scheme that all users can understand (such as presenting the days of the week in order, starting from Sunday or Monday).\n- Restrict the number of options in a given selection input widget to a reasonable number. If there are too many options, users may find it hard to use the widget. In those cases, consider breaking the option into different categories and multiple widgets.\n\n### Text inputs\n\nText inputs provide a place for users to enter string data.\n\n- Don't use a text input to make the user type one of a specific set of possible entries. Use a dropdown select instead.\n- Use hints and suggestions to help the user enter text with the correct format and content.\n- Use multiline text inputs if the text to be entered is more than a few words.\n\nBranding\n--------\n\nThis section provide user experience guidelines for adding branding elements\nto your add-on interface.\n\n### In your add-on\n\nIf you'd like to include branding in your add-on UI, keep it brief and light.\nThis helps people focus on your add-on functionality.\n\n- All aspects of your add-on must follow the [branding guidelines](https://developer.chrome.com/webstore/branding).\n- Don't include the word \"Google\", \"Gmail\", or other Google product names.\n- Don't include Google product icons, even if they are altered.\n- Don't include the word \"add-on\" in your branding text.\n- Branding text should be no more than a few words.\n\n### In the Google Workspace Marketplace\n\nWhen you configure your add-on for publication,\nyou provide a number of graphical and text assets to build the\nGoogle Workspace Marketplace listing.\n\nAll aspects of your store listing and these assets must follow the\n[branding guidelines](https://developer.chrome.com/webstore/branding)."]]
