Google Workspace 부가기능 UI 스타일 가이드

Google Workspace 부가기능은 확장하는 호스트 애플리케이션의 스타일 및 레이아웃과 일치해야 합니다. 익숙한 컨트롤과 동작을 사용하여 UI를 자연스럽게 확장해야 합니다. 여기에 제시된 가이드라인은 고품질 사용자 환경을 촉진하는 텍스트, 이미지, 컨트롤, 브랜드를 처리하는 방법을 설명합니다.

부가기능이 부가기능 작업의 필수 부분인 별도의 웹페이지 (예: 부가기능의 설정 페이지)를 여는 경우 이러한 웹페이지도 이 스타일 가이드라인을 따라야 합니다.

텍스트 및 이미지

이 섹션에서는 부가기능에서 텍스트와 이미지를 올바르게 사용하는 방법을 설명합니다.

부가기능 이름

프로젝트 매니페스트게시를 위해 부가기능을 구성할 때 부가기능 이름을 설정해야 합니다. 이름은 Google Workspace Marketplace 목록 및 메뉴와 같은 여러 위치에 표시됩니다. 이름을 선택할 때는 다음 사항에 유의하세요.

  • 단어 첫 글자를 대문자로 표기합니다.
  • 브랜드의 일부가 아니라면 구두점, 특히 괄호를 사용하지 마세요.
  • 간결하게 작성합니다. 15자 이하가 가장 좋습니다. 긴 이름은 Google Workspace Marketplace 등록정보 및 다른 위치에서 자동으로 잘릴 수 있습니다.
  • 부가기능 이름에 'Google', 'Gmail' 또는 기타 Google 제품 이름을 포함하지 마세요.
  • 부가기능 이름에 '부가기능'이라는 단어를 포함하면 안 됩니다.
  • 버전 정보는 생략합니다.

작성 스타일

많이 작성할 필요가 없습니다. 대부분의 작업은 아이콘, 레이아웃, 짧은 라벨을 통해 명확하게 알려야 합니다. 부가기능에 짧은 라벨이 제공하는 것보다 더 광범위한 설명이 필요한 경우 부가기능을 설명하는 별도의 웹페이지와 링크를 만드는 것이 좋습니다.

UI 텍스트를 작성할 때:

  • (특히 버튼, 라벨, 카드 작업에는) 문장 첫 글자를 대문자로 표기합니다.
  • 전문 용어나 약어가 없는 짧고 간단한 텍스트를 선호합니다.

범용 및 카드 작업

부가기능에서 범용 작업 또는 카드 작업을 사용하는 경우 정의한 카드에 메뉴 항목으로 표시됩니다. 이러한 메뉴에서 이러한 작업에 사용할 텍스트를 선택할 수 있습니다. 사용할 텍스트를 선택할 때는 다음 사항을 기억하세요.

  • 단순히 부가기능의 이름을 반복하는 메뉴 텍스트는 사용하지 않습니다.
  • 각 메뉴 항목을 'Run', 'Configure' 또는 'Create'와 같은 작업 단어로 시작합니다.
  • 작업이 표시하는 UI 구성요소가 아니라 작업을 설명합니다.
  • 작업에서 워크플로를 시작하지만 작업을 설명하는 동사가 하나도 없으면 '시작'이라고 합니다.
  • 사용자가 긴 목록을 스크롤하지 않도록 메뉴 항목의 수를 적게 유지합니다. 구현할 작업이 더 있다면 각각에 서로 다른 작업이 있는 여러 카드를 사용하는 것이 좋습니다.

오류 메시지

문제가 발생하면 당연한 말로 하는 것이 중요합니다. 사용자의 관점에서 문제를 설명하고 해결 방법을 제안합니다.

  • 코드에서 발생한 예외를 사용자가 볼 수 있도록 허용하지 마세요. 대신 try...catch 문을 사용하여 예외를 가로채고 사용자 친화적인 오류 메시지를 표시합니다.
  • 게시하기 전에 부가기능이 UI에 디버그 정보를 표시하지 않는지 확인합니다.

헬프(도움말) 콘텐츠

도움말 정보를 표시하거나 부가기능의 작동을 사용자에게 설명하는 카드를 디자인하는 것이 좋습니다. 부가기능에 대한 도움말 콘텐츠를 빌드하는 경우 다음을 기억하세요.

  • 가능하면 글머리기호 또는 번호 매기기 목록으로 안내를 표시합니다. 이름이 지정된 UI 요소를 명확하게 참조하여 최종 결과를 사용자에게 안내합니다.
  • 특정 방식으로 스프레드시트를 설정하는 등의 모든 요구사항을 지침에서 명확하게 설명해야 합니다.
  • 지원 웹페이지와 같은 외부 도움말 콘텐츠로 언제든지 연결할 수 있습니다.

이미지

부가기능에 사용되는 이미지는 내장 아이콘 유형 중 하나이거나 URL로 지정된 공개 호스팅 이미지입니다. 호스팅된 이미지를 사용할 때는 부가기능을 사용할 수 있는 모든 사용자가 이 이미지에 액세스할 수 있어야 합니다.

컨트롤

이 섹션에서는 대화형 위젯을 위한 사용자 환경 가이드라인을 제공합니다.

버튼

다른 위젯 대신 버튼을 사용하여 사용자 인터페이스의 기본 작업을 제어합니다.

  • 대부분의 텍스트 버튼 라벨은 동사로 시작해야 합니다.
  • 대부분의 경우 버튼 행은 3개 이하로 제한되어야 합니다.

DecoratedText

DecoratedText 위젯을 사용하면 아이콘, 버튼 또는 스위치와 함께 텍스트 콘텐츠를 표시할 수 있습니다.

  • 텍스트 콘텐츠에는 첫 글자를 대문자로 표기합니다.
  • DecoratedText 위젯의 텍스트는 사용 가능한 공간에 맞지 않으면 잘립니다. 이러한 이유로 항상 텍스트 콘텐츠를 최대한 짧게 유지하세요.

선택 입력

부가기능에서 드롭다운 선택 상자, 체크박스, 라디오 버튼과 같은 다양한 선택 입력 위젯을 사용할 수 있습니다.

  • 사용자가 여러 옵션을 선택할 수 있거나 옵션이 전혀 없는 경우 체크박스를 사용합니다. 정확히 하나의 옵션을 선택해야 하는 경우 라디오 버튼 (또는 선택 메뉴)을 사용합니다. UI 공간을 절약하려고 하는 동안 간단한 대안 목록을 제공할 때 드롭다운을 사용합니다.
  • 각 옵션에 지정된 텍스트에는 첫 글자를 대문자로 표기합니다.
  • 사람들은 선택을 할 때 실수하는 경우가 많으므로 선택 변경을 사용하여 되돌리기 어려운 주요 작업을 트리거하지 마세요. 대신 현재 선택 값을 읽은 후 작업을 트리거하는 버튼을 추가해 보세요.
  • 드롭다운의 경우 알파벳순으로 또는 모든 사용자가 이해할 수 있는 논리적 스키마에 따라 옵션을 정렬합니다 (예: 일요일 또는 월요일부터 요일을 순서대로 표시).
  • 지정된 선택 입력 위젯의 옵션 수를 적절한 수로 제한합니다. 옵션이 너무 많으면 사용자가 위젯을 사용하기 어려울 수 있습니다. 이러한 경우 옵션을 여러 카테고리와 여러 위젯으로 나누는 것이 좋습니다.

텍스트 입력

텍스트 입력은 사용자가 문자열 데이터를 입력할 수 있는 공간을 제공합니다.

  • 가능한 특정 항목 집합 중 하나를 사용자가 입력하도록 하기 위해 텍스트 입력을 사용하지 마세요. 대신 드롭다운 선택을 사용하세요.
  • 힌트와 제안을 사용하여 사용자가 올바른 형식과 콘텐츠로 텍스트를 입력하도록 돕습니다.
  • 입력할 텍스트가 몇 단어 이상인 경우 여러 줄의 텍스트 입력을 사용합니다.

브랜딩

이 섹션에서는 부가기능 인터페이스에 브랜드 요소를 추가하기 위한 사용자 환경 가이드라인을 제공합니다.

부가기능에서

부가기능 UI에 브랜딩을 포함하려면 간결하고 가볍게 유지합니다. 이렇게 하면 사람들이 부가기능 기능에 집중하는 데 도움이 됩니다.

  • 부가기능의 모든 측면은 브랜드 가이드라인을 준수해야 합니다.
  • 'Google', 'Gmail' 또는 기타 Google 제품 이름을 포함하지 마세요.
  • Google 제품 아이콘이 변경된 경우에도 포함하지 않습니다.
  • 브랜드 텍스트에 '부가기능'이라는 단어를 포함하지 않습니다.
  • 브랜드 텍스트는 몇 단어 이내로 작성해야 합니다.

Google Workspace Marketplace에서

게시를 위해 부가기능을 구성할 때 여러 그래픽 및 텍스트 애셋을 제공하여 Google Workspace Marketplace 등록정보를 빌드합니다.

스토어 등록정보의 모든 측면과 이러한 애셋은 브랜드 가이드라인을 준수해야 합니다.