2026년 9월 10일 목요일

[초등 4-1 수학] 두 자리 수 ÷ 두 자리 수(나머지 없음) - 나눔수 단 구구 어림 전략



나눔수 구구에서 답을 찾아요! — 두 자리 ÷ 두 자리 나눗셈 연습 웹앱

🔍 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 두 자리 수 ÷ 두 자리 수 나눗셈(예: 52 ÷ 13 = 4)을 세로식으로 직접 풀며 "나눔수 단의 곱셈구구에서 피제수를 찾는" 어림 전략으로 몫을 구하는 방법을 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
나눔수 단 구구 힌트 "13 × 4 = 52! 나눔수(13) 단의 곱셈구구에서 피제수(52)를 찾아요" — 13단 구구 전체가 슬라이드로 펼쳐지고 피제수와 일치하는 줄이 황금색으로 강조됩니다. 몫 후보를 하나씩 비교해가며 어림하는 사고 과정이 그대로 시각화됩니다.
어림 실수 & 역할 혼동 진단 몫을 ±1로 착각하는 어림 실수, 나눔수를 몫에 입력하는 혼동, 몫을 두 자리로 착각하는 오류를 각각 정밀 진단합니다. "나눔수 × 몫 = 피제수" 검산 습관이 모든 처방의 마무리로 제시됩니다.
몫 칸 1개의 심플한 몰입 몫이 한 자리이므로 입력 칸이 단 하나 — 나눔수(두 자리)와 피제수(두 자리)의 관계에 온전히 집중하는 심플한 UI입니다. 클릭 선택 + ⌫ 삭제, 모든 칸 채우면 진행(오답도), 첫 시도 기준 오답 분석 — 원형 규격 유지.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 두자리나누기.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 두 자리 수 ÷ 두 자리 수 (나머지 없음) 바이브 코딩 프롬프트

[유형 9] 두 자리 수 ÷ 두 자리 수(나머지 없음) 연습 웹앱을 만들어줘.

목적·대상: 초등학교 4학년 1학기 학생이 두 자리 수 ÷ 두 자리 수 나눗셈(예: 52 ÷ 13 = 4)을 세로식으로 풀며 어림으로 몫을 찾는 방법을 익히는 인터랙티브 웹앱.

기술 조건: 단일 index.html, CDN, Web Audio API, 폴백.

문제 생성:
- 나눔수는 두 자리 수(11~49), 피제수는 두 자리 수(나눔수×몫, 몫은 한 자리 2~9) — 나머지 없음.
- 예: 52÷13=4, 78÷26=3, 96÷32=3.
- 직전 반복 금지, generateProblem() 분리.

풀이 UI (세로식 나눗셈):
- 나눔수(두 자리)/기호/피제수(두 자리) 배치, 몫 칸 1개(피제수 일의 자리 열 위).
- 입력 칸은 몫 하나. 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록.

힌트 모드: "13 × 4 = 52! 나눔수(13) 단의 곱셈구구에서 피제수(52)를 찾아요" — 나눔수 단 구구 표시 + 몫 후보 강조.

학습 기록: 첫 시도·오답 시도·힌트 기록.

진행: 5/10/20 선택, 진행률 바.

결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 몫 ±1(어림 실수, 2회 이상) → "나눔수 × 몫을 계산해 피제수와 비교하는 검산!" ② 나눔수를 몫에 입력한 착각 ③ 몫을 두 자리로 착각 ④ 순간 실수 → 검산.
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 + "다음 단계: 두 자리 수 ÷ 두 자리 수(나머지 있음) 도전!" 추천.

스타일: 유형 1과 동일.

완료 기준: 몫 한 자리 생성·어림 힌트·클릭 선택/삭제·오답 분석·보충 연습 동작.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 4학년 1학기 수학 두 자리 수로 나누기 [4수01-09]
  • 나눔수 단 구구 기반 어림(몫 후보 비교) 전략 시각화 모델
  • 초등 수학 나눗셈 역할 혼동 진단 알고리즘 설계

[초등 4-1 수학] 몇십으로 나누기(나머지 있음) - 나머지 두 자리 입력과 범위 검증



나머지는 나눔수보다 작아야 해요! — 몇십으로 나누기(나머지 있음) 연습 웹앱

🧮 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 몇십으로 나누어 나머지가 남는 나눗셈(예: 230 ÷ 30 = 7 ··· 20)을 세로식으로 직접 풀며, 몫은 구구로 찾고 나머지는 두 자리(몇십)로 남는다는 나눗셈의 확장 원리를 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
나머지 두 자리 입력 & 범위 검증 나머지가 몇십(두 자리)이므로 나머지 칸이 십·일 두 칸으로 구성되어 있으며, "나머지는 반드시 나눔수보다 작아야 한다"는 범위 규칙이 자동 검증됩니다. 몫을 잘못 찾으면 나머지가 나눔수 이상이 되어 버리는 연동 오류를 즉시 잡아냅니다.
몫↔나머지 역할 구분 진단 몫과 나머지를 자리 바꿔 입력하는 오류가 감지되면 "몫은 한 바구니에 들어가는 개수, 나머지는 남는 개수"로 역할을 구분하는 연습이 처방됩니다. ··· 점 세 개 표기의 의미("나머지는 이 다음에 있어요")도 함께 익힙니다.
0 떼기 전략 + 검산 흐름 "0을 떼고 생각해요: 23 ÷ 3 = 7 ··· 2 → 나머지는 2십 = 20"의 과정이 시각화되어, 몫 구하기에서 0 떼기 원리와 나머지 복원(×10)을 동시에 학습합니다. 클릭 선택 + ⌫ 삭제, 모든 칸 채우면 진행(오답도), 첫 시도 기준 오답 분석 — 원형 규격 유지.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 몇십나누기나머지.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 몇십으로 나누기 (나머지 있음) 바이브 코딩 프롬프트

[유형 8] 몇십으로 나누기(나머지 있음) 연습 웹앱을 만들어줘.

목적·대상: 초등학교 4학년 1학기 학생이 몇십으로 나누어 나머지가 남는 나눗셈(예: 230 ÷ 30 = 7 ··· 20)을 세로식으로 풀어보는 인터랙티브 웹앱.

기술 조건: 단일 index.html, CDN, Web Audio API, 폴백.

문제 생성:
- 나눔수는 몇십(20~90), 피제수는 몇백몇십(110~890, 10의 배수), 나눔수 × 몫 < 피제수 < 나눔수 × (몫+1)이 되도록 생성 — 몫 한 자리(2~9), 나머지는 몇십(10~80).
- 직전 반복 금지, generateProblem() 분리.

풀이 UI (세로식 나눗셈):
- 나눔수/기호/피제수 배치는 유형 7과 동일. 몫 칸 1개(피제수 일의 자리 열 위).
- 나머지 칸: 몫 칸 오른쪽 옆 별도 칸 — 몫 뒤에 ··· 점 표시 + 나머지 입력 칸(나머지는 두 자리(몇십)이므로 십·일 두 칸으로 구성).
- 입력 순서: 몫 → 나머지 십의 자리 → 나머지 일의 자리.
- 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록.

힌트 모드: "0을 떼고 생각해요: 23 ÷ 3 = 7 ··· 2! 그래서 몫은 7, 나머지는 2십 = 20" 시각화.

학습 기록: 몫/나머지 구분 기록.

진행: 5/10/20 선택, 진행률 바.

결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 몫 착각 시 나머지 연동 오류(몫±1 → 나머지가 나눔수 이상이 됨) → "나머지는 나눔수보다 작아야 해요! 검산: 나눔수×몫+나머지=피제수" ② 몫과 나머지 뒤바꿈 → 역할 구분 연습 ③ 0 떼기 착각 → 0 떼기 원리 복습 ④ 순간 실수 → 검산.
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 + "다음 단계: 두 자리 수 ÷ 두 자리 수 도전!" 추천.

스타일: 유형 1과 동일.

완료 기준: 나머지(몇십) 생성·나머지 칸 두 자리 입력·나머지 범위 검증 진단·클릭 선택/삭제·보충 연습 동작.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 4학년 1학기 수학 나머지가 있는 나눗셈 [4수01-09]
  • 나머지 범위 규칙(나눔수 미만) 검증 및 몫-나머지 연동 오류 진단 설계
  • 0 떼기 전략의 나머지 복원(×10) 원리 시각화 모델

[초등 4-1 수학] 몇십으로 나누기(나머지 없음) - 0을 떼고 구구로 나누기 원리



0을 떼어서 구구로 나눠요! — 몇십으로 나누기(나머지 없음) 연습 웹앱

🧮 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 몇십으로 나누는 나눗셈(예: 480 ÷ 60 = 8)을 세로식으로 직접 풀며 "양쪽에서 0을 떼어 구구로 나눈 뒤 확인한다"는 나눗셈의 자릿값 원리를 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
0 떼기 원리 힌트 "480 ÷ 60 → 0을 떼어 48 ÷ 6 = 8! 그래서 480 ÷ 60 = 8"의 과정을 시각적으로 보여주어 몫을 구하는 핵심 전략을 몸으로 익힙니다. 0을 떼어내는 과정과 원래 식으로 되돌리는 과정이 모두 시각화되어 개념이 확실하게 정착됩니다.
몫 ±1 착각 & 0 처리 착각 정밀 진단 구구를 한 줄 앞뒤로 착각하는 오류와, 몫에 0을 붙여 두 자리로 잘못 입력하는 오류를 별도로 진단합니다. "0은 같이 떼고 같이 붙여요!"라는 핵심 규칙이 명확한 처방으로 전달됩니다.
나눔수(두 자리) 세로식 Grid 나눔수가 두 자리(몇십)이므로 나눗셈 기호를 넘어 피제수까지 가로선이 이어지는 확장 Grid에서 몫 칸(1개)이 피제수 일의 자리 위에 정확히 정렬됩니다. 클릭 선택 + ⌫ 삭제, 모든 칸 채우면 진행(오답도), 첫 시도 기준 오답 분석 — 원형 규격 유지.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 몇십나누기.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 몇십으로 나누기 (나머지 없음) 바이브 코딩 프롬프트

[유형 7] 몇십으로 나누기(나머지 없음) 연습 웹앱을 만들어줘.

목적·대상: 초등학교 4학년 1학기 학생이 몇십으로 나누는 나눗셈(예: 480 ÷ 60 = 8)을 세로식으로 풀며 "0을 떼고 구구로 나눈 뒤 확인한다"는 원리를 익히는 인터랙티브 웹앱.

기술 조건: 단일 index.html, CDN, Web Audio API, 폴백.

문제 생성:
- 나눔수는 몇십(20~90), 피제수는 몇백몇십(120~890, 10의 배수), 몫은 한 자리 수(2~9) — 피제수 = 나눔수 × 몫으로 생성되어 나머지가 없음.
- 직전 반복 금지, generateProblem() 분리.

풀이 UI (세로식 나눗셈, CSS Grid 규격):
- 1열 나눔수(두 자리, 44px), 2열 나눗셈 기호 ), 피제수(백/십/일 열 84px), 가로선은 기호부터 피제수까지.
- 몫 네모 칸(84px)은 피제수 일의 자리 열 바로 위 — 몫이 한 자리이므로 입력 칸 1개.
- 몫 입력은 나눗셈 계산 순서대로 진행(이 유형은 칸이 하나).
- 클릭 선택 + ⌫ 삭제(풀이 중), 문제 완료 조건: 칸을 채우면 오답이 있어도 다음 문제 진행(전부 정답만 축하), 오답 누적 기록.

힌트 모드: "0을 떼고 생각해요: 48 ÷ 6 = 8! 그래서 480 ÷ 60 = 8" — 0 떼기 과정 시각화.

학습 기록: 첫 시도·오답 시도·힌트 기록.

진행: 5/10/20 선택, 진행률 바.

결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 몫 ±1(구구 한 줄 착각, 2회 이상) → 나눔수 단 구구 불러보기 ② 0 처리 착각(몫에 0을 붙여 두 자리로 입력 시도 등) → "0은 같이 떼고 같이 붙여요!" ③ 피제수·나눔수를 그대로 입력한 착각 → 몫의 의미 상기 ④ 순간 실수 → 몫×나눔수 검산.
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 + "다음 단계: 몇십으로 나누기(나머지 있음) 도전!" 추천.

스타일: 유형 1과 동일.

완료 기준: 몇십 나눔수 생성·0 떼기 원리 힌트·클릭 선택/삭제·오답 분석·보충 연습 동작.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 4학년 1학기 수학 몇십으로 나누기 [4수01-09]
  • 0 떼기 전략과 자릿값 비(比) 원리 시각화 모델
  • 초등 수학 나눗셈 몫 착각 진단 알고리즘 설계

[초등 4-1 수학] 두 자리 수 × 몇백/몇천 - 앞자리끼리 곱하고 0 붙이기 규칙



0은 나중에 몰아서 붙여요! — 두 자리 수 × 몇백/몇천 곱셈 연습 웹앱

🍬 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 두 자리 수 × 몇백/몇천 곱셈(예: 34 × 200 = 6800, 34 × 2000 = 68000)을 세로식으로 직접 풀며 "앞자리 숫자끼리 먼저 곱한 뒤, 뒤에 붙은 0의 개수만큼 0을 붙인다"는 자릿값 확장 원리를 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
세로식 5열 자릿수 Grid 정렬 [만|천|백|십|일] 5열 규격에 맞춰 승수(몇백/몇천)의 0들이 자릿값 열에 정확히 정렬되어 시각적 안정감을 줍니다. 곱이 5자리(만의 자리)가 될 때만 만의 자리 칸이 활성화되어 자릿수 확장을 직관적으로 체감합니다.
붙여야 할 0의 개수 누락 감지 34×200을 풀 때 34×2=68만 구하고 뒤의 0 두 개를 빠뜨리거나 개수를 헷갈리는 대표 실수를 첫 시도에서 즉각 포착합니다. "몇백은 0 두 개, 몇천은 0 세 개!"라는 명확한 자릿값 원리 피드백으로 계산 실수를 근절합니다.
클릭 선택 & ⌫ 삭제 기반 수정 각 칸을 클릭하여 원하는 자릿수로 자유롭게 이동하고 백스페이스나 ⌫ 버튼으로 지우고 다시 입력할 수 있습니다. 모든 칸을 다 채우면 오답이 있더라도 다음 문제로 넘어가며, 첫 시도 답안을 바탕으로 정밀한 오답 분석 리포트를 제공합니다.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 몇백몇천곱셈.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 두 자리 수 × 몇백/몇천 바이브 코딩 프롬프트

[유형 1] 두 자리 수 × 몇백/몇천 곱셈 연습 웹앱을 만들어줘. (확정 모델 원형)

목적·대상: 초등학교 4학년 1학기 학생이 두 자리 수 × 몇백/몇천 곱셈(예: 34 × 200 = 6800, 34 × 2000 = 68000)을 세로식으로 직접 풀며 "앞자리끼리 곱한 뒤 0을 붙인다"는 원리를 익히는 인터랙티브 웹앱.

기술 조건: HTML+CSS+JavaScript 단일 index.html. CDN: canvas-confetti + 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성(정답=밝은 상승음+축하 아르페지오, 오답=낮은 톤). CDN 실패 시 CSS 파티클·기본 글꼴 폴백.

문제 생성:
- 피승수는 두 자리 수(11~89), 승수는 몇백(200~900) 또는 몇천(2000~6000).
- 곱은 만의 자리까지(99,999 이하)가 되도록만 생성. 곱이 네 자리이면 만의 자리 칸은 빈 칸.
- 직전 문제 반복 금지, generateProblem() 함수 하나로 분리.

상황 카드: "사탕 34개씩 200상자 있어요. 모두 몇 개일까요?" 문장 + 배지(피승수 개수 × 승수 묶음).

풀이 UI (세로식, CSS Grid 5열 [만|천|백|십|일] 각 84px):
- 1행 피승수: 4열 십의 자리(초록), 5열 일의 자리(빨강). 2행 승수: 승수 숫자를 자릿값 열에 배치(몇백이면 백의 자리 열, 몇천이면 천의 자리 열, 뒤 0은 십·일 열에 표시), × 기호는 승수 최고 자릿수 왼쪽 열. 3행 가로선(1~5열). 4행 답안 칸.
- 입력 순서: 일의 자리(항상 0) → 십의 자리(몇백은 0, 몇천은 0) → 백 → 천 → (만, 곱이 5자리일 때만 활성).
- 네모칸 클릭 선택: 클릭하면 해당 칸으로 커서 이동(수정할 칸 선택 가능).
- ⌫ 삭제 버튼(화면 숫자판 + 키보드 Backspace): 현재 선택된 칸을 지워 다시 입력 가능 — 삭제·수정은 풀이 중에만 사용.
- 문제 완료 조건: 모든 칸을 채우면 오답이 있어도 다음 문제로 진행. 전부 정답일 때만 confetti 파티클 + 축하 아르페지오 + "정답! 🎉", 오답 포함이면 축하 없이 "다음 문제로 넘어가요! 힘내자 💪".
- 칸별 반응: 정답 초록 채움 + "딩"(단계마다 음 상승), 오답 빨간 배경 + shake + 낮은 톤(오답 숫자 유지). 한 문제에서 2칸 이상 오답 시도 시 다음 문제 전에 힌트 버튼 깜빡임. 음소거/음량 버튼.

힌트 모드: "34 × 2 = 68! 몇백은 뒤에 0 두 개, 몇천은 0 세 개!" — 앞자리 곱(받아올림 포함) 과정 + 해당 자릿수 열 플래시.

학습 기록: 각 칸의 첫 시도 값(firstAnswers)·오답 시도(wrongAttempts)·힌트 사용을 모두 기록.

진행: 문제 수 선택(5/10/20), 진행률 바.

결과 화면 — 오답 분석:
- 요약: 바로 맞힌 문제 / 실수한 문제 / 힌트 / 정답률.
- 오답 유형 분석(이유+해결 방법, 격려 톤): ① 뒤에 붙는 0의 개수를 놓친 오류 → "34×200 = 34×2×100! 68 뒤에 0 두 개!" ② 두 자리×한 자리 곱셈 실수(받아올림 포함, 2회 이상) → 앞자리 구구 다시 연습 ③ 만의 자리 놓침(5자리 곱) → 칸 개수 먼저 세기 ④ 순간 실수 → 검산 습관.
- 맞춤 보충 연습(5문제), 오답 문제 목록("계산 과정 보기"), 전부 정답 시 축하 파티클 + "다음 단계: 몇백, 몇천의 곱 도전!" 추천, "다시 연습" 버튼.

스타일: 밝은 색감, 한글 폰트 Jua, 세로식 숫자 50px+, 큰 터치 영역, 여백 절제, 모바일 반응형.

완료 기준: 세로식 5열 자릿수 정렬(승수 자릿값 열 배치 포함)·일→만 원샷 순서 입력·클릭 선택·⌫ 삭제·모든 칸 채우면 진행(전부 정답만 축하)·첫 시도 기준 오답 분석·보충 연습 동작.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 4학년 1학기 수학 곱셈과 나눗셈 [4수01-08]
  • 10의 배수 곱셈의 자릿값 이동 및 0 붙이기 규칙 지도 모델
  • 초등 수학 자릿수 누락 오개념 진단 알고리즘 설계

[초등 4-1 수학] 몇백, 몇천의 곱 - 0을 떼고 곱하고 0 붙이기 (10의 배수끼리 곱셈)



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. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. 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 개수 오개념 진단 알고리즘 설계

[초등 4-1 수학] 곱셈 종합 - 4대 하위 유형 무작위 출제 & 취약 유형 진단기



내가 어느 곱셈 유형에서 약할까? — 곱셈 종합 진단 & 집중 보충 웹앱

🎲 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 두 자리×몇백/몇천, 몇백·몇천의 곱, 세 자리×두 자리, 네 자리×두 자리의 4대 하위 유형을 무작위로 섞어 출제하고, 첫 시도 기록을 통계 내어 "어느 유형에서 약한지"를 직접 지목해 취약 유형만 모은 맞춤 보충 연습을 제공하는 종합 진단 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
하위 유형 자동 감지 & 세로식 전환 출제된 문제의 하위 유형을 자동 판별하여 단일 곱 세로식(5~6열) 또는 두 단계 부분곱 세로식이 자동으로 전환됩니다. 상단 배지에 "세 자리 × 두 자리" 같은 유형 이름이 표시되어 지금 풀고 있는 유형을 항상 인지합니다.
유형별 오답 통계 & 취약점 지목 모든 문제의 기록에 하위 유형 정보가 함께 저장되어, 결과 화면에서 "세 자리 × 두 자리 문제에서 실수가 많아요!"처럼 구체적 유형을 짚어줍니다. 맞춤 보충 연습은 실수가 몰린 하위 유형 위주로만 5문제가 출제됩니다.
혼합 출제로 상황 판단력 훈련 "지금 이 문제는 몇 자리 × 몇 자리인가"를 스스로 판단해야 하므로, 계산 능력뿐 아니라 문제 유형 판별 능력이 함께 자랍니다. 클릭 선택 + ⌫ 삭제, 모든 칸 채우면 진행(오답도), 전부 정답만 축하 — 기존 원형 규격을 그대로 유지합니다.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 곱셈종합.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 곱셈 종합 바이브 코딩 프롬프트

[유형 6] 곱셈 종합 연습 웹앱을 만들어줘.

목적·대상: 초등학교 4학년 1학기 학생이 지금까지 배운 곱셈 유형(두 자리×몇백/몇천, 몇백·몇천의 곱, 세 자리×두 자리, 네 자리×두 자리)을 무작위로 풀며 종합하는 인터랙티브 웹앱.

기술 조건: 단일 index.html, canvas-confetti + Jua CDN, Web Audio API, 폴백.

문제 생성:
- 아래 4가지 하위 유형 중 무작위로 출제(균등 분배): ① 두 자리 수 × 몇백/몇천 ② 몇백·몇천의 곱 ③ 세 자리 수 × 두 자리 수 ④ 네 자리 수 × 두 자리 수.
- 각 하위 유형의 문제 생성 제약(곱 자릿수 제한 등)을 그대로 적용.
- 직전 반복 금지, generateProblem()이 하위 유형별 생성기를 호출하도록 분리.

풀이 UI:
- 하위 유형에 맞는 세로식 자동 표시: ①②는 단일 곱 세로식(5~6열), ③④는 두 단계 부분곱 세로식.
- 상단 배지에 이번 문제의 유형 이름 표시(예: "세 자리 × 두 자리").
- 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록에 하위 유형 정보 포함.

힌트 모드: 하위 유형별 힌트(유형 1~4의 힌트 재사용).

학습 기록/진행: 유형 정보 포함 기록, 5/10/20 선택.

결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석: 어떤 하위 유형에서 실수가 몰리는지 지목 (예: "세 자리 × 두 자리 문제에서 실수가 많아요") + 하위 유형별 오답 원인(0 개수·당김·합산 등) 진단.
- 맞춤 보충 연습(5문제): 실수가 몰린 하위 유형 위주로만 출제.
- 오답 문제 목록, 전부 정답 시 축하 + "나눗셈 단원으로 넘어가요!" 추천.

스타일: 유형 1과 동일.

완료 기준: 하위 유형 무작위 출제·자동 세로식 전환·유형별 오답 통계·취약 유형 집중 보충 동작.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 4학년 1학기 수학 곱셈 단원 종합 [4수01-08]
  • 하위 유형별 취약점 진단 및 맞춤 출제 알고리즘 설계
  • 문제 유형 자동 판별 UI 패턴 (배지 표시 & 세로식 동적 전환)

[초등 4-1 수학] 세 수의 곱셈 - 왼쪽부터 차례로 두 단계 세로식 릴레이



하나씩 묶어서 두 번 곱해요! — 세 수의 곱셈 연습 웹앱

🔗 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 세 수의 곱셈(예: 20 × 30 × 2 = 1200)을 왼쪽부터 차례로 두 단계에 나누어 세로식으로 풀어보는 인터랙티브 웹앱입니다. 1단계 카드(첫 두 수의 곱)를 마치면 그 답이 2단계 카드(× 세 번째 수)로 자동 이어지는 릴레이 구조로 연산 순서의 원리를 체화합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
두 단계 카드 자동 릴레이 1단계 카드(20×30=600)를 끝내면 답 600이 자동으로 2단계 카드(600×2=1200)의 피승수로 등장합니다. "왼쪽부터 차례로!"라는 연산 순서 원칙이 화면 전환 흐름으로 자연스럽게 체화됩니다.
0 연속 입력 & 순서 착각 진단 몇십×몇십 구간의 0 연속 입력 원리와, 뒤의 두 수를 먼저 곱하는 순서 착각(답은 같지만 습관 문제)을 별도 진단합니다. "1단계 실수인가, 2단계 실수인가"를 구분 진단하여 정확히 어느 단계가 약한지 알려줍니다.
단계별 학습 기록 분리 1단계와 2단계의 첫 시도·오답·힌트 기록이 각각 보존되어, 결과 화면에서 단계별 취약점이 명확히 드러납니다. 클릭 선택 + ⌫ 삭제로 자유 수정이 가능하며, 모든 칸을 채우면 오답이 있어도 다음 문제로 넘어갑니다.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 세수곱셈.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 세 수의 곱셈 바이브 코딩 프롬프트

[유형 5] 세 수의 곱셈 연습 웹앱을 만들어줘.

목적·대상: 초등학교 4학년 1학기 학생이 세 수의 곱셈(예: 20 × 30 × 2 = 1200)을 왼쪽부터 차례로 두 단계에 나누어 세로식으로 풀어보는 인터랙티브 웹앱.

기술 조건: 단일 index.html, canvas-confetti + Jua CDN, Web Audio API, 폴백.

문제 생성:
- 세 수는 곱셈이 쉬운 구성(예: 몇십 × 몇십 × 몇, 몇백 × 몇 × 몇십)으로, 중간값과 최종값이 모두 만 이하가 되도록 생성.
- 예: 20×30×2, 300×2×30, 40×20×5.
- 직전 반복 금지, generateProblem() 분리.

풀이 UI (두 단계 세로식):
- 1단계 카드: 첫 두 수의 세로식 곱셈(예: 20 × 30) → 1단계 답 칸(일→십→백→천 순서, 몇십×몇십이므로 0 연속 입력 학습).
- 1단계 완료 후 2단계 카드 자동 전환: 1단계 답 × 세 번째 수의 세로식 곱셈(예: 600 × 2) → 2단계 답 칸 입력.
- 화살표와 "1단계 → 2단계" 진행 표시로 왼쪽부터 차례로 푼다는 흐름을 강조.
- 네모칸 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 단계 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록.

힌트 모드: "왼쪽부터 차례로! 20 × 30 = 600, 600 × 2 = 1200" 단계 강조.

학습 기록: 단계별(1단계/2단계) 첫 시도·오답 시도·힌트 기록 — 어느 단계에서 실수했는지 구분.

진행: 5/10/20 선택, 진행률 바.

결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 1단계 실수(0 개수, 앞자리 곱) → "몇십끼리는 0 떼고 곱하고 0 붙이기!" ② 2단계 실수(1단계 답 × 세 번째 수) → 중간값 다시 읽기 ③ 순서 착각(뒤의 두 수를 먼저 곱함 — 답은 같지만 계산 습관) → "왼쪽부터 차례로!" ④ 순간 실수 → 검산.
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 + "다음 단계: 곱셈 종합 도전!" 추천.

스타일: 유형 1과 동일.

완료 기준: 두 단계 카드 전환 흐름, 단계별 원샷 입력+클릭 선택+삭제, 단계 구분 오답 분석·보충 연습 동작.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 4학년 1학기 수학 세 수의 곱셈 [4수01-08]
  • 연산 순서(왼쪽부터) 원칙 및 단계별 릴레이 학습 모델
  • 초등 수학 다단계 곱셈 단계 구분 진단 알고리즘 설계

[초등 4-1 수학] 네 자리 수 × 두 자리 수 - 두 단계 부분곱 6열 세로식 확장



네 자리 숫자를 부분곱으로 정복! — 네 자리 수 × 두 자리 수 곱셈 연습 웹앱

📐 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 네 자리 수 × 두 자리 수 곱셈(예: 2345 × 23 = 53935)을 6열 [십만|만|천|백|십|일] 두 단계 부분곱 세로식으로 직접 풀며, 두 자리 승수의 자릿수별 곱셈과 한 자리 당김, 최종 합산의 전 과정을 완성하는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
6열 확장 — 십만의 자리 도전 곱이 6자리(십만의 자리)까지 확장되므로 1차 부분곱(천의 자리까지)과 2차 부분곱(만의 자리까지)의 스케일이 커지는 자릿값 폭발을 직접 경험합니다. 네 자리 피승수의 모든 자릿수를 승수의 일·십의 자리로 각각 곱하는 완전한 곱셈 알고리즘을 체득합니다.
부분곱 행 색상 구분 1차 부분곱 행(흰 배경)과 2차 부분곱 행(밝은 배경)의 색을 다르게 하여 "이 행은 십의 자리로 곱한 값 — 한 칸 당겨 적기!"를 시각적으로 강조합니다. 당김 실수와 합산 실수를 별도 진단하여 각각 맞춤 처방이 나옵니다.
클릭 선택 & ⌫ 수정 흐름 9개 이상의 입력 칸(부분곱 2행 + 최종 곱 행)을 클릭 선택으로 이동하며 수정할 수 있어, 복잡한 다단계 계산의 오류 수정 스트레스가 없습니다. 모든 칸을 채우면 오답이 있어도 다음 문제로 진행하며, 첫 시도 기준 단계별 정밀 오답 분석이 나옵니다.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 네자리두자리곱셈.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 네 자리 수 × 두 자리 수 바이브 코딩 프롬프트

[유형 4] 네 자리 수 × 두 자리 수 곱셈 연습 웹앱을 만들어줘.

목적·대상: 초등학교 4학년 1학기 학생이 네 자리 수 × 두 자리 수 곱셈(예: 2345 × 23 = 53935)을 두 단계 부분곱 세로식으로 풀어보는 인터랙티브 웹앱.

기술 조건: 단일 index.html, canvas-confetti + Jua CDN, Web Audio API, 폴백.

문제 생성:
- 피승수는 네 자리 수(1000~9999), 승수는 두 자리 수(11~99).
- 곱이 십만의 자리까지(999,999 이하)가 되도록만 생성.
- 직전 반복 금지, generateProblem() 분리.

풀이 UI (두 단계 부분곱 세로식, CSS Grid 6열 [십만|만|천|백|십|일] 각 84px):
- 1행 피승수(천/백/십/일 열), 2행 승수(십/일 열), 3행 가로선.
- 4행 1차 부분곱(승수 일의 자리 × 피승수): 일→천 순서 입력.
- 5행 2차 부분곱(승수 십의 자리 × 피승수, 한 자리씩 당겨 적기): 십→만 순서 입력.
- 6행 가로선, 7행 최종 곱: 일→십만 순서 입력.
- 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록 — 유형 3과 동일 규격.

힌트 모드: 유형 3과 동일 단계 구성(네 자리 수 확장).

학습 기록/진행/결과 화면: 유형 3과 동일 프레임워크, 추천 문구만 "다음 단계: 세 수의 곱셈 도전!".

스타일: 유형 1과 동일.

완료 기준: 네 자리 피승수 부분곱 흐름 동작, 6열 정렬, 오답 분석·보충 연습 동작.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 4학년 1학기 수학 네 자리 수 곱셈 [4수01-08]
  • 십만 단위 부분곱 확장과 자릿값 스케일 이동 시각화
  • 초등 수학 다단계 곱셈 행 구분 진단 알고리즘 설계

[초등 4-1 수학] 세 자리 수 × 두 자리 수 - 두 단계 부분곱 세로식과 한 자리 당겨 적기



두 번 곱해서 더하는 순간! — 세 자리 수 × 두 자리 수 곱셈 연습 웹앱

🧩 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 세 자리 수 × 두 자리 수 곱셈(예: 342 × 23 = 7866)을 두 단계 부분곱(partial products) 세로식으로 직접 풀며 "승수의 일의 자리로 곱하고, 십의 자리로 곱할 때는 한 자리씩 왼쪽으로 당겨 적고, 두 부분곱을 더한다"는 핵심 절차를 몸으로 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
7행 5열 두 단계 부분곱 Grid [만|천|백|십|일] 5열 Grid에 1차 부분곱(일의 자리 곱) 행, 2차 부분곱(십의 자리 곱, 밝은 배경 구분) 행, 최종 곱 행이 순서대로 배치됩니다. 2차 부분곱 행의 "한 자리씩 왼쪽 당겨 적기" 원리를 직접 입력하며 자릿값 이동을 체감합니다.
당김 착각 & 합산 실수 정밀 진단 2차 부분곱을 일의 자리에 그대로 적는(당김 누락) 오류와, 두 부분곱을 더하는 세로 덧셈에서의 받아올림 실수를 별도로 분리 진단합니다. "십의 자리로 곱하면 한 칸씩 왼쪽으로!"과 "두 부분곱을 정확히 더한다"가 각각 처방됩니다.
모든 칸 채우면 진행 + 첫 시도 기록 클릭 선택과 ⌫ 삭제로 자유 수정이 가능하며, 모든 칸을 채우면 오답이 있어도 다음 문제로 넘어갑니다. 첫 시도 답안(firstAnswers)을 바탕으로 단계별(1차/2차/합산) 오답 분석 리포트를 제공합니다.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 세자리두자리곱셈.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 세 자리 수 × 두 자리 수 바이브 코딩 프롬프트

[유형 3] 세 자리 수 × 두 자리 수 곱셈 연습 웹앱을 만들어줘.

목적·대상: 초등학교 4학년 1학기 학생이 세 자리 수 × 두 자리 수 곱셈(예: 342 × 23 = 7866)을 두 단계 부분곱 세로식으로 직접 풀어보는 인터랙티브 웹앱.

기술 조건: 단일 index.html, canvas-confetti + Jua CDN, Web Audio API, 폴백.

문제 생성:
- 피승수는 세 자리 수(100~999, 백의 자리 1~9), 승수는 두 자리 수(11~99, 십의 자리 1~9).
- 곱은 만의 자리까지(99,999 이하)가 되도록만 생성.
- 직전 반복 금지, generateProblem() 분리.

풀이 UI (두 단계 부분곱 세로식, CSS Grid 5열 [만|천|백|십|일] 각 84px):
- 1행 피승수(백/십/일 열), 2행 승수(십/일 열, × 기호는 승수 왼쪽 열), 3행 가로선.
- 4행 1차 부분곱(승수의 일의 자리 × 피승수): 일→십→백→천 순서 입력.
- 5행 2차 부분곱(승수의 십의 자리 × 피승수): 한 자리씩 왼쪽으로 당겨 적기 — 십→백→천 순서 입력(일의 자리는 비워 둠, 2차 부분곱 행은 밝은 배경으로 구분).
- 6행 가로선, 7행 최종 곱: 일→십→백→천 순서 입력.
- 네모칸 클릭 선택 + ⌫ 삭제 버튼(숫자판+Backspace, 풀이 중에만 수정).
- 문제 완료 조건: 모든 칸(부분곱 1·2, 최종 곱)을 채우면 오답이 있어도 다음 문제 진행; 전부 정답일 때만 confetti + 축하 아르페지오 + "정답! 🎉", 오답 포함이면 "다음 문제로 넘어가요! 힘내자 💪".
- 칸별 반응(초록+딩/빨강+shake, 오답 숫자 유지), 2칸 이상 오답 시 다음 문제 전 힌트 제안, 음소거/음량.

힌트 모드: 단계별 — "① 342 × 3 = 1026 (일의 자리부터 각 자리 곱+받아올림) ② 342 × 20 = 6840 → 한 칸 당겨 684로 적어요 ③ 1026 + 6840 = 7866". 해당 행 플래시.

학습 기록: 모든 입력 칸의 첫 시도(firstAnswers)·오답 시도(wrongAttempts)·힌트 사용 기록.

진행: 5/10/20 선택, 진행률 바.

결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 1차 부분곱 실수 → 승수 일의 자리 곱셈 다시 연습 ② 2차 부분곱 당김 착각(일의 자리에 적음) → "십의 자리로 곱하면 한 칸씩 왼쪽으로!" ③ 부분곱 합산(덧셈) 실수 → 세로 덧셈 받아올림 연습 ④ 최종 곱만 풀고 부분곱 건너뜀 ⑤ 순간 실수 → 검산.
- 맞춤 보충 연습(5문제), 오답 문제 목록("계산 과정 보기"), 전부 정답 시 축하 파티클 + "다음 단계: 네 자리 수 × 두 자리 수 도전!" 추천.

스타일: 유형 1과 동일.

완료 기준: 부분곱 2단계 + 당겨 적기 + 합 입력 흐름 동작, 클릭 선택/삭제, 오답도 진행, 단계별 오답 분석(당김 착각·합산 실수 진단)·보충 연습.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 4학년 1학기 수학 두 자리 수 곱셈의 알고리즘 [4수01-08]
  • 부분곱(Partial Product) 분해 및 한 자리 당김 원리 시각화 모델
  • 초등 수학 다단계 곱셈 오류 패턴 진단 알고리즘 설계

[초등 3-2 수학] 몇십 ÷ 몇 나눗셈 - 내림 없고 나머지 없는 몫이 한 자리 수인 나눗셈



도넛 30개를 5개 바구니에 나누면? — 몇십 ÷ 몇(내림·나머지 없음) 웹앱

🍩 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (나눗셈) — 피제수가 몇십(20~90)이고 나눔수가 한 자리 수이며 몫이 한 자리 수인 나눗셈(예: 30 ÷ 5 = 6)을 세로식으로 직접 풀어보며 나눗셈의 기본 원리를 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
상황 그림 카드 연계 "도넛 30개를 바구니 5개에 똑같이 나누어요" 문장과 함께 실제 개수만큼의 아이콘을 시각적으로 제시하여 나눗셈의 의미를 체감합니다. 아이콘이 바구니에 하나씩 돌아가며 담기는 힌트 애니메이션으로 몫의 도출 과정을 눈으로 확인합니다.
세로식 4열 Grid 일의 자리 수직 정렬 몫 네모 칸(84px)이 피제수 일의 자리(4열) 바로 위에 정확히 수직 정렬되어 자릿값 혼동을 예방합니다. 한 자리 몫의 자릿값 위치를 시각적으로 고정하여 세로식 정렬 원리를 확립합니다.
6종 오답 패턴 정밀 진단 나눗셈을 뺄셈으로 푼 착각(30-5=25), 몫 ±1 착각, 전체 개수를 그대로 쓴 오류 등을 세밀하게 진단합니다. 취약 나눔수 집중 5문제 맞춤 보충 연습으로 결손을 즉시 메웁니다.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 몇십나눗셈.html로 저장한 뒤 더블클릭합니다.

제미나이 전용 에러 제로 프롬프트

2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 나눗셈 > 몇십 ÷ 몇 (내림이 없고 나머지도 없음) 바이브 코딩 프롬프트

[유형 1] 몇십 ÷ 몇(내림 없음·나머지 없음, 몫이 한 자리 수인 나눗셈) 연습 웹앱을 만들어줘.

목적·대상: 초등학교 3학년 2학기 학생이 몫이 한 자리 수인 나눗셈(예: 30 ÷ 5 = 6)을 세로식으로 직접 풀어보며 나눗셈의 기본 원리를 익히는 인터랙티브 웹앱.

기술 조건: HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. CDN: canvas-confetti, 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성(정답=밝은 상승음과 축하 아르페지오, 오답=낮은 톤). CDN 폴백 처리(오프라인 시 CSS 파티클 대체, 기본 한글 글꼴).

문제 생성:
- 피제수는 몇십(10의 배수, 20~90), 나눔수는 한 자리 수(2~9), 몫은 한 자리 수(2~9)로 생성하되 내림·나머지가 없는 조합만 출제. 나눔수×몫이 10의 배수가 되는 풀: (나눔수,몫) = (4,5),(5,4),(5,6),(6,5),(5,8),(8,5) → 피제수 20/30/40.
- 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.
- 보충 연습에서는 틀린 나눔수로 나누는 문제를 우선 출제.

상황 카드: 상단에 상황 문장(예: "도넛 30개를 바구니 5개에 똑같이 나누어요.")과 실제 개수만큼의 아이콘 표시로 나눗셈의 의미를 시각화.

풀이 UI (세로식 나눗셈 + 네모 칸 입력):
- 세로식 나눗셈 CSS Grid 4열 규격: 1열=나눔수(44px), 2열=나눗셈 기호 )(24px), 3열=피제수 십의 자리(84px), 4열=피제수 일의 자리(84px). 가로선은 2열~4열 연결.
- 몫 네모 답안 칸(84px)은 반드시 피제수 일의 자리(4열) 바로 위에 수직 정렬. 이 유형에서 몫은 한 자리이므로 입력 칸은 몫칸 하나. 학습자가 몫을 직접 입력(화면 숫자판 0~9 + 키보드).
- 원샷 입력(중요): 몫은 딱 한 번만 입력 가능. 정답이든 오답이든 입력 즉시 채점 후 다음 문제로 자동 이동, 재입력·지우기 불가(시스템 게이밍 차단).
- 반응: 맞으면 몫칸 초록 채움 + "딩" 소리 + confetti 파티클 + 축하 아르페지오 + "정답! 🎉" / 틀리면 빨간 배경 + shake + 낮은 톤, 오답 숫자는 빨간 칸에 그대로 유지, 축하 없이 "다음 문제로 넘어가요!" 후 자동 이동. 연속 2문제 이상 오답 시 힌트 버튼 깜빡임 제안. 음소거/음량 버튼.

힌트 모드: 아이콘을 바구니(나눔수 개수)에 하나씩 돌아가며 나누어 담는 애니메이션 → 각 바구니에 들어간 개수로 몫 도출. 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.

학습 기록: 각 문제마다 입력한 몫, 정/오, 힌트 사용 여부를 기록.
진행: 문제 수 선택(5/10/20), 상단에 진행률 바.

결과 화면 — 오답 분석:
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 학습 기록을 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  · 나누기를 빼기로 계산한 오류(입력 = 피제수−나눔수) → "나눗셈을 뺄셈처럼 계산했어요" → "전체를 몇 묶음으로 나눌까?" 먼저 생각하는 습관.
  · 몫을 1개 차이로 착각(입력 = 정답±1, 2회 이상) → "곱셈구구를 떠올릴 때 한 줄 앞뒤를 골랐어요" → 나눔수 단 구구를 1단부터 불러보며 찾기.
  · 전체 개수를 그대로 쓴 오류(입력 = 피제수) → "답자리에 전체 개수를 썼어요" → 몫은 한 묶음에 들어가는 개수임을 상기.
  · 나눔수를 답에 쓴 오류(입력 = 나눔수) → "바구니 개수를 답에 적었어요" → 나눔수와 몫의 역할 구분 연습.
  · 특정 나눔수 취약(같은 나눔수에서 2회 이상 오답) → "나눔수 단 구구가 아직 익숙하지 않아요" → 해당 단 구구 소리 내어 외우기.
  · 어느 것도 해당 없으면 → "순간적인 실수예요" → "몫 × 나눔수 = 피제수" 검산 습관.
  · 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 나눔수 위주 5문제), 오답 문제 목록, 전부 정답 시 축하 파티클 + "다음 단계: 몇십 몇 ÷ 몇 도전!" 추천, "다시 연습" 버튼.

스타일: 밝고 부드러운 색감, 동글동글한 한글 폰트, 세로식 숫자 최소 50px, 큰 터치 영역, 여백 절제, 스마트폰 세로 반응형.

완료 기준: index.html을 열면 바로 연습 시작; 몫이 한 자리인 나눗셈 생성 규칙(피제수 몇십, 내림·나머지 없음)이 항상 지켜지고, 몫칸 원샷 입력·즉시 채점·파티클+사운드·힌트 애니메이션·오답 분석 결과 화면·맞춤 보충 연습이 모두 동작해야 함.

📚 기술·교육 참고 링크

  • 2022 개정 교육과정 초등 3학년 2학기 수학 나눗셈(몇십 ÷ 몇) 단원 [4수01-09]
  • 등분제와 포함제 나눗셈의 상황 그림 시각화 및 자릿값 격자 정렬 지도법