독감·코로나 유행 시 교무실에서 바로 띄우는 '교내 감염병 실시간 결석 현황 대시보드'
🏥 보건행정 및 학교 안전 관리 — 신학기나 환절기마다 번지는 유행성 감염병(독감, 수족구, 코로나 등) 발생 시, 담임교사들이 학생 결석 사유를 원클릭으로 선택하면 전교 학년별·반별 감염병 발생 추이가 실시간 히트맵(Heatmap)으로 자동 집계됩니다. 메신저로 묻고 엑셀로 취합하던 보건교사의 야근 업무를 단 1분으로 줄여주는 신속한 방역 지원 포털입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 학년/반 매트릭스 히트맵 | 1학년부터 6학년까지 각 반별 결석자 수가 숫자로 표시되며, 환자가 많은 반은 자동으로 붉은색 농도가 짙어지는 시각화입니다. | 보건실 모니터에 상시 띄워두고 전교 유행 추이를 한눈에 직관적으로 파악. |
| 감염병 질환별 분류 통계 | 독감(A형/B형), 수족구, 코로나, 기타 열성 질환별로 클릭 한 번에 필터링되어 어떤 질병이 집중 발생 중인지 분류됩니다. | 'A형 독감 14명, 수족구 3명' 등 교육청 즉시 보고 서식으로 수치 정리. |
| 완전 오프라인 교내 보안 | 학생의 결석 사유와 건강 정보는 민감한 개인정보이므로, 외부 클라우드 DB 없이 교내 인트라넷이나 교무실 로컬에서만 동작합니다. | 담임교사용 비밀번호 잠금 기능으로 외부 유출을 원천 차단. |
2. 핵심 아키텍처 해설
① 결석 데이터 집계: ABSENT_DATA 상수
const ABSENT_DATA = [
{ grade: 1, classNo: 2, disease: "독감(A형)", count: 3 },
{ grade: 3, classNo: 1, disease: "수족구", count: 2 },
{ grade: 5, classNo: 3, disease: "독감(B형)", count: 4 }
];학생 실명 없이 학년, 반, 질환명, 결석 인원 수만 숫자로 관리하여 민감한 건강 정보의 노출을 구조적으로 방지합니다.
② 히트맵 컬러 농도 계산
function getHeatColor(count) {
if (count === 0) return "#f3f4f6";
if (count <= 2) return "#fed7aa"; // 연한 주황
if (count <= 4) return "#fb923c"; // 짙은 주황
return "#ef4444"; // 붉은 경고 (5명 이상)
}반별 환자 수에 비례하여 셀의 배경색을 연한 주황에서 짙은 붉은색으로 동적 할당함으로써, 보건교사가 집단 감염 의심 반을 0.1초 만에 감지할 수 있습니다.
③ 교육청 보고용 CSV 원클릭 추출
화면 상단의 '교육청 보고 양식 내보내기' 버튼을 누르면 당일 전교 감염병 현황(일자, 학년, 반, 질환명, 결석자 수)이 표준 CSV 표로 자동 다운로드됩니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 학교 학급 규모(1~6학년 학급 수)와 주요 감염병 목록에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
감염병대시보드.html로 저장하여 보건실 PC에서 엽니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const ABSENT_DATA = [...] 상수에 전교 1~6학년 각 반의 예시 결석 데이터를 내장하여 브라우저 실행 즉시 히트맵이 나타나도록 한다.
3. 히트맵 매트릭스 렌더링: 1~6학년(행) × 1~4반(열) 그리드 테이블을 구성하고, 각 셀의 결석자 수에 따라 배경색 농도를 계산하여 시각화한다.
4. 개인정보 보호: 학생 실명은 일체 다루지 않으며, [학년/반/질환/인원수] 통계치만 취급하여 학내망 원칙을 철저히 준수한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 우리 학교의 학년당 평균 학급 수(예: 3반, 4반, 6반)는 몇 반인가요?
2. 기본으로 집계할 주요 질환 목록(독감, 수족구, 코로나, 감기, 기타) 5가지를 지정할까요?
3. 셀 클릭 시 상세 질환 팝업 창을 띄울까요, 아니면 하단에 요약 바로 띄울까요?🎯 에디터 한줄평
"환절기 아침마다 메신저 알림창에 쏟아지는 '우리 반 독감 2명 결석이요' 쪽지들을 메모지에 적어 더하던 보건교사의 손길을 기억합니다. 학년과 반의 격자 위에 색깔로 타오르는 이 히트맵은, 단순한 숫자 취합을 넘어 집단 유행을 사전에 막아내는 학교 방역의 가장 든든한 레이더망입니다."
📚 기술·교육 참고 링크
- 질병관리청 및 교육부 학생 감염병 예방 위기대응 매뉴얼
- 교육과정 연계: 보건행정, 감염병 예방 수칙, 교내 방역 안전 관리
