코드를 치기 전에 생각을 먼저 설계한다! — 생각과 코딩의 분리(Plan-first) 기반 초등 1인 1수학 연산 게임 웹앱 설계
🎮 초등 4~6학년 수학 '자연수의 연산', '분수의 덧셈과 뺄셈' 및 실과 '알고리즘과 프로그래밍' 융합 — 인공지능에게 "수학 게임 만들어줘"라고 무턱대고 명령하면 버그투성이 코드가 나옵니다. 게임의 규칙과 승리 조건, 예외 처리를 먼저 글로 설계하는 '생각 우선(Plan-first)' 3단계 프롬프팅 기법을 통해, 학생들이 논리적인 게임 기획자가 되어 나만의 스피드 연산 아케이드 웹앱을 결함 없이 완성하는 실전 바이브 코딩 프로젝트입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 무작정 코딩 vs 생각 우선(Plan-first) | AI에게 바로 코드를 짜라고 하지 않고, 게임의 룰(규칙, 점수, 실패 조건)을 3문장으로 먼저 정리하게 합니다. | 1단계: 기획서 작성 ➔ 2단계: AI 역질문 검토 ➔ 3단계: 단일 파일 코드 빌드. |
| 나만의 맞춤 연산 난이도 조절 | 구구단 기초부터 세 자리 수 덧셈, 대분수 연산까지 연산 문제 출제 범위를 상수로 직접 튜닝합니다. | const DIFFICULTY = { min: 10, max: 99, op: ['+', '-'] }; 한 줄로 학년 맞춤형 변환. |
| 타격감 넘치는 스피드 연산 인터랙션 | 정답 시 화면 흔들림과 콤보 배지가 터지고, 오답 시 경고음과 함께 정답 풀이 과정이 팝업됩니다. | 60초 타임어택 동안 연속 정답(Combo)을 달성해 최고 득점 노리기. |
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 연산 영역(구구단/두자리 덧셈/분수)과 게임 테마에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
수학연산게임.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 생각 우선(Plan-first) 구조: 코드를 즉시 출력하지 말고, 게임 기획(문제 유형, 제한 시간, 점수 체계, 실패 조건)을 먼저 3개 질문으로 나에게 확인받은 뒤 코드를 작성한다.
2. 단일 HTML 파일 완결성: 외부 라이브러리, CDN 오디오, CSS 프레임워크 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
3. 심기 모드(데이터 임베딩): const GAME_PLAN = {...} 상수에 연산 문제 10개와 보기 4개, 정답을 내장한다.
4. Web Audio 사운드 합성: 정답/오답 효과음을 Web Audio API 오실레이터 주파수 합성으로 구현한다.
5. 모바일/터치 반응형: 큼직한 4지선다 버튼(최소 높이 56px)과 모바일 화면 최적화 flex 레이아웃을 적용한다.
6. 학생 개인정보 0: 닉네임과 점수는 브라우저 세션 메모리로만 관리하며 외부로 전송하지 않는다.
7. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 연산 대상 학년과 단원은 무엇인가요? (예: 4학년 세 자리 덧셈, 5학년 분수 덧셈, 6학년 비와 비율)
2. 게임 테마는 무엇으로 할까요? (예: 우주 몬스터 격퇴, 마법 포션 제조, 스피드 카 레이싱)
3. 60초 타임어택 모드와 3개 목숨(Life) 서바이벌 모드 중 어느 규칙으로 할까요?🎯 에디터 한줄평
"코딩 교육의 본질은 키보드를 빠르게 두드리는 것이 아니라, 문제를 해결하기 위한 논리적 설계를 먼저 세우는 '생각의 근육'을 기르는 데 있습니다. Plan-first 기법으로 규칙을 먼저 문장화하고 AI와 협업해 게임을 완성하는 경험은, 아이들에게 문제 해결의 주도권이 컴퓨터가 아닌 바로 나 자신에게 있음을 깨닫게 해줍니다."
📚 기술·교육 참고 링크
- 소프트웨어 공학의 Plan-first(기획 우선) 개발 방법론 및 프롬프트 엔지니어링 원리
- 교육과정 연계: 초등 4~6학년 수학(수와 연산 영역 전반), 실과(소프트웨어와 문제 해결)
