편집기 부가기능용 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의 기존 대화상자를 검토할 수 있습니다.

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

버튼

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

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

체크박스 및 라디오 버튼

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

  • 라디오 버튼을 모방하도록 체크박스 동작을 변경하지 마세요.
  • 확인 후 즉시 취해야 할 조치는 없습니다. 사람들은 실수를 합니다. 사용자가 버튼을 클릭하여 선택을 확인할 때까지 기다립니다.

메뉴 선택

선택 항목을 사용하면 짧은 추천 목록을 제시할 수 있습니다.

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

텍스트 영역

사용자가 단어를 여러 개 입력해야 한다면 텍스트 영역을 사용하세요.

  • 텍스트 영역의 높이를 최소 2줄로 만들어서 사용하기 쉽고 텍스트 입력란처럼 보이지 않도록 하세요.
  • 상단에 라벨을 배치합니다.

입력란

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

  • 텍스트 필드의 너비로 인해 사용자가 입력할 것으로 예상되는 내용이 제안되어야 합니다.
  • 자리표시자 텍스트는 포커스에서 사라질 수 있으므로 라벨로 사용하지 마세요. 자리표시자 텍스트는 예 또는 추가 세부정보를 제공하는 데 유용합니다.
  • 라벨을 위에 배치하되 짧은 텍스트 입력란을 나란히 배치해도 됩니다.

브랜드 소개

부가기능

브랜딩을 넣으려면 간결하고 가볍게 유지합니다. 이렇게 하면 사용자가 UI에 집중하는 데 도움이 되며 부가기능이 편집기의 일부인 것처럼 느껴집니다.

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

스토어

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

접근성

색이 다르게 표시되거나, 스크린 리더를 사용하거나, 다른 요구사항이 있는 경우 등 모두가 부가기능을 사용할 수 있어야 합니다. 접근성은 이 스타일 가이드에서 다루지 못하는 광범위한 주제입니다. 유용한 리소스 중 하나는 Google 접근성 사이트입니다. 하지만 시작하기 위한 몇 가지 팁을 소개합니다.

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

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