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

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

최고의 부가기능은 친숙한 컨트롤과 동작을 사용하여 각 편집기를 자연스럽게 확장합니다. 새 부가기능을 빌드할 때는 다음 사항에 유의하세요.

텍스트

부가기능 이름

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

  • 단어 첫 글자를 대문자로 표기합니다.
  • 브랜드의 일부가 아니라면 구두점, 특히 괄호를 사용하지 마세요.
  • 최대한 짧게 작성하십시오. 30자 이하가 가장 좋습니다. 긴 이름은 자동으로 잘릴 수 있습니다.
  • 부가기능이 적용되는 Google 제품의 이름을 포함하지 마세요 (또는 Google이라는 단어 사용).
  • 버전 정보는 생략합니다.
  • 부가기능의 게시된 이름이 스크립트 프로젝트의 파일 이름과 동일한지 확인합니다. 승인 대화상자에 프로젝트 이름이 표시됩니다.
금지사항 권장사항
잘못된 부가기능 이름 적합한 부가기능 이름

작성 스타일

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

UI 텍스트를 작성할 때:

  • (특히 버튼, 라벨, 메뉴 항목의 경우) 문장 첫 글자를 대문자로 표기합니다.
  • 전문 용어나 약어가 없는 짧고 간단한 텍스트를 선호합니다.
금지사항 권장사항

설치 후 팁

설치 후 팁은 사용자가 부가기능을 설치한 직후에 표시되며 도움말에도 표시됩니다. 사용자가 빠르게 시작하는 데 도움이 되는 몇 개의 문장이 있습니다.

  • 행동 하는 말로 시작하세요.
  • 부가기능을 사용하기 위한 첫 번째 단계를 설명합니다.
  • 사이드바와 같은 기본 UI가 있는 경우 여는 방법을 설명합니다.
  • 부가기능은 이미 설치되었으므로 여기에서 홍보하지 마세요.
금지사항 권장사항
잘못된 설치 후 도움말 유용한 설치 후 팁

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

  • 메뉴는 사용자가 부가기능을 제어하는 주요 부분이므로 메뉴 구조와 문구는 신중하게 디자인해야 합니다.
  • 부가기능의 이름을 단순히 반복하는 메뉴 항목은 사용하지 않습니다. 대신 행동에 관한 단어로 시작하세요.
  • 기본 메뉴 항목에서 워크플로를 시작하는데 이 워크플로의 작업을 설명하는 동사가 하나도 없으면 '시작'이라고 합니다. 이 패턴은 문서 부가기능 빠른 시작에서 사용됩니다.
  • 메뉴에 항목이 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 속성이 있어야 합니다.
  • 상태를 전달하기 위해 색상에만 의존하지 마세요. 아이콘과 텍스트도 사용하세요.

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