나의 완독 D-Day는 언제일까? — '한 학기 한 권 독서 마라톤 & 완독 예측 트래커'
📚 초등 3~6학년 국어 '한 학기 한 권 읽기' 단원 — 아침 독서 시간마다 읽은 페이지 수를 입력하면, 내 독서 속도를 분석해 목표 책의 완독 예상 날짜(D-Day)를 자동 계산하고 학급 독서 마라톤 뱃지를 수여하는 수업 프로젝트입니다. 수기 독서 기록장의 번거로움 없이 지속적인 독서 동기를 부여합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 완독 D-Day 자동 계산 | 총 페이지 수 ÷ 최근 7일 평균 읽은 페이지 수로 내 완독 예상 날짜를 매일 자동 갱신합니다. | "목표 도착: 10월 28일 (D-45)" 타이머가 화면에 크게 표시됩니다. |
| 독서 진도 시각화 | 마라톤 코스에 사각형 블록(페이지)이 하나씩 채워지는 진행률 그래프와 현재 위치 표시. | 읽은 페이지 수 누적에 따라 색상이 변하는 마라톤 코스 트랙. |
| 학급 뱃지 시스템 | 매주 50페이지 이상 읽으면 브론즈, 100페이지 이상이면 실버, 200페이지 이상이면 골드 뱃지를 획득합니다. | '오늘 한 문장' 인상 깊은 구절 입력으로 인사이트 카드가 자동 생성. |
2. 핵심 아키텍처 해설
① 독서 속도 분석 알고리즘
function calculateDDay(entries, totalPages) {
if (entries.length === 0) return { dday: "-", days: 0 };
const recent = entries.slice(-7);
const pagesRead = recent.reduce((sum, e) => sum + Number(e.pages), 0);
const avgPerDay = pagesRead / recent.length;
const remaining = totalPages - entries.reduce((s, e) => s + Number(e.pages), 0);
const daysLeft = Math.ceil(remaining / avg);
return { dday: "D-" + daysLeft, days: daysLeft, avg: avg };
}최근 7일간의 평균 독서 속도를 바탕으로 남은 페이지 수를 나누어 완독 예상 날짜를 동적으로 계산합니다.
② Canvas 독서 마라톤 트랙 시각화
function drawTrack(ctx, totalPages, readPages) {
const blockW = 5;
const filled = Math.floor((readPages / totalPages) * 200);
for (let i = 0; i < 200; i++) {
const x = 20 + i * 6;
ctx.fillStyle = i < filled ? "#FF9800" : "#E0E0E0";
ctx.fillRect(x, 100, 5, 40);
}
// 현재 위치 마커: 작은 달리기 아이콘
const runnerX = 20 + filled * 6;
ctx.fillText("🏃", runnerX, 150);
}책 페이지 수를 200개의 트랙 블록으로 환산하고, 읽은 만큼 오렌지색으로 채워나가는 마라톤 코스 애니메이션을 제공합니다.
③ 인상 깊은 한 줄 서평 카드
오늘 읽은 구절 중 가장 마음에 와닿는 한 줄을 입력하면 배경색이 자동으로 변하는 '나만의 문장 카드'가 생성됩니다. 학기말 모으면 나만의 독서 감상 콜라주가 됩니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 목표 페이지 수(300~500p)와 진도 트랙 색상에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
독서마라톤.html로 저장하여 아침 독서 시간에 활용합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 서버 통신 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 완독 D-Day 예측: 최근 7일간의 일일 독서 페이지 수 평균을 계산하여 남은 페이지로 나누어 목표 완독일을 도출한다.
3. Canvas 마라톤 트랙: 읽은 페이지 비율에 따라 트랙 블록이 채워지는 시각적 진행률 막대를 Canvas로 그린다.
4. 로컬 기록 보관: 학생 번호와 닉네임만 사용하며, 데이터는 브라우저 localStorage에 안전하게 저장한다.
5. 학생 개인정보 0: 이름 이외에 연락처, 주소 등 민감 정보는 일절 취급하지 않는다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 목표 책의 총 페이지 수는 대략 몇 페이지 정도인가요? (기본값: 400p)
Q2. 학기말 보상 뱃지 기준을 주간 50p로 설정할까요?
Q3. 진행률 트랙 색상을 트랙 토너먼트(주황) 계열로 할까요, 스카이 블루 계열로 할까요?🎯 에디터 한줄평
"완독이란 막연한 다짐이 아니라 수학적인 예측입니다. 내가 하루 평균 12.5쪽을 읽는다는 사실을 알고, 남은 300쪽을 계산해보면 'D-24'라는 날짜가 생깁니다. 막연한 다짐이 구체적인 목표로 바뀌는 순간, 아이들은 자기 속도를 이해하고 스스로 다독 계획을 세우게 됩니다."
📚 기술·교육 참고 링크
- 독서 습관 형성 이론(독서 완독률 예측), 진도율 및 성취 추적 알고리즘
- 교육과정 연계: 초등 국어(한 학기 한 권 읽기, 읽기 전략), 도덕(자기주도 학습과 인내)
