피자 2판과 3분의 1조각은 몇 조각일까? — 대분수를 가분수로 나타내기 웹앱
🍕 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (분수) — 대분수를 가분수로 바꾸는 방법(예: 2과 3분의 1 = 3분의 7)을 피자 조각 묶음 상황과 함께 직접 입력하며 익히는 인터랙티브 웹앱입니다. "분모는 그대로 두고, 분자는 정수부 × 분모 + 분자로 계산한다"는 핵심 원리를 손으로 직접 체화합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 분모 먼저 입력하는 교과서식 순서 | 분수는 분모를 먼저 쓰는 수학적 관습에 맞춰, 첫 입력 커서가 분모 칸(파랑 테두리)에 위치하고 이후 분자(십의 자리 → 일의 자리)로 자동 이동합니다. | "분모는 바뀌지 않고 그대로 내려쓴다"는 규칙을 손가락 순서로 자연스럽게 익힙니다. |
| 실수 교정 지원 (클릭 선택 & ⌫ 삭제) | 원샷 입력의 긴장감을 유지하면서도, 이미 입력한 칸을 다시 클릭해 수정하거나 ⌫ 지우기 버튼으로 오답을 스스로 고칠 수 있습니다. | 빨간 테두리가 뜬 칸을 눌러 자기주도적으로 오류를 수정하며 메타인지 능력을 기릅니다. |
| 조각 막대 시각화 힌트 | 정수부 2판을 3분의 1조각 단위(2×3=6조각)로 쪼개고 남은 1조각을 합쳐 7조각(3분의 7)이 되는 과정을 막대 그림으로 생생하게 보여줍니다. | 단순 공식 암기가 아니라 "조각의 총개수를 센다"는 분수의 시각적 개념을 완벽히 이해합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
대분수가분수.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 분수 > 대분수를 가분수로 나타내기 바이브 코딩 프롬프트
[유형 1] 대분수를 가분수로 나타내기 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 대분수를 가분수로 바꾸는 방법(예: 2과 3분의 1 = 3분의 7)을 직접 입력하며 익히는 인터랙티브 웹앱. 변환 원리: 분자 = 정수부 × 분모 + 분자, 분모는 그대로.
기술 조건:
- HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일.
- CDN: 파티클은 canvas-confetti, 한글 폰트는 구글 폰트 CDN(Jua). 소리는 Web Audio API로 직접 생성(정답=밝은 상승음과 축하 아르페지오, 오답=낮은 톤).
- CDN이 로드되지 않아도 풀기·채점은 동작하도록 폴백 처리(파티클은 CSS 애니메이션 대체).
문제 생성:
- 대분수: 정수부 a(1~5), 분모 c(2~9), 분자 b(1~c-1). 가분수의 분자는 a×c+b(5~53, 한 자리 또는 두 자리).
- 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게. 보충 연습에서는 틀린 분모 위주 출제.
문제 표시 (대분수 카드):
- 왼쪽에 정수부(큰 글자), 오른쪽에 분수 형태(분자 / 가로선 / 분모)로 대분수를 교과서식 레이아웃으로 표시.
- 상단에 상황 문장(예: "피자 2과 3분의 1판을 3분의 1조각 단위로 세면 모두 몇 조각일까요?")과 묶음 배지.
풀이 UI (가분수 답안 + 네모 칸 입력):
- 답을 가분수 형태로 입력: 윗줄 분자 칸(초록 테두리, 한 자리면 1칸·두 자리면 십/일 2칸 동적), 중간 가로선, 아랫줄 분모 칸(파랑 테두리 1칸). 칸은 한 변 84px 이상.
- 입력 순서(중요): 분수는 관습상 분모를 먼저 쓰므로 첫 커서는 분모 칸! 순서: 분모 → 분자(십의 자리 → 일의 자리). 각 칸 입력 후 다음 빈 칸으로 자동 이동.
- 네모 칸 클릭 선택: 칸을 클릭하면 커서가 그 칸으로 이동(이미 채운 칸도 선택해 수정 가능).
- 삭제 버튼: 숫자판에 ⌫ 지우기 버튼(키보드 Backspace 지원) — 현재 칸의 숫자를 지워 다시 입력 가능.
- 채점: 입력 즉시 칸별 채점. 맞으면 초록 채움 + "딩" 소리 / 틀리면 빨간 배경 + shake + 낮은 톤. 오답 시도는 wrongAttempts에 누적 기록.
- 완료 조건: 모든 칸이 정답으로 채워지면 문제 완료 — confetti 파티클 + 축하 아르페지오 + "정답! 🎉". 빨간 칸이 남으면 "빨간 칸을 눌러 고치고 다시 입력해보세요!" 안내 후 머물기.
- 한 문제에서 오답 2회 이상이면 힌트 버튼 깜빡임 제안. 음소거/음량 버튼.
힌트 모드:
- "힌트" 버튼: 조각 막대 시각화 — 분모 개수 조각이 모이면 1개분! 정수부 a개 = a×c조각, 남은 조각 b개 → 합계 a×c+b조각 = a×c+b분의... (예: 3분의 1 조각이 3개 모이면 1개! 2개분 = 2×3 = 6조각, 남은 1조각 → 모두 7조각 → 3분의 7 (7/3)).
- 힌트를 쓴 문제는 결과에서 "힌트 사용"으로 구분.
학습 기록 (분석용 데이터):
- 문제별 모든 입력 시도(분자/분모 구분, 값, 정/오), 수정 횟수, 힌트 사용 여부 기록.
진행: 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수.
- 실수가 있으면 학습 기록(wrongAttempts)을 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
- 남은 조각 누락(분자 시도 = 정수부×분모) → 이유: "정수부를 조각으로 바꾸고 남은 조각을 더하는 걸 잊었어요" → 해결: "정수부 × 분모 + 분자" 순서 손가락으로 짚기.
- 곱셈 누락(분자 시도 = 정수부+분자) → 이유: "정수부를 1로 바꾸는 곱셈을 빠뜨렸어요" → 해결: 정수부를 분모만큼의 조각으로 바꾸는 그림 보기.
- 분자/분모 뒤바꿈(분모 칸 시도 = 계산된 분자 값) → 이유: "자리를 바꿔 적었어요" → 해결: 분모는 바뀌지 않는다는 규칙 기억하기.
- 대분수 그대로 입력(분자 시도 = 대분수의 분자) → 이유: "바꾸지 않고 그대로 적었어요" → 해결: "바꾸기 전과 후가 달라요!" 비교 연습.
- 구구단 실수(정답±1, 2회 이상) → 이유: "정수부 × 분모 곱셈에서 실수했어요" → 해결: 해당 구구 소리 내어 외우기.
- 어느 것도 해당 없으면 → 이유: "순간적인 실수예요" → 해결: "분모는 그대로, 분자는 계산" 확인 습관.
- 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 분모 위주 5문제), 오답 문제 목록("계산 과정 보기"로 조각 시각화 재생), 전부 바로 맞히면 축하 파티클 + "다음 단계: 가분수를 대분수로 나타내기 도전!" 추천, "다시 연습" 버튼.
스타일: 밝고 부드러운 색감, 동글동글한 한글 폰트, 분수 표시 숫자 최소 44px, 큰 터치 영역, 여백 절제, 스마트폰 세로 반응형.
완료 기준: index.html을 열면 바로 연습 시작; 첫 커서가 분모 칸, 클릭 선택·⌫ 삭제·정답 채움 완료 조건이 모두 동작하고, 오답 분석(5종)과 맞춤 보충 연습이 동작해야 함.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 분수 지도 요령 [4수01-11]
- 대분수와 가분수의 상호 변환 원리 및 조각 막대 시각화 모델
- 초등 수학 분수 변환 오류 패턴 진단 알고리즘 설계
