어느 쪽이 더 많을까? — 분모가 같은 가분수끼리, 대분수끼리 크기 비교 웹앱
⚖️ 2022 개정 교육과정 초등학교 3학년 2학기 수학 연산 (분수) — 분모가 같은 두 분수(가분수끼리 또는 대분수끼리)의 크기를 비교하여 알맞은 부등호(> < =)를 고르는 인터랙티브 웹앱입니다. 대분수끼리는 자연수를 먼저 비교하고, 가분수끼리는 분자의 크기를 비교한다는 직관적인 비교 원리를 체득합니다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 84px 대형 부등호 원샷 입력 | 화면 중앙에 큼직한 비교 기호 버튼(>, <, =) 3개를 배치하여 한 번의 터치로 직관적으로 답을 입력합니다. | 태블릿 화면에서 아이들이 망설임 없이 기호를 짚을 수 있는 큰 조작 영역을 제공합니다. |
| 부등호 방향 혼동 특화 진단 | 크기는 바르게 파악했으나 >와 <의 벌어진 입 방향을 반대로 고르는 초등학생 특유의 표기 실수를 정밀하게 감지합니다. | "더 큰 쪽에 입을 크게 벌린다!"는 시각적 규칙을 리마인드하여 기호 표기 오개념을 말끔히 해결합니다. |
| 분수 막대 오버레이 힌트 | 같은 길이의 두 분수 막대가 위아래로 겹쳐지며 채워진 조각의 길이를 직접 눈으로 비교하는 애니메이션을 보여줍니다. | 대분수에서는 큰 판(정수부)을 먼저 비교하고, 정수부가 같을 때 비로소 분자를 비교하는 판단 순서를 배웁니다. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 기본 문제 수 설정에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
동형분수비교.html로 저장한 뒤 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
2022 개정교육과정 > 초등학교 > 3학년 2학기 > 수학 > 연산 > 분수 > 분모가 같은 가분수/대분수끼리의 크기 비교 바이브 코딩 프롬프트
[유형 3] 분모가 같은 가분수/대분수끼리의 크기 비교 연습 웹앱을 만들어줘.
목적·대상: 초등학교 3학년 2학기 학생이 분모가 같은 두 분수(가분수끼리 또는 대분수끼리)의 크기를 비교해 부등호(> < =)로 나타내는 연습 웹앱.
기술 조건: [단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백]
문제 생성:
- 같은 꼴끼리 쌍: ① 가분수 vs 가분수(예: 5분의 7 vs 5분의 3 — 분모 d 2~9, 분자 각각 2~2d-1, 분자가 다른 쌍) ② 대분수 vs 대분수(예: 2과 3분의 1 vs 1과 3분의 2 — 정수부 또는 분자가 다른 쌍).
- 둘 중 하나를 무작위로 선택해 출제. 직전 문제 반복 금지, generateProblem() 함수 분리, 보충 연습은 틀린 분모 위주 출제.
문제 표시:
- 두 분수를 나란히 크게 표시(가분수: 분자/가로선/분모, 대분수: 정수부+분자/가로선/분모)하고, 두 수 사이에 빈 비교 칸(부등호가 들어갈 자리, 84px 원형 테두리)을 배치.
- 상황 문장(예: "어느 쪽이 더 클까요? 알맞은 기호를 넣어보세요.").
풀이 UI (비교 기호 원샷 입력):
- 비교 기호 버튼 3개( > , < , = )를 크게 배치(각 버튼 최소 84px). 원하는 기호를 클릭 한 번으로 답 입력(원샷).
- 채점: 맞으면 비교 칸에 기호가 초록으로 표시 + "딩" + 문제 완료(confetti + 아르페지오) / 틀리면 빨강 + shake + 낮은 톤 후 다시 선택 가능(기호 재선택으로 수정, 오답 시도는 wrongAttempts에 누적).
- 오답 2회 이상이면 힌트 제안. 음소거/음량 버튼.
힌트 모드:
- "힌트" 버튼: 분수 막대 시각화 — 같은 분모의 막대 두 개를 겹쳐 보여주고 채워진 조각 수를 비교(예: 대분수끼리면 정수부를 먼저 비교하고, 같으면 분자를 비교).
- 힌트를 쓴 문제는 결과에서 "힌트 사용"으로 구분.
학습 기록: 문제별 선택 시도(기호, 정/오), 힌트 사용 여부 기록.
진행: 문제 수 선택(5/10/20), 진행률 바.
결과 화면 — 오답 분석:
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수.
- 실수가 있으면 wrongAttempts를 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
- 부등호 방향 혼동(>와 <를 서로 바꿔 선택, 2회 이상) → 이유: "부등호가 어느 쪽을 가리키는지 헷갈렸어요" → 해결: "크기가 큰 쪽에 입을 크게 벌린다" 부등호 그림 기억.
- = 잘못 선택(두 수가 다른데 = 선택) → 이유: "두 수를 자세히 비교하지 않았어요" → 해결: 분자를 하나씩 짚어가며 비교.
- 정수부만 보고 판단(대분수 비교에서 분자가 더 큰 쪽을 골랐는데 정수부가 작은 경우 등) → 이유: "정수부만 보고 비교했어요" → 해결: 정수부가 같을 때는 분자를 비교한다는 규칙 연습.
- 어느 것도 해당 없으면 → 이유: "순간적인 실수예요" → 해결: 기호 넣기 전 두 수를 소리 내어 읽기.
- 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 분모 위주 5문제), 오답 문제 목록, 전부 바로 맞히면 축하 파티클 + "다음 단계: 분모가 같은 가분수와 대분수의 크기 비교 도전!" 추천, "다시 연습" 버튼.
스타일: 밝고 부드러운 색감, 큼직한 84px 버튼, 여백 절제, 스마트폰 세로 반응형.
완료 기준: 기호 버튼 원샷 입력·즉시 채점·재선택 수정 동작, 부등호 혼동 등 오답 분석과 맞춤 보충 연습 동작.📚 기술·교육 참고 링크
- 2022 개정 교육과정 초등 3학년 2학기 수학 분모가 같은 분수의 크기 비교 [4수01-12]
- 가분수와 대분수의 시각적 막대 모델을 통한 양감 비교 지도법
- 초등 수학 부등호 방향 기호 오류 분석 및 지도 전략
