매일 아침 10분, 학급 개선 릴레이 코딩! — 바이브 코딩 자치 앱 쇼케이스
🌅 초등 5~6학년 실과(SW 활용), 창체(자치), 도덕(공동체) 융합 — 학급 자치 임원들이 매일 아침 종례 10분 동안 모둠별로 학급 개선 웹앱 조각을 추가하고, 금요일 종례에 완성된 앱을 전체 쇼케이스로 발표하는 지속 가능한 SW 릴레이 프로젝트입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 종이 안내문 ➔ 릴레이 코딩 보드 | 담임이 만들어 주는 학급 알림판 대신, 학생들이 스스로 만드는 알림판입니다. | 월요일: 급식 알레르기 경고, 화요일: 분리수거 체크, 수요일: 발표 순서 추첨 … 금요일: 완성 쇼케이스. |
| 개인 과제 ➔ 모둠 릴레이 | 매일 모둠이 돌아가며 조각을 추가하고, 다음 모둠이 이어서 코드를 수정합니다. | 이전 모둠이 만든 HTML 파일에 새로운 카드 한 장을 추가하는 이어달리기 방식. |
| 제출과 끝 ➔ 주간 쇼케이스 | 금요일 종례에 전자칠판에서 완성 앱을 모두 시연하며 다음 주 개선 방향을 함께 정합니다. | 긍정 피드백 공유 및 다음 주 개선 아이디어 실시간 수렴. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 단일 HTML 파일로 즉시 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 릴레이 주제, 참여 모둠 수, 쇼케이스 방식에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
바이브릴레이.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 릴레이 데이터 심기 모드: const RELAY = [{ week: 1, group: "1팀", title: "급식 알레르기 경고", code: "..." }, ...] 상수에 모둠별 기여 조각을 내장한다.
3. 코드 조립 파이프라인: 모둠별로 작성한 HTML 조각을 화면에서 붙여넣으면 자동으로 통합된 파일이 완성되는 릴레이 편집기를 구현한다.
4. Web Audio 사운드: 새 조각 추가 '똑', 릴레이 완주 '팡파르'를 순수 Web Audio API로 합성한다.
5. 학생 개인정보 0: 학생 실명을 절대 입력받지 않으며, 모둠 번호 및 팀 닉네임만 표기한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 참여할 모둠은 몇 개인가요? (기본: 4~6개 모둠)
2. 릴레이 주제는 무엇인가요? (예: 급식 알림판, 분리수거 체크기, 발표 순서 추첨기 등)
3. 금요일 쇼케이스는 전자칠판 실시간 시연으로 할까요, 아니면 미리 만들어 둔 앱 발표 형식으로 할까요?🎯 에디터 한줄평
"혼자서 완성하려고 하면 무겁고 무서운 SW지만, 모둠이 이어받는 릴레이는 상상이 현실이 됩니다. 어제 다른 모둠이 만든 코드에 오늘 우리가 카드 한 장을 더하고, 내일 다른 모둠이 그 위에 또 하나를 올립니다. 소프트웨어 개발의 본질인 협업을 아이들 몸에 새기는 가장 자연스러운 방법입니다."
📚 기술·교육 참고 링크
- 교실 SW 릴레이 코딩 및 학급 자치 활동 연계 가이드
- 교육과정 연계: 초등 5~6학년 실과(소프트웨어 활용), 창체(자치 활동), 도덕(협력과 배려)
