3-3-1.실습-Apps Script 웹 앱
📑 실습: 프로모션 쿠폰 발급 웹 앱
•
목표: 고객이 이름·이메일 입력 → 고유 쿠폰 코드 발급 & 이메일 전송
•
구조:
◦
index.html → 입력 폼
◦
Code.gs → 코드 생성 + 이메일 발송
•
성과: 자동 쿠폰 발급 → 반응률 실시간 추적 가능
1. 실습 목표
•
사용자가 웹 앱에 접속 → 이름·이메일 입력
•
Apps Script가 쿠폰 코드 생성 → Google Sheet에 저장
•
동시에 입력한 이메일 주소로 쿠폰 코드 발송
👉 마케팅 현장에서 자주 쓰이는 신규 고객 확보 이벤트를 직접 구현해보는 경험
2. 파일 구성
1.
Code.gs
•
쿠폰 코드 생성
•
Google Sheet에 저장
•
Gmail API로 메일 발송
2.
index.html
•
이름, 이메일 입력폼 제공
•
제출 시 Code.gs 함수 호출
3. 코드 예제
•
크롬 브라우저 > "sheet.new" > 확장 프로그램 > Apps Script
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function generateCouponCode() {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
let code = '';
for (let i = 0; i < 8; i++) {
code += chars.charAt(Math.floor(Math.random() * chars.length));
}
return code;
}
function saveAndSend(formData) {
const sheet = SpreadsheetApp.openById('스프레드시트_ID').getActiveSheet();
const coupon = generateCouponCode();
// 시트에 저장
sheet.appendRow([formData.name, formData.email, coupon, new Date()]);
// 이메일 발송
GmailApp.sendEmail(
formData.email,
"프로모션 쿠폰 코드",
`${formData.name}님, 쿠폰 코드: ${coupon}`
);
return coupon;
}index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>프로모션 쿠폰 발급</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', 'Noto Sans KR', sans-serif;
background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.card {
background: #fff;
border-radius: 20px;
padding: 40px;
max-width: 400px;
width: 100%;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
text-align: center;
}
h2 {
margin-bottom: 20px;
color: #333;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 12px;
margin: 10px 0 20px;
border: none;
border-bottom: 2px solid #ccc;
outline: none;
font-size: 14px;
transition: border-color 0.3s;
}
input[type="text"]:focus, input[type="email"]:focus {
border-color: #74ebd5;
}
button {
background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
border: none;
padding: 12px 20px;
color: #fff;
font-size: 16px;
border-radius: 30px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#result {
margin-top: 20px;
font-weight: 600;
color: #333;
}
</style>
</head>
<body>
<div class="card">
<h2>✨ 프로모션 쿠폰 발급 ✨</h2>
<form id="couponForm">
<input type="text" name="name" placeholder="이름을 입력하세요" required>
<input type="email" name="email" placeholder="이메일을 입력하세요" required>
<button type="submit">쿠폰 받기</button>
</form>
<p id="result"></p>
</div>
<script>
document.getElementById("couponForm").addEventListener("submit", function(e){
e.preventDefault();
google.script.run.withSuccessHandler(function(coupon){
document.getElementById("result").innerText =
"🎉 발급된 쿠폰 코드: " + coupon + " (이메일로도 발송되었습니다)";
}).saveAndSend({
name: this.name.value,
email: this.email.value
});
this.reset();
});
</script>
</body>
</html>•
Apps Script 생성
•
"+" > HTML > "Index.html" 생성
•
"새 배포"
•
"웹 앱"
•
실습에선 "모든 사용자" 선택
•
"액세스 승인" > "Allow" 허용하기
•
웹 앱 URL 복사
•
완성된 index.html 화면
4. 실행 흐름
1.
고객이 웹 주소 접속 → 입력폼 표시 (doGet())
2.
이름·이메일 입력 후 제출 → saveAndSend() 실행
3.
랜덤 쿠폰 코드 생성 → Google Sheet에 저장
4.
Gmail API를 통해 고객 이메일로 쿠폰 발송
5.
화면에 발급된 쿠폰 코드 표시
5. 배포 과정
1.
Apps Script 에디터 상단 → 배포 → 새 배포
2.
유형 선택 → 웹 앱
3.
접근 권한 설정 (예: 링크가 있는 모든 사용자)
4.
URL 생성 → 공유 가능
👉 이제 누구나 링크에 접속해서 이름·이메일을 입력하면, 자동으로 Google Sheet에 저장됨
📑 Apps Script 웹 앱 보안 & 배포
•
배포 = 웹 주소(URL) 만들기
•
접근 권한 옵션: 나만 / 조직 내 / 링크 있는 사람 누구나
•
보안 개념: 권한 동의(OAuth), 데이터 접근 제한
•
주의사항: 민감 정보 저장 X, 공유 권한 신중히 설정
1. 배포란?
•
작성한 Apps Script를 웹에서 쓸 수 있도록 공개하는 과정
•
배포하면 웹 주소(URL) 가 생기며, 그 주소를 통해 사람들이 접속 가능
👉 비유: 원고(코드)를 책으로 출판하는 것 → 출판해야 다른 사람이 읽을 수 있음
2. 배포 단계
1.
에디터 상단 메뉴 → "배포" 클릭
2.
새 배포 → 웹 앱(Web App) 선택
3.
접근 권한 설정
•
나만(Me): 로그인한 나만 실행 가능
•
내 조직만: 같은 회사/학교 도메인 사람만 접속 가능
•
링크가 있는 누구나: 주소를 아는 사람은 누구든 접속 가능
3. 보안과 권한
•
Apps Script 웹 앱은 사용자의 Google 계정 데이터(Gmail, Sheets, Drive 등)에 접근할 수 있음
•
그래서 처음 실행할 때는 "이 앱이 권한을 요청합니다" 라는 팝업(OAuth 동의창)이 뜸
•
사용자는 허용/거부를 선택해야 앱이 정상 동작
👉 쉽게 말해, 앱이 "내 이메일/문서에 접근해도 돼?" 하고 묻는 것
4. 주의사항
1.
민감 정보 저장 금지
•
주민번호, 비밀번호 같은 민감 데이터는 수집하지 말 것
2.
공유 범위 최소화
•
꼭 필요한 경우에 "링크 있는 누구나"
3.
테스트 후 배포
•
코드 오류가 없는지 반드시 확인 후 공유
📑 Apps Script 웹 앱 확장 아이디어 (마케팅 실무 활용)
•
캠페인 리드 수집 → 입력폼 → 시트 자동 저장
•
데이터 집계·대시보드 → 실시간 성과 확인
•
자동 보고서 생성 → 이메일로 정리 발송
•
알림 서비스 → KPI 변동 시 Slack/메일 알림
1. 캠페인 리드(잠재 고객) 수집
•
웹 앱을 랜딩페이지 폼처럼 활용 → 이름, 이메일, 관심 상품 입력 받기
•
데이터가 자동으로 Google Sheet에 저장
•
장점: 광고 캠페인별로 입력폼을 구분해두면 채널별 성과 추적이 가능
👉 예: 페이스북 광고 클릭 → 웹 앱 폼 → 리드 저장
2. 마케팅 데이터 집계 & 대시보드
•
Google Ads, Meta Ads, 네이버 광고 등에서 데이터를 가져와 Google Sheet에 저장
•
Apps Script로 매일 자동 업데이트
•
웹 앱으로 간단한 성과 대시보드(노출·클릭·전환) 제공
👉 비유: 매일 아침 자동으로 업데이트되는 성적표
3. 자동 보고서 생성 & 배포
•
매일/매주 광고 성과를 요약 → PDF나 구글 슬라이드 형태로 자동 생성
•
담당자에게 이메일 발송
•
장점: 반복 보고 작업 최소화, 팀원은 바로 확인 가능
👉 예: 매주 월요일 오전 9시 → 전주 광고 성과 보고서 자동 발송
4. 알림 서비스 (실시간 KPI 모니터링)
•
예산 소진, 클릭률 급락, 전환율 변화 같은 특정 조건 발생 시 자동 알림
•
Slack, 이메일, 카카오톡 채널(Webhook)으로 전달
•
빠른 대응 가능 → 광고 낭비 방지
5. 고객 참여 이벤트 페이지
•
예시: "이메일 남기면 쿠폰 제공", "간단 퀴즈 참여 → 추첨 응모"
•
입력폼(웹 앱)으로 고객 정보 수집 → Google Sheet에 자동 저장
•
장점: CRM 데이터 확보 + 캠페인별 참여도 추적 가능
6. 프로모션 코드/쿠폰 발급
•
웹 앱에서 고객이 이름·이메일 입력 → 고유 쿠폰 코드 자동 생성 & 이메일 발송
•
장점: 프로모션 반응률을 실시간 모니터링 가능
7. 고객 피드백·리뷰 수집
•
구매 후 고객에게 웹 앱 링크 제공 → 간단한 만족도 조사 입력
•
결과는 자동 집계 → 차트로 요약
•
장점: 리뷰 기반 인사이트 확보 + 빠른 대응
8. 세일즈/재고 알림
•
고객이 관심 상품 등록 → 품절 시 알림 or 재입고 시 메일 자동 발송
•
장점: 재구매 유도 & 고객 충성도 강화
9. 멤버십/이벤트 예약 시스템
•
웹 앱에서 행사/세미나 신청 → 참가자 명단 자동 생성
•
참가자 확인 메일 자동 발송
•
장점: 이벤트 운영 효율화
📌 핵심 포인트
B2C 마케터는 웹 앱을 통해 리드 확보 → 참여 유도 → 피드백 수집 → 성과 분석 → 고객 유지까지 마케팅 파이프라인 자동화 가능
B2C 마케터는 웹 앱을 통해 리드 확보 → 참여 유도 → 피드백 수집 → 성과 분석 → 고객 유지까지 마케팅 파이프라인 자동화 가능
•
Google Apps Script는 거창한 프로그래밍 지식이 없어도 작은 자동화와 간단한 웹 앱을 손쉽게 만들 수 있는 도구
•
Apps Script와 같은 자동화 도구를 활용하고, 여러분은 더 중요한 일—브랜드를 이야기하고, 고객과 소통하며, 창의적 전략을 세우는 일—에 집중
Contact : azureguy@empal.com / azureguy@cau.ac.kr