정수부는 그대로, 분자끼리 더하기! — 대분수와 진분수의 덧셈 연습 웹앱
🎂 2022 개정 교육과정 초등학교 4학년 2학기 수학 연산 (분수의 덧셈과 뺄셈) — 대분수와 진분수의 덧셈(예: 2 2/5 + 4/5 = 3 1/5)을 세로식으로 직접 풀며 두 형태를 섞어 계산하는 원리를 익히는 인터랙티브 웹앱입니다. 분자 합이 분모를 넘어가는 경우와 아닌 경우를 혼합 출제하여 상황 판단력까지 훈련합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 대분수 + 진분수 혼합 | 한쪽은 정수부가 있는 대분수, 다른 쪽은 진분수로 서로 꼴이 다릅니다. "정수부는 그대로 두고 분자끼리 더하면 돼요!" | 2 2/5 + 4/5 = [정수부 칸] [분자칸]/[분모칸] — 진분수는 정수부 없이 그대로 붙여 계산합니다. |
| 올림 유·무 혼합 출제 | 분자 합이 분모 미만(올림 없음)과 분모 이상(올림 1회)을 약 6:4 비율로 혼합 출제하여 상황 판단력을 훈련합니다. | 올림 유무를 스스로 판단하는 과정에서 대분수 덧셈의 종합적인 이해가 형성됩니다. |
| 정수부 누락 진단 | 진분수 쪽에 정수부가 없으므로 답의 정수부를 잊거나 과다하게 입력하는 실수를 정밀 진단합니다. | "진분수는 정수부가 없으니 정수부는 대분수의 것만 사용해요!" 명확한 안내. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
대분수진분수덧셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 4학년 2학기 > 수학 > 연산 > 분수의 덧셈과 뺄셈 > 분모가 같은 대분수와 진분수의 덧셈 바이브 코딩 프롬프트
[유형 9] 분모가 같은 대분수와 진분수의 덧셈 연습 웹앱을 만들어줘.
목적·대상: 4학년 2학기 학생이 대분수와 진분수의 덧셈(예: 2 2/5 + 4/5 = 3 1/5, 또는 2 2/5 + 1/5 = 2 3/5)을 세로식으로 풀며 두 형태를 섞어 계산하는 원리를 익히는 웹앱.
기술 조건: 단일 index.html. CDN: canvas-confetti + Jua, Web Audio 합성, 폴백.
문제 생성: 대분수(정수부 1~5) + 진분수(같은 분모). 분자의 합이 분모 미만과 이상 두 경우를 모두 출제(약 6:4). 분자 합 ≥ 분모이면 정수부 +1 올림. 직전 반복 금지, generateProblem() 분리.
세로식 UI: 문제 대분수 + + + 진분수 + = + 답 대분수(정수부 칸 + 분자칸/가로선/분모칸). 상황 카드 포함.
입력 규격: 정수부 칸 → 분모 칸 → 분자 칸. 클릭 선택, ⌫ 지우기(풀이 중), 모든 칸 채우면 오답도 진행(전부 정답만 축하), 즉시 채점, 2칸 이상 오답 시 힌트 제안. 음소거/음량.
힌트 모드: 조각 시각화 — "정수부는 그대로 두고 분자끼리 더해요! 합이 분모보다 크면 1을 정수부로 올려요".
학습 기록: firstAnswers/wrongAttempts/힌트 기록.
결과 화면: 요약 + 특화 분석(분자 합에 따른 올림 누락 / 분자 덧셈 실수 / 정수부 누락 / 분자·분모 뒤바꿈 / 순간 실수) + 맞춤 보충(틀린 분모 위주) + 다시 볼 문제들 + 전부 정답 시 "다음 단계: 대분수와 진분수의 뺄셈 도전!" 추천.
스타일: 밝은 색감, 큰 글자·터치 영역, 여백 절제, 모바일 반응형.
완료 기준: 대분수+진분수 문제만 출제(올림 유·무 혼합), 확정 입력 규격 동작, 오답 분석·보충 동작.
📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 4학년 2학기 수학 대분수와 진분수의 덧셈 [4수02-01]
- 초등 수학 대분수와 진분수 혼합 덧셈 분자 올림 판단 지도법