GSP235

개요

이 실습에서는 대표적인 주류 웹 개발 언어인 JavaScript를 활용하여 Google 개발자 기술에 액세스하는 가장 쉬운 코드 작성 방법을 소개합니다. Google Apps Script를 사용하여 Google 시트의 셀에 있는 주소를 추출하고, 이 주소를 기반으로 Google 지도를 생성하고, Gmail을 사용하여 본인이나 친구에게 지도 링크를 전송하는 코드를 작성합니다. 무엇보다도 좋은 점은 단 4줄의 코드만 작성하면 된다는 것입니다.

목표

• Apps Script를 시작하는 데 필요한 최소한의 지식 알아보기
• 새 Google Sheets 스프레드시트 만들기
• 문서의 스크립트 편집기를 여는 방법 알아보기
• Apps Script 코드 수정, 저장, 실행하기
• Gmail을 사용하여 결과 확인하기

권장 경험

다음 지식이 있으면 학습 경험을 향상할 수 있습니다.

• 기본 JavaScript 기술(도움이 되지만 필수는 아님)
• 기본 스프레드시트 기술

설정 및 요건

실습 시작 버튼을 클릭하기 전에

다음 안내를 확인하세요. 실습에는 시간 제한이 있으며 일시중지할 수 없습니다. 실습 시작을 클릭하면 타이머가 시작됩니다. 이 타이머는 Google Cloud 리소스를 사용할 수 있는 시간이 얼마나 남았는지를 표시합니다.

실무형 실습을 통해 시뮬레이션이나 데모 환경이 아닌 실제 클라우드 환경에서 실습 활동을 진행할 수 있습니다. 실습 시간 동안 Google Cloud에 로그인하고 액세스하는 데 사용할 수 있는 새로운 임시 사용자 인증 정보가 제공됩니다.

이 실습을 완료하려면 다음을 준비해야 합니다.

• 표준 인터넷 브라우저 액세스 권한(Chrome 브라우저 권장)

참고: 이 실습을 실행하려면 시크릿 모드(권장) 또는 시크릿 브라우저 창을 사용하세요. 개인 계정과 학습자 계정 간의 충돌로 개인 계정에 추가 요금이 발생하는 일을 방지해 줍니다.

• 실습을 완료하기에 충분한 시간(실습을 시작하고 나면 일시중지할 수 없음)

참고: 이 실습에는 학습자 계정만 사용하세요. 다른 Google Cloud 계정을 사용하는 경우 해당 계정에 비용이 청구될 수 있습니다.

실습 시작

1. 준비가 되면 실습 시작을 클릭합니다.

   이 실습에서 Gmail에 로그인하는 데 사용해야 하는 임시 사용자 인증 정보가 '실습 세부정보' 창에 표시됩니다.

   실습 비용을 결제해야 하는 경우 결제 수단을 선택할 수 있는 팝업이 열립니다.

2. Google Sheets 열기를 클릭합니다.

   실습에서 리소스가 가동되면 다른 탭이 열리고 로그인 페이지가 표시됩니다.

   팁: 두 개의 탭을 각각 별도의 창으로 나란히 여세요.

3. 필요한 경우 아래의 사용자 이름을 복사하여 로그인 대화상자에 붙여넣습니다.

   {{{user_0.username | "Username"}}}

4. 다음을 클릭합니다.

5. 아래의 비밀번호를 복사하여 시작하기 대화상자에 붙여넣습니다.

   {{{user_0.password | "Password"}}}

6. 다음을 클릭합니다.

7. 안내에 따라 모든 이용약관에 동의합니다.

Google Sheets가 열리고 학생 Google 계정에 로그인됩니다.

Google Apps Script란 무엇인가요?

Google Apps Script의 개발 환경은 여러분이 평소에 사용하던 것과 다를 수 있습니다. Apps Script를 사용하면 다음 작업을 할 수 있습니다.

• 브라우저 기반 코드 편집기에서 개발하되, Apps Script의 명령줄 배포 도구인 clasp를 사용하는 경우 로컬에서 개발 가능
• Workspace 및 기타 Google 서비스 또는 외부 서비스(URLfetch, JDBC 등)에 액세스하도록 맞춤설정된 특수 버전 JavaScript로 코드 작성
• 승인 코드를 Apps Script에서 알아서 처리하므로 직접 작성할 필요 없음
• 앱 호스팅 불필요 - 앱은 클라우드의 Google 서버에서 실행됨

참고: Apps Script 교육은 이 실습의 범위를 벗어납니다. 이를 위한 다양한 온라인 리소스가 있습니다. 공식 문서에서는 빠른 시작이 포함된 개요, 튜토리얼, 동영상을 찾아볼 수 있습니다. 이 실습에서는 코드를 손쉽게 작성하고 이를 이용해 빌드할 수 있는 애플리케이션의 유형을 생각해 볼 수 있도록 Apps Script 개발 환경을 소개합니다.

Apps Script 애플리케이션은 다음 두 가지 형식 중 하나로 제공됩니다.

1. 결합형: 영구적이며 단일 Google 문서(문서, 시트, 슬라이드, 사이트, 양식)에만 연결됩니다.
2. 독립형: Google Sheets, Docs, Slides, Forms 파일 또는 Google Sites에 결합되지 않은 독립적인 스크립트입니다.

결합형 앱과 독립형 앱은 더 광범위하게 노출되도록 게시할 수도 있습니다.

• 게시되지 않음 - 비공개 상태로 유지되며 프로젝트 소유자만 액세스할 수 있음
• 부가기능으로 게시됨 - 앱을 부가기능 스토어에서 설치할 수 있음
• 웹 앱으로 게시됨 - 앱이 HTTP 요청을 처리하며 웹 UI 구성요소가 있음
• Google Sites에 삽입됨 - 게시된 웹 앱을 새 Sites 또는 기존 Sites 페이지에 삽입할 수 있음
• API 실행 파일로 게시됨 - Execution API를 통해 앱에 액세스할 수 있음
• 위 유형의 유효한 조합

첫 번째 Apps Script 앱은 Google 시트에 결합되어야 합니다. 이제 새 스프레드시트를 만들 차례입니다.

작업 1. 새 Google 시트를 만들고 상세 주소 입력하기

다음 안내에 따라 새 Google 시트에 상세 주소를 입력합니다.

1. 새 시트를 만들려면 Google Sheets를 엽니다.
2. 빈 스프레드시트에서 왼쪽 상단의 첫 번째 셀(A1)을 클릭합니다. A1은 A열 1행에 있습니다.
3. 이 셀에 주소를 입력합니다. 우편번호나 도시 및 주/도와 같은 상세 위치가 포함된 유효한 세계 어느 곳의 주소를 선택합니다(예: 76 9th Ave, New York).

시트에서 해야 할 작업은 모두 끝났습니다. 이제 편집기에서 코드를 작성할 준비가 되었습니다.

내 진행 상황 확인하기를 클릭하여 위 작업을 올바르게 수행했는지 확인합니다.

새 Google 시트를 만들고 상세 주소 입력하기

작업 2. Apps Script 열기

Apps Script는 Sheets에 결합된 스크립트를 만드는 데 사용할 코드 편집기를 제공합니다.

• 상단 메뉴 바에서 확장 프로그램 > Apps Script를 선택합니다.

Apps Script가 열립니다. 오른쪽에 있는 코드 편집기 창을 주목하세요.

myFunction()이라는 기본 함수가 자동으로 생성되었으며 편집기에 표시됩니다. 이제 애플리케이션을 작성할 준비가 되었습니다.

작업 3. (템플릿) 코드 수정하기

1. Code.gs 파일은 '템플릿' 코드를 제공하기만 하며 별다른 작업을 수행하지 않습니다. 아래 코드를 복사하고 편집기 창에 붙여넣어 템플릿 코드를 바꿉니다. 그런 다음 <YOUR_EMAIL>을 실습에서 제공한 사용자 이메일로 업데이트합니다.

function sendMap() { var sheet = SpreadsheetApp.getActiveSheet(); var address = sheet.getRange("A1").getValue(); var map = Maps.newStaticMap().addMarker(address); GmailApp.sendEmail("<YOUR_EMAIL>", "Map", 'See below.', {attachments:[map]}); }

2. 이 앱이 사용자의 모든 시트가 아닌 지금 작업 중인 시트에만 액세스하도록, 사용자들이 안심할 수 있게 다음 주석을 파일 수준 주석으로 추가합니다.

/** * @OnlyCurrentDoc */

수고하셨습니다. 선택사항인 주석을 제외하면 4줄로 된 앱인 sendMap()을 만들었습니다.

이 실습 중에 이메일 메시지를 확인할 수 있도록 <YOUR_EMAIL>을 이 실습에서 제공된 사용자 이메일로 바꾸는 것을 잊지 마세요.

편집기에서 코드를 바꾸면 파일 이름 왼쪽에 빨간색 원이 표시되는 것을 보셨나요?

파일을 수정했으니 저장해야 한다는 뜻입니다. 이 빨간색 원은 저장되지 않은 수정사항이 있을 때마다 표시됩니다.

3. 프로젝트를 저장하고 이름을 지정합니다. 'Hello Maps!' 같은 원하는 이름을 지정하면 됩니다. 프로젝트 저장 아이콘을 클릭하여 파일을 저장합니다.

Ctrl+S(PC, Linux) 또는 Command+S(Mac)를 눌러도 됩니다. 계속하려면 프로젝트 이름을 지정해야 합니다.

작업 4. Google Sheets, 지도, Gmail 앱 실행하기

생성한 앱을 실행하려면 다음 단계를 따르세요.

1. 함수 이름이 sendMap()으로 변경되었으니, 실행할 함수로 sendMap을 선택합니다.

2. 코드 편집기 메뉴 바에서 실행을 클릭하여 sendMap() 함수를 실행합니다.

승인 코드는 Apps Script가 관리하므로 직접 작성할 필요가 없습니다. 단, 스크립트가 사용자의 시트에 액세스하고 사용자를 대신해 Gmail을 통해 이메일을 보낼 수 있도록 권한을 부여해야 합니다. 첫 번째 승인 대화상자는 다음과 같습니다.

3. 권한 검토를 클릭합니다.
4. 메시지가 표시되면 계정(실습의 실습 세부정보 패널에 있는 사용자 이름)을 선택합니다.

5. 앱이 Google 계정에 액세스할 수 있는지를 묻는 다음 대화상자에서 허용을 클릭합니다.

권한을 부여한 후에는 스크립트가 완료될 때까지 실행됩니다.

6. 왼쪽으로 마우스를 가져가 실행을 클릭하면 sendMap이 표시됩니다. 메시지가 표시되면 대시보드 보기를 클릭합니다.

7. 왼쪽 실습 패널에 표시된 Gmail 열기 버튼을 클릭합니다.

8. 계정 선택 대화상자에서 학생 사용자 이름을 입력하고 다음을 클릭합니다.

9. 실습에서 제공된 비밀번호를 입력하고 다음을 클릭합니다.

10. 동의를 클릭하여 약관에 동의합니다.

Gmail로 이동하여 받은편지함을 확인합니다. 제목이 'Map'이고 메일 본문이 다음과 같은 메시지가 있을 것입니다.

내 진행 상황 확인하기를 클릭하여 위 작업을 올바르게 수행했는지 확인합니다.

Google Sheets, 지도, Gmail 앱 실행하기

이 코드는 완전한 애플리케이션은 아니지만, 세 가지 Google 제품에 의미 있는 방식으로 액세스하는 4줄의 코드입니다. JavaScript나 Apps Script에 익숙하지 않더라도 코드를 읽고 코드가 작동하는 방식과 Apps Script로 할 수 있는 일을 대략적으로 파악할 수 있을 것입니다.

작업 5. 앱 - 자세한 설명

이 섹션에서는 코드를 자세히 검토합니다.

이 애플리케이션은 짧기 때문에 달리 살펴볼 만한 코드 구조는 없습니다. 대신 이 섹션에서는 세 가지 Google 제품을 사용하는 이 앱의 모든 줄을 검토합니다.

다음은 sendMap()의 일반적인 JavaScript 함수 선언입니다.

function sendMap() {

첫 번째 코드 줄은 SpreadsheetApp 객체를 통해 Apps Script에서 액세스할 수 있는 스프레드시트 서비스를 호출합니다. 반환된 시트는 동일한 이름의 변수에 할당됩니다.

getActiveSheet() 메서드는 이름에서 알 수 있듯이 사용자 인터페이스(UI)에서 활성 상태인 현재 시트의 '핸들'을 반환합니다.

var sheet = SpreadsheetApp.getActiveSheet();

sheet 객체를 사용하여, getRange()를 이용해 A1 표기법으로 단일 셀의 셀 범위를 참조합니다. '범위'는 셀 그룹으로, 사용자가 주소를 입력한 셀인 A1과 같은 단일 셀도 범위에 해당합니다.

이제 getValue() 호출을 사용하여 해당 셀 범위 내에 있는 값을 가져온 다음 반환하여 address 변수에 할당합니다. 다른 셀에 주소를 더 추가하고 읽어 봅니다.

var address = sheet.getRange("A1").getValue();

세 번째 줄은 Maps 객체를 통해 Google 지도 서비스에 연결합니다. 지도 서비스에 액세스할 수 있게 되면 newStaticMap()을 통해 새 정적 지도를 만들라고 요청합니다.

그런 다음 addMarker() 메서드를 사용하여 시트에서 가져온 주소에 '핀'을 추가할 수 있습니다.

var map = Maps.newStaticMap().addMarker(address);

마지막 줄에서는 (GmailApp 객체를 통해) 메일 서비스를 사용하여 sendEmail() 메서드를 호출합니다. 이렇게 하면 'See below.'라는 텍스트와 지도 이미지 첨부파일이 포함된 이메일이 전송됩니다.

GmailApp.sendEmail("friend@example.com", "Map", 'See below.', {attachments:[map]}); }

축하합니다.

Google Apps Script를 사용하여, Google 개발자 기술에 액세스하여 Google Sheets에서 주소를 추출하고, 이 주소를 기반으로 Google 지도를 생성하고, 이메일 수신자에게 지도를 전송하는 코드를 작성했습니다.

다음 단계/더 학습하기

• Google Sheets API 개발자 문서를 읽어 보세요.
• google-sheets-api 태그를 사용해 Stackoverflow에 대한 질문을 게시하고 답변을 확인하세요.

추가 리소스

이 실습에 나온 코드는 GitHub 저장소 GitHub.com/googlecodelabs/apps-script-intro에서도 확인할 수 있습니다. (이 실습은 저장소와 최대한 동기화된 상태를 유지합니다.) 다음은 이 실습에서 다룬 내용을 자세히 살펴보고 Google 개발자 도구에 프로그래매틱 방식으로 액세스하는 다른 방법을 알아볼 수 있는 추가 리소스입니다.

문서

• Google Apps Script 문서 사이트
• Apps Script Gmail 서비스
• Apps Script 스프레드시트 서비스
• Apps Script 지도 서비스

관련 동영상 및 일반 동영상

• Google Apps Script의 기타 동영상 라이브러리
• Workspace Dev Show 동영상 시리즈

뉴스 및 업데이트

• Workspace 개발자 블로그
• Workspace 개발자 Twitter(@GSuiteDevs)
• Workspace 개발자 월간 뉴스레터
• Google Workspace 학습 센터

Google Cloud 교육 및 자격증

Google Cloud 기술을 최대한 활용하는 데 도움이 됩니다. Google 강의에는 빠른 습득과 지속적인 학습을 지원하는 기술적인 지식과 권장사항이 포함되어 있습니다. 기초에서 고급까지 수준별 학습을 제공하며 바쁜 일정에 알맞은 주문형, 실시간, 가상 옵션이 포함되어 있습니다. 인증은 Google Cloud 기술에 대한 역량과 전문성을 검증하고 입증하는 데 도움이 됩니다.

설명서 최종 업데이트: 2024년 11월 5일

실습 최종 테스트: 2023년 11월 5일

Copyright 2026 Google LLC. All rights reserved. Google 및 Google 로고는 Google LLC의 상표입니다. 기타 모든 회사명 및 제품명은 해당 업체의 상표일 수 있습니다.