2026년 9월 8일 화요일

[창체·실과] 교실 불편 해결 아이디어톤 - 학생 주도 1일 1웹앱 제작 챌린지

교실의 작은 불편, 우리가 직접 코딩으로 푼다! — 우리 반 불편 사항 해결 아이디어톤 & 1일 1웹앱 제작 챌린지

💡 초등 5~6학년 창의적 체험활동 및 실과 '소프트웨어와 문제 해결' 단원 — "우유 당번 확인이 헷갈려요", "도서관 책 반납일이 기억 안 나요" 등 아이들이 교실 생활에서 겪는 생생한 불편을 발굴하고, 브레인스토밍부터 요구사항 정의, 제미나이 프롬프팅을 거쳐 단 하루 만에 작동하는 웹앱을 만들어 배포하는 해커톤형 프로젝트 수업입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
불평하기 vs 해결사 되기 교실 규칙에 대해 단순히 불만을 털어놓는 데서 끝나지 않고, "어떤 도구가 있으면 편해질까?"로 생각을 전환해 직접 만듭니다. 포스트잇에 불편 3가지 적기 ➔ 투표로 모둠 대표 해결 과제 1개 선정.
4단계 린(Lean) 빌드 파이프라인 불편 한 줄 정의 ➔ 해결 기능 2가지 압축 ➔ 제미나이 1차 생성 ➔ 교실 실기 테스트의 초단기 사이클을 경험합니다. 2시간 블록 수업 안에 기획부터 실행 가능한 HTML 파일 완성까지 완결.
학급 공식 앱 스토어 공유 각 모둠이 만든 단일 HTML 파일을 학급 공용 PC나 전자칠판의 '우리 반 앱 서랍'에 바로가기로 등록해 매일 실사용합니다. 일주일간 사용 후 '가장 유용했던 앱' 피드백 스티커 수여.

2. 핵심 아키텍처 해설

① 교실 문제 정의 템플릿: PROBLEM_SPEC 상수

const PROBLEM_SPEC = {
  problem: "급식 먹을 때 오늘 메뉴 알레르기 유발 물질 확인이 번거로움",
  targetUser: "우리 반 전체 학생",
  coreFeatures: [
    "오늘의 식단 텍스트를 입력하면 알레르기 유발 번호(1~19번) 강조 표시",
    "내 알레르기 번호를 체크해두면 경고 팝업 및 배경색 변경"
  ],
  outputType: "단일 HTML 웹앱"
};

기능을 욕심내다 미완성으로 끝나는 일을 막기 위해, 핵심 기능 딱 2가지만 명세서로 압축해 프롬프트에 넣는 심기 모드(데이터 임베딩) 사전 기획 규격입니다.

② 모둠별 앱 서랍 런처(Launcher) 구조

const CLASS_APPS = [
  { id: "app-1", name: "우유 당번 자동 알리미", author: "1모둠", file: "milk_helper.html", icon: "🥛" },
  { id: "app-2", name: "급식 알레르기 세이프존", author: "2모둠", file: "allergy_safe.html", icon: "🥗" },
  { id: "app-3", name: "쉬는 시간 소음 신호등", author: "3모둠", file: "noise_light.html", icon: "🚦" }
];

각 모둠이 완성한 단일 파일들을 학급 전자칠판에서 태블릿 터치 한 번으로 띄울 수 있도록 목록을 관리하는 가벼운 런처 대시보드 설계입니다.

③ 개인정보 0 학내망 원칙 준수

학생 실명 대신 '1모둠', '디지털해결사' 등 모둠 닉네임만 표시하며, 사용자 설정값은 브라우저 localStorage에만 보관되어 외부 유출이 원천 차단됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 우리 반의 해결 대상 불편 사항에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 교실해결앱.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 CDN, 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 초간결 MVP 규칙: 해결하고 싶은 교실 불편 사항에 대해 핵심 인터랙션 버튼 2개와 결과 카드 1개로 화면을 압축 구성한다.
3. 로컬 지속성: 브라우저 localStorage를 활용하여 새로고침해도 학생이 설정한 옵션이나 데이터가 유지되도록 한다.
4. 학생 개인정보 0: 학생 실명 입력을 일절 배제하고 모둠 닉네임만 사용한다.
5. 직관적 피드백: 버튼 클릭 시 Web Audio API 합성 효과음('띡', '짜잔')을 넣어 초등학생이 성취감을 느끼게 한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 모둠이 해결하려는 교실 내 구체적 불편 상황은 무엇인가요?
2. 이 웹앱의 가장 핵심적인 조작 버튼 1~2개는 무엇으로 구성할까요?
3. 초등학생 눈높이에 맞춘 메인 테마 색상(파스텔 블루, 민트 그린 등)은 무엇이 좋을까요?

🎯 에디터 한줄평

"코딩 교육의 진정한 가치는 프로그래머를 양성하는 것이 아니라, 주변의 불편을 능동적으로 해결하는 '시민적 주체'를 길러내는 데 있습니다. 아이들이 직접 만든 도구가 교실 전자칠판에 상시 구동되어 친구들의 하루를 편안하게 해주는 경험은 그 어떤 교과서보다 강렬한 효능감을 선물합니다."

📚 기술·교육 참고 링크

  • 디자인 씽킹(Design Thinking) 초등 교육 적용 모델: 공감-정의-아이디어-시제품-테스트
  • 교육과정 연계: 초등 5~6학년 실과(소프트웨어와 문제 해결), 창의적 체험활동(자율·자치 적응 활동)
By 시간: