우리 반이 밥을 다 먹을 때마다 나무가 자란다 — '잔반 제로 & 분리수거 실시간 에코 뱃지 보드'
🌱 초등 창체·환경 자치 — 급식 잔반 제로를 실천하거나 분리수거를 완료한 학생이 교실 태블릿을 터치하면, 학급 전체의 '지구 살리기 에코 나무'가 새싹에서 거목으로 자라나는 게이미피케이션 환경 자치 대시보드입니다. 잔소리 대신 시각적인 나무 성장 애니메이션과 레벨별 에코 뱃지로 자율적인 친환경 학급 문화를 만듭니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 5단계 에코 나무 성장 캔버스 | 씨앗(0점) → 새싹(20점) → 묘목(50점) → 꽃나무(80점) → 거목(120점)으로 캔버스 애니메이션이 펼쳐집니다. | 점심시간 후 교실 전면 TV에 띄워두고 전교생 터치 참여. |
| 실천별 가중치 포인트 | 잔반 제로(+2점), 분리수거 정돈(+1점), 우유갑 씻기(+1점)를 터치하여 환경 포인트를 적립합니다. | 하루 1인 1회 원터치 기록으로 과도한 경쟁을 방지. |
| 학급 전체 협동 뱃지 | 개인별 순위 대신 '우리 반 전체가 줄인 음식물 쓰레기(kg)' 환산 수치를 함께 표시하여 연대감을 키웁니다. | 100점 달성 시 금빛 팡파르와 함께 '초록 지구 지킴이' 인증 뱃지 획득. |
2. 핵심 아키텍처 해설
① 나무 성장 단계 및 탄소 저감 환산
const TREE_STAGES = [
{ lv: 1, min: 0, label: "씨앗", icon: "🌱", scale: 0.3 },
{ lv: 2, min: 20, label: "새싹", icon: "🌿", scale: 0.5 },
{ lv: 3, min: 50, label: "묘목", icon: "🪴", scale: 0.75 },
{ lv: 4, min: 80, label: "풍성한 나무", icon: "🌳", scale: 1.0 },
{ lv: 5, min: 120, label: "꽃 핀 거목", icon: "🌸", scale: 1.3 }
];
function calcCO2(points) {
// 잔반 제로 1점당 음식물 쓰레기 약 0.15kg, 탄소 0.2kg 저감 환산
return (points * 0.2).toFixed(1);
}포인트에 따라 성장 단계가 자동 판정되고, 과학 교과와 연계된 탄소 저감 수치(kg)가 함께 계산됩니다.
② 순수 캔버스 가지 뻗기 알고리즘
function drawBranch(ctx, startX, startY, len, angle, branchWidth) {
ctx.beginPath();
ctx.save();
ctx.strokeStyle = "#8b5a2b";
ctx.lineWidth = branchWidth;
ctx.translate(startX, startY);
ctx.rotate(angle * Math.PI / 180);
ctx.moveTo(0, 0);
ctx.lineTo(0, -len);
ctx.stroke();
if (len < 12) {
// 나뭇잎 그리기
ctx.beginPath();
ctx.arc(0, -len, 4, 0, Math.PI * 2);
ctx.fillStyle = "#48bb78";
ctx.fill();
ctx.restore();
return;
}
drawBranch(ctx, 0, -len, len * 0.75, -25, branchWidth * 0.7);
drawBranch(ctx, 0, -len, len * 0.75, 25, branchWidth * 0.7);
ctx.restore();
}재귀(recursive) 수식으로 프랙탈 나뭇가지를 그려 외부 이미지 없이도 생명력 넘치는 나무를 브라우저가 직접 그려냅니다.
③ 세션 메모리 보관 및 주간 리셋
실시간 터치 데이터는 브라우저 세션 메모리에 보관되며, 주말 자치 시간 후 '이번 주 기록 저장(CSV)' 버튼으로 내려받아 학급 문집에 기록할 수 있습니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 실천 항목(잔반, 분리수거, 우유갑)과 목표 점수에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
에코트리.html로 저장하여 교실 태블릿에 띄웁니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 캔버스 프랙탈 나무: HTML5 Canvas의 재귀 함수로 단계별로 잎이 무성해지는 에코 트리를 직접 렌더링한다.
3. Web Audio 사운드 합성: 실천 버튼 터치 시 청량한 새소리('삐립') 효과음을 내장 오디오 합성으로 출력한다.
4. 개인정보 0: 학생 개인 이름 대신 모둠명과 학급 누적치만 표기하며, 학내망 원칙을 철저히 준수한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 실천 항목 3가지(잔반 제로, 분리수거, 우유갑)의 점수 가중치를 어떻게 정할까요?
2. 거목 달성 목표 점수를 100점과 150점 중 어느 것으로 잡을까요?
3. 배경 테마를 교실 느낌의 우드 톤과 자연 느낌의 스카이 톤 중 어느 것으로 갈까요?🎯 에디터 한줄평
"'음식 남기지 마라'는 백 번의 잔소리보다, 내가 식판을 비우고 터치할 때 화면 속 나무에 초록 잎사귀 하나가 돋아나는 순간이 아이들의 행동을 바꿉니다. 개인을 감시하는 대신 학급 전체가 하나의 나무를 키워가는 연대의 경험, 그것이 환경 교육이 지향해야 할 가장 따뜻한 모습입니다."
📚 기술·교육 참고 링크
- 환경부 국가환경교육 통합플랫폼 및 초등 에코스쿨 가이드라인
- 교육과정 연계: 초등 3~6학년 창체(환경·생태 자치), 실과(지속가능한 생활), 도덕(지구공동체)
