3분의 7조각을 묶으면 몇 판이 될까? — 가분수를 대분수로 나타내기 웹앱
🥞 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (분수) — 가분수를 대분수로 바꾸는 방법(예: 3분의 7 = 2과 3분의 1)을 묶음 시각화와 함께 직접 입력하며 익히는 인터랙티브 웹앱입니다. "분자를 분모로 나눈 몫이 대분수의 자연수가 되고, 남는 나머지가 새로운 분자가 된다"는 나눗셈 연계 원리를 완벽히 체득합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 정수부 ➔ 분모 ➔ 분자 입력 동선 | 대분수 형태에 맞춰 가장 큰 묶음인 정수부(몫)를 먼저 입력하고, 바뀌지 않는 분모, 마지막으로 남은 조각인 분자 순서로 자연스럽게 이동합니다. | "큰 판 개수를 먼저 적고, 그 다음 남은 분수를 적는다"는 대분수의 구조적 순서를 손가락으로 익힙니다. |
| 몫과 나머지 뒤바꿈 정밀 진단 | 아이들이 가장 흔히 헷갈려하는 "몫과 나머지의 위치를 서로 바꿔 적는 실수"를 학습 기록에서 즉각 포착하여 맞춤 처방을 내립니다. | "묶음 개수가 앞의 큰 수, 남은 개수가 위쪽 분자!"라는 1:1 대응 원리를 명쾌하게 바로잡아 줍니다. |
| 조각 묶음 애니메이션 힌트 | 7개의 3분의 1조각이 3개씩 동그라미로 묶여 2판이 완성되고 1조각이 남는 과정을 눈앞에서 생생하게 보여줍니다. | 나눗셈의 '몫'과 '나머지'가 대분수의 어느 위치로 들어가는지 시각적으로 증명합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
가분수대분수.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 분수 > 가분수를 대분수로 나타내기 바이브 코딩 프롬프트
[유형 2] 가분수를 대분수로 나타내기 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 가분수를 대분수로 바꾸는 방법(예: 3분의 7 = 2과 3분의 1)을 직접 입력하며 익히는 인터랙티브 웹앱. 변환 원리: 분자 ÷ 분모의 몫 = 정수부, 나머지 = 분자, 분모는 그대로.
기술 조건: [단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백]
문제 생성:
- 가분수: 분자 n(7~88, 한 자리 또는 두 자리), 분모 d(2~9), n > d. 정수부(몫) 1~9, 나머지(분자) 1~d-1이 되도록 생성(예: d=3, 몫=2, 나머지=1 → n=7).
- 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 분모 위주 출제.
문제 표시:
- 왼쪽에 가분수(분자 / 가로선 / 분모)를 크게 표시하고, 화살표 → 오른쪽에 답으로 쓸 대분수 틀을 제시: 정수부 네모 칸(1칸) + 분수 부분(분자 칸 1~2칸 동적 / 가로선 / 분모 칸 1칸).
- 상황 문장(예: "3분의 7조각을 1판 단위로 묶으면 몇 판이고 몇 조각이 남을까요?")과 묶음 배지.
풀이 UI (대분수 답안 + 네모 칸 입력):
- 답안 칸: 정수부 칸(보라 테두리), 분자 칸(초록 테두리, 동적 1~2칸), 분모 칸(파랑 테두리). 한 변 84px 이상.
- 입력 순서(중요): 정수부(몫) → 분모(그대로) → 분자(나머지). 관습상 분모를 분자보다 먼저 쓰고, 정수부는 대분수의 맨 앞이므로 가장 먼저 입력.
- 네모 칸 클릭 선택(이미 채운 칸도 수정 가능)과 ⌫ 삭제 버튼(숫자판 + Backspace) 지원.
- 채점: 입력 즉시 칸별 채점(맞으면 초록+딩, 틀리면 빨강+shake+낮은 톤), 오답 시도는 wrongAttempts에 누적 기록.
- 완료 조건: 모든 칸이 정답으로 채워지면 문제 완료(confetti + 축하 아르페지오 + "정답! 🎉"). 빨간 칸이 남으면 고치도록 안내 후 머물기. 오답 2회 이상이면 힌트 제안. 음소거/음량 버튼.
힌트 모드:
- "힌트" 버튼: 조각 묶음 시각화 — 분모 개수 조각이 모이면 1개분! 분자 개수의 조각을 1개분 단위로 묶는 애니메이션(예: 3분의 7 → 3개씩 묶으면 2묶음, 남는 1조각 → 2과 3분의 1). 묶음 개수 = 정수부(몫), 남는 개수 = 분자(나머지).
- 힌트를 쓴 문제는 결과에서 "힌트 사용"으로 구분.
학습 기록: 문제별 입력 시도(칸 구분: 정수부/분자/분모), 수정 횟수, 힌트 사용 여부 기록.
진행: 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수.
- 실수가 있으면 wrongAttempts를 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
- 몫/나머지 뒤바꿈(정수부 칸 시도 = 나머지 값이고 분자 칸 시도 = 몫 값) → 이유: "몫과 나머지 자리를 바꿔 적었어요" → 해결: "큰 묶음 개수가 정수부, 남는 개수가 분자!" 구분 연습.
- 정수부 과대/과소(정수부 시도 = 몫±1, 2회 이상) → 이유: "묶음 개수를 세는 데 실수했어요" → 해결: 분모 개수씩 묶는 그림 다시 세기.
- 나머지 0 착각(분자 칸 시도 = 0) → 이유: "나머지가 없다고 생각했어요" → 해결: 남는 조각이 보이는 시각화로 확인.
- 분모 착각(분모 칸 시도 = 분자나 몫 값) → 이유: "분모는 바뀌지 않는다는 걸 잊었어요" → 해결: "분모는 그대로!" 규칙 기억.
- 가분수 그대로 입력(정수부 없이 분자 칸에 원래 분자 값) → 이유: "바꾸지 않고 그대로 적었어요" → 해결: 나눗셈으로 바꾸는 연습.
- 어느 것도 해당 없으면 → 이유: "순간적인 실수예요" → 해결: "몫×분모+나머지 = 분자" 검산 습관.
- 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 분모 위주 5문제), 오답 문제 목록("계산 과정 보기"로 묶음 애니메이션 재생), 전부 바로 맞히면 축하 파티클 + "다음 단계: 분모가 같은 가분수/대분수끼리의 크기 비교 도전!" 추천, "다시 연습" 버튼.
스타일: 밝고 부드러운 색감, 큰 글자·터치 영역, 스마트폰 세로 반응형.
완료 기준: 첫 커서가 정수부 칸(정수부→분모→분자 순서), 클릭 선택·⌫ 삭제·정답 채움 완료 조건 동작, 몫/나머지 뒤바꿈 등 오답 분석 6종과 맞춤 보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 가분수와 대분수 상호 변환 [4수01-11]
- 나눗셈의 몫과 나머지를 대분수로 연결하는 조각 묶음 모델
- 몫과 나머지 위치 전도 오개념 분석 및 진단 가이드
