세 자리 수도 두 번 내려서 차근차근 나눠요! — 세 자리 ÷ 한 자리 나눗셈 웹앱
🏢 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (나눗셈) — 피제수가 세 자리 수이고 몫이 두 자리 수인 나눗셈(예: 156 ÷ 4 = 39, 165 ÷ 4 = 41 ··· 1)을 세로식으로 직접 풀어보며 두 단계 이상의 연속 내림과 조건부 나머지 처리 원리를 체화하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 세 자리 피제수와 몫의 자릿수 판단 | 백의 자리 숫자 < 나눔수 제약으로 백의 자리에서는 몫이 0이 되어, 몫칸이 피제수 십의 자리(4열) 위와 일의 자리(5열) 위에만 배치됩니다. | "백의 자리에서 못 나누면 십의 자리부터 몫을 적어요" 자릿수 판단 훈련을 진행합니다. |
| 조건부 나머지 칸 지원 | 나머지가 있는 문제(70%)는 나머지 칸이 활성화되어 점 3개(···) 옆에 입력받고, 딱 나누어떨어지는 문제(30%)는 나머지 칸이 비활성화됩니다. | 나머지가 있는지 없는지 문제를 끝까지 풀어봐야 아는 종합적 연산 판단력을 기릅니다. |
| 두 번째 내림 누락 특화 진단 | 첫 번째 내림(백➔십)은 잘하고 두 번째 내림(십➔일)에서 남은 수를 내리지 않는 실수를 정확히 감지합니다. | "남은 수를 내리는 과정을 두 번 확인해요" 단계별 안내를 제공합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세자리나눗셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 나눗셈 > 몇백 몇십 몇 ÷ 몇 (내림/나머지 있음) 바이브 코딩 프롬프트
[유형 5] 몇백 몇십 몇 ÷ 몇(내림/나머지 있음, 세 자리 피제수) 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 세 자리 수를 한 자리 수로 나누는 나눗셈(예: 156 ÷ 4 = 39, 165 ÷ 4 = 41 ··· 1)을 세로식으로 직접 풀어보며 두 단계 이상의 내림을 익히는 인터랙티브 웹앱.
기술 조건: HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. CDN: canvas-confetti, 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성. CDN 폴백 처리.
문제 생성:
- 피제수는 세 자리 수(100~999), 나눔수는 한 자리 수(2~9).
- 몫이 두 자리 수가 되도록 피제수의 백의 자리 숫자 < 나눔수 조건으로 생성(백의 자리에서 몫 0, 십의 자리부터 본격 나눗셈). 내림 최소 1회 발생, 최종 나머지는 있거나 없거나 혼합 출제(약 7:3 비율).
- 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 나눔수 위주 출제.
상황 카드: 상황 문장과 아이콘 표시(개수가 많으니 아이콘은 묶음 배지 표현).
풀이 UI (세로식 나눗셈 + 네모 칸 입력):
- 세로식 나눗셈 CSS Grid 5열 규격: 1열=나눔수(44px), 2열=)(24px), 3열=피제수 백의 자리(84px), 4열=피제수 십의 자리(84px), 5열=피제수 일의 자리(84px). 가로선은 2열~5열 연결.
- 몫칸 2개: 몫의 십의 자리 칸은 피제수 십의 자리(4열) 위, 몫의 일의 자리 칸은 피제수 일의 자리(5열) 위 수직 정렬(백의 자리는 몫 0이므로 몫칸 없음).
- 나머지 칸: 몫의 일의 자리 칸 오른쪽 옆(점 3개 ··· 표기) — 나머지 없는 문제는 나머지 칸을 비활성(빈 칸)으로 표시하고 입력받지 않음.
- 입력 순서: 몫의 십의 자리 → 몫의 일의 자리 → (나머지 있는 문제만) 나머지. 원샷 입력(재입력 불가, 즉시 다음 칸).
- 반응: 칸별 정답 초록+"딩", 오답 빨간 배경+shake(오답 유지). 입력해야 할 모든 칸이 정답일 때만 confetti+아르페지오. 2칸 이상 오답 시 힌트 제안. 음소거/음량 버튼.
힌트 모드: 두 단계 내림 과정 단계별 표시. (예: 156÷4 → 백의 자리 1은 4로 못 나눠요, 15로 만들어요! 15÷4=3, 3이 남아요. 남은 3에 6을 내려 36! 36÷4=9 → 몫 39!)
학습 기록: 칸별 입력과 힌트 사용 여부 기록.
진행: 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드. 분석:
· 두 번째 내림 누락(중간 나머지를 다음 자리로 내리지 않음) → "남은 수를 내리는 걸 두 번 해야 해요" → 단계별 내림 연습.
· 몫의 자릿수 착각(몫을 세 자리로 생각하거나 한 자리로 착각) → "백의 자리에서 못 나누면 몫은 두 자리예요" → 몫 자릿수 판단 연습.
· 나머지 오류(몫 착각에 연동되거나 나눔수보다 큰 나머지 입력) → "나머지는 나눔수보다 작아야 해요" → 나머지 범위 확인 습관.
· 특정 나눔수 취약 → 해당 단 구구 연습 / 일회성 실수 → 검산 습관.
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 파티클 + "다음 단계: 몫과 나머지 완전 정복!" 추천, "다시 연습" 버튼.
스타일: 밝은 색감, 큰 글자·터치 영역, 여백 절제, 스마트폰 세로 반응형.
완료 기준: 세 자리 피제수·몫 두 자리·내림 최소 1회 문제 생성, 나머지 있음/없음 혼합, 몫칸 2개+조건부 나머지 칸 원샷 입력, 오답 분석·보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 나눗셈(세 자리 수 ÷ 한 자리 수) 단원 [4수01-09]
- 피제수 백의 자리와 나눔수의 크기 비교를 통한 몫의 최고 자릿수 어림 전략
