2026년 9월 6일 일요일

[학급 경영] 우리 반 1인 1역 실천 학급 스네이크 성장 대시보드



뱀 몸통에 연결되는 우리 반 이름들 — 1인 1역 실천 학급 스네이크 성장 대시보드 완전 정복

🐍 학급 자치 활동을 '빼빼로 게임'처럼 보여주는 대시보드입니다. 매일 아침 학생들이 청소, 우유 당번, 환기 등 1인 1역을 하나씩 완수할 때마다 스네이크(뱀)의 몸통 블록이 하나씩 늘어나고, 늘어난 블록마다 실천한 학생들의 이름(닉네임)과 칭찬 스티커가 표시됩니다.

점점 길어지는 뱀은 곧 '우리 반의 성장 그래프' 자체입니다. 외부 게임 엔진 없이 순수 캔버스로 구현되며, 명단 데이터는 심기 모드(데이터 임베딩) 상수로 심어 학내망 원칙(외부 통신 0)을 지킵니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
학생을 먹이로 연결하는 뱀 화면에 떠다니는 먹이(음식)를 뱀이 먹을 때마다 뱀 몸통이 길어지는데, 먹이 자리마다 학생 닉네임(개인정보 대체)이 붙어 출발합니다. 당번 완수 클릭 → 몸통 늘어나기.
실천명단 심기 (닉네임만) 학생 실명 대신 번호와 닉네임(코알라, 돌고래 등)만 심어 개인정보 0 원칙을 지키는 대시보드 운영입니다. 닉네임 상수 심기 루틴.
실천 완수 연출 1인 1역 클릭 시 부드러운 이동 애니메이션과 Web Audio 합성음이 터지고, 화면 하단에 '오늘 우리 반 스네이크 길이'가 표시됩니다. 모둠별 길이 비교 랭킹.

2. 핵심 아키텍처 해설

① 학급 구성원 데이터 심기 (닉네임 상수)

const PLAYERS = [
  { no: 1, nick: "코알라" },
  { no: 2, nick: "돌고래" },
  { no: 3, nick: "나무늘보" }
];

외부 데이터베이스 대신 파일 상단 상수에 학급 구성원 목록(번호, 닉네임)을 심어 둡니다. 실명 저장을 완전히 배제하여 학내망 개인정보 0 원칙을 완벽히 준수합니다.

② 스네이크 블록 늘어나는 물리 로직

let snake = [{ x: 1, y: 1 }];   // 처음 뱀은 1칸짜리

function eatFood(player) {
  snake.push({ id: player.no, nick: player.nick, stamp: true });
  sound("eat");   // 뱀이 늘어나는 소리
}

먹이(1인 1역 실천)가 발생할 때마다 snake 배열 끝에 새 몸통 블록이 추가되어 화면 렌더링 시 뱀이 실제로 길어지고, 그 블록에 학생 닉네임 텍스트가 표시됩니다.

③ 캔버스 렌더링 루프 (원근 블록)

function drawSnake() {
  snake.forEach(function (part, i) {
    // 몸통에 닉네임 텍스트를 보이게 그리기
    ctx.fillStyle = i % 2 === 0 ? "#2f855a" : "#276749";
    roundRect(ctx, part.x * GRID, part.y * GRID, GRID, GRID, 8);
    if (part.nick) {
      ctx.fillStyle = "#fff";
      ctx.font = "bold 12px 맑은 고딕";
      ctx.fillText(part.nick, part.x * GRID + 6, part.y * GRID + 22);
    }
  });
}

④ Web Audio API 블록 추가 효과음

function sound(kind) {
  const ctx = new (window.AudioContext || window.webkitAudioContext)();
  const osc = ctx.createOscillator();
  osc.type = kind === "eat" ? "sine" : "square";
  osc.frequency.setValueAtTime(kind === "eat" ? 660 : 220, ctx.currentTime);
  osc.connect(ctx.destination);
  osc.start(); osc.stop(ctx.currentTime + 0.1);
}

⑤ 원칙·정합

단일 HTML 완결, 외부 통신 0. 학생 실명 저장 금지, 개인 성적이 아닌 '오늘의 성장'만 전시. 길어진 뱀은 세션 메모리에만 유지되고 필요 시 CSV 내보내기(옵션)로 정리할 수 있습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사해 Gemini에 붙여넣습니다.
  2. 역질문 답변 — Gemini의 질문 3가지(닉네임 데이터, 뱀 이동 방향, 칭찬 스티커 연출)에 답하면 단일 파일 코드가 확정됩니다.
  3. HTML 파일 실행 — 완성 코드를 '우리반스네이크.html'로 저장 후 더블클릭하면 교실 TV·전자칠판에 상시 게시할 수 있습니다.

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

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리, CDN, 외부 이미지 없이 순수 바닐라 JS와 HTML5 Canvas만으로 단일 HTML 파일로 완성한다.
2. 스네이크(뱀)는 자동으로 천천히 기어가며, 뱀 몸통 블록 하나하나에 학생 닉네임 텍스트가 크게 표시되어야 한다.
3. 파일 상단 PLAYERS 상수에 학생 닉네임 20명 이상을 심어두고(심기 모드 — 데이터 임베딩), 화면 상단에 1인 1역 목록(청소, 우유 당번, 환기, 정리 정돈 등)을 제시한다.
4. 실천 완수 체크 버튼을 누르면 뱀이 해당 학생 닉네임 블록을 하나 추가해 길어지고, 동시에 Web Audio 합성음 '우물' 소리가 나야 한다.
5. 모든 학생의 1인 1역이 완료되면 화면 전체에 빵빠레 소리(Web Audio)와 축하 연출이 터지게 한다.
6. 학생 실명 대신 번호와 닉네임만 사용한다 (실명 저장 일절 금지, 개인정보 0).
7. 모바일 및 태블릿 터치 버튼(88px 이상)을 완벽 지원한다.
8. // TODO, /* 생략 */ 같은 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 1인 1역 목록은 무엇으로 구성할까요? (청소 / 우유 당번 / 환기 / 창문 닦기 / 칠판 지우기 등)
Q2. 뱀의 이동 방향은? (자동 순환 / 화살표 조작형)
Q3. 학급 화폐나 칭찬 스티커로 갱신될 수 있게 할까요?

🎯 에디터 한줄평

"내가 칠판을 닦았더니 내 이름이 뱀 몸통에 들어갔다!" — 작은 나의 실천이 뱀을 늘리는 즐거움으로 바뀌면서 학급 전체의 성장이 게임 속 시각으로 완성됩니다. 간단한 닉네임과 터치 한 번으로 개인정보 0, 행정 효율 100% 달성하는 완벽한 자치 교구입니다.

📚 기술·교육 참고 링크

  • MDN — Canvas 튜토리얼 : 그리드 그래픽, 충돌 감지 및 애니메이션 루프
  • 교육과정 연계: 창의적 체험활동(학급 자치, 청소 활동), 실과(SW 활용)와 직접 연계
By 시간:
라벨: ,