똑같이 나누어주고 몇 개가 남았을까요? — 나눗셈의 몫과 나머지 개념 웹앱
🍬 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (나눗셈) — 나머지가 항상 1 이상 발생하는 나눗셈(예: 13 ÷ 3 = 4 ··· 1, 17 ÷ 5 = 3 ··· 2)을 상황 그림과 함께 직접 풀어보며 몫(한 사람당 받는 개수)과 나머지(남은 개수)의 수학적 의미를 체감하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 나머지가 항상 있는 문제만 엄선 | 나머지가 1 이상인 문제만 출제되어, 몫과 나머지를 동시에 구하고 각각의 네모 칸에 입력하는 훈련에 집중합니다. | 상황 문장("사탕 13개를 3명에게 나누어 주면 몇 개가 남을까요?")과 아이콘으로 의미를 직관화합니다. |
| 몫칸과 나머지 칸(···) 2개 입력 | 피제수 일의 자리 위 몫칸을 채우고, 우측의 나머지 칸으로 자동 이동하여 순차적으로 원샷 입력합니다. | 몫과 나머지 두 칸을 모두 맞혀야만 정답 축하 아르페지오가 울립니다. |
| 몫과 나머지 위치 바꿈 오류 정밀 진단 | 13÷3의 답을 '몫 1, 나머지 4'처럼 두 값의 위치를 거꾸로 쓰는 학생들의 인지적 실수를 정확히 짚어냅니다. | "몫은 한 사람당 개수, 나머지는 남은 개수예요" 역할 구분 처방을 제공합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
몫과나머지.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 나눗셈 > 나눗셈의 몫과 나머지 바이브 코딩 프롬프트
[유형 6] 나눗셈의 몫과 나머지 개념 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 나머지가 있는 나눗셈에서 몫과 나머지의 의미("나누어진 몫"과 "남은 수")를 상황 그림과 함께 체감하고 두 값을 직접 입력하는 개념 연습 웹앱.
기술 조건: HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. CDN: canvas-confetti, 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성. CDN 폴백 처리.
문제 생성:
- 피제수는 두 자리 수(10~85), 나눔수는 한 자리 수(2~9), 몫은 한 자리 수(1~9), 나머지는 항상 1 이상(나눔수보다 작은 수)으로 생성 — 나머지가 있는 나눗셈만 출제.
- 곱셈구구 범위 내에서 몫이 쉽게 도출되도록(예: 13÷3=4 ··· 1, 17÷5=3 ··· 2).
- 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 나눔수 위주 출제.
상황 카드: 상황 문장(예: "사탕 13개를 3명에게 똑같이 나누어 주면 한 명당 몇 개, 몇 개가 남을까요?")과 실제 개수의 아이콘 표시.
풀이 UI (세로식 나눗셈 + 네모 칸 입력):
- 세로식 나눗셈 CSS Grid 5열 규격: 나눔수(44px) / )(24px) / 피제수 십의 자리(84px) / 피제수 일의 자리(84px) / 나머지 칸(84px). 가로선 2열~4열(또는 5열).
- 몫칸(피제수 일의 자리 위 수직 정렬) + 나머지 칸(몫칸 오른쪽 옆, 점 3개 ··· 표기) 두 개의 입력 칸.
- 입력 순서: 몫 → 나머지. 원샷 입력(재입력 불가, 즉시 다음 칸).
- 반응: 칸별 정답 초록+"딩", 오답 빨간 배경+shake(오답 유지). 두 칸 모두 정답일 때만 confetti+아르페지오+"정답! 🎉". 오답 있으면 축하 없이 자동 이동. 2칸 모두 오답 시 힌트 제안. 음소거/음량 버튼.
힌트 모드: 아이콘을 하나씩 돌아가며 나누어 주는 애니메이션 → "한 명당 몇 개, 몇 개가 남는지" 시각화로 몫과 나머지 동시 도출.
학습 기록: 몫·나머지 입력값과 정/오, 힌트 사용 여부 기록.
진행: 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드. 분석:
· 몫과 나머지 위치 바꿈(두 값이 서로 뒤바뀜) → "몫은 한 사람당 개수, 나머지는 남은 개수예요" → 역할 구분 연습.
· 나머지를 0 또는 나눔수 이상으로 입력 → "나머지는 남는 수라서 나눔수보다 작아야 해요" → 나머지 범위 확인 연습.
· 몫 착각(정답±1, 2회 이상) → 나눔수 단 구구로 몫 찾고 남는 수 확인하는 연습.
· 특정 나눔수 취약 → 해당 단 구구 연습 / 일회성 실수 → 몫×나눔수+나머지=피제수 검산 습관.
- 맞춤 보충 연습(5문제), 오답 문제 목록(나누어 주기 애니메이션 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 나눗셈의 검산 도전!" 추천, "다시 연습" 버튼.
스타일: 밝은 색감, 큰 글자·터치 영역, 여백 절제, 스마트폰 세로 반응형.
완료 기준: 나머지 1 이상 나눗셈만 생성, 몫칸+나머지 칸 원샷 입력, 몫/나머지 혼동 진단 포함 오답 분석, 보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 나눗셈(몫과 나머지) 단원 [4수01-09]
- 나머지가 있는 나눗셈에서 잉여분(Remainder)의 실물 모델 시각화 전략
