2026년 9월 6일 일요일

[바이브 코딩] 교내 시설·장비 예약 관리자 - 중복 분쟁을 막는 단일 파일 예약 시스템



교내 시설물 신청 & 방송실 장비 대여 관리 웹앱

🏫 체육관, 과학실, 방송실 장비. 동료 교원이 스마트폰 화면에서 날짜·교시·장소를 선택하면 중복 예약이 즉시 감지되고 예약 현황표가 정리되는 경량 예약 관리자를 소개합니다. Apps Script 배포나 클라우드 설정 없이, 단일 HTML 파일 공유 하나로 시작됩니다.

예약 데이터는 세션 메모리(종료 시 소멸)를 기본으로 하고 'CSV 내보내기'로 당일 장부를 로컬 파일에 안전하게 아카이빙(archiving, 기록 보관)합니다 — 자동 외부 전송이 없어 학내망 원칙을 완벽히 지킵니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
중복 예약 즉시 감지 같은 날짜·교시·시설 조합이 이미 있으면 예약을 차단하고 '이미 예약된 시간입니다'를 안내합니다. 구두 요청으로 생기던 중복 사용 분쟁이 원천 사라집니다. 교무실 PC에서 열어두고 동료 교원이 필요할 때마다 직접 확인·예약.
현황표 실시간 렌더링 요일·교시 그리드에 예약 현황이 채워지고, 새 예약이 들어오는 즉시 화면이 갱신됩니다. 서버의 '실시간 동기화' 없이도 입력 즉시 반영으로 충분합니다. 화면 하단 'CSV 내보내기'로 당일 예약 장부를 로컬 파일로 안전하게 저장.
개인정보 최소 수집 예약자 표기는 부서·닉네임·번호만을 기본값으로 두고, 실명 기록이 꼭 필요한 경우에만 교무부가 선택하는 별도 모드로 한정합니다. 장비 대여는 '방송 장비 / 마이크 2개'처럼 장비 칸까지 명확히 입력.

2. 핵심 아키텍처 해설

① 시설·교시 데이터 상수

const FACILITIES = ["체육관", "과학실", "음악실", "방송실 장비"];
const PERIODS = ["1교시", "2교시", "3교시", "4교시", "5교시", "6교시", "방과후"];
const BOOKINGS = [];   // 세션 메모리 — 종료 시 소멸

교내 시설 목록과 교시 구조는 파일 상단 상수로 심기(임베딩)합니다 — 학내망 배포본은 외부 통신 없이 시작됩니다.

② 중복 감지 예약 함수

function isConflict(day, period, facility) {
  return BOOKINGS.some(function (b) {
    return b.day === day && b.period === period
      && b.facility === facility;
  });
}

function reserve(day, period, facility, who) {
  if (isConflict(day, period, facility)) {
    sound("nope");
    return { ok: false, message: "이미 예약된 시간입니다" };
  }
  BOOKINGS.push({ day: day, period: period,
    facility: facility, who: who, at: nowStamp() });
  sound("ok");
  drawChart();
  return { ok: true };
}

Array의 some으로 조건 충돌을 검사합니다 — 예약 기록에는 타임스탬프(timestamp)를 포함해 '누가 먼저 예약했는가'의 근거를 남깁니다.

③ 현황표 렌더링

function drawChart() {
  const grid = document.getElementById("chart");
  grid.innerHTML = "";
  FACILITIES.forEach(function (f) {
    PERIODS.forEach(function (p) {
      const cell = document.createElement("div");
      const found = BOOKINGS.find(function (b) {
        return b.facility === f && b.period === p;
      });
      cell.textContent = found ? found.who : "";
      cell.className = found ? "cell busy" : "cell";
      grid.append(cell);
    });
  });
}

시설 행 × 교시 열 그리드에 예약자 표기가 채워집니다. 새 예약이 들어올 때마다 이 함수가 다시 그려 '입력 즉시 반영'의 실시간이 실현됩니다.

④ 장부 아카이빙

function bookingCSV() {
  return BOOKINGS.map(function (b) {
    return [b.day, b.period, b.facility, b.who, b.at].join(",");
  }).join(";");
}
// 'CSV 내보내기' 버튼으로 로컬 파일 저장 — 자동 외부 전송 없음

하루 예약 장부를 CSV(쉼표로 구분한 값)로 내보내 교무부가 시트나 서류에 옮겨 적습니다. 서버·클라우드 연동이 없으므로 예약 정보가 학내망 밖으로 나가지 않습니다.

⑤ 원칙·정합

단일 HTML·외부 통신 0, Apps Script·구글 시트 API 미사용. 배포는 학내망 공유 폴더의 파일 경로(교내 메신저 바로가기에 파일 경로 등록)로 시작합니다 — 예약 정보는 세션 메모리에서 소멸되고, 장부는 로컬 CSV로 교무부가 관리합니다.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini가 던지는 질문 3가지(관리 시설, 교시 구조, 표기 방식)에 답하면 설계가 확정됩니다.
  3. HTML 파일 실행·배포 — 완성 코드를 '예약관리.html'로 저장, 교내 공유 폴더에 두고 교내 메신저에 파일 경로 바로가기를 등록합니다.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일 — 더블클릭 즉시 실행(서버·설치·회원가입·구글 시트 API·Apps Script 금지).
2. 시설·장비·교시 목록은 파일 상단 상수로 심기(학내망 배포용 외부 통신 0) — 교내 상황에 맞게 갱신하는 루틴을 주석으로 명시한다.
3. 중복 감지: 같은 날짜·교시·시설의 중복 예약을 즉시 차단하고 '이미 예약된 시간입니다'를 안내한다. 예약 기록에는 타임스탬프를 포함한다.
4. 예약 현황표: 시설 행 × 교시 열 그리드로 한눈에 보이게 하고, 예약 입력 즉시 화면을 다시 그린다(실시간의 정의 — 입력 즉시 반영).
5. 예약자 표기는 부서·닉네임·번호만을 기본값으로 한다(실명 모드는 교무부 선택 시에만). 개인정보는 최소 수집을 원칙으로 한다.
6. 'CSV 내보내기' 버튼으로 당일 예약 장부를 로컬 파일로 저장한다 — 자동 외부 전송 없음(시트 정리·공유는 교무부 수동).
7. 스마트폰·전자칠판 터치 대응: 선택 버튼 44px 이상, 360px 화면 가로 스크롤 금지. 사운드는 Web Audio API 합성(예약 완료 '똑', 중복 차단 '삑').
8. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 관리 대상 시설·장비는 무엇인가? (체육관·특별실·방송 장비 등)
Q2. 교시 구조는 무엇인가? (1~7교시 / 방과후 연장 포함 여부)
Q3. 예약자 표기는 무엇으로 할까? (부서·닉네임 기본 / 실명 모드 필요 여부)

🎯 에디터 한줄평

"'누가 먼저 말했지?'라는 애매한 구두 순서가 '누가 먼저 눌렀는가'라는 명확한 눈금 경쟁으로 바뀌는 순간, 교내 시설 분쟁의 절반이 사라집니다. 중복 감지와 타임스탬프라는 두 개의 작은 코드가 분쟁 조정의 모든 손질서를 대체합니다. 그리고 Apps Script 배포 대신 '파일 공유 하나'로 시작하는 태도 — 행정 도구는 진입장벽이 낮을수록 전 교직원이 실제로 쓴다는 현장의 진실을 그대로 담았습니다."

📚 기술·교육 참고 링크

  • MDN — Array.some & Array.find : 중복 감지·현황 조회에 쓰이는 배열 탐색 기법
  • CSV(쉼표로 구분한 값) 서식 : 학급·교무 장부 데이터의 표준 교환 형식
  • 교육·행정 연계 : 시설 안전 점검 일정과 예약 시스템 결합 시 안전관리 강화
By 시간:
라벨: ,