2026년 9월 6일 일요일

[창체·자치] 아침 등교 브레인 마스터 - 두뇌 깨우기 퍼즐 & 학급 랭킹존



등교 후 5분, 잠든 두뇌를 깨운다 — '학급 브레인 랭킹 게임존 웹앱'

🧠 초등 창체·학급자치 — 아침 등교 시간과 비 오는 날 쉬는 시간, 스마트폰 대신 교실 전자칠판이나 공용 태블릿에서 건전한 두뇌 퍼즐을 풀고 당일 최고 득점자가 '오늘의 브레인 마스터' 뱃지를 획득하는 자율 활동존입니다. 브라우저 로컬 저장소로 하루 랭킹을 안전하게 관리합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
3분 두뇌 스피드 퀴즈 숫자 연산, 색상 일치(스트룹 효과), 기억력 패턴 등 3가지 미니 퍼즐이 60초간 빠르게 이어집니다. 등교 직후 1회 도전으로 아침 집중력을 높입니다.
오늘의 랭킹 & 브레인 마스터 닉네임과 번호로 당일 상위 5명을 명예의 전당에 올리고 1등에게 황금 뱃지를 수여합니다. 매일 아침 9시 자동으로 당일 랭킹이 리셋되는 로컬 루틴.
서버 없는 로컬 완결 외부 서버나 로그인 없이 전자칠판 브라우저 LocalStorage에만 기록되어 개인정보 유출 걱정이 없습니다. 교실 키오스크 전체화면(F11)으로 띄워두고 상시 운영.

2. 핵심 아키텍처 해설

① 미니 두뇌 게임 생성 엔진

function nextQuiz() {
  const types = ["math", "color", "pattern"];
  const t = types[Math.floor(Math.random() * types.length)];
  if (t === "math") {
    const a = Math.floor(Math.random() * 20) + 1;
    const b = Math.floor(Math.random() * 20) + 1;
    return { q: `${a} + ${b} = ?`, ans: a + b, type: "math" };
  }
  // 스트룹 효과 색상 퀴즈 및 패턴 추가
}

외부 API 호출 없이 클라이언트 자바스크립트 난수 엔진이 무제한으로 두뇌 퀴즈를 생성합니다.

② 로컬 랭킹 저장 및 당일 리셋

function saveScore(nick, score) {
  const today = new Date().toISOString().slice(0, 10);
  let data = JSON.parse(localStorage.getItem("brain_rank") || "{}");
  if (data.date !== today) data = { date: today, list: [] };
  data.list.push({ nick, score, time: new Date().toLocaleTimeString() });
  data.list.sort((a, b) => b.score - a.score);
  data.list = data.list.slice(0, 5); // 5등까지
  localStorage.setItem("brain_rank", JSON.stringify(data));
}

날짜가 바뀌면 이전 기록은 자동으로 갱신되고, 당일 상위 5명의 닉네임과 점수만 안전하게 보관합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 게임 제한 시간과 미니 게임 종류에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 브레인존.html로 저장하여 전자칠판에 띄웁니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 CDN, 백엔드 없이 순수 HTML/CSS/JS로 완성한다.
2. 60초 두뇌 챌린지: 연산, 색상 맞추기 등 가벼운 퀴즈를 맞힐 때마다 점수가 올라가며, 콤보 성공 시 보너스 점수를 부여한다.
3. 로컬 랭킹 보드: LocalStorage에 당일 상위 5명(닉네임/점수)을 저장하고 1등에게 황금관 뱃지 아이콘을 띄운다.
4. 사운드 효과: Web Audio API로 정답 시 경쾌한 '퐁', 오답 시 '뚝', 타임오버 시 팡파르음을 합성한다.
5. 학생 개인정보 0: 학생 실명 대신 동물 닉네임이나 번호만 입력받는다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 1판당 플레이 시간을 60초와 90초 중 어느 것으로 할까요?
Q2. 전자칠판 터치 조작을 위해 선택지 버튼 크기를 가로 200px 이상 대형으로 키울까요?
Q3. 게임 화면 배경 테마를 다크 네이비와 밝은 스카이블루 중 무엇으로 할까요?

🎯 에디터 한줄평

"아침 교실에 스마트폰 대신 스스로 두뇌를 깨우는 작은 게임존을 열어주는 것만으로 교실의 공기가 차분하게 정돈됩니다. 순위를 다투는 경쟁이 아니라, 어제보다 발전한 나를 기록하는 기분 좋은 성취가 하루를 시작하는 에너지가 됩니다."

📚 기술·교육 참고 링크

  • 스트룹 효과(Stroop Effect) 인지 심리학 원리 및 초등 주의집중력 훈련 자료
  • 교육과정 연계: 초등 창체(자율활동, 학급자치), 체육·보건(정신건강 및 두뇌 건강)
By 시간: