십의 자리끼리 곱하고 0을 두 개 붙인다! — 몇십 × 몇십 곱셈 웹앱
🔟 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (곱셈) — 몇십 × 몇십 곱셈(예: 30 × 50 = 1500)을 세로식으로 직접 풀어보며 "십의 자리끼리 곱한 뒤 0을 두 개 붙인다(=100을 곱한다)"는 원리를 체화하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| "0 두 개 붙이기" 원리 체감 | 십의 자리끼리 곱셈구구를 한 뒤 뒤에 0을 두 개 붙이면(=100을 곱하면) 답이 되는 규칙을 직접 자릿수 칸에 0을 입력하며 체감합니다. | 일의 자리 0과 십의 자리 0을 학생이 직접 입력하게 하여 단순히 외우는 것이 아니라 자릿값 구조를 이해합니다. |
| 곱이 세 자리 또는 네 자리 (동적 전환) | 십의 자리 곱이 9 이하면 세 자리(예: 20×30=600), 10 이상이면 네 자리(예: 30×50=1500)가 되어 천의 자리 칸이 동적으로 활성화됩니다. | 천의 자리 놓침 오류를 자동 감지하여 "앞자리를 천의 자리로 옮겨 적는" 연습을 제공합니다. |
| "0 두 개 누락" 특화 진단 | 몇십끼리 곱한 뒤 뒤에 0을 두 개 붙이는 것을 잊고 엉뚱한 값을 입력하는 가장 흔한 오류를 정확히 감지합니다. | "십의 자리끼리 곱하고 0 두 개 붙이기" 규칙을 아이 눈높이 문장으로 처방합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
몇십곱셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 곱셈 > 몇십 × 몇십 바이브 코딩 프롬프트
[유형 3] 몇십 × 몇십 곱셈 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 몇십 × 몇십 곱셈(예: 30 × 50 = 1500)을 세로식으로 직접 풀어보며 "십의 자리끼리 곱한 뒤 0을 두 개 붙인다(=100을 곱한다)"는 원리를 익히는 인터랙티브 웹앱.
기술 조건: [유형 1과 동일 — 단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백, 상황 카드, 음소거/음량 버튼]
문제 생성:
- 두 수 모두 몇십(10~90, 일의 자리 0): 피승수 몇십(십의 자리 1~9), 승수 몇십(십의 자리 1~9).
- 곱은 (십의 자리 곱) × 100 이므로 세 자리(예: 20×30=600) 또는 네 자리(예: 30×50=1500, 90×90=8100) 수.
- 십의 자리 곱이 10 이상이면 네 자리(천의 자리 칸 활성), 9 이하면 세 자리(천의 자리 칸 비어 있음).
- 직전 문제 반복 금지. generateProblem() 함수 하나로 분리.
풀이 UI:
- CSS Grid 4열 자릿수 표준 정렬(천/백/십/일 각 84px).
- 1행 피승수 몇십: 3열 십의 자리(초록), 4열 일의 자리 0(빨강). 2행 승수 몇십: 2열에 × 기호, 3열에 승수 십의 자리, 4열에 0(피승수와 일의 자리 기준 수직 정렬). 3행 가로선(1열~4열). 4행 답안 칸.
- 학습자가 오른쪽부터 입력: 일의 자리(항상 0) → 십의 자리(항상 0) → 백의 자리(십의 자리 곱의 뒷자리) → 천의 자리(십의 자리 곱이 두 자리일 때만, 앞자리).
- 원샷 입력, 칸별 반응, 문제 완료 반응, 2칸 이상 오답 시 힌트 제안: [유형 1과 동일].
힌트 모드:
- "십의 자리끼리 곱하기" 원리 단계 설명 + 해당 자릿수 열 플래시. (예: 30×50 → 십의 자리끼리: 3×5=15! 그리고 0을 두 개 붙이면 1500! 백의 자리에 5, 천의 자리에 1)
- 힌트 사용 문제는 결과에서 구분.
학습 기록: [유형 1과 동일]
진행: [유형 1과 동일]
결과 화면 — 오답 분석:
- 요약 카드: [유형 1과 동일]
- 오답 분석 (유형 3 특화):
- 0 두 개 누락(일의 자리 또는 십의 자리에 0이 아닌 값 입력) → 이유: "몇십끼리 곱하면 뒤에 0이 두 개 붙는다는 걸 잊었어요" → 해결: "십의 자리끼리 곱하고 0 두 개 붙이기" 규칙 기억하기.
- 천의 자리 놓침(십의 자리 곱이 두 자리(예: 15)일 때 앞자리를 천의 자리로 옮겨 적지 못함) → 이유: "15를 1500으로 만드는 과정이 헷갈렸어요" → 해결: 십의 자리 곱을 먼저 구하고 ×100 연습.
- 십의 자리 곱 구구 실수(3×5 등) 2회 이상 → 이유: "십의 자리끼리의 곱셈구구에서 실수했어요" → 해결: 구구 다시 외우기.
- 몇십을 한 자리로 착각(0을 무시해 십의 자리에 엉뚱한 값) → 이유: "몇십의 0을 놓쳤어요" → 해결: 십의 자리 숫자만 곱한다는 점 강조.
- 맞춤 보충 연습(5문제), 다시 볼 문제들(십의 자리 곱 과정 다시 보기), 전부 정답 시 축하 + "다음 단계: 두 자리 수 × 몇십 도전!" 추천.
스타일: [유형 1과 동일]
완료 기준: 몇십×몇십 문제 생성(곱 세 자리/네 자리 모두), 일·십의 자리 0 고정 입력, 천의 자리 칸 동적 활성화, "0 두 개" 진단, 원샷 입력·힌트·오답 분석·보충 연습 동작.
📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 곱셈(몇십 × 몇십) 단원 [4수01-06]
- 10의 거듭제곱을 곱하는 자릿값 이해 및 0 붙이기 전략 지도법