0을 떼고 곱하고, 0을 몰아 붙여요! — 몇백·몇천의 곱 연습 웹앱
🔢 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 10의 배수끼리의 곱셈(예: 300 × 40 = 12000, 200 × 3000 = 600000)을 세로식으로 직접 풀며 "0을 떼어 앞자리끼리 곱한 뒤, 떼어둔 0을 몰아 붙인다"는 자릿값 이동 원리를 익히는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 6열 자릿수 Grid 정렬 (십만 포함) | 곱이 6자리(십만의 자리)까지 될 수 있으므로 CSS Grid 6열 [십만|만|천|백|십|일]로 확장되어, 0이 연속으로 이어지는 자릿값 패턴을 직접 눈으로 체감합니다. | 일의 자리부터 십만의 자리까지 0을 하나하나 직접 입력하며 "0의 개수는 두 수의 0을 합친 만큼"을 체화합니다. |
| 0 개수 착각 정밀 진단 | 붙여야 할 0의 개수를 놓치거나(2개→3개) 과다하게(4개) 적는 초등학생 대표 오개념을 첫 시도에서 즉각 포착하여 맞춤 처방합니다. | "0의 개수는 두 수의 0을 합친 만큼!"이라는 구구절절 없는 핵심 규칙이 뇌리에 새겨집니다. |
| 앞자리 곱셈(받아올림 포함) 검증 | 0을 떼어낸 앞자리 곱셈(예: 3×4=12)에서 받아올림이 필요한 경우를 자동 판단하여, 0 개수 문제와 곱셈 실수를 별도로 분리 진단합니다. | 두 오류가 섞여도 각각 독립적으로 진단되어 정밀 보충이 가능합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
십의배수곱셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 몇백, 몇천의 곱 바이브 코딩 프롬프트
[유형 2] 몇백, 몇천의 곱 (10의 배수끼리의 곱셈) 연습 웹앱을 만들어줘.
목적·대상: 초등학교 4학년 1학기 학생이 10의 배수끼리의 곱셈(예: 300 × 40 = 12000, 200 × 3000 = 600000)을 세로식으로 풀며 "0을 떼고 곱한 뒤 0을 붙인다"는 원리를 익히는 인터랙티브 웹앱.
기술 조건: 단일 index.html, canvas-confetti + Jua CDN, Web Audio API, 폴백.
문제 생성:
- 두 수 모두 10의 배수: 몇백(100~900) × 몇백(100~900), 또는 몇십(10~90) × 몇천(1000~9000), 또는 몇백 × 몇천 조합.
- 곱이 십만의 자리까지(999,999 이하)가 되도록만 생성.
- 직전 반복 금지, generateProblem() 분리.
풀이 UI (세로식, CSS Grid 6열 [십만|만|천|백|십|일] 각 84px):
- 피승수/승수를 자릿값 열에 맞춰 배치(예: 300×40: 피승수 3는 백 열, 승수 4는 십 열), × 기호는 승수 최고 자릿수 왼쪽.
- 입력 순서: 일의 자리(0) → 십의 자리(0) → 백 → 천 → 만 → (십만, 곱이 6자리일 때만). 0이 연속으로 이어지는 것을 직접 입력하며 체감.
- 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 완료(오답도 진행, 전부 정답만 축하), 오답 firstAnswers/wrongAttempts 누적 — 유형 1과 동일 규격.
힌트 모드: "0을 떼고 곱해요: 3×4=12! 그리고 떼어둔 0 세 개(백·십·일)를 뒤에 붙이면 12000!" 0 개수 세기 강조 + 열 플래시.
학습 기록: 유형 1과 동일.
진행: 5/10/20 선택, 진행률 바.
결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 0의 개수 착각(붙여야 할 0 누락·과다 — 두 수의 0 개수 합과 비교) → "0 개수는 두 수의 0을 합친 만큼!" ② 앞자리 곱셈(받아올림 포함) 실수 → 한 자리 곱 연습 ③ 만·십만 자리 놓침 → 칸 개수 세기 ④ 순간 실수 → 검산.
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 + "다음 단계: 세 자리 수 × 두 자리 수 도전!" 추천.
스타일: 유형 1과 동일.
완료 기준: 10의 배수 곱 생성(곱 ≤ 999999)·6열 자릿수 정렬·0 연속 입력 원리 체감·클릭 선택/삭제·오답 분석(0 개수 착각 진단)·보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 4학년 1학기 수학 10의 배수 곱셈 [4수01-08]
- 0의 개수 합산 원리 및 자릿값 이동 시각화 모델
- 초등 수학 0 개수 오개념 진단 알고리즘 설계
