소개
스터디 시간에 했던 바이브코딩 사례 중 예약 시스템 사례 글을 따라 해봤어요. 서버나 유료 솔루션 없이도 Google 스프레드시트와 AI만으로 예약 페이지를 만들 수 있어 쉽게 따라할 수 있을 것 같았어요.
진행 방법
사용한 도구들
Google Sheets: 예약 데이터를 저장할 공간
Google Apps Script (GAS): HTML 폼 생성 + 데이터 저장 처리
Gemini (또는 ChatGPT): 전체 코드를 만들어주는 AI 비서
텔레그램: 예약 사이트에서 예약을 하면 사장님 폰으로 알림 메시지 보내기
프롬프트
Gemini에 아래 프롬프트를 입력했어요. 코드가 정말 한 번에 나와서 놀랐습니다!
Google Apps Script(GAS)를 사용하여 식당 예약 시스템을 만들고 싶어.
기능: 사용자가 접속할 수 있는 웹 폼(Web Form)을 만들어줘.
입력 항목: 예약 날짜, 시간(30분 단위 선택), 이름, 연락처, 인원 수, 추가 요청사항.
동작: 사용자가 '예약하기' 버튼을 누르면, 현재 연결된 구글 스프레드시트의 첫 번째 시트에 내용이 자동으로 추가되어야 해.
디자인: 모바일에서도 보기 편한 깔끔한 CSS 스타일을 적용해줘.
출력: Code.gs 코드와 index.html 코드를 각각 작성해줘.
적용 및 배포 과정
스프레드시트 열 생성
날짜, 시간, 이름, 인원, 연락처, 요청사항 등
Apps Script 열기
스프레드시트에서 [확장 프로그램] → [Apps Script] 클릭
코드 붙여넣기
Code.gs와index.html을 각각 복사해서 붙여넣기
웹 앱으로 배포
[배포] → [웹 앱]으로 선택하고, 액세스 권한은 "모든 사용자"
URL 복사 및 공유
생성된 링크를 문자, 인스타 프로필 등에 붙여넣으면 끝!
결과와 배운 점
📱 고객은 링크만 클릭해서 예약 가능 (앱 설치나 로그인 불필요)
📊 사장님은 스프레드시트로 실시간 예약 현황 확인 가능
💡 개발 지식 없이도 예약 시스템을 만들 수 있다는 확신이 생김!
에러나 시행착오는 없었고, 생각보다 훨씬 순조롭게 진행됐어요. 앞으로 예약시스템 만들어주는 알바도 가능할듯 해요 😄
예약 페이지
앱스크립트에 들어온 예약 현황
여러 개의 숫자가 적힌 테이블
(추가 기능) 예약이 들어오면 텔레그램으로 알림 받기
사례글 게시한 후에 예약을 하면 텔레그램으로 알림받는 기능을 추가해보았습니다.
한국어로 된 문자 메시지의 스크린샷
도움 받은 글
MAS님의 "사내 자리 예약 시스템 만들기" https://www.gpters.org/dev/post/create-inhouse-seat-reservation-XNXEJhWCXj5ufrH
📌 한 줄 요약: 코딩 몰라도 AI와 구글 도구만 있으면 예약 시스템 완성됩니다!
