[바이브 코딩 교구] 눈대중 분수는 그만! 초3 수학 '등분할 검증 피자·초콜릿 분수 교구' 단일 HTML 웹앱 (성취기준 완벽 연계)

🍕 "크기가 다르면 분수가 아니에요!" — 제미나이 바이브 코딩으로 만드는 초3 수학 '등분할 검증 피자·초콜릿 분수 교구' 단일 HTML 웹앱

💡 이번 교구 바이브 코딩 30초 핵심 다이제스트:
초등학교 3학년 분수 도입 단원에서 가장 흔히 발생하는 대표적 오개념은 "도형이 똑같이 나뉘지 않았는데도 단순히 눈대중으로 칸 수만 세어 4분의 1이라고 답하는 오류"입니다.
각 조각의 크기가 같지 않으면(등분할이 아니면) 분수로 표현할 수 없다는 수학적 본질을 학생 스스로 눈으로 확인하고 검증하게 할 수는 없을까요?
슬라이더로 조각 수(2~12)를 조절하고, '등분할 판별 피드백'을 거쳐야만 대형 분수 카드가 열리는 인터랙티브 피자·초콜릿 분수 시뮬레이터를 제미나이와 함께 단일 HTML 파일로 제작해 보세요! 로그인이나 서버 설치 없이 교실 태블릿과 전자칠판에서 즉시 실행됩니다.

📊 한눈에 보는 3대 핵심 교육적 변화 분석표

무엇이 바뀌었나요? (영역)	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
🍕 슬라이더 분할 & 등분할 자동 판별	슬라이더(2~12)로 조각을 나누고, 크기가 불균등하면 주황색 경고를 띄우며 똑같이 나누었을 때만 초록색 체크(✔)를 줍니다.	"선생님, 조각 크기가 삐뚤빼뚤하면 왜 분수 카드가 안 열릴까요?" 유도 발문하기
🍫 원형(피자) & 직사각형(초콜릿) 듀얼 모델	원형 피자의 부채꼴 조각과 직사각형 초콜릿의 사각 블록을 버튼 하나로 전환하며 다양한 시각 모델을 탐구합니다.	도형의 모양이 달라져도 '전체를 똑같이 나눈 것 중의 몇 개'라는 분수의 불변 원리 체득
📜 실시간 분수 카드 & 탐구 히스토리 타임라인	조각을 클릭해 색칠하면 '전체 4조각 중 3조각 (3/4)' 카드가 뜨고, [기록하기]를 누르면 아래 타임라인에 활동 카드가 누적됩니다.	수업 시간 동안 만든 5가지 분수(1/2, 2/4, 3/6 등)를 아래 목록에 누적하여 크기 비교 토의

🎯 초등 3학년 분수 '등분할(Equal Partitioning)' 오개념 교정 4대 포인트

• 1. 눈대중 칸 수 세기 오류의 차단:
  학생들은 종종 피자를 아무렇게나 4조각으로 자른 뒤 1조각을 가리키며 "4분의 1"이라고 말합니다. 본 도구는 조각의 크기가 균등하지 않으면 분수 카드에 물음표(?)를 표시하여 '등분할'이 분수의 필수 전제 조건임을 스스로 깨닫게 합니다.
• 2. 직관적인 시각 피드백 (주황색 경고 vs 초록색 확인):
  조각 면적이 다를 때는 테두리가 주황색으로 깜빡이며 "조각 크기가 서로 달라요! 분수로 나타낼 수 없어요."라는 친절한 입말 피드백을 제공하고, [똑같이 나누기]를 통해 보정되었을 때 초록색 체크(✔)를 띄웁니다.
• 3. 수치 기호와 언어적 표현의 동시 제공:
  색칠된 조각에 따라 대형 분수 기호(예: 3/4)뿐만 아니라 "전체 4조각 중 3조각"이라는 일상 언어를 나란히 병기하여 분모와 분자의 개념적 의미를 결합합니다.
• 4. 학생 주도성 보장 (No Auto-Answer):
  시스템이 자동으로 정답 분수를 완성해주지 않으며, 오직 학생이 슬라이더를 밀고 조각을 클릭하는 물리적 인터랙션에 의해서만 분수가 계산되도록 설계되었습니다.

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

📌 따라하기 3단계 순서

1. 1단계 (거꾸로 프롬프트 복사): 아래 제공된 [제미나이 전용 등분할 분수 교구 거꾸로 프롬프트]를 복사하여 구글 제미나이(https://gemini.google.com)에 입력합니다.
2. 2단계 (역질문 3가지 답변): 제미나이가 되묻는 질문(조각 수 범위, 색칠 효과음, 타임라인 저장 방식)에 내 학급 수업 상황에 맞게 1줄로 답변합니다.
3. 3단계 (단일 index.html 실행): 제미나이가 출력한 완전한 코드를 메모장에 넣고 fraction_explorer.html로 저장한 뒤 더블 클릭하면 설치 없이 즉시 실행됩니다!

📋 복사해서 바로 쓰는 '제미나이 전용 등분할 분수 교구 에러 제로 프롬프트'

당신은 초등 수학 교육공학 전문가이자 웹 인터랙션 수석 프론트엔드 엔지니어입니다.
초등학교 3학년 수학 분수 단원에서 "등분할이 아니면 분수로 나타낼 수 없음"을 직관적으로 탐구하는 '피자·초콜릿 등분할 분수 교구' 웹앱을 단일 HTML5 파일로 제작해 주세요.

[🚨 엄격한 제약조건 및 에러 방지 안전장치 (Zero-Error Baseline)]
1. 단일 파일 완결성: 외부 서버 설치, 번들러, 빌드 도구 없이 브라우저에서 바로 열리는 단일 HTML5 파일 안에 HTML, Tailwind CSS(CDN), 바닐라 자바스크립트를 모두 포함할 것. 생략 주석(// TODO, /* 나머지 코드 */ 등) 없이 100% 동작하는 완전한 코드로 출력할 것.
2. 무계정·무DB: 로그인, 회원가입, 외부 DB 연동을 일절 배제하고, 브라우저 새로고침 시 깔끔하게 초기화되도록 작성할 것.
3. 학습 주도권 유지: AI나 시스템이 정답 분수를 미리 완성해 주지 말고, 오직 학생의 슬라이더 조작과 조각 클릭에 의해서만 상태가 계산되도록 할 것.
4. 범위 엄수: 타이머, 점수제, 랭킹 등 요청되지 않은 불필요한 게이미피케이션 요소를 과감히 배제하고 본질적인 수학적 탐구에 집중할 것.
5. 반응형 및 터치 지원: 태블릿 터치 환경과 PC 마우스 환경에서 모두 부드럽게 조작되도록 할 것.

[🎮 핵심 기능 및 인터랙션 명세]
1. 초기 화면: 조각 수 조절 슬라이더(2~12)와 모델 선택 라디오 버튼(원형 피자 / 직사각형 초콜릿), [도형 만들기] 버튼 제공.
2. 작업 공간:
   - [도형 만들기] 클릭 시 한 화면 아래에 인터랙티브 캔버스/SVG 도형이 부드럽게 펼쳐짐.
   - 기능 1 (등분할 검증): '불균등하게 자르기' 버튼과 '똑같이 나누기' 버튼을 제공하여, 크기가 다를 때는 주황색 깜빡임 테두리와 "조각 크기가 서로 달라요! 분수로 나타낼 수 없어요." 경고를 띄우고, 같을 때는 초록색 테두리와 체크(✔) 아이콘 표시.
   - 기능 2 (실시간 분수 카드): 등분할 상태에서만 조각 클릭 시 색칠(토글)되며, 우측/하단에 대형 숫자 분수 카드(예: 3/4)와 "전체 4조각 중 3조각" 텍스트를 실시간 연동. (등분할이 아닐 때는 분수 카드에 물음표 '?' 노출).
   - 기능 3 (탐구 기록 누적): [기록하기] 버튼 클릭 시 현재 완성된 분수(예: "원형 4등분 중 3개 = 3/4 (등분할 확인완료)")가 아래 타임라인 영역에 카드로 계속 누적됨.
3. 언어 어조: 초등 저학년 친화적인 따뜻하고 친절한 입말체 사용.

[❓ 역질문 유도 (Reverse Prompting)]
코드를 작성하기 전에, 나에게 아래 3가지 질문을 먼저 던져서 세부 구성을 확정해 줘:
1. 원형 피자 모델의 조각 클릭 시 치즈 토핑 색상 변화와 초콜릿 블록의 입체 음영 중 어떤 시각 연출을 선호하시나요?
2. 조각을 클릭할 때 브라우저 내장 Web Audio API로 가벼운 찰칵(클릭) 효과음을 재생할까요?
3. 타임라인에 누적된 기록을 개별 삭제하거나 전체 초기화하는 버튼을 포함할까요?

🎯 에디터 한줄평

"분수를 가르칠 때 가장 중요한 것은 '숫자를 쓰는 법'이 아니라 '전체를 똑같이 나눈다'는 등분할 감각입니다. 직접 삐뚤빼뚤 잘라보고 오류를 확인하는 경험이 아이들에게 진짜 수학적 개념을 선물합니다!"

🔗 교육과정 및 수학 교육학 레퍼런스:
• 2022 개정 초등학교 수학과 교육과정 (3~4학년군 수와 연산 - 분수의 기초 [4수01-08])
• 브루너(Bruner)의 EIS 표상 이론 (활동적 표상 ➔ 영상적 표상 ➔ 기호적 표상)
• 단일 파일 경량 웹 컴포넌트 아키텍처