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