곱셈식을 알면 나눗셈이 술술! — 곱셈과 나눗셈의 역연산 관계 정복 웹앱
✖️➗ 2022 개정 교육과정 초등학교 3학년 1학기 수학 연산 (나눗셈) — 아이들이 이미 완벽하게 익힌 곱셈구구(예: 3 × 4 = 12)를 직관적인 단서 카드로 제시하고, 나눗셈(12 ÷ 4 = 3 또는 12 ÷ 3 = 4)과의 상호 역연산 관계를 세로식과 화살표 애니메이션으로 체감하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 곱셈식 단서 카드 상단 제시 | 나눗셈 세로식 바로 위에 "3 × 4 = 12" 곱셈식을 선명하게 띄워주어, 나눗셈이 완전히 새로운 계산이 아니라 곱셈의 짝꿍 찾기임을 한눈에 보여줍니다. | 곱셈의 두 인수가 나눗셈의 나누는 수와 몫으로 교환되는 규칙을 시각적으로 탐구하게 하세요. |
| 곱셈-나눗셈 화살표 연결 힌트 | 힌트 버튼을 누르면 상단 곱셈식의 숫자들과 하단 나눗셈 세로식의 숫자들을 이어주는 동적 화살표 애니메이션이 재생됩니다. | "4 × [ 3 ] = 12 이므로 빈칸의 3이 바로 몫이 돼요!"라는 인과관계를 체화합니다. |
| 나누는 수와 몫 혼동 정밀 진단 | 12 ÷ 4의 답자리에 실수로 나누는 수인 4를 적거나 전체 개수 12를 그대로 쓰는 초등 특유의 오개념을 정확히 짚어내 처방합니다. | 풀이 후 '맞춤 보충 연습' 버튼으로 취약했던 곱셈-나눗셈 짝꿍 문제를 5개 집중 복습하세요. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 문제 수(5/10/20) 및 글자 크기 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
곱셈나눗셈관계.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 나눗셈 > 곱셈과 나눗셈의 관계 바이브 코딩 프롬프트
[유형 2] 곱셈과 나눗셈의 관계 — 곱셈식으로 나눗셈 풀기 연습 웹앱을 만들어줘.
목적·대상:
초등학교 3학년 1학기 학생이 이미 알고 있는 곱셈식(예: 3 × 4 = 12)을 단서로 하여 관련된 나눗셈(12 ÷ 4 = 3 또는 12 ÷ 3 = 4)을 세로식으로 풀어보며 곱셈과 나눗셈의 상호 역연산 관계를 익히는 인터랙티브 웹앱.
기술 조건:
- HTML+CSS+JavaScript 단일 index.html 파일.
- CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 직접 합성. CDN 미연결 시 오프라인 폴백 처리.
문제 생성:
- 두 한 자리 수 a(2~9)와 b(2~9)를 무작위 선택하여 곱 T = a × b (4~81) 생성.
- 상단 곱셈식 카드에 "a × b = T"를 제시하고, 하단 나눗셈식은 T ÷ b(몫 a) 또는 T ÷ a(몫 b) 중 무작위 출제.
- 직전 문제 반복 금지, generateProblem() 함수 완전 분리.
풀이 UI:
- 상단 곱셈식 힌트 카드: "3 × 4 = 12"를 크고 선명한 카드로 표시.
- 하단 세로식 나눗셈 (CSS Grid 4열 정렬):
* 1열(나누는 수, 44px) / 2열(')', 24px) / 3열(피제수 십의 자리, 84px) / 4열(피제수 일의 자리, 84px).
* 몫 네모 칸(84px, 초록 테두리)은 피제수 **일의 자리 열(4열) 바로 위에 정확히 수직 정렬**.
- 원샷 입력: 몫을 1회 입력 시 즉시 채점 (재입력 불가).
* 정답: 초록 채움 + "딩" + confetti + 아르페지오 + 자동 이동.
* 오답: 빨간 채움 + shake + 낮은 톤(오답 숫자 유지) 후 이동.
- 연속 2문제 이상 오답 시 힌트 버튼 깜빡임. 음소거/음량 조절 제공.
힌트 모드:
- "힌트" 버튼: 상단 곱셈식의 숫자들과 하단 나눗셈식의 숫자들을 연결하는 화살표 이동 애니메이션 재생.
* "4 × [ ] = 12 이므로, 빈칸에 들어갈 수는 3이에요! 곱셈식의 앞 숫자가 바로 나눗셈의 몫이 돼요." 시각화.
- 힌트 사용 문제는 결과에서 별도 기록.
학습 기록 및 진행:
- 입력값, 정오, 힌트 기록. 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드: 맞힌/틀린/힌트/정답률.
- 분석 진단:
* 전체 개수를 몫에 입력한 오류: "곱셈의 결과(전체)를 나눗셈 몫에 그대로 썼어요. 나눗셈의 답은 곱하는 두 수 중 하나예요!"
* 나누는 수와 몫 자리 바꿈(예: 12÷4의 답에 4를 입력): "나누는 수와 몫을 헷갈렸어요. 곱셈식의 다른 쪽 짝꿍 숫자를 찾아야 해요."
* 곱셈식 결과 착각 / 단순 계산 착각 진단.
- 맞춤 보충 연습(5문제), 오답 문제 목록(대응 화살표 애니메이션 다시 보기), 만점 시 축하 연출 + 다음 유형 추천.
스타일:
- 밝은 테마, 큼직한 UI(몫 54px), 여백 축소 레이아웃, 모바일 반응형.
완료 기준:
- 곱셈식 단서 제시 및 세로식 4열 정렬 나눗셈 구현; 몫 원샷 입력; 곱셈-나눗셈 연결 화살표 힌트; 대응 관계 오개념 특화 진단 및 보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 1학기 수학 곱셈과 나눗셈의 관계 [4수01-08]
- CSS Grid를 활용한 수직 정렬 나눗셈 세로식 인터페이스
- 초등 수학 연산 역연산(Inverse Operation) 개념 지도 가이드
