분자끼리 더하고 분모는 그대로! — 분모가 같은 진분수의 덧셈 연습 웹앱
🍕 2022 개정 교육과정 초등학교 4학년 2학기 수학 연산 (분수의 덧셈과 뺄셈) — 분모가 같은 진분수의 덧셈(예: 2/5 + 1/5 = 3/5)을 가로식 분수 레이아웃으로 직접 입력하며 "분자끼리 더하고 분모는 그대로" 원리를 익히는 인터랙티브 웹앱입니다. 합이 항상 진분수(분모보다 작은 분자)인 문제만 출제되어 기초 개념을 확실히 다집니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 가로식 분수 레이아웃 | 분자 / 가로선 / 분모 구조의 교과서식 분수 표시로 두 분수를 ＋ 기호로 연결하고 답 분수를 나란히 배치합니다. | 2/5 ＋ 1/5 ＝ [분자칸] / 분모칸 — 첫 커서가 분모칸(분수 관습상 먼저 쓰는 칸)에 자동 위치합니다. |
| 클릭 선택 & ⌫ 수정 | 이미 입력한 칸도 클릭하면 커서가 이동하고, ⌫ 지우기 버튼으로 다시 입력 가능합니다. 풀이 중에만 수정 가능합니다. | 모든 칸을 채우면 오답이 있어도 다음 문제로 진행 — 전부 정답일 때만 confetti 파티클 + 축하 아르페지오가 터집니다. |
| 합이 항상 진분수인 안전 장치 | 두 분자의 합이 항상 분모보다 작게만 출제되므로, 답이 가분수가 되지 않습니다 — 진분수 덧셈 개념만 확실하게 익힙니다. | 오답 분석: 분자·분모 뒤바꿈, 덧셈을 뺄셈으로 계산, 분모를 새로 계산 시도 등 5종 진단. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
진분수덧셈.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 4학년 2학기 > 수학 > 연산 > 분수의 덧셈과 뺄셈 > 분모가 같은 진분수의 덧셈 (합이 진분수) 바이브 코딩 프롬프트
[유형 1] 분모가 같은 진분수의 덧셈(합이 진분수) 연습 웹앱을 만들어줘.
목적·대상: 초등학교 4학년 2학기 학생이 분모가 같은 진분수의 덧셈(예: 2/5 + 1/5 = 3/5)을 세로식으로 직접 풀며 "분자끼리 더하고 분모는 그대로" 원리를 익히는 인터랙티브 웹앱.
기술 조건: 단일 index.html(HTML+CSS+JS 전부 포함). CDN: canvas-confetti, 구글 폰트 Jua. 소리는 Web Audio API 합성(정답=상승 아르페지오, 오답=낮은 톤). 오프라인 폴백(CSS 파티클, 기본 글꼴).
문제 생성: 분모 d(3~9), 두 분자 a·b(각 1 이상, 합이 d 미만 — 답이 진분수). 순서 무작위. 직전 문제 반복 금지. generateProblem() 함수 하나로 분리(다른 유형 재사용).
상황 카드: "피자 5분의 2판과 5분의 1판을 합치면?" 문장 + 묶음 배지.
세로식 UI: 문제 분수 2개 + ＋ 기호 + ＝ 기호 + 답 분수가 한 줄로 나란히(교과서 분수 세로식). 답 분수는 분자칸(초록 테두리 84px) / 가로선 / 분모칸(파랑 테두리 84px).
입력 규격(중요): 첫 커서는 답의 분모칸(분수는 관습상 분모를 먼저 씀), 그다음 분자칸. 네모칸 클릭 시 그 칸으로 커서 이동(선택). 화면 숫자판(0~9)+키보드. ⌫ 지우기 버튼(숫자판+Backspace): 현재 칸을 지워 다시 입력 가능(풀이 중에만). 모든 칸을 채우면 오답이 있어도 다음 문제로 진행 — 전부 정답일 때만 confetti 파티클+축하 사운드, 오답 포함이면 축하 없이 "다음 문제로 넘어가요!". 칸별 즉시 채점(맞으면 초록 채움+"딩", 틀리면 빨강+shake+낮은 톤, 오답 숫자 유지). 음소거/음량 버튼.
힌트 모드: 조각 시각화 — 5분의 1 조각 a개 그룹 + b개 그룹을 나란히 세어 합친 뒤 "분자끼리 더하고 분모는 그대로!" 안내. 힌트 사용 문제는 결과에서 구분. 한 문제에서 2칸 이상 오답 시도가 있으면 다음 문제 전에 힌트 버튼 자동 펄스 제안.
학습 기록: 문제마다 각 칸의 첫 시도 값(firstAnswers)과 오답 시도(wrongAttempts), 힌트 사용 여부를 기록.
진행: 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석: 요약(바로 맞힌 문제/실수한 문제/힌트 사용/정답률). 오답이 있으면 첫 시도를 분석해 [틀린 부분]+[이유]+[해결 방법]을 아이 눈높이 격려 톤으로: 분자·분모 자리 바꿈 / 덧셈을 뺄셈으로 계산 / 분모를 새로 계산 시도("분모는 그대로!") / 1씩 차이 덧셈 실수 / 순간 실수(검산 습관). 맞춤 보충 연습 버튼(틀린 분모 위주 5문제), 오답 문제 목록("계산 과정 보기"), 전부 정답 시 "다음 단계: 합이 가분수인 덧셈 도전!" 추천, "다시 연습" 버튼.
스타일: 밝은 색감, 동글동글 한글 폰트, 분수 숫자 최소 44px, 큰 터치 영역, 여백 절제, 모바일 반응형.
완료 기준: 분모 우선 커서·클릭 선택·⌫ 삭제·"채우면 진행" 모델이 모두 동작하고, 합이 항상 진분수인 문제만 출제되며, 오답 분석(첫 시도 기준)과 맞춤 보충이 동작해야 함.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 4학년 2학기 수학 분모가 같은 진분수의 덧셈 [4수02-01]
- 초등 수학 진분수 덧셈의 분자·분모 분리 연산 원리 시각화
