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