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 등록정보를 빌드하기 위해 여러 그래픽 및 텍스트 저작물을 제공합니다.
스토어 등록정보와 이러한 저작물의 모든 측면은 브랜딩 가이드라인을 따라야 합니다.