교내 과학실·컴퓨터실 실습 교구 및 스마트패드 대여/반납 관리 포털
📦 전교 스마트패드 200대, 과학 실험 기구의 학급별 대여 현황·파손 여부·반납 일정을 교무실 태블릿에서 관리합니다. 기기 뒷면 QR을 비추면 브라우저 내장 바코드 감지(BarcodeDetector)가 읽어 대여·반납이 원클릭으로 기록됩니다.
Apps Script 배포와 구글 시트 연동 없이 단일 HTML 파일 공유로 시작합니다 — 기기 번호·대여 학급·타임스탬프는 세션 메모리에 쌓이고 'CSV 내보내기'로 로컬 장부가 남습니다(자동 외부 전송 없음). 미반납 목록은 자동 추출되어 분실을 원천 차단합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| QR 스캔 원클릭 대여 | 기기 뒷면의 QR 코드를 태블릿 카메라로 비추면 기기 번호가 자동 입력 — 대여 학급을 누르면 기록이 끝납니다. | 대여 신청이 몰리는 아침 출석 시간에도 대기 없이 빠르게 처리. |
| 미지원 브라우저 폴백(fallback) | 바코드 감지 API를 못 쓰는 브라우저에서는 기기 번호를 직접 입력하는 길을 자동으로 열어줍니다 — 도구가 멈추는 일이 없습니다. | '스캔 실패 → 직접 입력' 전환 안내를 미리 경험해보기. |
| 미반납 자동 추출 | 마감 시각이 지났는데도 대여 중인 기기 목록을 자동으로 정리해 진하게 경고합니다 — 분실이 대장 속에서 사라지지 않습니다. | 방과 후 '미반납 확인' 버튼으로 잔여 기기를 한눈에 점검. |
2. 핵심 아키텍처 해설
① 기기 목록 상수
const DEVICES = [
{ id: "PAD-001", kind: "스마트패드", state: "재고" },
{ id: "PAD-002", kind: "스마트패드", state: "재고" },
{ id: "SCIENCE-01", kind: "현미경", state: "재고" }
];② 바코드 감지(BarcodeDetector)
const detector = new BarcodeDetector({ formats: ["qr_code"] });
async function scanQR() {
const codes = await detector.detect(video);
if (codes.length > 0) return codes[0].rawValue;
return ""; // 미감지 — 수동 입력 폴백(fallback)
}태블릿 카메라 화면(video)에서 QR을 찾아 기기 번호를 문자열로 돌려줍니다. 카메라 접근 권한 안내 문구와 폴백 입력 칸이 함께 있어야 현장에서 멈추지 않습니다.
③ 대여·반납과 중복 차단
function borrow(id, className) {
const d = DEVICES.find(function (x) { return x.id === id; });
if (d.state === "대여") {
sound("nope");
return "이미 대여 중: " + d.who;
}
d.state = "대여"; d.who = className; d.at = nowStamp();
sound("ok");
drawChart();
}
function giveBack(id, broken) {
const d = DEVICES.find(function (x) { return x.id === id; });
d.state = broken ? "수리" : "재고"; d.who = "";
drawChart();
}④ 미반납 자동 추출
function overdueList(deadline) {
return DEVICES.filter(function (d) {
return d.state === "대여" && d.at < deadline;
});
}마감 시각(deadline)을 지나도 '대여' 상태인 기기만 골라 목록으로 보여줍니다 — 분실은 대장 속에서 사라지지 않습니다.
⑤ CSV 아카이빙과 원칙
function deviceCSV() {
return DEVICES.map(function (d) {
return [d.id, d.kind, d.state, d.who, d.at].join(",");
}).join(";");
}
// 'CSV 내보내기'로 로컬 장부 저장 — 자동 외부 전송 없음기기 번호·종류·상태·대여처·시각이 한 줄씩 누적되고, 시트 정리와 공유는 교무부의 수동 관리로 남습니다. 대여자 표기는 학급·닉네임 기본값으로 개인 실명 수집을 최소화합니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
- 역질문 답변 — Gemini의 질문 3가지(관리 기기, 대여 단위, CSV 서식)에 답하면 설계가 확정됩니다.
- HTML 파일 실행 — 완성 코드를 '대여관리.html'로 저장 후 더블클릭. 교무실 태블릿이 곧 대여 대장이 됩니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일 — 더블클릭 즉시 실행(서버·설치·회원가입·구글 시트 API·Apps Script 금지).
2. 기기 목록은 파일 상단 상수로 심기(학내망 배포용 외부 통신 0) — 새 기기 추가 시 상수 갱신 루틴을 코드에 명시.
3. QR 인식은 브라우저 내장 BarcodeDetector API로 — 미지원 브라우저는 기기 번호 직접 입력 폴백(fallback) 필수.
4. 중복 대여 즉시 차단: 대여 중 기기는 '이미 대여 중 + 대여 학급' 안내. 반납 시 파손 여부 체크 박스 필수.
5. 미반납 자동 추출: 마감 시각 지나면 미반납 목록 정리 + 진한 색 경고 화면.
6. 대여자 표기는 학급·닉네임만(개인 실명 최소 수집) — 'CSV 내보내기'로 로컬 장부 저장(자동 외부 전송 없음, 시트 정리는 교무부 수동).
7. 태블릿 터치 대응: 스캔 버튼 88px 이상, 현황 그리드 큰 글씨. 사운드는 Web Audio 합성(대여 '똑', 차단 '삑').
8. // TODO, /* 생략 */ 금지 — 끝까지 완성.
[❓ 역질문 유도]
Q1. 관리 기기는 무엇인가? (스마트패드 200대 / 과학 기구 / 방송 장비)
Q2. 대여 단위는? (학급별 / 교사별)
Q3. CSV 서식은? (기기번호,종류,상태,대여처,시각 기본)🎯 에디터 한줄평
'누가 가져갔지?'를 쓰던 대장 한 권이 '똑·삑' 두 소리의 대여 흐름으로 바뀝니다. 바코드 한 장이 수기 대장을 은퇴시키는데, 이 글의 진짜 디테일은 폴백(fallback)입니다 — 스캔이 안 되면 직접 입력이라는 둘째 길이 항상 열려 있어야 현장 도구는 멈추지 않습니다. 미반납 자동 추출로 마감 점검이 습관이 되는 것도 물품 관리의 미학입니다.
📚 기술·교육 참고 링크
- MDN — Barcode Detector API : 브라우저 내장 바코드 감지 공식 문서
- 교육·행정 연계: 실험 안전 수칙·물품 관리 지침은 학내망 공개 자료 기준으로 병행 활용
