[초등 3-2 수학] 나눗셈의 검산 - 곱셈으로 나눗셈 답을 확인하는 3단계 흐름



내가 구한 답이 진짜 맞을까? 곱셈으로 확인해요! — 나눗셈의 검산 웹앱

🔍 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (나눗셈) — 나눗셈을 푼 뒤 "몫 × 나눔수 (+나머지) = 피제수" 검산 곱셈과 덧셈 과정을 직접 입력하여 자신의 정답을 눈으로 확인하는 습관을 길러주는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
3단계 순차 풀이 구조	① 세로식 나눗셈의 몫(·나머지) 입력 ➔ ② 검산 곱셈(몫 × 나눔수) 자릿수별 입력 ➔ ③ 나머지가 있으면 (곱) + (나머지) = 피제수 덧셈 확인이 자동으로 이어집니다.	완성된 검산식이 일치하면 ✔ 연출과 함께 "검산 완료! 🎉"를 축하합니다.
나머지 있음/없음 혼합 출제	나머지가 있는 나눗셈(70%)과 없는 나눗셈(30%)을 섞어 출제하여 상황에 맞는 검산 전략(나머지 더하기 유무)을 스스로 판단합니다.	나누어진 개수와 남은 개수를 합해 전체 개수가 복원되는 원리를 체감합니다.
몫 착각의 검산 기반 진단	몫을 엉뚱하게 적으면 검산 곱셈이 피제수와 맞지 않음을 보여주고, "몫을 바꾸면 검산이 일치한다"는 되돌아보기 학습을 제공합니다.	틀린 몫과 맞는 몫의 검산 결과를 나란히 비교하는 연출로 오류를 직관화합니다.

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

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

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

2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 나눗셈 > 나눗셈의 검산 바이브 코딩 프롬프트

[유형 7] 나눗셈의 검산 연습 웹앱을 만들어줘.

목적·대상: 초등학교 3학년 2학기 학생이 "몫 × 나눔수 (+나머지) = 피제수" 검산 원리를 이용해 나눗셈의 정답을 확인하는 과정을 직접 입력하며 익히는 인터랙티브 웹앱.

기술 조건: HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. CDN: canvas-confetti, 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성. CDN 폴백 처리.

문제 생성:
- 나눗셈(피제수 두 자리 10~85, 나눔수 한 자리 2~9)을 제시. 나머지 있는 나눗셈과 없는 나눗셈을 혼합 출제(약 7:3).
- 검산 과정: ① 몫과 나머지 입력 ② 검산 곱셈 몫 × 나눔수의 곱 입력(자릿수별) ③ 나머지가 있으면 (곱) + 나머지 = 피제수 덧셈 확인.
- 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 오답 단계 유형 위주 출제.

상황 카드: "나눗셈을 풀고, 곱셈으로 검산해 확인해요!" 안내와 함께 나눗셈 제시.

풀이 UI:
- 1단계 세로식 나눗셈(4열/5열 규격, 몫칸+조건부 나머지 칸)에 몫과 나머지를 원샷 입력.
- 2단계 검산 곱셈 세로식(3열 규격: 몫 × 나눔수 = 곱)이 나타나고, 곱의 각 자릿수를 원샷 입력(오른쪽부터).
- 3단계 나머지가 있는 문제는 (곱) + (나머지) = (피제수) 덧셈식이 나타나고 합의 각 자릿수를 원샷 입력 후 피제수와 일치하는 것을 시각적으로 확인(일치 표시 연출).
- 각 단계별 원샷 입력(재입력 불가), 칸별 정답 초록+"딩", 오답 빨간 배경+shake(오답 유지), 단계 완료 시 다음 단계 자동 전환. 최종 검산 완료 시 confetti+아르페지오+"검산 완료! 🎉". 2칸 이상 오답 시 힌트 제안. 음소거/음량 버튼.

힌트 모드: "몫 × 나눔수는 나누기 전 전체 개수(나머지 없을 때) 또는 나누어진 개수(나머지 있을 때)예요. 여기에 나머지를 더하면 전체 개수가 되죠!" 단계별 강조 설명 + 해당 열 플래시.

학습 기록: 단계별 입력(나눗셈 몫/나머지, 검산 곱셈, 덧셈)과 정/오, 힌트 사용 여부 기록.
진행: 문제 수 선택(5/10/20), 진행률 바(단계별 진행 포함).

결과 화면 — 오답 분석:
- 요약 카드. 분석:
  · 검산 곱셈 구구 실수 → "검산 곱셈에서 구구를 다시 확인해요" → 곱셈구구 연습.
  · 나머지 더하기 단계 실수 → "(곱) + 나머지 = 전체" 흐름 다시 보기.
  · 나눗셈 몫 착각 → 몫을 바꾸면 검산이 맞지 않음을 보여주는 비교 연출.
  · 일회성 실수 → 검산 습관 칭찬과 함께 마무리.
- 맞춤 보충 연습(5문제), 오답 문제 목록(검산 과정 다시 보기), 전부 정답 시 축하 파티클 + "이제 나눗셈 단원 완성! 잘했어요 🎉" 추천, "다시 연습" 버튼.

스타일: 밝은 색감, 큰 글자·터치 영역, 여백 절제, 스마트폰 세로 반응형.

완료 기준: 나눗셈→검산 곱셈→(+나머지) 덧셈 3단계 흐름 동작, 단계별 원샷 입력, 검산 일치 연출, 오답 분석·보충 연습 동작.

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 3학년 2학기 수학 나눗셈(나눗셈의 검산) 단원 [4수01-09]
• 나눗셈과 곱셈의 역연산 관계를 활용한 검산(Checking by Inverse Operation) 지도법

[초등 3-2 수학] 나눗셈의 몫과 나머지 - 상황 그림으로 익히는 나머지의 본질



똑같이 나누어주고 몇 개가 남았을까요? — 나눗셈의 몫과 나머지 개념 웹앱

🍬 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (나눗셈) — 나머지가 항상 1 이상 발생하는 나눗셈(예: 13 ÷ 3 = 4 ··· 1, 17 ÷ 5 = 3 ··· 2)을 상황 그림과 함께 직접 풀어보며 몫(한 사람당 받는 개수)과 나머지(남은 개수)의 수학적 의미를 체감하는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
나머지가 항상 있는 문제만 엄선	나머지가 1 이상인 문제만 출제되어, 몫과 나머지를 동시에 구하고 각각의 네모 칸에 입력하는 훈련에 집중합니다.	상황 문장("사탕 13개를 3명에게 나누어 주면 몇 개가 남을까요?")과 아이콘으로 의미를 직관화합니다.
몫칸과 나머지 칸(···) 2개 입력	피제수 일의 자리 위 몫칸을 채우고, 우측의 나머지 칸으로 자동 이동하여 순차적으로 원샷 입력합니다.	몫과 나머지 두 칸을 모두 맞혀야만 정답 축하 아르페지오가 울립니다.
몫과 나머지 위치 바꿈 오류 정밀 진단	13÷3의 답을 '몫 1, 나머지 4'처럼 두 값의 위치를 거꾸로 쓰는 학생들의 인지적 실수를 정확히 짚어냅니다.	"몫은 한 사람당 개수, 나머지는 남은 개수예요" 역할 구분 처방을 제공합니다.

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

1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
2. 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
3. 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)의 실물 모델 시각화 전략

[초등 3-2 수학] 대분수를 가분수로 나타내기 - 분모는 그대로, 분자는 정수부×분모+분자

피자 2판과 3분의 1조각은 몇 조각일까? — 대분수를 가분수로 나타내기 웹앱

🍕 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (분수) — 대분수를 가분수로 바꾸는 방법(예: 2과 3분의 1 = 3분의 7)을 피자 조각 묶음 상황과 함께 직접 입력하며 익히는 인터랙티브 웹앱입니다. "분모는 그대로 두고, 분자는 정수부 × 분모 + 분자로 계산한다"는 핵심 원리를 손으로 직접 체화합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
분모 먼저 입력하는 교과서식 순서	분수는 분모를 먼저 쓰는 수학적 관습에 맞춰, 첫 입력 커서가 분모 칸(파랑 테두리)에 위치하고 이후 분자(십의 자리 → 일의 자리)로 자동 이동합니다.	"분모는 바뀌지 않고 그대로 내려쓴다"는 규칙을 손가락 순서로 자연스럽게 익힙니다.
실수 교정 지원 (클릭 선택 & ⌫ 삭제)	원샷 입력의 긴장감을 유지하면서도, 이미 입력한 칸을 다시 클릭해 수정하거나 ⌫ 지우기 버튼으로 오답을 스스로 고칠 수 있습니다.	빨간 테두리가 뜬 칸을 눌러 자기주도적으로 오류를 수정하며 메타인지 능력을 기릅니다.
조각 막대 시각화 힌트	정수부 2판을 3분의 1조각 단위(2×3=6조각)로 쪼개고 남은 1조각을 합쳐 7조각(3분의 7)이 되는 과정을 막대 그림으로 생생하게 보여줍니다.	단순 공식 암기가 아니라 "조각의 총개수를 센다"는 분수의 시각적 개념을 완벽히 이해합니다.

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

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

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

2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 분수 > 대분수를 가분수로 나타내기 바이브 코딩 프롬프트

[유형 1] 대분수를 가분수로 나타내기 연습 웹앱을 만들어줘.

목적·대상: 초등학교 3학년 2학기 학생이 대분수를 가분수로 바꾸는 방법(예: 2과 3분의 1 = 3분의 7)을 직접 입력하며 익히는 인터랙티브 웹앱. 변환 원리: 분자 = 정수부 × 분모 + 분자, 분모는 그대로.

기술 조건:
- HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일.
- CDN: 파티클은 canvas-confetti, 한글 폰트는 구글 폰트 CDN(Jua). 소리는 Web Audio API로 직접 생성(정답=밝은 상승음과 축하 아르페지오, 오답=낮은 톤).
- CDN이 로드되지 않아도 풀기·채점은 동작하도록 폴백 처리(파티클은 CSS 애니메이션 대체).

문제 생성:
- 대분수: 정수부 a(1~5), 분모 c(2~9), 분자 b(1~c-1). 가분수의 분자는 a×c+b(5~53, 한 자리 또는 두 자리).
- 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게. 보충 연습에서는 틀린 분모 위주 출제.

문제 표시 (대분수 카드):
- 왼쪽에 정수부(큰 글자), 오른쪽에 분수 형태(분자 / 가로선 / 분모)로 대분수를 교과서식 레이아웃으로 표시.
- 상단에 상황 문장(예: "피자 2과 3분의 1판을 3분의 1조각 단위로 세면 모두 몇 조각일까요?")과 묶음 배지.

풀이 UI (가분수 답안 + 네모 칸 입력):
- 답을 가분수 형태로 입력: 윗줄 분자 칸(초록 테두리, 한 자리면 1칸·두 자리면 십/일 2칸 동적), 중간 가로선, 아랫줄 분모 칸(파랑 테두리 1칸). 칸은 한 변 84px 이상.
- 입력 순서(중요): 분수는 관습상 분모를 먼저 쓰므로 첫 커서는 분모 칸! 순서: 분모 → 분자(십의 자리 → 일의 자리). 각 칸 입력 후 다음 빈 칸으로 자동 이동.
- 네모 칸 클릭 선택: 칸을 클릭하면 커서가 그 칸으로 이동(이미 채운 칸도 선택해 수정 가능).
- 삭제 버튼: 숫자판에 ⌫ 지우기 버튼(키보드 Backspace 지원) — 현재 칸의 숫자를 지워 다시 입력 가능.
- 채점: 입력 즉시 칸별 채점. 맞으면 초록 채움 + "딩" 소리 / 틀리면 빨간 배경 + shake + 낮은 톤. 오답 시도는 wrongAttempts에 누적 기록.
- 완료 조건: 모든 칸이 정답으로 채워지면 문제 완료 — confetti 파티클 + 축하 아르페지오 + "정답! 🎉". 빨간 칸이 남으면 "빨간 칸을 눌러 고치고 다시 입력해보세요!" 안내 후 머물기.
- 한 문제에서 오답 2회 이상이면 힌트 버튼 깜빡임 제안. 음소거/음량 버튼.

힌트 모드:
- "힌트" 버튼: 조각 막대 시각화 — 분모 개수 조각이 모이면 1개분! 정수부 a개 = a×c조각, 남은 조각 b개 → 합계 a×c+b조각 = a×c+b분의... (예: 3분의 1 조각이 3개 모이면 1개! 2개분 = 2×3 = 6조각, 남은 1조각 → 모두 7조각 → 3분의 7 (7/3)).
- 힌트를 쓴 문제는 결과에서 "힌트 사용"으로 구분.

학습 기록 (분석용 데이터):
- 문제별 모든 입력 시도(분자/분모 구분, 값, 정/오), 수정 횟수, 힌트 사용 여부 기록.

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

결과 화면 — 오답 분석:
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수.
- 실수가 있으면 학습 기록(wrongAttempts)을 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 남은 조각 누락(분자 시도 = 정수부×분모) → 이유: "정수부를 조각으로 바꾸고 남은 조각을 더하는 걸 잊었어요" → 해결: "정수부 × 분모 + 분자" 순서 손가락으로 짚기.
  - 곱셈 누락(분자 시도 = 정수부+분자) → 이유: "정수부를 1로 바꾸는 곱셈을 빠뜨렸어요" → 해결: 정수부를 분모만큼의 조각으로 바꾸는 그림 보기.
  - 분자/분모 뒤바꿈(분모 칸 시도 = 계산된 분자 값) → 이유: "자리를 바꿔 적었어요" → 해결: 분모는 바뀌지 않는다는 규칙 기억하기.
  - 대분수 그대로 입력(분자 시도 = 대분수의 분자) → 이유: "바꾸지 않고 그대로 적었어요" → 해결: "바꾸기 전과 후가 달라요!" 비교 연습.
  - 구구단 실수(정답±1, 2회 이상) → 이유: "정수부 × 분모 곱셈에서 실수했어요" → 해결: 해당 구구 소리 내어 외우기.
  - 어느 것도 해당 없으면 → 이유: "순간적인 실수예요" → 해결: "분모는 그대로, 분자는 계산" 확인 습관.
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 분모 위주 5문제), 오답 문제 목록("계산 과정 보기"로 조각 시각화 재생), 전부 바로 맞히면 축하 파티클 + "다음 단계: 가분수를 대분수로 나타내기 도전!" 추천, "다시 연습" 버튼.

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

완료 기준: index.html을 열면 바로 연습 시작; 첫 커서가 분모 칸, 클릭 선택·⌫ 삭제·정답 채움 완료 조건이 모두 동작하고, 오답 분석(5종)과 맞춤 보충 연습이 동작해야 함.

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 3학년 2학기 수학 분수 지도 요령 [4수01-11]
• 대분수와 가분수의 상호 변환 원리 및 조각 막대 시각화 모델
• 초등 수학 분수 변환 오류 패턴 진단 알고리즘 설계

[초등 3-2 수학] 가분수를 대분수로 나타내기 - 몫은 자연수, 나머지는 분자

3분의 7조각을 묶으면 몇 판이 될까? — 가분수를 대분수로 나타내기 웹앱

🥞 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (분수) — 가분수를 대분수로 바꾸는 방법(예: 3분의 7 = 2과 3분의 1)을 묶음 시각화와 함께 직접 입력하며 익히는 인터랙티브 웹앱입니다. "분자를 분모로 나눈 몫이 대분수의 자연수가 되고, 남는 나머지가 새로운 분자가 된다"는 나눗셈 연계 원리를 완벽히 체득합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
정수부 ➔ 분모 ➔ 분자 입력 동선	대분수 형태에 맞춰 가장 큰 묶음인 정수부(몫)를 먼저 입력하고, 바뀌지 않는 분모, 마지막으로 남은 조각인 분자 순서로 자연스럽게 이동합니다.	"큰 판 개수를 먼저 적고, 그 다음 남은 분수를 적는다"는 대분수의 구조적 순서를 손가락으로 익힙니다.
몫과 나머지 뒤바꿈 정밀 진단	아이들이 가장 흔히 헷갈려하는 "몫과 나머지의 위치를 서로 바꿔 적는 실수"를 학습 기록에서 즉각 포착하여 맞춤 처방을 내립니다.	"묶음 개수가 앞의 큰 수, 남은 개수가 위쪽 분자!"라는 1:1 대응 원리를 명쾌하게 바로잡아 줍니다.
조각 묶음 애니메이션 힌트	7개의 3분의 1조각이 3개씩 동그라미로 묶여 2판이 완성되고 1조각이 남는 과정을 눈앞에서 생생하게 보여줍니다.	나눗셈의 '몫'과 '나머지'가 대분수의 어느 위치로 들어가는지 시각적으로 증명합니다.

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

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

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

2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 분수 > 가분수를 대분수로 나타내기 바이브 코딩 프롬프트

[유형 2] 가분수를 대분수로 나타내기 연습 웹앱을 만들어줘.

목적·대상: 초등학교 3학년 2학기 학생이 가분수를 대분수로 바꾸는 방법(예: 3분의 7 = 2과 3분의 1)을 직접 입력하며 익히는 인터랙티브 웹앱. 변환 원리: 분자 ÷ 분모의 몫 = 정수부, 나머지 = 분자, 분모는 그대로.

기술 조건: [단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백]

문제 생성:
- 가분수: 분자 n(7~88, 한 자리 또는 두 자리), 분모 d(2~9), n > d. 정수부(몫) 1~9, 나머지(분자) 1~d-1이 되도록 생성(예: d=3, 몫=2, 나머지=1 → n=7).
- 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 분모 위주 출제.

문제 표시:
- 왼쪽에 가분수(분자 / 가로선 / 분모)를 크게 표시하고, 화살표 → 오른쪽에 답으로 쓸 대분수 틀을 제시: 정수부 네모 칸(1칸) + 분수 부분(분자 칸 1~2칸 동적 / 가로선 / 분모 칸 1칸).
- 상황 문장(예: "3분의 7조각을 1판 단위로 묶으면 몇 판이고 몇 조각이 남을까요?")과 묶음 배지.

풀이 UI (대분수 답안 + 네모 칸 입력):
- 답안 칸: 정수부 칸(보라 테두리), 분자 칸(초록 테두리, 동적 1~2칸), 분모 칸(파랑 테두리). 한 변 84px 이상.
- 입력 순서(중요): 정수부(몫) → 분모(그대로) → 분자(나머지). 관습상 분모를 분자보다 먼저 쓰고, 정수부는 대분수의 맨 앞이므로 가장 먼저 입력.
- 네모 칸 클릭 선택(이미 채운 칸도 수정 가능)과 ⌫ 삭제 버튼(숫자판 + Backspace) 지원.
- 채점: 입력 즉시 칸별 채점(맞으면 초록+딩, 틀리면 빨강+shake+낮은 톤), 오답 시도는 wrongAttempts에 누적 기록.
- 완료 조건: 모든 칸이 정답으로 채워지면 문제 완료(confetti + 축하 아르페지오 + "정답! 🎉"). 빨간 칸이 남으면 고치도록 안내 후 머물기. 오답 2회 이상이면 힌트 제안. 음소거/음량 버튼.

힌트 모드:
- "힌트" 버튼: 조각 묶음 시각화 — 분모 개수 조각이 모이면 1개분! 분자 개수의 조각을 1개분 단위로 묶는 애니메이션(예: 3분의 7 → 3개씩 묶으면 2묶음, 남는 1조각 → 2과 3분의 1). 묶음 개수 = 정수부(몫), 남는 개수 = 분자(나머지).
- 힌트를 쓴 문제는 결과에서 "힌트 사용"으로 구분.

학습 기록: 문제별 입력 시도(칸 구분: 정수부/분자/분모), 수정 횟수, 힌트 사용 여부 기록.

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

결과 화면 — 오답 분석:
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수.
- 실수가 있으면 wrongAttempts를 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 몫/나머지 뒤바꿈(정수부 칸 시도 = 나머지 값이고 분자 칸 시도 = 몫 값) → 이유: "몫과 나머지 자리를 바꿔 적었어요" → 해결: "큰 묶음 개수가 정수부, 남는 개수가 분자!" 구분 연습.
  - 정수부 과대/과소(정수부 시도 = 몫±1, 2회 이상) → 이유: "묶음 개수를 세는 데 실수했어요" → 해결: 분모 개수씩 묶는 그림 다시 세기.
  - 나머지 0 착각(분자 칸 시도 = 0) → 이유: "나머지가 없다고 생각했어요" → 해결: 남는 조각이 보이는 시각화로 확인.
  - 분모 착각(분모 칸 시도 = 분자나 몫 값) → 이유: "분모는 바뀌지 않는다는 걸 잊었어요" → 해결: "분모는 그대로!" 규칙 기억.
  - 가분수 그대로 입력(정수부 없이 분자 칸에 원래 분자 값) → 이유: "바꾸지 않고 그대로 적었어요" → 해결: 나눗셈으로 바꾸는 연습.
  - 어느 것도 해당 없으면 → 이유: "순간적인 실수예요" → 해결: "몫×분모+나머지 = 분자" 검산 습관.
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 분모 위주 5문제), 오답 문제 목록("계산 과정 보기"로 묶음 애니메이션 재생), 전부 바로 맞히면 축하 파티클 + "다음 단계: 분모가 같은 가분수/대분수끼리의 크기 비교 도전!" 추천, "다시 연습" 버튼.

스타일: 밝고 부드러운 색감, 큰 글자·터치 영역, 스마트폰 세로 반응형.

완료 기준: 첫 커서가 정수부 칸(정수부→분모→분자 순서), 클릭 선택·⌫ 삭제·정답 채움 완료 조건 동작, 몫/나머지 뒤바꿈 등 오답 분석 6종과 맞춤 보충 연습 동작.

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 3학년 2학기 수학 가분수와 대분수 상호 변환 [4수01-11]
• 나눗셈의 몫과 나머지를 대분수로 연결하는 조각 묶음 모델
• 몫과 나머지 위치 전도 오개념 분석 및 진단 가이드

[초등 3-2 수학] 분모가 같은 분수의 크기 비교 - 같은 꼴끼리 비교하기 (> < =)

어느 쪽이 더 많을까? — 분모가 같은 가분수끼리, 대분수끼리 크기 비교 웹앱

⚖️ 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (분수) — 분모가 같은 두 분수(가분수끼리 또는 대분수끼리)의 크기를 비교하여 알맞은 부등호(> < =)를 고르는 인터랙티브 웹앱입니다. 대분수끼리는 자연수를 먼저 비교하고, 가분수끼리는 분자의 크기를 비교한다는 직관적인 비교 원리를 체득합니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
84px 대형 부등호 원샷 입력	화면 중앙에 큼직한 비교 기호 버튼(>, <, =) 3개를 배치하여 한 번의 터치로 직관적으로 답을 입력합니다.	태블릿 화면에서 아이들이 망설임 없이 기호를 짚을 수 있는 큰 조작 영역을 제공합니다.
부등호 방향 혼동 특화 진단	크기는 바르게 파악했으나 >와 <의 벌어진 입 방향을 반대로 고르는 초등학생 특유의 표기 실수를 정밀하게 감지합니다.	"더 큰 쪽에 입을 크게 벌린다!"는 시각적 규칙을 리마인드하여 기호 표기 오개념을 말끔히 해결합니다.
분수 막대 오버레이 힌트	같은 길이의 두 분수 막대가 위아래로 겹쳐지며 채워진 조각의 길이를 직접 눈으로 비교하는 애니메이션을 보여줍니다.	대분수에서는 큰 판(정수부)을 먼저 비교하고, 정수부가 같을 때 비로소 분자를 비교하는 판단 순서를 배웁니다.

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

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

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

2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 분수 > 분모가 같은 가분수/대분수끼리의 크기 비교 바이브 코딩 프롬프트

[유형 3] 분모가 같은 가분수/대분수끼리의 크기 비교 연습 웹앱을 만들어줘.

목적·대상: 초등학교 3학년 2학기 학생이 분모가 같은 두 분수(가분수끼리 또는 대분수끼리)의 크기를 비교해 부등호(> < =)로 나타내는 연습 웹앱.

기술 조건: [단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백]

문제 생성:
- 같은 꼴끼리 쌍: ① 가분수 vs 가분수(예: 5분의 7 vs 5분의 3 — 분모 d 2~9, 분자 각각 2~2d-1, 분자가 다른 쌍) ② 대분수 vs 대분수(예: 2과 3분의 1 vs 1과 3분의 2 — 정수부 또는 분자가 다른 쌍).
- 둘 중 하나를 무작위로 선택해 출제. 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 분모 위주 출제.

문제 표시:
- 두 분수를 나란히 크게 표시(가분수: 분자/가로선/분모, 대분수: 정수부+분자/가로선/분모)하고, 두 수 사이에 빈 비교 칸(부등호가 들어갈 자리, 84px 원형 테두리)을 배치.
- 상황 문장(예: "어느 쪽이 더 클까요? 알맞은 기호를 넣어보세요.").

풀이 UI (비교 기호 원샷 입력):
- 비교 기호 버튼 3개( > , < , = )를 크게 배치(각 버튼 최소 84px). 원하는 기호를 클릭 한 번으로 답 입력(원샷).
- 채점: 맞으면 비교 칸에 기호가 초록으로 표시 + "딩" + 문제 완료(confetti + 아르페지오) / 틀리면 빨강 + shake + 낮은 톤 후 다시 선택 가능(기호 재선택으로 수정, 오답 시도는 wrongAttempts에 누적).
- 오답 2회 이상이면 힌트 제안. 음소거/음량 버튼.

힌트 모드:
- "힌트" 버튼: 분수 막대 시각화 — 같은 분모의 막대 두 개를 겹쳐 보여주고 채워진 조각 수를 비교(예: 대분수끼리면 정수부를 먼저 비교하고, 같으면 분자를 비교).
- 힌트를 쓴 문제는 결과에서 "힌트 사용"으로 구분.

학습 기록: 문제별 선택 시도(기호, 정/오), 힌트 사용 여부 기록.

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

결과 화면 — 오답 분석:
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수.
- 실수가 있으면 wrongAttempts를 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 부등호 방향 혼동(>와 <를 서로 바꿔 선택, 2회 이상) → 이유: "부등호가 어느 쪽을 가리키는지 헷갈렸어요" → 해결: "크기가 큰 쪽에 입을 크게 벌린다" 부등호 그림 기억.
  - = 잘못 선택(두 수가 다른데 = 선택) → 이유: "두 수를 자세히 비교하지 않았어요" → 해결: 분자를 하나씩 짚어가며 비교.
  - 정수부만 보고 판단(대분수 비교에서 분자가 더 큰 쪽을 골랐는데 정수부가 작은 경우 등) → 이유: "정수부만 보고 비교했어요" → 해결: 정수부가 같을 때는 분자를 비교한다는 규칙 연습.
  - 어느 것도 해당 없으면 → 이유: "순간적인 실수예요" → 해결: 기호 넣기 전 두 수를 소리 내어 읽기.
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 분모 위주 5문제), 오답 문제 목록, 전부 바로 맞히면 축하 파티클 + "다음 단계: 분모가 같은 가분수와 대분수의 크기 비교 도전!" 추천, "다시 연습" 버튼.

스타일: 밝고 부드러운 색감, 큼직한 84px 버튼, 여백 절제, 스마트폰 세로 반응형.

완료 기준: 기호 버튼 원샷 입력·즉시 채점·재선택 수정 동작, 부등호 혼동 등 오답 분석과 맞춤 보충 연습 동작.

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 3학년 2학기 수학 분모가 같은 분수의 크기 비교 [4수01-12]
• 가분수와 대분수의 시각적 막대 모델을 통한 양감 비교 지도법
• 초등 수학 부등호 방향 기호 오류 분석 및 지도 전략

[초등 3-2 수학] 분모가 같은 가분수와 대분수의 크기 비교 - 꼴이 다른 수 비교하기 (> < =)

같은 꼴로 바꾸어 비교해요! — 분모가 같은 가분수 vs 대분수 크기 비교 웹앱

🔄 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (분수) — 분모가 같지만 꼴이 다른 두 분수(가분수 vs 대분수, 예: 4분의 7 vs 1과 4분의 3)를 비교하는 웹앱입니다. 핵심은 "꼴이 다르면 같은 꼴로 바꾸어 비교한다"는 변환 전략을 몸으로 익히는 것! 대분수를 가분수로 바꾸는 과정을 힌트 막대 시각화로 생생하게 보여줍니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
변환 없이 비교한 실수 감지	대분수의 정수부만 크다고 보거나, 가분수의 분자만 크다고 보고 무조건 판단하는 초등학생의 가장 흔한 비교 오개념을 정밀하게 포착합니다.	"꼴이 다른 두 수는 먼저 같은 꼴로 바꾸어야 비교할 수 있어요!"라는 분수의 기본 소양을 구조적으로 만들어 줍니다.
크기가 같은 경우(=) 포함 출제	가분수의 분자가 우연히 대분수의 (정수부×분모+분자)와 일치하는 경우(예: 4분의 5 = 1과 4분의 1)를 의도적으로 포함하여, 학생이 꼼꼼히 변환해보지 않으면 = 선택을 놓치는 사고의 깊이를 강제합니다.	크기 비교에서 ">"이나 "<"이 아니라 "="도 답일 수 있음을 인식하는 표기적 유연성을 훈련시킵니다.
변환 막대 시각화 힌트	대분수를 가분수로 바꾸는 과정(예: 1과 4분의 3 ➔ 4분의 4 + 4분의 3 = 4분의 7)을 막대 그림으로 화면에 그려 보여주고, 바뀐 두 가분수의 분자를 대비합니다.	'같은 꼴로 바꾸어 비교한다'는 수학적 규범이 뇌리에 깊이 새겨지도록 돕습니다.

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

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

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

2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 분수 > 분모가 같은 가분수와 대분수의 크기 비교 바이브 코딩 프롬프트

[유형 4] 분모가 같은 가분수와 대분수의 크기 비교 연습 웹앱을 만들어줘.

목적·대상: 초등학교 3학년 2학기 학생이 분모가 같지만 꼴이 다른 두 분수(가분수 vs 대분수, 예: 4분의 7 vs 1과 4분의 3)를 비교하는 연습 웹앱. 핵심: 같은 꼴로 바꾸어 비교한다.

기술 조건: [단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백]

문제 생성:
- 한쪽은 가분수(분자 n > d), 다른 한쪽은 대분수(정수부 1~d-1 범위, 분자 1~d-1)로, 분모 d(3~9)가 같은 쌍. 크기가 같은 경우(=)도 일부 포함(예: 4분의 5 = 1과 4분의 1).
- 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 분모 위주 출제.

문제 표시:
- 가분수(분자/가로선/분모)와 대분수(정수부+분자/가로선/분모)를 나란히 크게 표시, 사이에 빈 비교 칸(84px).
- 상황 문장(예: "꼴이 달라요! 같은 꼴로 바꾸어 비교해보세요.").

풀이 UI (비교 기호 원샷 입력):
- [유형 3과 동일 — 기호 버튼 3개( > < = ) 원샷, 맞으면 초록+딩+완료, 틀리면 빨강+shake 후 재선택 가능(오답 시도 wrongAttempts 누적), 오답 2회 이상 시 힌트 제안, 음소거/음량 버튼]

힌트 모드:
- "힌트" 버튼: 변환 과정 시각화 — 대분수를 가분수로 바꾸는 단계(예: 1과 4분의 3 → 정수부 1 = 4분의 4, 4분의 4+4분의 3 = 4분의 7)를 막대 그림으로 보여주고, 바뀐 두 가분수의 분자를 비교. 가분수 쪽이 크면 그대로, 대분수를 바꾼 값이 크면 방향 결정.
- 힌트를 쓴 문제는 결과에서 "힌트 사용"으로 구분.

학습 기록: 문제별 기호 선택 시도, 힌트 사용 여부 기록.

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

결과 화면 — 오답 분석:
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수.
- 실수가 있으면 wrongAttempts를 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 변환 없이 형태만 보고 판단(대분수 정수부가 크다고만 봄 또는 가분수 분자가 크다고만 봄) → 이유: "꼴이 다른 두 수를 그대로 비교했어요" → 해결: "같은 꼴로 바꾸어 비교!" 변환 습관.
  - 부등호 방향 혼동(>와 < 혼동, 2회 이상) → 이유: "부등호 방향을 헷갈렸어요" → 해결: 큰 쪽에 입을 크게 벌리는 그림 기억.
  - = 잘못 선택 → 이유: "두 수가 같은지 확인하지 않았어요" → 해결: 대분수를 가분수로 바꾼 값과 비교.
  - 어느 것도 해당 없으면 → 이유: "순간적인 실수예요" → 해결: 바꾼 값을 소리 내어 읽고 비교.
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 분모 위주 5문제), 오답 문제 목록, 전부 바로 맞히면 축하 파티클 + "분수 단원 마스터! 다음 단원에도 도전해볼까?" 추천, "다시 연습" 버튼.

스타일: 밝고 부드러운 색감, 큼직한 84px 버튼, 여백 절제, 스마트폰 세로 반응형.

완료 기준: 기호 원샷 입력·즉시 채점·재선택 수정 동작, 변환 없이 비교한 실수 등 오답 분석과 맞춤 보충 연습 동작.

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 3학년 2학기 수학 가분수와 대분수 크기 비교 [4수01-12]
• 꼴 변환을 통한 혼합 분수 비교 전략 및 막대 시각화 지도법
• 초등 수학 분수 비교 오류 패턴 진단 알고리즘 설계

[초등 4-1 수학] 두 자리 수 ÷ 두 자리 수(나머지 있음) - 어림으로 몫 찾고 나머지 동적 칸 입력



가장 가까운 곱을 찾아서 빼요! — 두 자리 ÷ 두 자리(나머지 있음) 연습 웹앱

🎯 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 나머지가 있는 두 자리 수 ÷ 두 자리 수 나눗셈(예: 70 ÷ 13 = 5 ··· 5)을 세로식으로 직접 풀며, "나눔수 × 몫이 피제수에 가장 가까워지는 몫을 찾고 남은 수를 나머지로 적는" 정밀 어림 나눗셈을 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
나머지 자릿수 동적 칸 배치	나머지가 한 자리면 1칸, 두 자리면 십·일 2칸으로 자동 조정되어, 나머지 크기에 맞는 칸에 입력합니다.	몫 칸 1개 뒤에 ··· 점 표시와 함께 배치되어 "몫과 나머지는 서로 다른 값"임을 시각적으로 체감합니다.
최대 접근 과정 시각화 힌트	"13 × 5 = 65, 70 − 65 = 5! 몫은 5, 나머지는 5" — 나눔수×몫이 피제수를 넘지 않으면서 가장 가까워지는 과정이 단계별로 표시됩니다.	어림에서 몫을 1 크게 잡거나 1 작게 잡았을 때의 차이가 눈으로 보입니다.
나머지 범위 검증 & 검산 공식	나머지가 나눔수 이상이면 "나머지는 나눔수보다 작아야 해요!"가 즉각 처방되고, 검산식(나눔수×몫+나머지=피제수)으로 확인하는 습관을 형성합니다.	클릭 선택 + ⌫ 삭제, 모든 칸 채우면 진행(오답도), 첫 시도 기준 오답 분석 — 원형 규격 유지.

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

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

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

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

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

목적·대상: 초등학교 4학년 1학기 학생이 나머지가 있는 두 자리 ÷ 두 자리 나눗셈(예: 70 ÷ 13 = 5 ··· 5)을 세로식으로 풀어보는 인터랙티브 웹앱.

기술 조건: 유형 1과 동일.

문제 생성:
- 나눔수는 두 자리 수(11~49), 피제수는 두 자리 수(나눔수 × 몫 + 나머지, 몫 한 자리 2~9, 나머지 1~나눔수-1) — 나머지는 한 자리 또는 두 자리.
- 직전 반복 금지, generateProblem() 분리.

풀이 UI (세로식 나눗셈):
- 몫 칸 1개 + 나머지 칸(몫 오른쪽 옆 ··· 표시). 나머지가 두 자리면 십·일 두 칸, 한 자리면 한 칸(동적).
- 입력 순서: 몫 → 나머지(십의 자리부터).
- 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록.

힌트 모드: "13 × 5 = 65, 70 − 65 = 5! 몫은 5, 나머지는 5" — 나눔수×몫이 피제수에 가장 가까워지는 과정 시각화.

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

진행/결과 화면: 유형 9와 동일 프레임워크. 오답 분석 특화: ① 나머지가 나눔수보다 큰 착각 → "나머지는 나눔수보다 작아야 해요!" ② 나머지 0 착각 ③ 몫 착각 → 검산(나눔수×몫+나머지=피제수). 추천 문구: "다음 단계: 세 자리 수 ÷ 두 자리 수 도전!".

스타일: 유형 1과 동일.

완료 기준: 나머지 동적 칸 입력·나머지 범위 검증 진단·클릭 선택/삭제·보충 연습 동작.

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 4학년 1학기 수학 두 자리 수로 나누기(나머지 있음) [4수01-09]
• 피제수 최대 접근 어림 전략과 나머지 범위 규칙 시각화
• 초등 수학 몫-나머지 연동 오류 진단 알고리즘 설계

[초등 4-1 수학] 세 자리 수 ÷ 두 자리 수(몫이 두 자리) - 왼쪽부터 차례로 나누는 두 단계 계산



몫이 두 자리! 왼쪽부터 차례로 나눠요 — 세 자리 ÷ 두 자리(몫 두 자리) 연습 웹앱

🧭 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 몫이 두 자리 수인 세 자리 수 ÷ 두 자리 수 나눗셈(예: 288 ÷ 24 = 12)을 세로식으로 직접 풀며, "앞 두 자리로 첫 몫을 어림하고, 남은 수에 다음 자리를 내려 두 번째 몫을 찾는" 왼쪽부터의 단계별 나눗셈을 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
몫 칸 2개의 자릿값 수직 정렬	몫의 십의 자리 칸은 피제수 십의 자리 열 위에, 몫의 일의 자리 칸은 피제수 일의 자리 열 위에 정확히 정렬되어 나눗셈의 왼쪽부터 계산 흐름이 눈에 보입니다.	"나눗셈은 왼쪽부터!"라는 계산 순서 원칙이 칸 위치 자체로 체화됩니다.
첫 몫 어림 & 두 번째 몫 내림 진단	앞 두 자리로 어림하는 첫 몫 착각과, 내림 후 두 번째 몫을 ±1로 착각하는 오류를 각각 정밀 진단합니다.	"남은 수를 다시 세는" 두 번째 단계의 실수가 별도 처방으로 나옵니다.
나눗셈 단원 마스터 축하 연출	세 자리 ÷ 두 자리(몫 두 자리)는 초등 4학년 나눗셈의 마지막 관문 — 만점 시 "나눗셈 단원 완성!" 축하 파티클이 울려 퍼집니다.	클릭 선택 + ⌫ 삭제, 모든 칸 채우면 진행(오답도), 첫 시도 기준 오답 분석 — 원형 규격 유지.

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

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

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

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

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

목적·대상: 초등학교 4학년 1학기 학생이 몫이 두 자리 수인 세 자리 ÷ 두 자리 나눗셈(예: 288 ÷ 24 = 12)을 세로식으로 풀며 왼쪽부터 차례로 나누는 과정을 익히는 인터랙티브 웹앱.

기술 조건: 유형 1과 동일.

문제 생성:
- 나눔수는 두 자리 수(11~49), 피제수는 세 자리 수(나눔수 × 몫, 몫은 두 자리 10~99) — 나머지 없음.
- 예: 288÷24=12, 455÷13=35, 672÷21=32.
- 직전 반복 금지, generateProblem() 분리.

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

힌트 모드: 단계별 내림 과정 — "28 ÷ 24 = 1, 28 − 24 = 4. 8을 내려 48! 48 ÷ 24 = 2 → 몫 12" 각 단계 시각화.

학습 기록: 몫 자릿수별 구분 기록.

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

결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 첫 몫(십의 자리) 착각 → "앞 두 자리로 어림하고 나눔수×몫을 비교해요" ② 두 번째 몫(일의 자리) 착각(내림 후 몫 ±1) → 남은 수 다시 세기 ③ 몫을 한 자리로 착각 ④ 나눔수 취약 → 해당 나눔수 몫 연습 ⑤ 순간 실수 → 검산(나눔수×몫=피제수).
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 파티클 + "세 자리 ÷ 두 자리 마스터! 나눗셈 단원 완성 🎉" 추천.

스타일: 유형 1과 동일.

완료 기준: 몫 두 자리 생성·몫칸 2개(십→일) 입력·왼쪽부터 계산 순서·클릭 선택/삭제·오답 분석·보충 연습 동작.

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 4학년 1학기 수학 세 자리 수로 나누기(몫 두 자리) [4수01-09]
• 왼쪽부터 단계별 나눗셈 흐름과 몫 자릿값 수직 정렬 시각화
• 초등 수학 두 자리 몫 나눗셈 오류 진단 알고리즘 설계

[초등 4-1 수학] 세 자리 수 ÷ 두 자리 수(나머지 있음) - 세 자리 피제수 나머지 판정



남은 수를 정확히 골라내요! — 세 자리 ÷ 두 자리(나머지 있음) 연습 웹앱

🎯 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 나머지가 있는 세 자리 수 ÷ 두 자리 수 나눗셈(예: 170 ÷ 26 = 6 ··· 14)을 세로식으로 직접 풀며, "나눔수 × 몫이 피제수에 가장 가까워지도록 몫을 어림하고, 남은 수가 나눔수보다 작은지 확인해 나머지로 적는" 정밀 나눗셈 판단력을 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
나머지 자릿수 동적 칸 배치	나머지가 한 자리(1~9)면 1칸, 두 자리(10~48)면 십·일 2칸으로 자동 조정되어 나머지 크기에 맞는 칸에 입력합니다.	몫 칸 뒤 ··· 점 표시로 몫과 나머지가 서로 다른 값임을 시각적으로 구분합니다.
나머지 범위 검증 & 몫 연동 오류 진단	몫이 ±1 어긋나면 나머지가 나눔수 이상이 되어 버리는 연동 오류를 즉시 잡아내고, "나눔수×몫+나머지=피제수" 검산으로 확인합니다.	나머지 0 착각(나머지를 0으로 입력)도 별도 진단하여 "남은 수가 있어요!" 처방이 나옵니다.
최대 접근 어림 과정 시각화	"26 × 6 = 156, 170 − 156 = 14! 몫은 6, 나머지는 14" — 나눔수×몫이 피제수를 넘지 않으면서 가장 가까워지는 과정이 단계별로 표시됩니다.	클릭 선택 + ⌫ 삭제, 모든 칸 채우면 진행(오답도), 첫 시도 기준 오답 분석 — 원형 규격 유지.

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

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

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

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

[유형 12] 세 자리 수 ÷ 두 자리 수(나머지 있음, 몫이 한 자리) 연습 웹앱을 만들어줘.

목적·대상: 초등학교 4학년 1학기 학생이 나머지가 있는 세 자리 ÷ 두 자리 나눗셈(예: 170 ÷ 26 = 6 ··· 14)을 세로식으로 풀어보는 인터랙티브 웹앱.

기술 조건: 유형 1과 동일.

문제 생성:
- 나눔수는 두 자리 수(11~49), 피제수는 세 자리 수(나눔수 × 몫 + 나머지, 몫 한 자리 2~9, 나머지 1~나눔수-1, 나머지는 한 자리 또는 두 자리).
- 직전 반복 금지, generateProblem() 분리.

풀이 UI (세로식 나눗셈):
- 몫 칸 1개 + 나머지 칸(몫 오른쪽 옆 ··· 표시, 나머지 자릿수에 맞춰 1~2칸 동적).
- 입력 순서: 몫 → 나머지(십의 자리부터).
- 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록.

힌트 모드: "26 × 6 = 156, 170 − 156 = 14! 몫은 6, 나머지는 14" — 나눔수×몫 최대 접근 과정 시각화.

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

진행/결과 화면: 유형 10과 동일 프레임워크(나머지 범위 진단, 검산 강조), 추천 문구 "다음 단계: 세 자리 수 ÷ 두 자리 수(몫이 두 자리) 도전!".

스타일: 유형 1과 동일.

완료 기준: 나머지 동적 칸 입력·나머지 범위 검증 진단·클릭 선택/삭제·보충 연습 동작.

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 4학년 1학기 수학 세 자리 수로 나누기(나머지 있음) [4수01-09]
• 세 자리 피제수의 최대 접근 어림 전략과 나머지 범위 규칙 시각화
• 초등 수학 몫-나머지 연동 오류 진단 알고리즘 설계

[초등 4-1 수학] 세 자리 수 ÷ 두 자리 수(나머지 없음) - 세 자리 피제수 어림 나눗셈



세 자리를 두 자리로 나눠요! — 세 자리 ÷ 두 자리(나머지 없음) 연습 웹앱

📐 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 세 자리 수 ÷ 두 자리 수 나눗셈(예: 156 ÷ 52 = 3)을 세로식으로 직접 풀며, 앞 두 자리를 어림해 몫을 찾고 나눔수 단 구구로 검증하는 세 자리 피제수 나눗셈의 첫 단계를 익히는 인터랙티브 웹앱입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
몫이 한 자리인 세 자리 피제수 설계	피제수의 앞 두 자리가 나눔수보다 작아 몫이 반드시 한 자리가 되도록 설계되어, 세 자리 나눗셈의 진입 단계로 부담이 적습니다.	나눔수(두 자리) 단의 곱셈구구에서 세 자리 피제수를 찾는 전략에 집중합니다.
어림 실수 & 역할 혼동 진단	몫을 ±1로 착각하는 어림 실수, 나눔수를 몫에 입력하는 혼동, 세 자리 피제수를 그대로 쓰는 오류를 각각 정밀 진단합니다.	"나눔수 × 몫 = 피제수" 검산 습관이 모든 처방의 마무리로 제시됩니다.
몫 칸 1개의 집중 몰입 UI	몫이 한 자리이므로 입력 칸이 단 하나 — 세 자리 피제수(백/십/일 열)의 자릿값 정렬에 온전히 집중하는 심플한 UI입니다.	클릭 선택 + ⌫ 삭제, 모든 칸 채우면 진행(오답도), 첫 시도 기준 오답 분석 — 원형 규격 유지.

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

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

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

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

[유형 11] 세 자리 수 ÷ 두 자리 수(나머지 없음, 몫이 한 자리) 연습 웹앱을 만들어줘.

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

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

문제 생성:
- 나눔수는 두 자리 수(11~99), 피제수는 세 자리 수(나눔수×몫, 몫은 한 자리 2~9) — 나머지 없음. 피제수의 앞 두 자리가 나눔수보다 작아 몫이 한 자리가 되는 조합.
- 예: 156÷52=3, 264÷88=3, 315÷63=5.
- 직전 반복 금지, generateProblem() 분리.

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

힌트 모드: "52 × 3 = 156! 나눔수 단의 곱셈구구에서 피제수를 찾아요" — 몫 후보 나열 강조.

학습 기록/진행: 유형 9와 동일.

결과 화면 — 오답 분석: 유형 9와 동일 프레임워크(몫±1 어림 실수, 나눔수 입력 착각, 순간 실수 → 검산), 추천 문구 "다음 단계: 세 자리 수 ÷ 두 자리 수(나머지 있음) 도전!".

스타일: 유형 1과 동일.

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

📚 기술·교육 참고 링크

• 2022 개정 교육과정 초등 4학년 1학기 수학 세 자리 수로 나누기 [4수01-09]
• 세 자리 피제수의 앞 자릿수 어림 전략 시각화 모델
• 초등 수학 나눗셈 진입 단계 오류 진단 알고리즘 설계