3.2 케이크 예약 페이지와 구글 스프레드시트 연동

1. 문제 정의

이전에 Formspree를 활용해 고객 예약 정보를 메일로 받아봤다.메일 수신 자체는 잘 작동했지만, 실제로 예약 목록을 관리하려면
결국 하나씩 복사해 Excel이나 Google Sheets에 붙여넣는 과정이 필요했다. 이런 수작업은 비효율적이고, 예약 건수가 많아질수록 실수가 발생할 가능성도 높아진다. 그래서 이번에는 폼에 입력된 데이터가 실시간으로 Google 스프레드시트에 저장되도록 자동화해보고자 한다. 이를 위해 별도의 서버 없이도 가능하도록 Google Apps Script를 사용해 HTML 폼과 Google Sheets를 직접 연결해보기로 했다.

2. 목표

웹페이지에서 입력하는 정보를 구글 스프레드시트에 저장되도록 설정

별도의 서버나 백엔드 없이 누구나 쉽게 따라할 수 있는 구조로 만들기

3. 진행

3.1 스프레드시트 준비

1. Google Sheets 열기(https://docs.google.com/spreadsheets)
2. 새 문서 만들기
3. 첫 번째 행에 아래처럼 헤더 입력:
   이름 | 연락처 | 수령일 | 케이크 종류 | 요청사항 | 제출시각

3.2 App Script 작성

(1) 스크립트 열기

• (시트에서 상단 메뉴) 확장 프로그램 > Apps Script 클릭

(2) 아래 코드 복사해서 붙여넣기

function doPost(e) {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("시트1");
  const now = new Date();

  sheet.appendRow([
    e.parameter.name,
    e.parameter.phone,
    e.parameter.pickup_date,
    e.parameter.cake_type,
    e.parameter.requests,
    now
  ]);

  return ContentService.createTextOutput("성공");
}

(3) 웹 앱으로 배포

• 배포 > 웹 앱으로 배포 클릭
• 새 버전 이름: 예) v1
• 액세스 권한 → “모든 사용자”로 설정
• 배포 후 나오는 URL 복사 → HTML 폼에서 이 주소로 데이터를 보냄

3.3 HTML 폼 연결

(1)

태그 - 만 수정되었음

<form id="cakeForm">
  <input type="text" name="name" placeholder="이름" required>
  <input type="text" name="phone" placeholder="연락처" required>
  <input type="date" name="pickup_date" required>
  <select name="cake_type">
    <option>플라워 케이크</option>
    <option>초코 러버 케이크</option>
    <option>딸기 생크림 케이크</option>
  </select>
  <textarea name="requests" placeholder="추가 요청사항"></textarea>
  <input type="submit" value="예약하기">
</form>

(2) body 위, 폼 하단에 추가 및 scriptURL에 아까 복사한 Apps Script 주소를 그대로 붙여넣기

<script>
  document.getElementById('cakeForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const form = e.target;
    const data = new FormData(form);
    const scriptURL = "복사한 Apps Script 웹앱 URL을 여기에 넣기";

    fetch(scriptURL, {
      method: 'POST',
      body: data
    }).then(response => {
      alert("예약이 접수되었습니다!");
      form.reset();
    }).catch(error => {
      alert("문제가 발생했습니다.");
      console.error("Error!", error.message);
    });
  });
</script>

4. 결과 확인

다음과 같이 사용자가 입력한 정보가 구글 시트에 연동되는 것을 확인

5. 결론

Google 스프레드시트 연동은 간단하지만 다음과 같은 강력한 장점이 있다.

• 별도의 서버 없이도 구현 가능해 비용 부담이 전혀 없다
• 복잡한 데이터베이스 설정 없이도 폼 데이터를 바로 시트에 저장할 수 있다
• 예약 내역, 고객 정보, 설문 결과 등을 실시간으로 수집하고 정리할 수 있어 단순 수집을 넘어 데이터로서 활용할 수 있는 기반을 만들어준다

또한, 일단 한 번 연동해두면 이후에는 수정 없이 계속 자동으로 기록되므로, 소규모 프로젝트나 1인 운영 환경에서 특히 실용적인 방식이다. 앞으로는 이 데이터를 바탕으로 예약 내역을 필터링하거나 시각화하는 기능까지 확장해볼 수 있다.