십의 자리 따로, 일의 자리 따로 나눠요! — 몇십 몇 ÷ 몇(내림·나머지 없음) 웹앱
✌️ 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (나눗셈) — 피제수가 두 자리 수이고 나눔수가 한 자리 수이며 내림과 나머지가 모두 없는 몫이 두 자리 수인 나눗셈(예: 84 ÷ 2 = 42)을 세로식으로 직접 풀어보며 자릿수별 나눗셈의 원리를 익히는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 몫이 두 자리 수로 확장 | 몫칸이 십의 자리(3열 위)와 일의 자리(4열 위) 2개로 나뉘어 피제수의 각 자릿수 바로 위에 정확히 수직 정렬됩니다. | 실제 나눗셈 계산 순서에 맞추어 십의 자리 몫 ➔ 일의 자리 몫 순서로 왼쪽부터 입력합니다. |
| 자릿수별 독립 나눗셈 | 십의 자리 숫자 ÷ 나눔수(8÷2=4)와 일의 자리 숫자 ÷ 나눔수(4÷2=2)가 각각 깔끔하게 나누어떨어지는 제약으로 내림 부담 없이 자릿수 계산을 체득합니다. | 자릿수별 단계 플래시 애니메이션으로 각 자리 계산 과정을 직관화합니다. |
| 몫 순서 착각 및 자릿수 어긋남 진단 | 십의 자리와 일의 자리 몫을 거꾸로 적거나(42 대신 24), 자릿수를 한 칸 밀려 쓰는 실수를 정밀하게 분석합니다. | "십의 자리부터 차례로 나눠요" 해결 처방과 함께 맞춤 보충 연습 5문제를 제공합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
자릿수별나눗셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 나눗셈 > 몇십 몇 ÷ 몇 (내림이 없고 나머지도 없음) 바이브 코딩 프롬프트
[유형 2] 몇십 몇 ÷ 몇(내림 없음·나머지 없음, 자릿수별 나눗셈) 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 몫이 두 자리 수인 나눗셈의 첫 단계(예: 84 ÷ 2 = 42)를 세로식으로 직접 풀어보며 "십의 자리와 일의 자리를 각각 나누어 몫을 차례로 적는다"는 원리를 익히는 인터랙티브 웹앱.
기술 조건: HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. CDN: canvas-confetti, 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성(정답=밝은 상승음과 축하 아르페지오, 오답=낮은 톤). CDN 폴백 처리.
문제 생성:
- 피제수는 두 자리 수(10~99), 나눔수는 한 자리 수(2~9).
- 내림·나머지 없음 제약: 피제수의 십의 자리 숫자 ÷ 나눔수, 일의 자리 숫자 ÷ 나눔수가 모두 나누어떨어지도록 생성(예: 84÷2, 96÷3, 63÷3). 몫은 항상 두 자리 수.
- 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 나눔수 위주 출제.
상황 카드: 상황 문장(예: "도넛 84개를 바구니 2개에 똑같이 나누어요.")과 아이콘 표시.
풀이 UI (세로식 나눗셈 + 네모 칸 입력):
- 세로식 나눗셈 CSS Grid 4열 규격: 1열=나눔수(44px), 2열=)(24px), 3열=피제수 십의 자리(84px), 4열=피제수 일의 자리(84px). 가로선은 2열~4열 연결.
- 몫은 두 자리이므로 몫칸 2개: 몫의 십의 자리 칸은 피제수 십의 자리(3열) 위, 몫의 일의 자리 칸은 피제수 일의 자리(4열) 위에 수직 정렬.
- 입력 순서: 몫의 십의 자리 → 몫의 일의 자리 (실제 나눗셈 계산 순서인 왼쪽부터). 화면 숫자판 0~9 + 키보드.
- 원샷 입력: 각 칸 딱 한 번 입력, 정/오 무관 즉시 다음 칸 이동(재입력 불가, 시스템 게이밍 차단).
- 반응: 칸별 정답 초록 채움+"딩"(단계마다 음 상승), 오답 빨간 배경+shake+낮은 톤(오답 숫자 유지). 두 칸 모두 정답일 때만 confetti+축하 아르페지오+"정답! 🎉". 오답 있으면 축하 없이 다음 문제로 자동 이동. 2칸 이상 오답 시 힌트 제안. 음소거/음량 버튼.
힌트 모드: 자릿수별 나눗셈 과정을 단계별 설명 + 해당 자릿수 열 플래시. (예: 84÷2 → 십의 자리: 8÷2=4, 일의 자리: 4÷2=2 → 42!)
학습 기록: 자릿수별 입력(위치, 값, 정/오)과 힌트 사용 여부 기록.
진행: 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드(맞힌 문제, 틀린 문제, 힌트 사용, 정답률).
- 분석: 자릿수 어긋남(입력한 값이 옆 자리 정답과 동일) → 색으로 구분된 자릿값 짚어 읽기 / 특정 나눔수 취약(2회 이상) → 해당 단 구구 연습 / 몫 두 자리 순서 착각(십과 일 입력 뒤바뀜) → "십의 자리부터 차례로 나눠요" / 일회성 실수 → 검산 습관. 각 진단은 [요약]+[이유]+[해결 방법], 격려 톤.
- 맞춤 보충 연습(5문제), 오답 문제 목록(계산 과정 보기), 전부 정답 시 축하 파티클 + "다음 단계: 내림이 있는 나눗셈 도전!" 추천, "다시 연습" 버튼.
스타일: 밝은 색감, 큰 글자·터치 영역, 여백 절제, 스마트폰 세로 반응형.
완료 기준: 자릿수별 나눗셈 생성 규칙(십·일 각각 나누어떨어짐) 준수, 몫칸 2개(십→일) 원샷 입력·즉시 채점·파티클+사운드·힌트·오답 분석·보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 나눗셈(몇십 몇 ÷ 몇, 내림 없음) 단원 [4수01-09]
- 십의 자리와 일의 자리를 분리하여 계산하는 분배적 나눗셈 전략 지도법
