오늘은 구글 스프레드시트로 간단한 데이터를 받을 수 있는 ‘웹 폼’을 만들어 볼 예정입니다. 아무래도 앱스크립트를 활용해야 하다보니 이메일 자동 발송처럼 코드에 대해 기본적으로 이해도가 있어야 합니다.

앱스크립트로 구글폼 따라만들기 어렵지 않습니다. 딱 3가지만 기억하면 되거든요. 바로 스프레드시트의 고유 ID. 그리고 HTML 페이지. 마지막으로 ‘배포’의 단계입니다.

이 간단한 웹서비스를 만드는데 구글은 ‘무료’라는 사실이 중요하죠.

앱스크립트로 만든 간단 설문 폼 맛보기

사실 이렇게 글로 보는 것보다 직접 경험해보는게 필요합니다. 뭐든 도전하기 좋아하는 여러분들을 위해 링크를 준비했습니다.

1. 웹 링크 [클릭]
   
   링크 클릭 후 간단한 정보 기입 후 ‘제출’ 눌러보기 (개인 정보 등은 입력하지 마세요!)
   
2. 구글 스프레드시트 확인 [클릭]
   
   1번에서 제대로 기입 하셨다면 바로 값이 들어오는 것을 확인하실 수 있습니다.

Apps Script와 구글 스프레드시트 덕분에 간단한 설문폼을 만들 수 있는 셈이죠. 코드 부터 확인해보겠습니다.

code.gs 파일에서는 6줄 내외 코드만 쓰입니다. 메인은 appendRow 기능을 통해 웹앱에서 입력값이 들어오면 해당 내용을 받아 “행을 추가” 해주는 것이죠.

doGet() 함수는 구글 공식 문서를 보면서 익숙해지시는게 좋은데 보통 html 파일을 만들어 놓으면 저런 형태로 활용하게 됩니다.

    google.script.run.AddRecord(name,email,attend);
    document.getElementById('resultsopt').innerHTML = "전송 완료."

따라서 AddForm 이라는 HTML 파일을 만들었으면 입력 포맷에 맞춰 자바스크립트를 구현해주어야 하죠.

중점적으로 보셔야 하는 부분은 바로 googe.script.run.[함수명] 부분입니다.

저기서 제일 많이 실수가 발생하기 때문인데요. <scirpt> </script>로 감싸줘야 하는 것 또한 동일합니다.

var name = document.getElementById(“name”).value;

입력 필드에서는 ‘id’값을 매핑하는 것은 여타 프론트엔드 방식과 큰 차이가 없구요.

코드펜 같은 서비스에서 잘 디자인 된 html 템플릿만 가져와도 인상적인 방식의 페이지를 만들 수 있겠죠?

앱스크립트 HTML 예시 1.

마음만 먹는다면 링크트리 같은 웹페이지를 띄워놓고 운영하는 것도 가능하겠죠?

물론 이런 형태의 디자인을 구해서 앱스크립트에 맞게끔 수정을 해주어야 하는 고통이……

전체 코드가 필요하신 분들은 아래 댓글에서 요청해주세요 🙂