2026년 9월 8일 화요일

[창체·자치·실과] 교실 분실물 & 학급 비품 스마트 보관함 - 사물함 위치 시각화 대시보드

"선생님, 제 연필 어디 갔어요?"를 끝내는 법 — 교실 내 분실물 & 학급 비품 위치 시각화 스마트 보관함 웹 대시보드

🎒 초등 전 학년 창의적 체험활동 자치 활동 및 실과 '생활 자원 관리' 단원 — 매일 교탁 위에 수북이 쌓이는 지우개, 연필, 네임펜 등 분실물과 공용 줄넘기, 보드게임, 보조 배터리 등 학급 비품을 교실 사물함 및 수납장 그리드(Grid) 화면에 등록하여, 물건을 잃어버린 학생이 자기 자리에서 클릭 한 번으로 어느 수납함에 보관되어 있는지 실시간으로 찾아가는 스마트 분실물 센터입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
교탁 위 플라스틱 바구니 vs 디지털 수납함 먼지 쌓이던 실물 바구니 대신, 4×6 사물함 칸 번호와 수납 위치가 화면에 블록 형태로 명확히 표시됩니다. "지우개 분실" 검색 시 "사물함 3번 상단 바구니에 보관 중" 하이라이트.
학급 1인 1역 '정리 부장'의 실전 도구 정리 당번 학생이 바닥에 떨어진 물건을 주워 품목, 색상, 보관 칸을 선택해 '등록' 버튼만 누르면 끝납니다. 등록 시 칭찬 스탬프와 함께 학급 자치 기여도 포인트 자동 적립.
주인 찾기 완료(Claim) 원클릭 반환 물건을 찾아간 학생이 화면에서 '찾아감' 버튼을 누르면 목록에서 회색으로 전환되며 처리 이력이 남습니다. 학기말 미수령 물품 나눔 장터 목록으로 원클릭 CSV 내보내기.

2. 핵심 아키텍처 해설

① 사물함 보관함 데이터셋: CABINET_ITEMS 상수

const CABINET_ITEMS = [
  {
    id: "item-1",
    name: "파란색 뚜껑 텀블러",
    category: "학용품/물병",
    location: "수납장 A-2",
    date: "9월 7일 2교시",
    finder: "3번 정리대장",
    status: "보관중" // 보관중, 찾아감
  },
  {
    id: "item-2",
    name: "30cm 투명 방안자",
    category: "문구",
    location: "교탁 첫 번째 서랍",
    date: "9월 6일 방과후",
    finder: "선생님",
    status: "찾아감"
  }
];

교실 수납공간 구역(사물함 A~D열, 교탁 서랍 등)과 보관 물품 메타데이터를 상수로 관리하는 심기 모드(데이터 임베딩) 표준 설계입니다.

② CSS Grid 교실 사물함 시각화 맵

.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.locker-box {
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
  min-height: 80px;
}

.locker-box.has-item {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
}

실제 교실 뒤편 사물함 번호 배열과 똑같은 바둑판 배치를 순수 CSS Grid로 재현하여 직관적인 위치 인지를 돕습니다.

③ 브라우저 LocalStorage 기반 오프라인 저장

등록 및 찾아감 상태는 학생 개인 브라우저가 아닌 교실 전면 TV/키오스크 태블릿의 로컬 저장소에 안전하게 누적되며, 외부 클라우드 전송이 전혀 없습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 사물함 규격(가로×세로 칸수)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 스마트보관함.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 DB나 서버 없이 순수 바닐라 HTML/CSS/JS 및 LocalStorage로 완성한다.
2. 심기 모드(데이터 임베딩): const CABINET_ITEMS = [...] 상수에 교실 대표 분실물 및 공용 비품 4~6개의 보관 위치 샘플을 내장한다.
3. 사물함 격자 시각화: 교실 사물함(가로 4칸 × 세로 4칸 등)을 그리드로 렌더링하고, 물품이 들어있는 사물함 칸에 알림 배지와 파란색 테두리를 부여한다.
4. 물품 등록 및 찾아감 필터: 상단에 물품 검색창과 '보관 중만 보기' 체크박스를 제공하고, 물품을 클릭하면 '주인 찾아감' 처리 토글을 지원한다.
5. 학생 개인정보 0: 잃어버린 학생 실명을 적지 않고 품목 특징(예: 검은색 삼색볼펜)과 보관 위치만 기록한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 교실 사물함 배치(예: 가로 5칸 × 세로 4칸)는 어떻게 설정할까요?
2. 공용 비품(보드게임, 체육 교구 등)도 함께 관리할 수 있는 비품 탭을 분리할까요?
3. 물품 등록 시 사진 대신 귀여운 이모지 아이콘(✏️, 텀블러🥤, 모자🧢 등)을 고를 수 있게 할까요?

🎯 에디터 한줄평

"교실 바닥에 뒹굴던 지우개 하나가 제 주인을 찾아가는 과정은 단순한 청소가 아닙니다. 물건의 소중함을 알고 공동체의 자원을 존중하는 가장 따뜻한 자치 훈련입니다. 화면 속 사물함 번호 하나를 찾아가는 아이들의 발걸음에서 디지털이 교실의 일상을 얼마나 질서 있고 다정하게 만드는지 확인하게 됩니다."

📚 기술·교육 참고 링크

  • 초등 학급 자치 1인 1역 '환경 정리 및 물품 관리부' 운영 실무 가이드
  • 교육과정 연계: 초등 전 학년 창의적 체험활동(자율·자치활동), 실과(생활 자율 관리)
By 시간: