나머지가 생겼어요! — 몇십 몇 ÷ 몇(내림 있음·나머지 있음) 웹앱
📦 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (나눗셈) — 십의 자리 계산에서 내림이 발생하고 최종 계산에서도 나머지가 남는 몫이 두 자리 수인 나눗셈(예: 65 ÷ 4 = 16 ··· 1)을 세로식으로 직접 풀어보며 나머지 개념을 정식으로 익히는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 몫칸 2개 + 나머지 칸 1개 (총 3칸 입력) | 몫의 십의 자리, 몫의 일의 자리 칸에 이어 우측에 점 3개(···)와 함께 나머지 칸(5열)이 추가 배치됩니다. | 입력 순서가 몫의 십의 자리 ➔ 몫의 일의 자리 ➔ 나머지 순으로 자연스럽게 진행됩니다. |
| 상황 카드로 나머지 체감 | "도넛 65개를 바구니 4개에 똑같이 나누어요. 남는 도넛은 몇 개일까요?"처럼 바구니에 들어가지 못하고 남는 개수를 명확히 보여줍니다. | 나머지가 항상 나눔수보다 작아야 한다는 나눗셈의 대원칙을 아이콘으로 이해합니다. |
| 몫과 나머지 혼동 특화 진단 | 몫칸에 나머지 숫자를 적거나, 몫이 바뀌어 나머지가 엉뚱하게 커진 실수를 분별하여 맞춤 처방을 내립니다. | "몫 × 나눔수 + 나머지 = 피제수" 검산 원리로 피드백을 제공합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
나머지나눗셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 나눗셈 > 몇십 몇 ÷ 몇 (내림이 있고 나머지도 있음) 바이브 코딩 프롬프트
[유형 4] 몇십 몇 ÷ 몇(내림 있음·나머지 있음) 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 내림과 나머지가 모두 있는 몫이 두 자리 수인 나눗셈(예: 65 ÷ 4 = 16 ··· 1)을 세로식으로 직접 풀어보며 나머지 개념을 정식으로 익히는 인터랙티브 웹앱.
기술 조건: HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. CDN: canvas-confetti, 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성. CDN 폴백 처리.
문제 생성:
- 피제수는 두 자리 수(10~99), 나눔수는 한 자리 수(2~9).
- 내림 있음 제약(십의 자리 계산에서 남은 수 발생)과 최종 나머지 1 이상(나눔수보다 작은 수)을 동시에 만족하도록 생성. 몫은 두 자리 수(십의 자리 몫 1 이상, 예: 65÷4=16···1, 73÷5=14···3, 58÷7=8이 아닌 두 자리 몫만 — 십의 자리 몫 ≥ 1).
- 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 나눔수 위주 출제.
상황 카드: 나머지 개념이 드러나는 상황(예: "도넛 65개를 바구니 4개에 똑같이 나누어요. 남는 도넛은 몇 개일까요?").
풀이 UI (세로식 나눗셈 + 네모 칸 입력):
- 세로식 나눗셈 CSS Grid 5열 규격: 1열=나눔수(44px), 2열=)(24px), 3열=피제수 십의 자리(84px), 4열=피제수 일의 자리(84px), 5열=나머지 칸(84px).
- 몫칸 2개(십의 자리 3열 위, 일의 자리 4열 위 수직 정렬) + 나머지 칸은 몫의 일의 자리 칸 오른쪽 옆(5열)에 별도 배치. 몫과 나머지 사이에 점 3개(···) 표기.
- 입력 순서: 몫의 십의 자리 → 몫의 일의 자리 → 나머지. 원샷 입력(재입력 불가, 즉시 다음 칸).
- 반응: 칸별 정답 초록+"딩", 오답 빨간 배경+shake(오답 유지). 세 칸 모두 정답일 때만 confetti+아르페지오+"정답! 🎉". 오답 있으면 축하 없이 자동 이동. 2칸 이상 오답 시 힌트 제안. 음소거/음량 버튼.
힌트 모드: 내림 + 나머지 단계별 표시. (예: 65÷4 → 십의 자리: 6÷4=1, 2가 남아요! 남은 2에 5를 내려 25! 25÷4=6이고 1이 남아요 → 몫 16, 나머지 1!)
학습 기록: 칸별 입력(몫 십/몫 일/나머지)과 힌트 사용 여부 기록.
진행: 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드. 분석:
· 나머지를 몫에 혼동(몫칸에 나머지 값 입력) → "몫과 나머지 자리를 바꿨어요" → 몫은 한 바구니에 들어가는 개수, 나머지는 남는 개수 구분 연습.
· 몫 착각으로 인한 나머지 오류(몫이 정답±1이고 나머지 오답) → "몫이 달라지면 나머지도 달라져요" → 몫 × 나눔수 + 나머지 = 피제수 확인 연습.
· 나머지를 0으로 입력(나머지 없다고 착각) → "나누고 남은 수가 있어요" → 남는 개수 확인 연습.
· 내림 과정 누락 / 특정 나눔수 취약 → 각각 내림 연습·구구 연습 처방 / 일회성 실수 → 검산 습관.
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 파티클 + "다음 단계: 세 자리 수 나눗셈 도전!" 추천, "다시 연습" 버튼.
스타일: 밝은 색감, 큰 글자·터치 영역, 여백 절제, 스마트폰 세로 반응형.
완료 기준: 내림·나머지 동시 만족 문제 생성, 몫칸 2개+나머지 칸(··· 표기) 원샷 입력, 나머지 혼동 진단 포함 오답 분석, 보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 나눗셈(내림과 나머지가 있는 나눗셈) 단원 [4수01-09]
- 나머지의 정의(0 ≤ 나머지 < 나누는 수) 및 등분 분배 모델 지도법
