이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

편집자 부가기능 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 속성을 참고하세요.
상태를 전달할 때 색상에만 의존하지 마세요. 아이콘과 텍스트도 사용하세요.

이 가이드의 앞부분에서 설명한 것과 같은 표준 웹 컨트롤을 사용하는 경우 부가기능의 접근성을 높일 수 있습니다