💡 한 줄 요약
과학실, 컴퓨터실 등 특별실과 VR 기기, 드론 등 고가 교구 대여 시 발생하는 일정 중복과 교무 마찰을 0%로 없애주는 '구글 시트 연동 실시간 매트릭스 스케줄러' 웹앱 제작 바이브 코딩 프롬프트를 공개합니다!
🏫 "선생님, 오늘 3교시에 과학실 제가 먼저 쓰기로 했는데요...?"
학기 중 동학년 선생님들 간에 과학실이나 컴퓨터실 사용 일정이 겹치거나, 학급에 몇 대 없는 VR 기기나 드론 세트를 서로 같은 교시에 쓰려다 난처해진 경험이 한 번쯤 있으실 겁니다.
교무실 벽에 걸린 수기 장부에 볼펜으로 적거나 메신저 쪽지로 확인하는 방식은 동시에 같은 교시를 예약하거나 지난 기록을 확인하기 어려워 일정 충돌이 빈번하게 발생합니다.
별도의 유료 서버 비용 없이, 구글 스프레드시트를 실시간 데이터베이스로 연동하여 클릭 한 번으로 예약되고 중복 예약을 원천 차단하는 스마트 교무 스케줄러 제작 노하우를 소개합니다!
📊 수기 장부·메신저 대여 vs 실시간 매트릭스 스케줄러 비교
| 비교 항목 | 기존 수기 장부 / 쿨메신저 쪽지 방식 | 구글 시트 연동 실시간 스케줄러 (추천 ⭐️) |
|---|---|---|
| 중복 예약 방지 | 동시에 예약 시 충돌 발생, 수업 직전 혼선 유발 | 서버 단 실시간 검증으로 중복 예약 시 즉시 팝업 경고 차단 ⭕ |
| 현황 가시성 | 교무실에 직접 가거나 담당 교사에게 매번 문의 | 날짜별 1~6교시 매트릭스 표(초록: 가능 / 빨강: 예약됨)로 한눈에 파악 |
| 운영 및 유지비 | 상용 시설 관리 프로그램 도입 시 연간 수십만 원 소요 | 비용 0원! 학교 공인 Google Workspace 무료 인프라 100% 활용 |
🧩 2단계 서버리스 아키텍처 설계 구조
- 백엔드 (Google Apps Script - code.gs):
doGet(e): 날짜별 예약 현황을 JSON으로 실시간 반환.doPost(e): 새 예약 요청 시 시트 데이터를 먼저 조회하여 동일 날짜·교시·교구 중복 여부를 1차 검증한 뒤 성공/실패 응답 및 자동 행 추가.
- 프론트엔드 (단일 index.html):
- 초등학교 표준 시간표(1~6교시 + 방과후) 가로축 × 특별실/교구 세로축의 인터랙티브 매트릭스 뷰.
- 학년/반 드롭다운(기본값: 3학년 3반)과 날짜 선택 캘린더 제공.
- SweetAlert2 팝업 라이브러리로 깔끔한 예약 확인 및 오류 알림창 구현.
💡 초보자를 위한 바이브 코딩 실전 사용 예시
1단계: 백엔드(GAS) 제작 프롬프트
"너는 구글 앱스 스크립트(GAS) 백엔드 전문 엔지니어야. 특별실 및 교구 대여 시스템을 위한 code.gs 코드를 작성해 줘.
[필수 구현 기능]
1. '예약현황' 시트 탭에 [Timestamp, Date, Period, Item, Reserver] 헤더 자동 생성.
2. doGet(e): 시트의 전체 예약 데이터를 JSON 배열로 반환.
3. doPost(e): 클라이언트에서 전달받은 {date, period, item, reserver} 데이터를 수신하고, 이미 동일한 날짜/교시/교구 예약이 존재하면 {status: 'error', message: '이미 예약된 일정입니다.'}를 반환하며, 중복이 없을 때만 시트에 행을 추가하고 {status: 'success'}를 반환할 것."
2단계: 프론트엔드(HTML) 인터페이스 제작 프롬프트
"너는 모던 웹 프론트엔드 개발자야. 백엔드 GAS와 실시간 통신하는 [초등학교 특별실 및 교구 대여 스케줄러 단일 index.html]을 만들어 줘.
[주요 기능 요구사항]
1. 상단: 학년/반 드롭다운(1-1 ~ 6-10반, 기본값: 3학년 3반 선택), 날짜 선택 date input, 새로고침 버튼 배치.
2. 매트릭스 테이블: 가로축 [1교시, 2교시, 3교시, 4교시, 5교시, 6교시, 방과후] × 세로축 [과학실, 컴퓨터실, VR 기기, 드론, 과학 교구 세트].
3. 빈 칸은 초록색 [예약 가능] 버튼으로 표시되고, 클릭 시 SweetAlert2 모달로 예약 확인 후 GAS POST 요청 전송.
4. 이미 예약된 칸은 빨간색 [예약자명(예: 3학년 3반)]으로 표시되고 클릭 시 예약 불가 경고창을 띄울 것.
5. Tailwind CSS와 SweetAlert2 CDN을 포함한 깔끔한 카드형 단일 HTML로 작성해 줘."
📋 3단계 설치 및 배포 순서
- 구글 스프레드시트에서 [확장 프로그램] ➔ [Apps Script]를 열고 1단계 백엔드 코드를 붙여넣은 뒤, [새 배포 ➔ 웹 앱(모든 사용자)]으로 배포하여 URL을 복사합니다.
- 2단계 프롬프트로 생성된 HTML 파일 상단의
GAS_URL = "여기에_URL"에 복사한 주소를 붙여넣습니다. - 완성된 HTML 파일을 교무실 공용 PC 바로가기로 만들어두거나 동학년 선생님들과 공유하면 즉시 실시간 예약 시스템이 가동됩니다!
🎯 에디터 한줄평
수기 장부와 메신저 쪽지 시대를 끝내는 10분 바이브 코딩! 동시성 제어와 직관적인 매트릭스 뷰로 교무 행정의 품격을 한 단계 높여보세요.
💡 학급 경영 팁
특별실뿐만 아니라 강당(체육관), 방송실, 태블릿 충전함 등 교내 모든 공용 시설과 고가 기자재 대여 스케줄러로 손쉽게 항목을 확장하여 활용할 수 있습니다.
