2026년 9월 6일 일요일

[교과 연계] 학급 도서관 대출·반납 시스템 - 4단계 개발 절차(기획-DB-API-UI)로 20분 완성



표 만들기가 스키마(schema)가 되는 20분 — 4단계 절차로 만드는 학급 도서관 대출·반납 시스템

📚 5~6학년 실과 SW 단원과 수학 데이터 관리 단원에서, 학생들이 4단계 개발 절차(기획 → DB 설계 → API 구축 → UI 완성)를 따라 학급 도서관 대출·반납 시스템을 만듭니다. 도서 목록의 DB 스키마(schema)를 설계하고, CRUD REST API를 구축한 뒤, H2 콘솔에서 데이터가 실시간으로 오가는 모습을 눈으로 확인하는 — 소프트웨어 엔지니어링의 첫 전체 지도입니다.

'수학 시간의 표 만들기'가 곧 '데이터베이스 설계'가 되는 순간, 학생들은 데이터가 어디에 살고 어떻게 움직이는지 배웁니다. 서버와 DB는 모두 학내망(교사 PC) 안에서만 동작하고, 데이터는 학교 밖으로 한 걸음도 나가지 않습니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
4단계 절차 ① 기획(대출 규칙 정하기) ② DB 설계(데이터 표의 칸 정하기) ③ API 구축(창고 직원 부르기) ④ UI 완성(화면 붙이기). 각 단계 5분이면 20분 만에 완성됩니다. 제미나이에서 4단계 프롬프트를 순서대로 입력.
DB 스키마 설계 스키마(schema)는 '데이터 표의 칸 설계도'입니다. 도서 표: 번호·제목·대출여부·대출자·반납기한 — 수학 데이터 관리 단원의 표 만들기가 그대로 스키마가 됩니다. CREATE TABLE 문으로 도서 표 만들기.
CRUD REST API CRUD는 생성(Create)·조회(Read)·수정(Update)·삭제(Delete) 네 동작. REST API는 '창고 직원에게 정해진 말로 요청하는 방식'입니다(예: GET /books = 목록 보여줘). 대출(borrow)·반납(return) 엔드포인트(endpoint) 2개로 시작.
H2 콘솔 실시간 확인 H2 콘솔은 DB 내부를 보는 관리자 창입니다. 화면에서 '대출' 버튼을 누르면 콘솔 표의 값이 바로 바뀌는 것을 학생들이 실시간으로 확인합니다 — 데이터의 실체를 눈으로 배우는 시간. 대출 버튼 클릭 → 콘솔의 대출여부 칸 변화 확인.
학내망 정합 설계 서버·DB·화면 모두 교사 PC(학내망) 안. UI는 fetch로 '내부 API'만 부릅니다 — 외부 CDN·API 호출 0, 데이터 외부 전송 0이라 학내망 원칙과 정확히 맞습니다. 지금까지의 심기 모드(데이터 임베딩)는 '데이터가 안 바뀔 때'의 최선, 매일 바뀌는 대출 현황에는 진짜 데이터베이스가 답입니다. UI 파일은 단일 HTML 유지 + localhost API 호출만.

2. 핵심 아키텍처 해설 — 4단계가 하나로 이어지는 흐름

① 1단계 기획: 규칙이 곧 요구사항(requirement)

  • 한 사람은 책 2권까지만 대출
  • 대출 기간은 7일, 반납일은 자동 계산
  • 대출 중인 책은 목록에서 '대출 중' 표시

'무엇을 만들지'를 문장 3개로 정하는 것 — 이 문장들이 다음 단계의 설계도가 됩니다.

② 2단계 DB 설계: 수학의 표 만들기가 스키마가 된다

CREATE TABLE BOOK (
  ID      INT PRIMARY KEY AUTO_INCREMENT,
  TITLE   VARCHAR(100),
  BORROWED BOOLEAN DEFAULT FALSE,
  BORROWER VARCHAR(20),
  DUE_DATE DATE
);

BORROWER 칸은 닉네임만 쓰고, 인메모리 DB라 서버를 끄면 표가 통째로 사라집니다 — 대출 기록을 영구 보관하지 않는 설계로 개인정보 관리 리스크를 낮춥니다. 학급 대출 장부의 공식 기록은 아날로그 대장과 병행합니다.

③ 3단계 API 구축: 창고 직원의 4가지 말

GET  /books        — 도서 목록 보여줘      (Read)
POST /books/1/borrow — 1번 책 대출 처리해줘 (Create/Update)
POST /books/1/return — 1번 책 반납 처리해줘 (Update)
DELETE /books/1    — 1번 책 목록에서 빼줘   (Delete)

④ 4단계 UI 완성: 단일 HTML 화면 + 내부 API 호출

async function borrow(id) {
  await fetch("/books/" + id + "/borrow", { method: "POST" });
  loadBooks();   // 목록 다시 불러오기
}

⑤ H2 콘솔 확인: 데이터의 실체를 눈으로

화면의 '대출' 버튼 → API → DB 순서로 움직입니다. H2 콘솔에서 SELECT * FROM BOOK을 실행해 두면, 버튼을 누를 때마다 표의 값이 바뀌는 것을 실시간으로 볼 수 있습니다. 'UI-백엔드-데이터베이스'의 3층 구조가 이 한 장의 표에서 완성됩니다.

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

  1. 1단계 프롬프트 입력 — 제미나이에 기획 프롬프트를 넣어 요구사항과 스키마 초안을 받습니다.
  2. 2·3단계 프롬프트 입력 — DB 생성 코드와 CRUD REST API 코드를 받아 실행하고, H2 콘솔에서 데이터 입출력을 확인합니다.
  3. 4단계 프롬프트 입력 — 단일 HTML UI를 받아 브라우저에서 대출·반납을 시험합니다. 총 20분.

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

[1단계 — 기획]
우리 학급 도서관 대출·반납 시스템의 요구사항을 정리해줘.
[🚨 에러 방지 안전장치]
- 대출 규칙(1인 2권, 7일 반납)을 표로 정리한다.
- BORROWER 칸은 실명이 아닌 닉네임만 사용한다(개인정보 최소 수집).
- 구현 환경은 교사 PC 학내망 내부로 한정하고 외부 통신을 포함하지 않는다.

[2단계 — DB 설계]
위 요구사항에 맞는 H2 데이터베이스 스키마(CREATE TABLE)와 초기 도서 10권 입력 SQL을 만들어줘.
[🚨 에러 방지 안전장치]
- 데이터베이스는 H2 인메모리(in-memory) 모드로 설정한다(서버 종료 시 데이터 소멸 — 영구 보관 없음).
- 반납기한(DUE_DATE)은 대출일 + 7일로 자동 계산한다.

[3단계 — API 구축]
CRUD REST API를 만들어줘: 목록 조회(GET /books), 대출 처리(POST /books/{id}/borrow), 반납 처리(POST /books/{id}/return), 삭제(DELETE /books/{id}).
[🚨 에러 방지 안전장치]
- 이미 대출 중인 책을 다시 대출하려 하면 409 충돌 응답과 안내 메시지를 돌려준다.
- 요청 처리 결과를 H2 콘솔에서 확인할 수 있도록 SQL 로그를 남긴다.

[4단계 — UI 완성]
단일 HTML 파일로 대출·반납 화면을 만들어줘.
[🚨 에러 방지 안전장치]
- 외부 CDN·웹폰트·라이브러리 없이 순수 HTML·CSS·JS로만 작성한다.
- fetch는 교사 PC의 localhost 내부 API만 호출한다(외부 통신 0).
- 사운드는 Web Audio API로 합성(대출 성공 '똑', 중복 대출 '삑').
- 모바일·태블릿 터치 대응(버튼 44px 이상, 가로 스크롤 금지).
- // TODO, /* 생략 */ 금지.

[❓ 역질문 유도]
1단계에서 코드를 바로 만들지 말고 아래 3가지를 먼저 질문한다.
Q1. 대출 규칙은 무엇으로 할까? (권수·기간·연장 규칙)
Q2. 도서 데이터는 어디에 둘까? (초기 10권 목록 / 학생이 직접 입력)
Q3. 화면에는 무엇을 보여줄까? (전체 목록 / 대출 중만 / 반납 예정순)

🎯 에디터 한줄평

이 글의 진짜 커리큘럼은 20분이 아니라 '4단계의 순서'입니다. 기획 없이 만들면 곧 흩어지고, 스키마 없이 만들면 데이터가 흩어지고, API 없이 만들면 화면과 데이터가 흩어집니다. '수학 표 만들기 → 스키마'라는 연결은 데이터 문해력의 가장 자연스러운 교량입니다. 그리고 H2 콘솔 앞에서 학생들이 '버튼 하나가 데이터 표를 바꾼다'를 목격하는 순간, 백엔드는 더 이상 보이지 않는 마법이 아닙니다.

📚 기술·교육 참고 링크

  • H2 Database 공식 사이트 : 경량 DB 실행·콘솔 사용법
  • MDN fetch : UI에서 내부 API를 부르는 방법
  • 교육과정 연계: 실과·정보(SW 개발 절차), 수학(데이터 관리·표), 국어(요구사항 문장화)와 함께 활용
By 시간: