반응형
Google Apps Script를 활용한 이메일 수집 폼 만들기 (구글 시트 자동 저장)
이 글에서는 Google Apps Script와 HTML 폼을 사용해 이메일 수집 시스템을 구축하는 방법을 설명합니다. 사용자가 이메일을 제출하면 해당 정보가 구글 시트에 자동으로 기록되도록 구성합니다. 발생할 수 있는 오류와 해결 방법도 함께 다룹니다.
1. 프로젝트 개요
Google Apps Script와 구글 시트를 활용해 간단한 이메일 수집 시스템을 만듭니다. HTML 폼에서 사용자가 입력한 이메일을 전송하면, 서버에서 이를 처리해 구글 시트에 이메일과 타임스탬프를 저장합니다.
2. 구글 시트와 Apps Script 설정
1) 구글 시트 생성
- Google Sheets에 접속해 새 스프레드시트를 만듭니다.
- 첫 번째 행에 다음과 같은 헤더를 입력합니다:
- A1:
Email - B1:
Timestamp
- A1:
2) Apps Script 설정
- 구글 시트에서 확장 프로그램 → Apps Script를 클릭합니다.
- 아래의 Google Apps Script 코드를 붙여넣습니다:
function doPost(e) {
Logger.log(e); // 파라미터 확인용 로그
if (!e || !e.parameter.email) {
return HtmlService.createHtmlOutput('No email provided.');
}
const sheet = SpreadsheetApp.openById('YOUR_SPREADSHEET_ID').getActiveSheet();
const email = e.parameter.email;
const timestamp = new Date();
sheet.appendRow([email, timestamp]);
return HtmlService.createHtmlOutput('Email successfully submitted!');
}YOUR_SPREADSHEET_ID: 스프레드시트의 URL에서 ID를 복사해 코드에 붙여넣습니다.- 예:
https://docs.google.com/spreadsheets/d/YOUR_SPREADSHEET_ID/edit
- 예:
3. HTML 폼 작성
- Apps Script 편집기에서 파일 → 새 파일 → HTML을 클릭합니다.
- 아래의 코드를
form.html파일에 붙여넣습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Signup</title>
</head>
<body>
<h2>Subscribe to Our Newsletter</h2>
<form action="YOUR_WEB_APP_URL" method="post">
<label for="email">Email:</label><br><br>
<input type="email" id="email" name="email" required><br><br>
<input type="submit" value="Subscribe">
</form>
</body>
</html>YOUR_WEB_APP_URL: 다음 단계에서 생성될 웹 앱 URL을 이곳에 붙여넣습니다.
4. 웹 앱 배포하기
- Apps Script 편집기에서 Deploy → New Deployment를 클릭합니다.
- 웹 앱을 선택하고 배포합니다.
- 권한을 Anyone, even anonymous로 설정합니다.
- 배포된 웹 앱 URL을 복사해 HTML 폼의
action속성에 붙여넣습니다.
5. 오류 해결 및 디버깅
1) TypeError: Cannot read properties of undefined (reading 'parameter')
- 이 오류는 HTML 폼에서 데이터가 제대로 전송되지 않을 때 발생합니다.
- 해결 방법*:
- HTML 폼에
name속성이 올바르게 설정되었는지 확인하세요:<input type="email" id="email" name="email" required>
- HTML 폼에
2) 권한 관련 문제
- "GoogleAppsScript needs your permission" 메시지가 나타나면 앱이 올바르게 배포되지 않았을 가능성이 있습니다.
- 해결 방법*:
- Deploy → Manage Deployments로 이동해 권한을 Anyone, even anonymous로 설정합니다.
6. 테스트 및 결과 확인
- HTML 폼에 접속해 이메일을 입력하고 제출합니다.
- 구글 시트에 이메일과 타임스탬프가 기록되는지 확인합니다:
| Timestamp | |
|---|---|
| example@email.com | 2024-10-18 10:30:00 |
7. 결론
이 시스템을 통해 간단한 이메일 수집 자동화를 구현할 수 있습니다. Google Apps Script와 구글 시트를 사용해 추가적인 기능(예: 알림 이메일 전송)도 쉽게 확장할 수 있습니다.
문제가 발생하거나 기능을 확장하고 싶다면 댓글로 알려주세요!
태그:
- #GoogleAppsScript #구글시트 #이메일수집 #HTML폼 #웹앱 #자동화
반응형
