[웹앱 + GAS] 1강. 구글앱스스크립트와의 첫만남

1.강의 목표

구글 앱스 스크립트(GAS)가 무엇이며, 왜 유용한지 설명할 수 있다.
구글 스프레드시트에서 스크립트 편집기를 열 수 있다.
간단한 코드를 실행하고, 그 결과를 ‘실행 로그’에서 확인하며 코딩의 기본 원리를 체험한다.

2.준비물

:구글 계정, 인터넷 연결된 컴퓨터(모바일은 X)

3. 들어가며

매일 혹은 매주 반복하는 단순 업무를 구글 앱스 스크립트(GAS)를 이용해 간소화해 보자. GAS란 구글 문서, 시트, 설문지 등 구글 도구에 시킬 일을 적어 두는 명령어 모음집 또는 업무 지시서라고 할 수 있다. 한 번 지시서만 잘 써 두면, 버튼 클릭 한 번만으로 수십, 수백 번의 반복 작업을 1초 만에 끝낼 수 있다.

GAS는 무료이고, 별도의 설치가 필요 없으며, 우리가 매일 쓰는 구글 스프레드시트, 구글 문서 안에서 바로 작동할 수 있다는 점에서 접근성과 확장성이 높은 편이다.

예를 들어, 아래와 같이 매 소단원마다 형성평가, 교사 관찰 등을 기록한 구글 스프레드시트가 있다고 하자. 이는 내가 실제로 쓰고 있는 시트이다. 1은 해당 학생이 해당 분야를 올바르게 이해했다는 뜻이고, 0은 복습이 필요하다는 뜻이다.

이렇게 정리해 두면, 교사가 학생들을 파악하는 데는 도움이 되지만, 학생들에게 피드백해주기에는 한계가 있다. 여기서는 학생들이 직접 접속해 학번과 비밀번호를 입력하면 위 시트 내용 중 본인의 것을 열람할 수 있게 하는 웹앱을 GAS를 이용해 만들어보려 한다. 예를 들어, 아래와 같이 학생이 웹앱에 학번과 비밀번호를 입력하면 올바르게 이해한 개념과 복습이 필요한 개념을 볼 수 있다.

항목을 누르면 이에 해당하는 내용을 담은 박스가 열리며,

아래와 같이 요약을 볼 수도 있다. 나의 경우, 이 문장을 생활기록부 세특에 일정 부분 적용할 것이라고 학생들에게 미리 안내하였다.

GAS를 이용하여 다양한 웹앱을 만들 수 있는데 이번 강의 시리즈에서는 위에서 보여준 수업 성장 현황 웹앱을 제작해 보는 과정을 안내하려 한다.

4. 스크립트 편집기 열기, 간단한 문장 출력하기

[1단계] 먼저 구글 드라이브에서 새로운 구글 스프레드시트를 하나 만든다. 파일 이름은 ‘수학 수업’이라고 하자.

[2단계] 스프레드시트가 열리면, 상단 메뉴에서 [확장 프로그램] – [Apps Script]를 선택한다.

[3단계] 그러면 아래와 같은 창이 뜬다. 이 창을 ‘스크립트 편집기’라고 한다. 제목을 ‘수학 수업 스크립트 편집기’라고 하겠다.

현재 Code.gs라는 파일이 열려 있고, 해당 파일에는 오른쪽과 같이 3줄의 코드가 작성되어 있다.

function myFuction() {
}

이 코드는 자바스크립트 코드로, function은 함수라는 뜻이고 myFunction은 함수 이름, ()안의 전달값을 전달받아, {}안의 내용을 실행한다고 생각하면 된다. 우리는 바이브코딩(코딩을 모르는 상태에서 알고리즘만으로 구현)을 할 예정이므로 이 코드를 몰라도 관계 없지만, 이 부분이 일종의 함수라는 것 정도는 알아두는 것이 좋겠다.

[4단계] 이제 본격적인 작업에 앞서 파일을 작성하자. 먼저 index.html이라는 파일을 생성한다. 왼쪽에서 아래와 같이 생성한다.

이름을 index.html 이라고 하자. 그러면 작업 공간 내에 아래와 같이 2개의 파일이 생겼으며 각각의 기능은 아래와 같다.

code.gs	index.html
웹앱에서 수행할 명령 편집 (웹앱의 두뇌 역할)	사용자에게 직접적으로 보이는 화면(웹앱의 얼굴)

즉, code.gs에서 명령을 내리고 이를 index.html에서 보여준다고 생각하면 된다. 조금 더 정확하게는, code.gs가 서버 역할을, index.html이 클라이언트 역할을 한다고 생각하면 되겠다.

Code.gs파일에 있는 모든 코드를 지우고, 아래 코드를 입력하자.

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

코드를 해석하면 아래와 같다.

doGet() : 스크립트가 HTTP get 요청을 받았을 때 실행되는 함수. 쉽게 말해, 사용자가 url링크를 통해 들어오면 실행되는 함수를 의미한다.
return : ‘돌려준다’는 뜻. 프로그래밍에서 함수를 정의할 때 들어가는 표현이므로 바이브 코딩 단계에서는 크게 신경쓰지 않아도 된다.
HtmlService.createHtmlOutputFromFile(‘index’) : 구글의 HtmlService님. index파일을 전달받아 HtmlOutputFromFile을 만들어줘(create).

전체를 해석하면 아래와 같다.

사용자가 url을 통해 접속하면, index 파일을 전달받아서 html파일을 만들어서 돌려줘.

이제 index.html파일에 아래와 같이 간단한 문장을 적어 보자. <body>와 </body>사이에 적으면 된다.

[5단계] 이제 웹앱을 배포해 보자. 사용자가 접속할 링크(인터넷 주소)까지 얻어 보자. 먼저 지금까지의 작업 과정을 저장한다. 단축키 [Ctrl] + [S]를 누르면 프로젝트 내의 모든 파일이 저장된다. (저장되면 파일 이름에 있는 주황색 동그라미가 사라진다)

그리고 오른쪽 상단의 ‘배포’ 버튼을 눌러 ‘새 배포’를 누른다.