하나씩 묶어서 두 번 곱해요! — 세 수의 곱셈 연습 웹앱
🔗 2022 개정 교육과정 초등학교 4학년 1학기 수학 연산 (곱셈과 나눗셈) — 세 수의 곱셈(예: 20 × 30 × 2 = 1200)을 왼쪽부터 차례로 두 단계에 나누어 세로식으로 풀어보는 인터랙티브 웹앱입니다. 1단계 카드(첫 두 수의 곱)를 마치면 그 답이 2단계 카드(× 세 번째 수)로 자동 이어지는 릴레이 구조로 연산 순서의 원리를 체화합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 두 단계 카드 자동 릴레이 | 1단계 카드(20×30=600)를 끝내면 답 600이 자동으로 2단계 카드(600×2=1200)의 피승수로 등장합니다. | "왼쪽부터 차례로!"라는 연산 순서 원칙이 화면 전환 흐름으로 자연스럽게 체화됩니다. |
| 0 연속 입력 & 순서 착각 진단 | 몇십×몇십 구간의 0 연속 입력 원리와, 뒤의 두 수를 먼저 곱하는 순서 착각(답은 같지만 습관 문제)을 별도 진단합니다. | "1단계 실수인가, 2단계 실수인가"를 구분 진단하여 정확히 어느 단계가 약한지 알려줍니다. |
| 단계별 학습 기록 분리 | 1단계와 2단계의 첫 시도·오답·힌트 기록이 각각 보존되어, 결과 화면에서 단계별 취약점이 명확히 드러납니다. | 클릭 선택 + ⌫ 삭제로 자유 수정이 가능하며, 모든 칸을 채우면 오답이 있어도 다음 문제로 넘어갑니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
세수곱셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 4학년 1학기 > 수학 > 연산 > 곱셈과 나눗셈 > 세 수의 곱셈 바이브 코딩 프롬프트
[유형 5] 세 수의 곱셈 연습 웹앱을 만들어줘.
목적·대상: 초등학교 4학년 1학기 학생이 세 수의 곱셈(예: 20 × 30 × 2 = 1200)을 왼쪽부터 차례로 두 단계에 나누어 세로식으로 풀어보는 인터랙티브 웹앱.
기술 조건: 단일 index.html, canvas-confetti + Jua CDN, Web Audio API, 폴백.
문제 생성:
- 세 수는 곱셈이 쉬운 구성(예: 몇십 × 몇십 × 몇, 몇백 × 몇 × 몇십)으로, 중간값과 최종값이 모두 만 이하가 되도록 생성.
- 예: 20×30×2, 300×2×30, 40×20×5.
- 직전 반복 금지, generateProblem() 분리.
풀이 UI (두 단계 세로식):
- 1단계 카드: 첫 두 수의 세로식 곱셈(예: 20 × 30) → 1단계 답 칸(일→십→백→천 순서, 몇십×몇십이므로 0 연속 입력 학습).
- 1단계 완료 후 2단계 카드 자동 전환: 1단계 답 × 세 번째 수의 세로식 곱셈(예: 600 × 2) → 2단계 답 칸 입력.
- 화살표와 "1단계 → 2단계" 진행 표시로 왼쪽부터 차례로 푼다는 흐름을 강조.
- 네모칸 클릭 선택 + ⌫ 삭제(풀이 중), 모든 칸 채우면 단계 완료(오답도 진행, 전부 정답만 축하), 오답 누적 기록.
힌트 모드: "왼쪽부터 차례로! 20 × 30 = 600, 600 × 2 = 1200" 단계 강조.
학습 기록: 단계별(1단계/2단계) 첫 시도·오답 시도·힌트 기록 — 어느 단계에서 실수했는지 구분.
진행: 5/10/20 선택, 진행률 바.
결과 화면 — 오답 분석:
- 요약: 바로 맞힌/실수한 문제/힌트/정답률.
- 오답 분석(이유+해결 방법): ① 1단계 실수(0 개수, 앞자리 곱) → "몇십끼리는 0 떼고 곱하고 0 붙이기!" ② 2단계 실수(1단계 답 × 세 번째 수) → 중간값 다시 읽기 ③ 순서 착각(뒤의 두 수를 먼저 곱함 — 답은 같지만 계산 습관) → "왼쪽부터 차례로!" ④ 순간 실수 → 검산.
- 맞춤 보충 연습(5문제), 오답 문제 목록, 전부 정답 시 축하 + "다음 단계: 곱셈 종합 도전!" 추천.
스타일: 유형 1과 동일.
완료 기준: 두 단계 카드 전환 흐름, 단계별 원샷 입력+클릭 선택+삭제, 단계 구분 오답 분석·보충 연습 동작.
📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 4학년 1학기 수학 세 수의 곱셈 [4수01-08]
- 연산 순서(왼쪽부터) 원칙 및 단계별 릴레이 학습 모델
- 초등 수학 다단계 곱셈 단계 구분 진단 알고리즘 설계