편집기 부가기능용 UI 스타일 가이드

컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

편집기 부가기능은 Apps Script의 HTML 서비스를 사용하여 사용자 인터페이스 (메뉴, 사이드바, 대화상자)를 빌드합니다. 인터페이스는 HTML 및 CSS로 개발되기 때문에 맞춤설정이 매우 쉽습니다. 그러나 부가기능 인터페이스를 빌드할 때는 훌륭한 사용자 환경을 제공하도록 설계해야 합니다.

최고의 부가기능은 익숙한 컨트롤과 동작을 사용하여 각 편집기를 자연스럽게 확장합니다. 새 부가기능을 빌드하는 경우:

텍스트

부가기능 이름

부가기능의 이름을 게시할 때 이름을 설정해야 합니다. 이 부가기능은 부가기능 스토어와 메뉴 등 여러 위치에 표시됩니다.

  • 단어 첫 글자를 대문자로 표시합니다.
  • 브랜드의 일부가 아닌 경우 구두점, 특히 괄호를 사용하지 않습니다.
  • 30자(영문 기준) 이하로 입력하세요. 긴 이름은 자동으로 잘릴 수 있습니다.
  • 부가기능이 있는 Google 제품의 이름을 포함하지 마세요 (또는 Google이라는 단어를 사용).
  • 버전 정보는 표시하지 않습니다.
  • 부가기능의 게시된 이름이 스크립트 프로젝트의 파일 이름과 동일한지 확인합니다. 프로젝트 이름이 승인 대화상자에 표시됩니다.
금지사항 해야 할 일
잘못된 부가기능 이름 적절한 부가기능 이름

작성 스타일

별로 쓰지 않아도 됩니다. 아이콘, 레이아웃, 짧은 라벨을 통해 대부분의 작업을 명확하게 나타내야 합니다. 부가기능의 일부에 짧은 라벨이 제공하는 것보다 더 자세한 설명이 필요하다면 해당 부가기능 및 링크를 설명하는 별도의 웹페이지를 만드는 것이 좋습니다.

UI 텍스트를 작성하는 경우:

  • 문장 첫 글자 대문자 (특히 버튼, 라벨, 메뉴 항목)
  • 전문 용어나 약어가 없는 짧고 간단한 텍스트를 사용하는 것이 좋습니다.
금지사항 해야 할 일

설치 후 도움말

설치 후 도움말은 사용자가 부가기능을 설치한 직후에 표시되며 도움말에도 표시됩니다. 사용자가 빠르게 시작할 수 있도록 몇 가지 문장이 있습니다.

  • 작업 문구로 시작합니다.
  • 부가기능 사용을 위한 첫 번째 단계를 설명합니다.
  • 사이드바 같은 기본 UI가 있다면 이를 여는 방법을 설명합니다.
  • 부가기능은 이미 설치되어 있으므로 여기에서 홍보하지 마세요.
금지사항 해야 할 일
잘못된 설치 후 도움말 적절한 설치 후 도움말

일반 Apps Script 프로젝트와 달리 부가기능은 스크립트 편집기 또는 스크립트 관리자에 표시되지 않습니다. 사용자는 부가기능 스크립트를 직접 실행할 수 없습니다. 대신 모든 부가기능은 부가기능 메뉴에 표시됩니다. 메뉴 (또는 대화상자 또는 사이드바)를 통해 사용자가 부가기능과 상호작용할 수 있습니다.

  • 메뉴는 사용자가 부가기능을 제어하는 방식의 핵심 부분이므로 구조와 문구를 신중하게 설계합니다.
  • 부가기능의 이름을 반복하는 메뉴 항목은 사용하지 않습니다. 대신 작업어로 시작합니다.
  • 기본 메뉴 항목에 워크플로가 시작되었고 워크플로의 기능을 설명하는 단일 동사가 없는 경우 '시작'이라고 합니다. 이 패턴은 Docs 부가기능 빠른 시작에서 사용됩니다.
  • 메뉴에 6개 이상의 항목이 없다면 하위 메뉴를 사용하지 마세요. 까다롭고 선택하기 어려울 수 있습니다.
  • 메뉴 항목이 표시하는 UI 구성요소가 아닌 작업을 설명합니다.
금지사항 해야 할 일
잘못된 메뉴 항목 라벨 우수한 메뉴 항목 라벨

오류 메시지

문제가 발생할 때는 평이한 언어를 사용하는 것이 중요합니다. 사용자의 관점에서 문제를 설명하고 해결 방법을 제안합니다.

  • 코드에서 발생하는 예외를 사용자에게 보여주지 마세요. 대신 try...catch 문을 사용하여 예외를 가로채고 부가기능 CSS 패키지 또는 알림 대화상자의 error 클래스에서 스타일이 지정된 인라인 텍스트가 포함된 사용자 프라이리 오류 메시지를 표시합니다.
  • 게시하기 전에 부가기능이 자바스크립트 콘솔에 디버그 정보를 로깅하지 않는지 확인합니다. 대신 Stackdriver Logging을 사용합니다.
금지사항 해야 할 일
잘못된 오류 메시지 좋은 오류 메시지

헬프(도움말) 콘텐츠

모든 부가기능 메뉴에는 자동 도움말 대화상자가 포함되어 있습니다. 게시할 때 도움말 URL을 제공하면 '자세히 알아보기' 버튼이 해당 페이지로 연결됩니다. 부가기능이 별다른 설명이 없는 한 부가기능 사용 방법을 설명하는 페이지를 제공해 주세요.

  • 가능하면 글머리기호 또는 번호 매기기 목록으로 안내를 표시하세요. 이름이 지정된 UI 요소를 명확하게 언급하여 최종 결과로 사용자를 안내합니다.
  • 안내에 따라 특정한 방식으로 스프레드시트 설정과 같은 요구사항을 명확히 설명합니다.
  • 언제든지 기본 사용자 인터페이스의 도움말 콘텐츠로 링크할 수 있습니다. 부가기능이 새 문서를 만드는 경우 문서 본문에 안내를 표시할 수도 있습니다.

맞춤 사용자 인터페이스

일부 간단한 편집기 부가기능은 메뉴에서 완전히 제어할 수 있지만 대부분 맞춤 콘텐츠가 포함된 사이드바 또는 대화상자가 표시됩니다.

  • 사이드바는 사용자가 문서나 스프레드시트의 내용을 언급하면서 반복적으로 사용할 가능성이 높은 영구 도구에 가장 적합합니다.
  • 대화상자는 일회용 도구, 설정 페이지, 중요한 메시지에 적합합니다.

UI 텍스트

모든 대화상자 또는 사이드바에서 제목 및 버튼 라벨만 읽으면 됩니다. 그럼에도 불구하고 플레이어가 인터페이스에서 무엇을 할지 파악하여 좋은 선택을 할 수 있을까요?

  • 단독으로 표시되는 제목과 버튼 라벨을 사용합니다.
  • 설명 텍스트의 긴 블록은 사용하지 마세요.

대화상자

대화상자는 사용자가 한 번 사용한 다음 계속 진행할 때 적합합니다. 예를 들어 사용자가 그래픽을 삽입하도록 허용하는 부가기능이 있다면 삽입할 내용을 선택할 수 있는 대화상자를 표시한 후 그래픽을 삽입할 때 대화상자를 닫을 수 있습니다. 대화상자는 부가기능의 설정을 표시하거나 중요한 메시지를 전달하는 데도 유용합니다.

  • 다른 대화상자에서 대화상자 (알림 또는 메시지 포함)를 열지 말고 한 번에 하나씩만 표시합니다.
  • 대화상자 제목에는 단어나 짧은 문구를 사용합니다. 가장 중요한 단어로 시작할 수 있습니다.
  • 버튼 라벨은 대화상자 제목과 관련이 있어야 합니다.
  • 주로 기본 작업과 '취소' 버튼 두 개를 선호합니다. 세 번째 버튼이 필요한 특수한 사례의 경우 오른쪽 하단을 고려하세요.
  • 대화상자의 왼쪽 하단에 버튼을 배치합니다. 파란색 기본 버튼은 왼쪽에, 회색 보조 버튼은 오른쪽에 있어야 합니다.
금지사항 해야 할 일
잘못된 대화상자 제목 좋은 대화상자 제목

사이드바를 사용하면 사용자가 선택하는 동안 문서, 스프레드시트, 프레젠테이션 또는 양식을 다시 참조할 수 있습니다. 또한 사용자가 부가기능을 반복적으로 사용할 수도 있습니다. 새 사이드바가 열릴 때마다 이전 사이드바가 자동으로 닫힙니다. 완료 시 사용자가 종료하는 임시 모드에 가장 적합합니다.

  • 사용자에게 자체 사이드바가 있는 다른 부가기능이 있을 수 있습니다. 두 개의 부가기능이 사이드바를 동시에 열려고 하면 한 개만 표시됩니다.
  • 문서를 처음 열 때 사이드바나 대화상자를 표시하지 않습니다.
  • AuthMode.FULL에서 작동하는 부가기능만 사이드바 또는 대화상자를 열 수 있습니다. 메뉴 항목을 사용하여 사이드바를 열 수 있습니다. 사이드바를 클릭하면 전체 승인을 요청하는 메시지가 표시됩니다.

관리

뛰어난 부가기능 UI를 사용하면 일부 제어 기능이 더 안전해집니다. 적절한 여백과 패딩은 큰 도움이 되지만 밀집된 컨트롤은 어려워 보일 수 있습니다. 의심스러운 경우 편집기 자체에서 레이아웃을 빌려 보세요. 예를 들어 나만의 대화상자를 만들 때 Google Docs에 있는 File > Page setup과 같은 기존 대화상자를 검토합니다.

부가기능 CSS 패키지 문서에서는 아래의 각 컨트롤 유형에 관한 샘플 마크업을 제공합니다.

버튼

버튼을 사용하여 일반 링크나 다른 요소 대신 사용자 인터페이스의 기본 작업을 제어합니다.

  • 파란색, 빨간색 또는 녹색 버튼을 한 번에 두 개 이상 표시하지 않습니다. 회색 버튼이 반복적으로 표시될 수 있습니다.
  • 대부분의 버튼 라벨은 첫 글자로 시작하고 동사로 시작해야 합니다. 일반적으로 만들기 작업의 경우 빨간색 버튼은 모두 대문자로 표시해야 합니다.
금지사항 해야 할 일

체크박스 및 라디오 버튼

사용자가 여러 옵션을 선택할 수 있거나 전혀 선택할 수 없는 경우 체크박스를 사용합니다. 정확히 1개의 옵션을 선택해야 하는 경우 라디오 버튼 (또는 선택 메뉴)을 사용하세요.

  • 라디오 버튼을 모방하도록 체크박스 동작을 변경해서는 안 됩니다.
  • 확인되는 즉시 아무런 작업도 하지 마세요. 사람들은 실수를 합니다. 사용자가 버튼을 클릭하여 선택을 확인할 때까지 기다리세요.

메뉴 선택

선택은 짧은 대안을 제시하는 좋은 방법입니다.

  • 알파벳순으로 또는 모든 사용자가 이해할 수 있는 논리적 스킴 (예: 요일, 일요일부터)을 기준으로 옵션을 정렬합니다.
  • 목록이 너무 길어지면 다른 컨트롤을 사용해 보세요. 예를 들어 스크롤 가능한 목록을 표시하여 메뉴에 더 많은 공간을 제공하고 더 쉽게 탐색할 수 있습니다.

텍스트 영역

사용자가 여러 단어 이상으로 입력해야 하는 경우 텍스트 영역을 사용하세요.

  • 텍스트 영역을 2줄 이상으로 만들어서 더 사용하기 쉽고 텍스트 입력란처럼 보이지 않게 합니다.
  • 라벨을 상단에 배치합니다.

입력란

사용자가 한두 단어만 입력하면 되는 텍스트 입력란을 사용하세요.

  • 텍스트 너비는 사용자가 입력할 것으로 예상되는 내용을 나타냅니다.
  • 자리표시자 텍스트는 라벨로 사용되기 때문에 라벨로 사용하지 마세요. 자리표시자 텍스트는 예제 또는 추가 세부정보를 제공하는 데 유용합니다.
  • 라벨을 위에 배치하되 짧은 텍스트 필드를 나란히 배치할 수 있습니다.

브랜드 소개

부가기능

브랜딩을 포함하려면 가볍고 간결하게 작성하세요. 이렇게 하면 사용자가 UI에 집중할 수 있으며 부가기능이 편집기의 일부인 것처럼 느껴집니다.

  • 부가기능의 모든 측면은 브랜딩 가이드라인을 따라야 합니다.
  • 'Google'이라는 단어를 포함하거나 Google 제품 아이콘을 사용하지 않습니다.
  • 텍스트는 몇 단어 이하여야 하며 부가기능 CSS 패키지의 gray 스타일로 지정되어야 합니다.
  • 그래픽은 흰색 배경에 200px × 60px 이하여야 합니다.
  • 대화상자의 경우 오른쪽 하단에 브랜딩이 있어야 합니다.
  • 사이드바의 경우 브랜딩이 상단이나 하단에 위치할 수 있습니다.

스토어

편집자 부가기능을 게시하려면 이미지 애셋 수가 필요합니다. 이러한 애셋은 부가기능 스토어 등록정보를 구성하는 데 사용됩니다.

접근성

색상이 다르게 표시되거나, 스크린 리더를 사용하거나, 다른 요구사항이 있는 경우 누구나 누구나 부가기능을 사용할 수 있어야 합니다. 접근성은 이 스타일 가이드에서 완전히 다룰 수 없는 광범위한 주제입니다. 유용한 리소스 중 하나는 Google 접근성 사이트입니다. 다음은 시작하기 위한 몇 가지 도움말입니다.

  • 키보드로 모든 UI 컨트롤로 이동할 수 있는지 확인합니다. 사용자가 이를 탭할 수 있도록 맞춤 컨트롤 (예: <div>로 만든 컨트롤)에 tabindex=0를 추가합니다. 목록의 화살표와 같은 다른 키도 지원해야 하는지 고려합니다.
  • 부가기능에 스크린 리더를 사용하는 사용자가 있을 수 있습니다. 따라서 이미지에는 alt 속성이 있어야 하며 맞춤 컨트롤에는 사용법을 설명하는 ARIA 속성이 있어야 합니다.
  • 상태를 나타내는 데 색상에만 의존하지 마세요. 아이콘과 텍스트도 사용하세요.

이 가이드의 앞부분에서 설명한 것과 같은 표준 웹 컨트롤을 사용하면 부가기능에 더 쉽게 액세스할 수 있습니다.