2026년 9월 6일 일요일

[학급 경영] 우리 반 1인 1역 실천 경험치 클리커 - 마스코트 성장 게임으로 자치 활동 레벨업



우리 반 실천을 경험치로 만드는 2D 클리커 성장 게임 — 1인 1역 자치 보드 완전 정복

🐣 교실 청소, 인사, 배려 같은 실천이 일어날 때마다 재화(코인)가 쌓이고, 학급 마스코트가 성장하며, 우리 반 스킬트리(skill tree)가 해금되는 2D 클리커(clicker) 성장 게임입니다. 창의적 체험활동과 학급자치를 게이미피케이션(gamification)으로 재구성하는 학급 경영 도구입니다.

이름 저장 0 설계가 이번 글의 백미입니다 — '학생별 입력'을 '역할 카드'로 구현해 개인정보 수집·저장 0을 지키고, 누적 경험치는 파일 상단 상수를 하루 한 번 갱신하는 심기 모드(데이터 임베딩) 루틴으로 유지합니다. 전자칠판에 상시 구동하기 좋은 단일 파일입니다.

📖 한 줄 정의

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

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
운영 시나리오 전자칠판에 상시 구동합니다. 아침 자율 시간에 어제(오늘 아침 어제 실천) 발표를 듣고 역할 카드에 코인을 입력하면 마스코트가 성장 연출과 함께 레벨업(level-up)합니다. 하루 1회 '실천 발표 → 코인 입력' 리듬으로 운영.
재화와 성장 실천마다 재화(이름은 우리 반 회의에서 — 뼈다귀 스타일, 별사탕, 반 딩구리 등)를 획득하고, 코인이 경험치로 누적되면 마스코트가 도트 아트로 단계별 성장합니다. 경험치 테이블(레벨별 필요 경험치) 상수 만들기.
스킬트리(skill tree) 레벨 3·5·7에 도달하면 우리 반 스킬이 해금됩니다(청소 스피드 약속, 감사 인사 레벨 2 등). 스킬은 게임 효과가 아니라 '학급 약속 업그레이드'로 설계하면 자치 활동과 딱 맞습니다. 해금 조건과 스킬 이름을 상수 배열로 관리.
이름 저장 0 설계 '학생별 입력'을 이름 대신 역할 카드(청소 대장, 인사 요정, 배려 스프린터...)로 구현합니다. 화면에 이름이 없으니 개인정보 수집·저장·전송 0 원칙을 그대로 통과하고, 역할 카드의 주인은 아날로그 담당표로 약속합니다. 역할 카드 12장을 EMBED_DATA로 심기.
누적 유지법 당일 입력은 세션 메모리(session memory)라 새로고침하면 사라집니다. 그래서 하루를 마칠 때 파일 상단 TOTAL_XP 상수에 합산 갱신(1분)을 합니다 — 데이터를 파일 안에 심는 심기 모드 갱신 루틴입니다. 퇴근 전 TOTAL_XP 갱신 → 내일도 이어서 성장.

2. 핵심 아키텍처 해설 — 성장이 만들어지는 5개의 층

① 무대 해부: 클리커는 '누르고, 쌓이고, 자라난다'

마스코트가 화면 중앙에 있고, 코인 입력마다 재화 이펙트가 튀어오르며 진행바가 차오르는 클리커 무대입니다. 게임 루프(update/draw)는 런 게임 시리즈와 같은 표준 무대를 재활용합니다 — 이번에는 '달리기' 대신 '성장 연출'이 주인공입니다.

② 역할 카드 데이터: 이름 대신 역할로

const ROLE_CARDS = [
  { role: "청소 대장", icon: "broom", coins: 3 },
  { role: "인사 요정", icon: "smile", coins: 2 },
  { role: "배려 스프린터", icon: "heart", coins: 2 }
];
// role·icon·coins만 — 이름 칸은 애초에 만들지 않는다

③ 경험치와 레벨업 공식

const TOTAL_XP = 480;   // ← 하루 끝에 합산 갱신하는 심기 상수

function levelFor(xp) {
  let level = 1, need = 50;
  while (xp >= need) {
    xp -= need;
    level += 1;
    need = 50 * level;
  }
  return { level: level, into: xp, need: need };
}

④ 스킬트리 해금

const SKILLS = [
  { at: 3, name: "청소 스피드", desc: "청소 시간 5분 단축 약속" },
  { at: 5, name: "감사 인사 레벨 2", desc: "월요일 감사 발표 추가" },
  { at: 7, name: "반 도서관 개장", desc: "도서 대출 규칙 개정" }
];

const unlocked = SKILLS.filter(function (s) { return level >= s.at; });

⑤ 오늘의 입력과 성장 연출

let todayCoins = 0;

function addCoins(roleIndex) {
  todayCoins += ROLE_CARDS[roleIndex].coins;
  drawProgress(levelFor(TOTAL_XP + todayCoins));
  sound("coin");   // Web Audio — 코인 획득음
}

역할 카드 클릭 → 코인 획득 이펙트 → 진행바 갱신 → 레벨업 순간 Web Audio '팡파르'와 도트 성장 애니메이션. 하루 리듬(아침 입력 → 퇴근 전 TOTAL_XP 갱신)은 앞선 연재의 심기 모드 갱신 루틴(노벨상 10월 갱신, 발사 일정 아침 갱신)과 같은 원리입니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini가 던지는 질문 3가지(마스코트 컨셉, 역할 카드 구성, 스킬 효과)에 답하면 우리 반 전용 보드가 됩니다.
  3. HTML 파일 실행 — 완성 코드를 '우리반성장.html'로 저장 후 전자칠판에 띄웁니다. 상시 구동이면 아침마다 성장 보드가 열립니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트·이미지·오디오 파일 없이 단일 HTML 파일로 완성한다.
2. 학급 마스코트는 도트 맵(0과 1의 배열)으로 직접 그리고, 레벨 단계별로 3가지 성장 아트를 준비한다.
3. 사운드는 Web Audio API로 직접 합성한다: 코인 '똑', 레벨업 '팡파르', 스킬 해금 '띠링'.
4. 전자칠판·태블릿 대응: 역할 카드 버튼 최소 64x64px, 뷰포트 메타 태그, 360px 화면 가로 스크롤 금지.
5. 입력 데이터는 역할(role)·아이콘(icon)·코인(coins)만 담은 ROLE_CARDS 상수로 심는다 — 학생 이름 칸은 절대 만들지 않는다(개인정보 수집·저장 0).
6. 누적 경험치는 파일 상단 TOTAL_XP 상수로 관리하고, 진행바와 레벨 표시는 levelFor(TOTAL_XP + todayCoins) 결과로 그린다.
7. 레벨 3·5·7마다 SKILLS 배열의 스킬트리를 해금 화면과 함께 보여준다.
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 학급 마스코트 컨셉은 무엇으로 할까? (학교 상징 동물 / 학생들이 만든 캐릭터 / 반 이름 캐릭터)
Q2. 역할 카드는 어떤 것들로 구성할까? (청소·인사·배려 외에 우리 반만의 역할 추가)
Q3. 스킬트리 효과는 어떻게 정할까? (학급 약속 업그레이드 / 자치 활동 보상 / 둘 다)

🎯 에디터 한줄평

'규칙 준수시켜 주기'가 아니라 '우리가 함께 성장하게 만들기' — 이 설계의 진짜 힘은 이름 없는 역할 카드에 있습니다. 개인정보를 다루지 않으면서도 '누가 얼마나 실천했는지'는 역할별 코인으로 충분히 보이고, 마스코트 성장은 개인 경쟁이 아닌 '우리 반 공동 성장'이라는 자치의 본질이 됩니다. 하루 1분의 TOTAL_XP 갱신 루틴은 지속 가능한 교사 운영 설계의 좋은 예입니다. 레벨업 연출 한번에 반 전체가 웃는다면, 그 학급은 이미 자치가 작동하고 있는 것입니다.

📚 기술·교육 참고 링크

  • MDN Canvas API : 도트 마스코트와 성장 연출의 기초
  • MDN Web Audio API : 코인·팡파르 사운드 무설치 합성
  • 교육과정 연계: 창의적 체험활동·학급자치(역할 분담), 수학(통계·비율·경험치 계산)과 함께 활용
  • 활용 팁: 학급 회의 시간에 '재화 이름·스킬 이름 짓기'를 진행하면 게임이 학급 문화로 완성됩니다
By 시간: