10을 넘으면 다음 자리로 올려보내요! — 세 자리 × 한 자리 곱셈(받아올림) 웹앱
⛰️ 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (곱셈) — 받아올림이 있는 세 자리 수 × 한 자리 수 곱셈(예: 456 × 7 = 3192)을 세로식으로 직접 풀어보며 "자릿수별로 곱하고 10을 넘는 만큼 다음 자리로 올려보내는" 받아올림 원리를 체화하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 곱이 세 자리 또는 네 자리 (동적 전환) | 받아올림이 1~3회 발생하는 문제를 출제하며, 곱이 세 자리면 천의 자리 칸을 비워두고 네 자리면 천의 자리 칸을 동적으로 활성화합니다. | 백의 자리 곱에 올림수를 더한 값이 10 이상이 되면 곱이 네 자리가 되는 것을 학생이 직접 체감합니다. |
| 받아올림 누락 정밀 진단 | 자릿수 곱이 10 이상일 때 올림수를 다음 자리에 더하는 것을 잊는(예: 5×7=35에서 3을 안 더하는) 오류를 정확히 감지합니다. | 받아올림 수를 가로선 위 작은 칸에 자동 표시하여 눈으로 확인하며 계산하는 습관을 만듭니다. |
| 천의 자리 놓침 특화 진단 | 백의 자리 곱이 두 자리 수(예: 31)일 때 앞자리 3을 천의 자리로 옮겨 적는 과정이 헷갈리는 것을 진단합니다. | 백의 자리에서 나온 두 자리 수를 "뒷자리는 백에, 앞자리는 천에" 나눠 적는 연습을 반복합니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세자리올림곱셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 곱셈 > 세 자리 수 × 한 자리 수 (올림 있음) 바이브 코딩 프롬프트
[유형 2] 세 자리 수 × 한 자리 수(올림 있음) 곱셈 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 받아올림이 있는 세 자리 수 × 한 자리 수 곱셈(예: 456 × 7 = 3192)을 세로식으로 직접 풀어보며 "자릿수별로 곱하고 10을 넘는 만큼 다음 자리로 올려보내는" 받아올림 원리를 익히는 인터랙티브 웹앱.
기술 조건: [유형 1과 동일 — 단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백, 상황 카드(묶음 배지), 음소거/음량 버튼]
문제 생성:
- 피승수는 세 자리 수(100~999), 승수는 한 자리 수(2~9).
- 받아올림 있음 제약: 최소 1곳, 최대 3곳에서 자릿수 곱이 10 이상이 되도록 생성. 곱은 세 자리(예: 145×2=290) 또는 네 자리(예: 456×7=3192) 수.
- 직전 문제 반복 금지. generateProblem() 함수 하나로 분리.
풀이 UI:
- CSS Grid 4열 자릿수 표준 정렬(천/백/십/일 각 84px), 피승수는 2열 백(파랑)·3열 십(초록)·4열 일(빨강), 2행의 × 기호는 3열, 승수는 4열(피승수 일의 자리 바로 아래 수직 일치), 3행 가로선(1열~4열).
- 답안 칸: 일의 자리 → 십의 자리 → 백의 자리 순서로 입력. 곱이 네 자리 수면 천의 자리 칸(1열)도 활성화되어 마지막에 입력하고, 세 자리 수면 천의 자리 칸은 비어 있는 칸으로 표시.
- 원샷 입력(정답/오답 관계없이 한 번 입력하면 즉시 다음 칸 이동, 재입력 불가), 오답 칸은 빨간 배경 유지, 모든 칸 정답일 때만 파티클+축하 사운드, 2칸 이상 오답 시 힌트 제안. [유형 1과 동일]
힌트 모드:
- 받아올림 과정을 자릿수별로 단계 설명 + 해당 자릿수 열 플래시. (예: 456×7 → 일의 자리: 6×7=42 → 2를 쓰고 4를 올려요! 십의 자리: 5×7=35, 35+4=39 → 9를 쓰고 3을 올려요! 백의 자리: 4×7=28, 28+3=31 → 31을 적어요! → 3192)
- 받아올림 수는 가로선 위 작은 칸에 자동 표시해 눈으로 확인하게 함.
학습 기록: [유형 1과 동일]
진행: [유형 1과 동일]
결과 화면 — 오답 분석:
- 요약 카드: [유형 1과 동일]
- 오답 분석 (유형 2 특화):
- 받아올림 누락(입력값이 받아올림을 더하기 전의 자릿수 곱과 일치) → 이유: "10을 넘은 만큼을 다음 자리에 더하는 걸 잊었어요" → 해결: 받아올림 수를 윗칸에 적어두고 더하는 연습.
- 받아올림 오판(입력값이 정답±1) → 이유: "올려보내는 수를 잘못 봤어요" → 해결: 윗칸 받아올림 수 확인 습관.
- 천의 자리 놓침(네 자리 곱에서 천의 자리 오답) → 이유: "백의 자리 곱이 두 자리 수(예: 31)일 때 앞자리를 천의 자리로 옮겨 적는 게 헷갈렸어요" → 해결: 앞자리를 천의 자리로 옮겨 적는 연습.
- 구구단 자릿수 실수 2회 이상 / 자릿수 어긋남 / 일회성 실수 → [유형 1과 동일 처방].
- 맞춤 보충 연습(5문제), 다시 볼 문제들(받아올림 과정 다시 보기), 전부 정답 시 축하 + "다음 단계: 몇십 × 몇십 도전!" 추천.
스타일: [유형 1과 동일]
완료 기준: 받아올림 1~3회 문제 생성(곱 세 자리/네 자리 모두), 네 자리 곱일 때 천의 자리 칸 동적 활성화, 받아올림 누락·오판 진단, 원샷 입력·힌트·오답 분석·보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 곱셈(세 자리 수 × 한 자리 수, 받아올림) 단원 [4수01-05]
- 세 자리 수 × 한 자리 수 곱셈 받아올림 과정의 단계별 시각화 지도법
