도넛 30개를 5개 바구니에 나누면? — 몇십 ÷ 몇(내림·나머지 없음) 웹앱
🍩 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (나눗셈) — 피제수가 몇십(20~90)이고 나눔수가 한 자리 수이며 몫이 한 자리 수인 나눗셈(예: 30 ÷ 5 = 6)을 세로식으로 직접 풀어보며 나눗셈의 기본 원리를 익히는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 상황 그림 카드 연계 | "도넛 30개를 바구니 5개에 똑같이 나누어요" 문장과 함께 실제 개수만큼의 아이콘을 시각적으로 제시하여 나눗셈의 의미를 체감합니다. | 아이콘이 바구니에 하나씩 돌아가며 담기는 힌트 애니메이션으로 몫의 도출 과정을 눈으로 확인합니다. |
| 세로식 4열 Grid 일의 자리 수직 정렬 | 몫 네모 칸(84px)이 피제수 일의 자리(4열) 바로 위에 정확히 수직 정렬되어 자릿값 혼동을 예방합니다. | 한 자리 몫의 자릿값 위치를 시각적으로 고정하여 세로식 정렬 원리를 확립합니다. |
| 6종 오답 패턴 정밀 진단 | 나눗셈을 뺄셈으로 푼 착각(30-5=25), 몫 ±1 착각, 전체 개수를 그대로 쓴 오류 등을 세밀하게 진단합니다. | 취약 나눔수 집중 5문제 맞춤 보충 연습으로 결손을 즉시 메웁니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
몇십나눗셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 나눗셈 > 몇십 ÷ 몇 (내림이 없고 나머지도 없음) 바이브 코딩 프롬프트
[유형 1] 몇십 ÷ 몇(내림 없음·나머지 없음, 몫이 한 자리 수인 나눗셈) 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 몫이 한 자리 수인 나눗셈(예: 30 ÷ 5 = 6)을 세로식으로 직접 풀어보며 나눗셈의 기본 원리를 익히는 인터랙티브 웹앱.
기술 조건: HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. CDN: canvas-confetti, 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성(정답=밝은 상승음과 축하 아르페지오, 오답=낮은 톤). CDN 폴백 처리(오프라인 시 CSS 파티클 대체, 기본 한글 글꼴).
문제 생성:
- 피제수는 몇십(10의 배수, 20~90), 나눔수는 한 자리 수(2~9), 몫은 한 자리 수(2~9)로 생성하되 내림·나머지가 없는 조합만 출제. 나눔수×몫이 10의 배수가 되는 풀: (나눔수,몫) = (4,5),(5,4),(5,6),(6,5),(5,8),(8,5) → 피제수 20/30/40.
- 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.
- 보충 연습에서는 틀린 나눔수로 나누는 문제를 우선 출제.
상황 카드: 상단에 상황 문장(예: "도넛 30개를 바구니 5개에 똑같이 나누어요.")과 실제 개수만큼의 아이콘 표시로 나눗셈의 의미를 시각화.
풀이 UI (세로식 나눗셈 + 네모 칸 입력):
- 세로식 나눗셈 CSS Grid 4열 규격: 1열=나눔수(44px), 2열=나눗셈 기호 )(24px), 3열=피제수 십의 자리(84px), 4열=피제수 일의 자리(84px). 가로선은 2열~4열 연결.
- 몫 네모 답안 칸(84px)은 반드시 피제수 일의 자리(4열) 바로 위에 수직 정렬. 이 유형에서 몫은 한 자리이므로 입력 칸은 몫칸 하나. 학습자가 몫을 직접 입력(화면 숫자판 0~9 + 키보드).
- 원샷 입력(중요): 몫은 딱 한 번만 입력 가능. 정답이든 오답이든 입력 즉시 채점 후 다음 문제로 자동 이동, 재입력·지우기 불가(시스템 게이밍 차단).
- 반응: 맞으면 몫칸 초록 채움 + "딩" 소리 + confetti 파티클 + 축하 아르페지오 + "정답! 🎉" / 틀리면 빨간 배경 + shake + 낮은 톤, 오답 숫자는 빨간 칸에 그대로 유지, 축하 없이 "다음 문제로 넘어가요!" 후 자동 이동. 연속 2문제 이상 오답 시 힌트 버튼 깜빡임 제안. 음소거/음량 버튼.
힌트 모드: 아이콘을 바구니(나눔수 개수)에 하나씩 돌아가며 나누어 담는 애니메이션 → 각 바구니에 들어간 개수로 몫 도출. 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.
학습 기록: 각 문제마다 입력한 몫, 정/오, 힌트 사용 여부를 기록.
진행: 문제 수 선택(5/10/20), 상단에 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 학습 기록을 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
· 나누기를 빼기로 계산한 오류(입력 = 피제수−나눔수) → "나눗셈을 뺄셈처럼 계산했어요" → "전체를 몇 묶음으로 나눌까?" 먼저 생각하는 습관.
· 몫을 1개 차이로 착각(입력 = 정답±1, 2회 이상) → "곱셈구구를 떠올릴 때 한 줄 앞뒤를 골랐어요" → 나눔수 단 구구를 1단부터 불러보며 찾기.
· 전체 개수를 그대로 쓴 오류(입력 = 피제수) → "답자리에 전체 개수를 썼어요" → 몫은 한 묶음에 들어가는 개수임을 상기.
· 나눔수를 답에 쓴 오류(입력 = 나눔수) → "바구니 개수를 답에 적었어요" → 나눔수와 몫의 역할 구분 연습.
· 특정 나눔수 취약(같은 나눔수에서 2회 이상 오답) → "나눔수 단 구구가 아직 익숙하지 않아요" → 해당 단 구구 소리 내어 외우기.
· 어느 것도 해당 없으면 → "순간적인 실수예요" → "몫 × 나눔수 = 피제수" 검산 습관.
· 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 나눔수 위주 5문제), 오답 문제 목록, 전부 정답 시 축하 파티클 + "다음 단계: 몇십 몇 ÷ 몇 도전!" 추천, "다시 연습" 버튼.
스타일: 밝고 부드러운 색감, 동글동글한 한글 폰트, 세로식 숫자 최소 50px, 큰 터치 영역, 여백 절제, 스마트폰 세로 반응형.
완료 기준: index.html을 열면 바로 연습 시작; 몫이 한 자리인 나눗셈 생성 규칙(피제수 몇십, 내림·나머지 없음)이 항상 지켜지고, 몫칸 원샷 입력·즉시 채점·파티클+사운드·힌트 애니메이션·오답 분석 결과 화면·맞춤 보충 연습이 모두 동작해야 함.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 나눗셈(몇십 ÷ 몇) 단원 [4수01-09]
- 등분제와 포함제 나눗셈의 상황 그림 시각화 및 자릿값 격자 정렬 지도법
