2026년 9월 7일 월요일

[창체·독서] 학급 독서 마일리지 - 다독왕 랭킹과 한 줄 서평 피드 대시보드



책 한 권마다 나의 레벨이 오르는 '학급 독서 마일리지 & 한 줄 서평 피드'

📚 초등 창체·독서 자치 — 학생들이 읽은 책 제목·별점·서평을 입력하면 학급의 다독왕 랭킹 보드와 실시간 한 줄 서평 피드가 화면에 렌더링되는 게이미피케이션 독서 자치 도구입니다. 별점 스타를 모아 책 읽기 레벨을 올리고, 친구들의 서평을 피드로 공유하는 풍요로운 학급 독서 문화를 만듭니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
다독왕 랭킹 보드 학급별 읽은 책 권수를 합산하여 TOP 5를 큰 숫자로 표시합니다. 1위 모둠에 주간 칭찬 뱃지가 표시됩니다. 금요일 자치 시간에 전자칠판에 띄우고 다독왕 시상.
한 줄 서평 피드 (SNS 스타일) 인스타그램 피드처럼 학생들이 쓴 서평이 시간순으로 흐릅니다. 별점 5개가 이모지로 함께 보입니다. "책 제목 ★★★★☆ — 한 줄 감상" 형태의 카드 피드.
닉네임별 독서 레벨 책 읽은 권수에 따라 학생의 닉네임 옆에 레벨 뱃지(문학 초보 → 문학 챔피언)가 자동 부여됩니다. 5권: 도서관 초보, 10권: 독서 탐험가, 20권: 문학 챔피언.

2. 핵심 아키텍처 해설

① 독서 기록 상수 및 랭킹 정렬

const BOOKS_READ = [
  { nick: "돌고래", title: "가입인사", rating: 4, line: "가족사를 그리는 방식이 신선했다." },
  { nick: "코알라", title: "달까지 가자!", rating: 5, line: "상상력이 창의적이었다." }
];

function rankBy() {
  return BOOKS_READ.slice().sort((a, b) => b.rating - a.rating);
}

학생들이 입력한 독서 기록을 배열 상수에 담고, 별점 기준으로 내림차순 정렬합니다.

② 서평 피드 카드 렌더링

function renderFeed(list) {
  const feed = document.getElementById("feed");
  feed.innerHTML = "";
  list.forEach(book => {
    const card = document.createElement("div");
    card.className = "review-card";
    card.innerHTML = `
${book.title} ${"★".repeat(book.rating)}

      
${book.line}
by ${book.nick}`;
    feed.appendChild(card);
  });
}

배열을 순회하며 SNS 피드 스타일의 카드를 동적으로 생성합니다.

③ 닉네임별 독서 레벨 뱃지 시스템

function level(n) {
  if (n >= 20) return { badge: "🏆", label: "문학 챔피언" };
  if (n >= 10) return { badge: "🌟", label: "독서 탐험가" };
  if (n >= 5)  return { badge: "🌱", label: "독서 초보" };
  return { badge: "📖", label: "새싹 독자" };
}

누적 권수에 따라 자동으로 레벨 뱃지가 부여되어, 학생들이 자기 독서 여정을 시각적으로 체감합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 레벨 임계값(5권, 10권, 20권)과 피드 디자인에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 독서마일리지.html로 저장하여 교실 태블릿에 배포합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const BOOKS_READ = [...] 상수에 서평 5건 이상의 예시 데이터를 내장하여 즉시 렌더링되도록 한다.
3. 닉네임 기준: 학생 실명을 사용하지 않고 동물·캐릭터 닉네임만 표기하며, 모든 데이터는 브라우저 세션 메모리로만 유지한다.
4. 모바일 반응형: 스마트폰 360px 화면에서도 피드 카드가 세로 스크롤로 자연스럽게 흐르도록 설계한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 레벨 임계값을 5권/10권/20권으로 잡을까요, 아니면 다른 기준으로 할까요?
2. 서평 피드에 이모지 아이콘(별점 + 책 이모지)을 함께 표시할까요?
3. 화면 테마는 도서관 느낌의 페이퍼 크림 톤이 좋을까요?

🎯 에디터 한줄평

"독서 기록장을 쓰기 싫어하던 아이들이 스마트폰 화면에 별점 스타를 쌓으면서 레벨이 오르는 것을 목격하는 순간, 독서는 의무에서 자율로 바뀝니다. 친구들의 서평이 실시간으로 화면에 흐르는 것만으로도, 책에 대한 대화가 교실 곳곳에서 자연스럽게 시작됩니다."

📚 기술·교육 참고 링크

  • 국립어린이청소년도서관 및 초등 독서교육 표준 가이드라인
  • 교육과정 연계: 초등 3~6학년 국어(독서 표현과 공유), 창체(학급 자치 독서 활동)
By 시간: