편집자 부가기능 Apps Script를 사용하여 사용자 인터페이스 (메뉴, 사이드바, 대화상자)를 구축할 수 있습니다. HTML 서비스. 인터페이스가 HTML 및 CSS로 개발되었으며 맞춤설정이 용이합니다. 그러나 부가기능 인터페이스를 구축하려면 사용자가 편리한 경험을 할 수 있도록 경험해 볼 수 있습니다
최고의 애드온은 익숙한 컨트롤과 확인할 수 있습니다 새 부가기능을 빌드하는 경우:
- 부가기능 CSS 패키지를 HTML 서비스 페이지에서 사용할 수 있습니다.
- 디자인이 확실하지 않은 경우 편집기에서 유사한 대화상자나 사이드바를 찾고 일치하거나 부가기능 빠른 시작을 참조하세요.
- 이 스타일 가이드를 따라 매끄러운 경험을 만들어 보세요.
텍스트
부가기능 이름
게시할 때 부가기능 이름을 설정해야 합니다. 있습니다. 부가기능 스토어와 메뉴 등 여러 곳에 이름이 표시됩니다.
- 단어 첫 글자 대문자를 사용합니다.
- 브랜드의 일부가 아닌 경우 구두점, 특히 괄호는 사용하지 마세요.
- 최대한 짧게 작성하세요. 30자(영문 기준) 이하가 가장 좋습니다. 긴 이름은 자동으로 잘립니다.
- 부가기능이 적용되는 Google 제품의 이름을 포함하지 마세요 (또는 라고 합니다.
- 버전 정보는 생략합니다.
- 부가기능의 게시된 이름은 부가기능의 파일 이름과 동일해야 합니다. 스크립트 프로젝트를 만듭니다. 프로젝트 이름이 승인 대화상자에 표시됩니다.
금지사항 | 권장사항 |
---|---|
작성 스타일
많은 내용을 쓸 필요는 없습니다. 대부분의 작업은 아이콘, 레이아웃, 짧은 라벨을 사용하는 것이 좋습니다 부가기능의 일부분을 발견한 경우 짧은 라벨이 제공할 수 있는 것보다 더 광범위한 설명이 필요하지만 부가 기능을 설명하고 링크를 제공하는 별도의 웹 페이지를 만드는 것이 연습입니다.
UI 텍스트를 작성하는 경우:
- 첫 글자는 대문자로 표기합니다 (특히 버튼, 라벨, 메뉴 항목인 경우).
- 전문 용어나 두문자어를 사용하지 않고 짧고 간단한 텍스트를 사용하는 것이 좋습니다.
금지사항 | 권장사항 |
---|---|
|
|
설치 후 도움말
다른 사용자가 부가기능을 설치하는 즉시 설치 후 도움말이 표시됩니다. 도움말에 표시됩니다 사용자가 빠르게 시작할 수 있도록 몇 개의 문장으로 구성되어 있습니다.
- 액션 단어로 시작합니다.
- 부가기능 사용의 첫 번째 단계를 설명합니다.
- 사이드바와 같은 기본 UI가 있는 경우 이를 여는 방법을 설명합니다.
- 부가기능이 이미 설치되어 있으므로 여기에서 홍보하지 마세요.
금지사항 | 권장사항 |
---|---|
메뉴 항목
일반 Apps Script 프로젝트와 달리 부가기능은 스크립트 편집기에 표시되지 않음 또는 스크립트 관리자 사용자는 부가기능 스크립트를 직접 실행할 수 없습니다. 대신 해당 부가기능은 부가기능 메뉴에 표시됩니다. 메뉴 (및 경우에 따라 대화상자 또는 사이드바)를 사용하면 사용자가 부가기능과 상호작용할 수 있습니다
- 메뉴는 사용자가 부가기능을 제어하는 데 있어 핵심적인 부분이므로 신중하게 생각해야 합니다
- 단순히 부가기능의 이름을 반복하는 메뉴 항목은 사용하지 않습니다. 대신 작업 단어
- 기본 메뉴 항목이 워크플로를 시작하고 그에 해당하는 동사가 하나도 없는 경우 '시작'이라고 하겠습니다. 이 패턴은 Docs 부가기능 빠른 시작
- 메뉴에 항목이 6개 이상이 아닌 한 하위 메뉴를 사용하지 않는 것이 좋습니다. 사용자는 할 수 있습니다. 까다롭고 선택하기가 어렵습니다.
- 메뉴 항목이 표시하는 UI 구성요소가 아닌 작업을 설명합니다.
금지사항 | 권장사항 |
---|---|
오류 메시지
문제가 발생할 때는 평이한 언어를 사용하는 것이 중요합니다. 다음을 설명해 보세요. 문제를 해결하고 해결 방법을 제안합니다.
- 코드로 인해 발생한 예외를 사용자가 볼 수 없도록 합니다. 대신
try...catch
예외를 가로채서 사용자 친화적인 오류 메시지를 표시하는 명령문 인라인 텍스트가 부가기능 CSS의error
클래스 알림 대화상자를 사용합니다. - 게시하기 전에 부가기능이 디버그 정보를 로깅하지 않는지 확인하세요. JavaScript 콘솔 사용 Stackdriver Logging 하세요.
금지사항 | 권장사항 |
---|---|
헬프(도움말) 콘텐츠
모든 부가기능 메뉴에는 자동 도움말 대화상자가 포함되어 있습니다. 도움말 URL을 제공하는 경우 게시할 때 '자세히 알아보기' 버튼이 표시됩니다. 귀하가 별다른 설명이 필요하지 않습니다. 사용 방법을 설명하는 페이지를 제공해 주세요.
- 가능하면 글머리기호 또는 번호 매기기 목록으로 안내를 표시합니다. 걷기 사용자 명명된 UI 요소에 대한 명확한 참조를 포함하여 최종 결과에까지 전달됩니다.
- 안내에서 설정 등의 요구사항을 명확하게 설명해야 합니다. 스프레드시트를 특정 방식으로 사용합니다.
- 기본 사용자 인터페이스에서도 도움말 콘텐츠로 연결할 수 있습니다. 부가기능에서 새 문서를 생성하는 경우 문서 본문입니다.
맞춤 사용자 인터페이스
몇 가지 간단한 편집기 부가기능은 메뉴에서 전적으로 제어할 수 있지만 사이드바 또는 대화상자를 표시할 때 있습니다.
- 사이드바는 사람들이 꾸준히 사용할 만한 도구에 가장 적합합니다. 여러 번 반복해서 읽는 것처럼 보일 수 있습니다.
- 대화상자는 일회용 도구, 설정 페이지, 중요한 메시지에 적합합니다.
UI 텍스트
대화상자나 사이드바에서는 사람들이 제목과 버튼 라벨만 읽을 수 있다고 가정합니다. 사용자가 인터페이스 기능을 이해하고 적절한 선택을 할 수 있나요?
- 독자적인 제목과 버튼 라벨을 사용하세요.
- 긴 설명 텍스트 블록을 피하세요.
대화상자
대화상자는 사람들이 한 번 사용한 다음 계속 사용하는 도구에 적합합니다. 예를 들어 그래픽을 삽입할 수 있는 부가기능으로, 사용자가 직접 그래픽을 선택할 수 있는 그래픽이 삽입될 때 대화상자를 닫습니다. 대화상자는 부가기능의 설정을 표시하거나 중요한 메일입니다.
- 대화 상자를 열지 마세요 (예: 알림 또는 프롬프트가 있을 때만) 하나씩 표시합니다.
- 대화상자 제목의 경우 단어나 짧은 구문이 맨 앞에 오도록 합니다. 기억하시기 바랍니다.
- 버튼 라벨은 대화상자 제목과 관련이 있어야 합니다.
- 두 개의 버튼(일반적으로 기본 작업과 '취소')을 사용하는 것이 좋습니다. 특수한 경우 세 번째 버튼이 필요한 경우 오른쪽 하단을 고려하세요.
- 대화상자의 왼쪽 하단에 버튼을 배치합니다. 파란색 기본 버튼 왼쪽에, 회색 보조 버튼은 오른쪽에 있어야 합니다.
금지사항 | 권장사항 |
---|---|
메뉴
사이드바를 사용하면 사람들이 자신의 문서, 스프레드시트, 프리젠테이션을 다시 참조할 수 있습니다. 또는 양식을 사용하는 것입니다. 또한 사용자가 내 부가기능을 반복적으로 사용할 수도 있습니다. 새 사이드바가 열릴 때마다 이전 사이드바가 자동으로 닫힙니다. 완료 시 사용자가 종료하는 임시 모드에 가장 적합합니다.
- 사용자는 자체 사이드바가 있는 다른 부가기능을 보유할 수도 있습니다. 두 개의 부가기능이 사이드바를 동시에 열면 하나만 표시됩니다.
- 문서를 처음 열 때 사이드바 또는 대화상자를 표시하지 않습니다.
- 다음 지역에서 작동하는 부가기능만
AuthMode.FULL
사이드바 또는 대화상자를 열 수 있습니다. 메뉴 항목을 사용하여 사이드바가 표시됩니다.
컨트롤
훌륭한 부가기능 UI로 인해 컨트롤의 공간은 크게 바뀌지 않습니다. 적정 마진 및 조밀한 컨트롤은 부담스러워 보일 수 있습니다. 실내에 있을 때 편집기 자체에서 레이아웃을 빌려 쓰는 것이 좋습니다. 예를 들어 기존 Google Docs도구의 대화상자(예: 파일 > 페이지 설정(직접 만들 때)
부가기능 CSS 패키지 문서 은(는) 아래의 각 컨트롤 유형에 대한 샘플 마크업을 제공합니다.
버튼
단순하지 않고 버튼을 사용하여 사용자 인터페이스의 기본 작업을 제어하세요. 링크나 다른 요소를 포함할 수 있습니다.
- 파란색, 빨간색, 녹색 버튼을 한 번에 두 개 이상 표시하지 않습니다. 회색 버튼이 반복적으로 표시될 수 있습니다.
- 대부분의 버튼 라벨은 문장 첫 글자를 대문자로 표기하고 동사로 시작해야 합니다. 빨간색 버튼은 모두 대문자를 사용해야 합니다.
금지사항 | 권장사항 |
---|---|
|
|
체크박스 및 라디오 버튼
사용자가 여러 옵션을 선택할 수 있거나 옵션을 전혀 선택할 수 없을 때 체크박스를 사용합니다. 사용 정확히 1개의 옵션을 선택해야 하는 경우 라디오 버튼 또는 선택 메뉴
- 체크박스 변경 안함 라디오 버튼을 모방하도록 했습니다.
- 확인 즉시 아무 조치도 취하지 마세요. 사람은 실수를 합니다. 대기 사용자가 선택을 확인하기 위해 버튼을 클릭할 때까지
메뉴 선택
선택은 간단한 대안 목록을 제공하는 좋은 방법입니다.
- 옵션을 알파벳순 또는 모든 사용자가 사용할 수 있는 논리적 스키마별로 정렬합니다. (예: 일요일부터 시작하는 요일)
- 목록이 너무 길어지면 다른 컨트롤을 사용해 보세요. 예를 들어 스크롤 가능한 목록을 표시하여 메뉴에 더 많은 공간을 주고 더 쉽게 탐색할 수 있습니다
텍스트 영역
사용자가 몇 단어 이상을 입력해야 하는 경우 텍스트 영역을 사용하세요.
- 텍스트 영역의 높이를 최소 2줄 이상으로 만들어 사용하기 쉽도록 합니다. 텍스트 입력란처럼 보입니다.
- 상단에 라벨을 배치합니다.
입력란
사용자가 한두 단어만 입력해야 하는 경우 텍스트 입력란을 사용합니다.
- 텍스트 입력란의 너비는 사용자가 입력할 내용을 제안해야 합니다.
- 자리표시자 텍스트는 포커스가 있을 때 사라지므로 라벨로 사용하지 않습니다. 자리표시자 텍스트는 예 또는 추가 세부정보를 제공하는 데 유용합니다.
- 상단에 라벨을 배치하되 짧은 텍스트 입력란을 나란히 배치해도 됩니다.
브랜딩
부가기능에서
브랜딩을 포함하려면 짧고 간결하게 유지하세요. 이렇게 하면 UI에 집중하고 부가기능이 편집기의 일부인 것처럼 느끼게 합니다.
- 부가기능의 모든 측면은 브랜드 가이드라인을 따라야 합니다.
- 'Google'이라는 단어를 포함하거나 Google 제품 아이콘을 사용하지 않습니다.
- 텍스트는 몇 단어 이내여야 하며
부가기능 CSS의
gray
클래스 패키지에서 찾을 수 있습니다. - 그래픽은 흰색 배경에 200x60픽셀 이하여야 합니다.
- 대화상자의 경우 브랜딩은 오른쪽 하단에 있어야 합니다.
- 사이드바의 경우 브랜딩은 상단 또는 하단에 배치할 수 있습니다.
매장
편집자 부가기능을 게시하려면 다음 항목이 필요합니다. 이미지 확장 소재의 수 이러한 애셋은 부가기능 스토어 등록정보를 구성하는 데 사용됩니다.
접근성
색상을 보든 모든 사람이 부가기능을 즐길 수 있어야 합니다. 스크린 리더를 사용하거나 다른 요구사항이 있는 경우 접근성은 광범위합니다. 주제는 이 스타일 가이드에서 다루지 못할 수 있습니다 유용한 리소스 중 하나는 Google 접근성 사이트를 참고하세요. 여기서 시작하는 데 도움이 되는 몇 가지 팁을 소개합니다.
- 키보드를 사용하여 모든 UI 컨트롤로 이동할 수 있어야 합니다. 추가
tabindex=0
를 맞춤 컨트롤 (예:<div>
로 만든 컨트롤)에 추가하여 다른 사용자가 Tab 키를 눌러 이동합니다 화살표와 같은 다른 키도 지원해야 하는지 고려합니다. 목록을 확인하세요. - 일부 사용자는 부가기능에서 스크린 리더를 사용할 수 있습니다. 따라서 이미지는
있음
alt
속성, 사용자 지정 컨트롤은 ARIA 속성을 참고하세요. - 상태를 전달할 때 색상에만 의존하지 마세요. 아이콘과 텍스트도 사용하세요.
이 가이드의 앞부분에서 설명한 것과 같은 표준 웹 컨트롤을 사용하는 경우 부가기능의 접근성을 높일 수 있습니다