Google 스프레드시트에서 사이드바를 만드는 방법

사이드바는 관련 정보나 선택 목록 또는 탐색 옵션을 표시하기 위해 더 큰 창의 왼쪽이나 오른쪽이나 사용자 화면에 나타나는 사용자 인터페이스 요소(작은 수직 영역)입니다.

Google 시트의 사이드바는 Google 스프레드시트의 오른쪽에 표시되는 사용자 인터페이스 패널입니다. Google은 G-Suite 애플리케이션을 위한 다양한 추가 기능과 요소를 만들 수 있는 Apps Script라는 내장 스크립트 편집기를 제공합니다. 또한 Google 시트에서 사용자 정의 사이드바를 만드는 데 사용할 수도 있습니다.

이 문서에서는 Google Apps Script 편집기를 사용하여 Google 스프레드시트에서 맞춤 사이드바를 만드는 방법을 보여줍니다.

Apps Script를 사용하여 Google 스프레드시트에서 사이드바 만들기

사용자 정의 사이드바를 만들고 싶다면 Apps Script 편집기에서 특정 코드를 입력하고 실행해야 합니다. 그런 다음 HTML, CSS 및 Javascript 코드를 사용하여 사이드바 내에서 자신만의 위젯을 구축할 수 있습니다.

먼저 Google 시트를 엽니다. Google 시트 메뉴에서 '도구'를 클릭하고 '스크립트 편집기'를 선택합니다.

그러면 사용자 인터페이스 코드를 작성할 수 있는 브라우저의 새 탭에서 Apps Script 편집기가 열립니다.

Code.gs 페이지에 다음 코드를 작성합니다.

function onOpen() { SpreadsheetApp.getUi() .createMenu('내 새 메뉴') .addItem('내 사이드바 1', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('사이드바') .setTitle('계산 사이드바'); SpreadsheetApp.getUi() .showSidebar(html); }

위의 Code.gs 스크립트 코드에서 OnOpen() 함수는 Google 시트 메뉴 모음에 '내 새 메뉴'라는 사용자 지정 메뉴를 만듭니다. 해당 메뉴에는 '내 사이드바-1'이라는 메뉴 항목이 포함됩니다. 이 메뉴 항목을 클릭하면 showAdminSidebar() 함수(코드의 두 번째 부분)가 실행되고 사이드바가 Google 시트 창의 오른쪽에 표시됩니다.

다음으로 스크립트 편집기에서 HTML 파일을 생성해야 하며 이 파일로 사이드바를 생성할 수 있습니다.

HTML 파일을 생성하려면 Apps Script 편집기에서 파일 옆에 있는 더하기(+) 아이콘을 클릭하고 'HTML'을 선택합니다.

Code.gs 아래에 HTML 파일이 생성됩니다. 파일 이름을 '사이드바'로 바꿉니다. 이 이름은 showSidebar() 함수(var html = HtmlService.createHtmlOutputFromFile('Sidebar'))에 추가된 이름과 같아야 합니다.

Sidebar.html 파일의 섹션에 다음 코드를 작성합니다.

 이것은 나의 새로운 사이드바입니다.

위의 코드는 'This is my new Sidebar'라는 텍스트 문자열과 클릭하면 사이드바를 닫는 '닫기' 버튼을 표시합니다.

Sidebar.html 섹션에서 위의 코드 작성을 마치면 다음 코드가 포함되어야 합니다.

 이것은 나의 새로운 사이드바입니다.

스크린샷:

두 코드를 모두 입력했으면 도구 모음에서 저장 아이콘을 클릭하여 프로젝트를 저장합니다(아래 스크린샷 참조). 그런 다음 '실행' 아이콘을 클릭하여 기능을 실행합니다.

여기에서 스크립트를 실행하든 Google 시트 도구 모음에서 사용자 정의 메뉴 항목을 선택하든(처음으로) Google은 스크립트 실행을 승인하도록 요청할 것입니다. 타사 맞춤 위젯을 실행 중이므로 Google에서 승인을 요청할 것입니다. 스크립트를 승인하면 Google 시트에 사이드바가 표시됩니다.