2026년 9월 6일 일요일

[도서·행정] 도서관 다독 학급 선정 - 학급별 독서 랭킹 & 보고서 통계 대시보드



우리 학교에서 누가 제일 많이 읽었나요? — '도서관 다독 학급 선정 & 독서 이력 통계 관리기'

📊 초등 도서관·독서의 달(9월) 축제 행정 — 학년별·학급별 누적 독서 페이지 수와 월간 완독 권수를 실시간 랭킹 차트로 집계하고, 도서관 소식지용 요약 리포트를 자동 생성합니다. 도서관 담당 교사의 수기 통계 집계 부담을 90% 이상 줄이고, 학교 전체의 독서 문화를 시각화합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
학급별 독서 랭킹 차트 학년 반별로 누적 페이지 수와 완독 권수를 내림차순 랭킹 목록으로 자동 정렬합니다. 1위부터 N위까지 순위가 매겨진 막대 그래프와 총 통계.
독서의 달 우수 다독자 선정 각 학급 상위 3명의 닉네임과 권수를 표시하여 우수 다독자 시상식에 그대로 활용할 수 있습니다. 학급 랭킹 클릭 시 해당 학급 학생들의 상세 통계가 드릴다운됩니다.
소식지용 요약 리포트 생성 '독서의 달 우수반 소식지 출력' 버튼을 누르면 A4 규격 요약 리포트를 @media print 서식으로 인쇄합니다. 교내 인트라넷 게시판이나 학부모 소식지에 바로 활용 가능.

2. 핵심 아키텍처 해설

① 학급 통계 데이터: BOOK_LOG 상수

const BOOK_LOG = [
  { grade: 3, class: 1, pages: 12400, books: 48, topReader: { no: 5, nick: "돌고래", books: 12 } },
  { grade: 3, class: 2, pages: 11800, books: 45, topReader: { no: 2, nick: "코알라", books: 10 } },
  { grade: 4, class: 1, pages: 14200, books: 52, topReader: { no: 8, nick: "해달", books: 15 } }
];

교사가 한 학기 동안 모은 데이터를 미리 심어두면 브라우저에서 즉시 집계되며, 학기말 갱신만으로 재사용 가능합니다.

② 랭킹 알고리즘과 렌더링

function sortRanking(logs) {
  return logs.slice().sort((a, b) => b.pages - a.pages);
}
function drawRankingBars(ctx, ranked) {
  const maxPages = ranked[0].pages;
  ranked.forEach((r, i) => {
    const barH = 40;
    const w = (r.pages / maxPages) * 500;
    ctx.fillStyle = i === 0 ? "#FFD700" : i === 1 ? "#C0C0C0" : "#CD7F32";
    ctx.fillRect(180, 40 + i * 50, w, 32);
    ctx.fillStyle = "#2d3748";
    ctx.fillText(r.grade + "학년 " + r.class + "반", 30, 65 + i * 50);
  });
}

금·은·동 메달 색상이 자동으로 부여되는 랭킹 막대 차트를 Canvas로 직접 렌더링합니다.

③ 도서관 소식지 @media print 출력

'독서 소식지 인쇄' 버튼을 누르면 브라우저 인쇄 화면이 열리며, A4 세로 규격의 깔끔한 도서관 소식지 서식이 출력됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학년·학급 수와 상위 우수 다독자 기준에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 도서통계.html로 저장하여 도서관 행사에 활용합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 학급별 독서 랭킹: 누적 페이지 수와 완독 권수를 내림차순 정렬하여 금·은·동 메달 색상으로 Canvas 랭킹 차트를 렌더링한다.
3. 학생 개인정보 0: 학급명과 모둠·닉네임만 표기하며, 개인 실명은 일절 취급하지 않는다.
4. @media print 소식지: 독서의 달 우수 학급 목록 및 통계 요약을 A4 세로 규격 인쇄용 소식지로 출력한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 학년별로 몇 개 반씩 통계에 포함할까요? (기본: 1~6학년 × 4반 = 24학급)
Q2. 우수 다독자는 학급별 상위 1명으로 선정할까요, 상위 3명으로 늘릴까요?
Q3. 랭킹 차트의 막대 색상을 오렌지 블록으로 할까요, 금은동 메달 계열로 할까요?

🎯 에디터 한줄평

"독서는 개인의 여정이지만, 학교 차원에서 누가 얼마나 읽었는지 그래프로 시각화하면 한 사람의 성취가 학교 전체의 챌린지가 됩니다. 데이터로 순위를 매기되, 모든 아이들이 각자의 속도로 진도를 나가고 있음을 동시에 확인시켜주는 것이 균형 잡힌 독서 문화 지향점입니다."

📚 기술·교육 참고 링크

  • 학교 도서관 통계 분석 및 다독 활성화 프로그램 이론
  • 교육과정 연계: 초등 국어(독서 습관 형성), 도서관 활용 교육, 학교 행정 자동화
By 시간: