네 자리 숫자를 부분곱으로 정복! — 네 자리 수 × 두 자리 수 곱셈 연습 웹앱
📐 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 네 자리 수 × 두 자리 수 곱셈(예: 2345 × 23 = 53935)을 6열 [십만|만|천|백|십|일] 두 단계 부분곱 세로식으로 직접 풀며, 두 자리 승수의 자릿수별 곱셈과 한 자리 당김, 최종 합산의 전 과정을 완성하는 인터랙티브 웹앱입니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 6열 확장 — 십만의 자리 도전 | 곱이 6자리(십만의 자리)까지 확장되므로 1차 부분곱(천의 자리까지)과 2차 부분곱(만의 자리까지)의 스케일이 커지는 자릿값 폭발을 직접 경험합니다. | 네 자리 피승수의 모든 자릿수를 승수의 일·십의 자리로 각각 곱하는 완전한 곱셈 알고리즘을 체득합니다. |
| 부분곱 행 색상 구분 | 1차 부분곱 행(흰 배경)과 2차 부분곱 행(밝은 배경)의 색을 다르게 하여 "이 행은 십의 자리로 곱한 값 — 한 칸 당겨 적기!"를 시각적으로 강조합니다. | 당김 실수와 합산 실수를 별도 진단하여 각각 맞춤 처방이 나옵니다. |
| 클릭 선택 & ⌫ 수정 흐름 | 9개 이상의 입력 칸(부분곱 2행 + 최종 곱 행)을 클릭 선택으로 이동하며 수정할 수 있어, 복잡한 다단계 계산의 오류 수정 스트레스가 없습니다. | 모든 칸을 채우면 오답이 있어도 다음 문제로 진행하며, 첫 시도 기준 단계별 정밀 오답 분석이 나옵니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
네자리두자리곱셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 네 자리 수 × 두 자리 수 바이브 코딩 프롬프트
[유형 4] 네 자리 수 × 두 자리 수 곱셈 연습 웹앱을 만들어줘.
목적·대상: 초등학교 4학년 1학기 학생이 네 자리 수 × 두 자리 수 곱셈(예: 2345 × 23 = 53935)을 두 단계 부분곱 세로식으로 풀어보는 인터랙티브 웹앱.
기술 조건: 단일 index.html, canvas-confetti + Jua CDN, Web Audio API, 폴백.
문제 생성:
- 피승수는 네 자리 수(1000~9999), 승수는 두 자리 수(11~99).
- 곱이 십만의 자리까지(999,999 이하)가 되도록만 생성.
- 직전 반복 금지, generateProblem() 분리.
풀이 UI (두 단계 부분곱 세로식, CSS Grid 6열 [십만|만|천|백|십|일] 각 84px):
- 1행 피승수(천/백/십/일 열), 2행 승수(십/일 열), 3행 가로선.
- 4행 1차 부분곱(승수 일의 자리 × 피승수): 일→천 순서 입력.
- 5행 2차 부분곱(승수 십의 자리 × 피승수, 한 자리씩 당겨 적기): 십→만 순서 입력.
- 6행 가로선, 7행 최종 곱: 일→십만 순서 입력.
- 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록 — 유형 3과 동일 규격.
힌트 모드: 유형 3과 동일 단계 구성(네 자리 수 확장).
학습 기록/진행/결과 화면: 유형 3과 동일 프레임워크, 추천 문구만 "다음 단계: 세 수의 곱셈 도전!".
스타일: 유형 1과 동일.
완료 기준: 네 자리 피승수 부분곱 흐름 동작, 6열 정렬, 오답 분석·보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 4학년 1학기 수학 네 자리 수 곱셈 [4수01-08]
- 십만 단위 부분곱 확장과 자릿값 스케일 이동 시각화
- 초등 수학 다단계 곱셈 행 구분 진단 알고리즘 설계
