풀고 즉시 곱셈으로 확인한다! — 곱셈으로 검산하며 몫 구하기 연습 웹앱
🔍 2022 개정 교육과정 초등학교 3학년 1학기 수학 연산 (나눗셈) — 나눗셈 문제를 풀 때 아이들이 가장 소홀히 하기 쉬운 '검산(Verification)' 과정을 인터랙티브 코드로 시각화합니다. 몫을 네모 칸에 입력하는 즉시 아래쪽에 "검산: (몫) × (나누는 수) = (나누어지는 수)" 검산식이 실시간으로 펼쳐지며 자연스럽게 검산 습관을 형성하는 완성형 교구입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 입력 즉시 실시간 검산식 자동 연출 | 몫을 입력하자마자 세로식 아래쪽에 초록색 검산 박스가 나타나며 "(몫) 3 × (나누는 수) 4 = 12 (전체) 일치해요! ✔"를 눈으로 직접 증명합니다. | 오답을 썼을 때도 "2 × 4 = 8 ≠ 12 ❌ 맞지 않아요!"라고 즉시 보여주어 왜 틀렸는지 스스로 깨닫게 합니다. |
| 곱셈구구 순차 하이라이트 힌트 | 힌트를 누르면 나누는 수 단의 곱셈구구가 1줄씩 부드럽게 펼쳐지며 피제수가 나오는 줄(예: 4×3=12)이 황금색으로 반짝입니다. | 머릿속으로 구구단을 외우며 몫을 탐색하는 수학적 사고 과정을 시각적으로 비계 설정(Scaffolding)합니다. |
| 검산 습관 형성 오답 분석 | 단순히 '틀렸다'가 아니라 "답을 적은 후 '몫 × 나누는 수'를 해보는 습관을 길러요!"처럼 검산 중심의 따뜻한 피드백을 제공합니다. | 풀이 후 '맞춤 보충 연습' 버튼을 통해 검산 검증 단계를 5문제 집중 훈련할 수 있습니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 문항 수나 화면 색상 톤에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
나눗셈검산.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 나눗셈 > 나눗셈과 곱셈의 관계 바이브 코딩 프롬프트
[유형 3] 나눗셈과 곱셈의 관계 — 곱셈으로 검산하며 몫 구하기 연습 웹앱을 만들어줘.
목적·대상:
초등학교 3학년 1학기 학생이 나눗셈식(예: 12 ÷ 4)을 보고 머릿속으로 곱셈(4 × □ = 12)을 떠올려 몫을 구하고, 입력 즉시 곱셈 검산(몫 × 나눔수 = 피제수) 과정을 눈으로 확인하여 검산하는 습관을 들이는 인터랙티브 웹앱.
기술 조건:
- HTML+CSS+JavaScript 단일 index.html 파일.
- CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 합성. 오프라인 폴백 처리.
문제 생성:
- 나눔수 b(2~9), 몫 q(2~9), 피제수 T = b × q (4~81) 생성 — 나머지 없음.
- 나눗셈식만 단독으로 제시되고, 풀이 후에 검산식이 나타나는 구조.
- 직전 문제 반복 금지, generateProblem() 함수 분리.
풀이 UI:
- 상단: "12 ÷ 4 = ?" 가로식 표시.
- 중앙: CSS Grid 4열 정렬 세로식 나눗셈 (몫 네모 칸은 피제수 일의 자리 열 위에 정확히 수직 정렬).
- 원샷 입력: 몫 입력 즉시 1차 채점.
- **검산식 자동 연출 (특화 기능)**:
* 몫을 입력하는 즉시 세로식 아래쪽에 검산 애니메이션 박스 등장:
정답 시: "검산: (몫) 3 × (나누는 수) 4 = 12 (나누어지는 수) ✔ 일치해요!" 초록 강조 후 confetti+사운드.
오답 시: "검산: (입력한 수) 2 × 4 = 8 ≠ 12 ❌ 맞지 않아요!" 빨간 표시 후 오답 처리.
- 2칸 이상 오답 시 힌트 제안, 음소거/음량 버튼.
힌트 모드:
- "힌트" 버튼: "4 × 몇 = 12일까?" 나눔수 단의 곱셈구구를 1줄씩 순차 애니메이션으로 표시하며 12가 나오는 줄(4×3=12)을 황금색으로 하이라이트.
학습 기록 및 진행:
- 문제별 기록, 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 지표 카드.
- 분석 진단:
* 곱셈 검산 불일치 오류(입력값 × 나눔수 ≠ 피제수): "답을 적고 나서 '몫 × 나누는 수 = 전체'가 되는지 곱셈으로 확인해보는 습관을 길러요!" 처방.
* 몫 ±1 착각: 곱셈구구 인접 단 착각 진단.
* 나눔수나 피제수를 그대로 적은 자릿값 혼동 진단.
- 맞춤 보충 연습(5문제), 오답 다시 보기(곱셈구구 하이라이트 힌트 재생), 만점 축하 연출.
스타일:
- 밝은 테마, 큼직한 84px 네모 칸, 4열 정렬, 여백 절제, 모바일 반응형.
완료 기준:
- 나눗셈 단독 제시 후 몫 입력 시 실시간 곱셈 검산식 연출; 4열 Grid 일의 자리 수직 정렬; 검산 누락 특화 진단 및 보충 연습 동작.
📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 1학기 수학 나눗셈 검산 지도 요령
- CSS 애니메이션을 활용한 단계별 검산식 박스 슬라이드 연출
- 초등 수학 연산 자기조절 학습(Self-regulation)과 검산 전략