2026년 9월 13일 일요일

[초등 4-2 수학] 분모가 같은 진분수의 덧셈 (합이 가분수)

분자가 분모를 넘으면 가분수! 분모가 같은 진분수 덧셈 웹앱(합이 가분수)

한 줄 소개: 3/5 + 4/5 = 7/5, 분자의 합이 처음으로 분모를 넘는 단계를 분수 세로식과 "꽉 찬 1" 막대 힌트로 잡아주는 4학년 2학기 '분수의 덧셈과 뺄셈' 유형 2 연습 웹앱(web app)입니다. 프롬프트 복사 → 제미나이에 붙여넣기 → 완성된 index.html 더블클릭, 수업 준비 3분이면 끝!

이 앱이 잡아주는 것: ① 분자끼리 더한 값이 분모보다 커지는 순간의 감각 ② "분모만큼 꽉 차면 1"이라는 가분수 원리 눈으로 보기 ③ "분모만큼 빼고 남은 수만 분자로 쓰는" 실수 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계했습니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0)

학내망 원칙: 학교 배포 웹앱은 학생 개인정보 수집·저장·전송 없음 — 이 앱은 폰트·축하 효과 CDN을 불러오므로 학내망 방화벽·인터넷 정책을 확인하고, CDN이 막히면 폰트·효과 폴백으로 동작합니다

1. 3대 핵심 분석 비교표

이 앱에서 바로 눈에 보이는 핵심 기능 3가지입니다. 오른쪽 문장을 제미나이에 그대로 쓰면 같은 기능이 나옵니다.

무엇이 바뀌었나요? / 영역초보자를 위한 쉬운 설명이렇게 한번 써보세요!
합이 가분수인 문제만두 분수는 각각 진분수(분자<분모)인데 분자의 합은 분모보다 큽니다(예: 3/5 + 4/5 = 7/5). "분자끼리 더하면 분모를 넘는다"는 경험을 안전하게 먼저 만들어 줍니다."분자의 합이 분모보다 커지는 진분수 덧셈 문제만 만들어줘"
분자의 합 → 분모 입력분자(위칸)를 먼저 더해 채우고 분모는 그대로. 틀린 칸은 클릭해 골라 지우기(⌫)로 고치고, 모든 칸을 채우면 다음 문제로(전부 정답일 때만 폭죽!)."분자를 먼저 입력하고 분모는 그대로. 틀린 칸은 지우기 버튼으로 고치게 해줘"
꽉 찬 1 + 남은 칸 막대힌트에서 분자끼리 더한 막대가 분모만큼 꽉 차면 "1!"이 되고 남은 칸이 곧 분자라는 걸 보여줍니다. "7/5는 1보다 큰 가분수"가 눈으로 보입니다."분모만큼 꽉 찬 막대 1개와 남은 칸 막대로 가분수 원리를 보여줘"

수업 현장 팁: 유형 2는 아이가 처음으로 "1보다 큰 분수"를 답으로 쓰는 단계예요. "5/5면 1인데, 7/5는?"을 막대 힌트로 보여 주면 가분수가 무섭지 않습니다. 이 유형에서는 가분수를 대분수로 고치지 않고 그대로 두는 것(4학년 범위)을 앱 문구로도 알려 주니, 미리 배운 아이가 헷갈리지 않게 안내해 주세요.

2. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 제미나이를 열고 아래 프롬프트를 복사해서 붙여넣기 — 먼저 제미나이가 3가지 확인 질문을 하면, 원하는 답(문제 범위·문제 수·배포 방식)을 알려주세요.
  2. 완성되면 파일 다운로드 → index.html 더블클릭 — 서버 실행·프로그램 설치 없이 브라우저에서 바로 열립니다.
  3. 동작 확인 — 문제 3개쯤 풀어보고, 분자의 합이 분모를 넘는 문제에서 답이 가분수로 쓰이는지, 힌트의 "꽉 찬 1 + 남은 칸" 막대가 재생되는지 확인하세요.

제미나이 전용 에러 제로 프롬프트

[목표]
초등학교 4학년 2학기 '분수의 덧셈과 뺄셈' 유형 2(분모가 같은 진분수의 덧셈, 합이 가분수) 연습 웹앱을
단일 index.html 파일로 만들어줘. 서버 실행·설치 없이 더블클릭으로 열리는 완결 앱이어야 해.

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 분모 5~9의 분모가 같은 진분수끼리인데 분자의 합이 분모보다 큰(가분수) 문제(예: 3/5 + 4/5 = 7/5)로 할지
2. 문제 수: 기본 10문제로 할지 (5/10/20 선택 기능 포함)
3. 배포 방식: 교사 PC 시연용인지, 학생 단말(오프라인) 배포용인지

[안전장치 - 반드시 지켜]
- HTML+CSS+JavaScript 전부 index.html 한 파일 안에 넣고, 외부 js/css/이미지 파일은 절대 쓰지 마.
- 외부 CDN은 아래 두 개만 허용해. (1) 구글 폰트 Jua, (2) canvas-confetti 라이브러리(폭죽 효과).
- CDN 연결이 안 되면: 폭죽은 CSS 애니메이션 파티클로, 폰트는 'Malgun Gothic' 시스템 폰트로 자동 대체되게 폴백을 만들어.
- 소리는 Web Audio API로 직접 생성해(정답=밝은 상승음과 축하 아르페지오, 오답=낮은 톤). 음소거·음량 조절 버튼도 만들어.
- 학생 개인정보(이름·성적 등)를 입력·저장·전송하는 기능은 절대 만들지 마. localStorage에도 저장하지 마.

[문제 생성]
- 분모 d는 5~9에서 뽑고, 두 분자는 각각 d보다 작은 진분수 분자이면서 분자의 합은 d+1 이상(합이 가분수)이 되도록 생성. 예: 3/5 + 4/5 = 7/5.
- 두 분수의 분모는 항상 같게. 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.

[상황 카드]
- 상황 문장(예: "피자 3/5조각과 4/5조각을 먹으면 모두 몇 조각을 먹은 걸까요?")과 배지로 시각화(피자/케이크/빵/수박 조각 테마).

[풀이 UI - 분수 세로식 + 네모 칸 입력]
- 분수 세로식: 피연산자 두 분수를 [분자 칸 / 가로선 / 분모 칸] 구조로 나란히 세우고(+ 기호는 가로선 높이에 표시), 답도 같은 구조로 아래에.
- 자릿값 색: 분자=빨강, 분모=파랑, 가로선=회색.
- 답안 칸: [분자 칸(빨강 테두리)][가로선][분모 칸(파랑 테두리)], 84px.
- 입력 순서(중요): 분자(위칸)의 합부터 입력한 뒤 분모(원래 분모 그대로)를 채움. 화면 숫자판(0~9)+키보드.
- 클릭 선택: 네모 칸을 클릭하면 해당 칸으로 커서 이동(수정할 칸 선택 가능).
- ⌫ 지우기 버튼(숫자판에 배치, 키보드 Backspace 동일): 현재 선택 칸의 입력을 지워 다시 입력할 수 있음(풀이 중에만 사용).
- 문제 완료 조건: 모든 칸을 채우면 정답 여부와 관계없이 다음 문제로 자동 진행. 전부 정답일 때만 confetti 파티클 + 축하 아르페지오 + "정답! 🎉", 오답이 포함되면 축하 없이 "다음 문제로 넘어가요!" 표시.
- 오답 반응: 빨간 배경 + 좌우 shake + 낮은 톤, 오답 숫자는 빨간 칸에 그대로 유지. 한 문제에서 2칸 이상 오답 시도가 있으면 다음 문제 전에 힌트 버튼 깜빡임 제안. 음소거/음량 버튼.

[힌트 모드]
- 분수 막대 시각화: 막대 4개 — 첫 막대에 첫 분자만큼(주황), 둘째 막대에 둘째 분자만큼(파랑), 세 번째 막대는 분모만큼 꽉 찬 1(초록), 네 번째 막대에 분모를 넘은 남은 칸(초록)을 순서대로 칠하기. "분자끼리: 3+4=7! 분모는 그대로 5! 분모만큼 꽉 차면 1! 남은 칸이 2 → 7/5(1보다 큰 가분수)" 표시.
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.

[학습 기록]
- 각 칸의 첫 시도 값(firstAnswers), 오답 시도(wrongAttempts), 힌트 사용 여부를 모두 기록.

[진행]
- 문제 수 선택(5/10/20), 상단에 진행률 바.

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 첫 시도 기준으로 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 분모를 분모끼리 더함(분모 칸 시도 = 분모×2) → 이유: "분모가 같을 때는 분모를 더하지 않아요" → 해결: 분모 칸에는 원래 분모를 그대로 쓰기.
  - 분모만큼 빼고 남은 수만 씀(분자 칸 시도 = 분자의 합−분모) → 이유: "분자가 분모를 넘은 값 전체가 분자예요(분모만큼 빼지 않아요)" → 해결: 분자끼리 더한 값을 그대로 위칸에 쓰기.
  - 분자 칸에 분모 값을 씀 → 이유: "위칸과 아래칸을 바꿔 읽었어요" → 해결: 위칸이 분자, 아래칸이 분모! 먼저 짚고 쓰기.
  - 분자 덧셈 반복 실수(정답±1, 2회 이상) → 이유: "분자끼리 더할 때 계산이 틀렸어요" → 해결: 분수 조각을 소리 내어 세기.
  - 해당 없음 → 이유: "순간적인 실수예요" → 해결: "분자끼리 먼저 세어 보는 검산 습관".
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 문제의 분자합·분모 위주 5문제), 오답 문제 목록(막대 과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 대분수의 덧셈(분자의 합이 분모보다 작을 때) 도전!" 추천, "다시 연습" 버튼.

[스타일]
- 밝은 색감, 동글동글 한글 폰트, 세로식 숫자 최소 50px, 큰 터치 영역, 여백 절제, 스마트폰 세로 반응형.

[완료 기준]
- index.html을 열면 바로 연습 시작; 분수 세로식(분자-가로선-분모), 분자의 합부터의 원샷 흐름(클릭 선택+⌫ 수정 지원), 모든 칸 채우면 진행 규칙, 꽉 찬 1+남은 칸 막대 힌트, 첫 시도 기준 오답 분석, 맞춤 보충 연습이 모두 동작; 문제 생성 규칙(분자의 합 > 분모, 두 분수는 진분수)이 항상 지켜져야 함.

3. 에디터 한줄평 & 참고 링크

에디터 한줄평: 처음으로 1을 넘는 가분수를 답으로 쓰는 유형 2는 분수 덧셈의 확장 순간이에요. "꽉 찬 1 + 남은 칸" 막대가 가분수를 무섭지 않게 보증해 주고, "분모만큼 빼고 남은 수만 쓰는" 실수를 첫 시도 기준으로 잡아 주는 진단이 좋습니다.

참고 링크 카드

  • 2022 개정 교육과정 초등 수학 성취기준 — 국가교육과정 정보 시스템(ncs.re.kr)에서 '수와 연산 → 분수의 덧셈과 뺄셈' 단원 확인
  • 완성 앱 예시 — 이 원고와 함께 배포하는 샘플 HTML(샘플_259_분수덧셈_합이가분수.html)을 더블클릭해 먼저 체험해 보세요. 학내망 배포 전 확인 체크리스트: 더블클릭 실행 ✓ / 학생 데이터 입력·저장 기능 없음 ✓ / 외부 통신: 폰트·축하 효과 CDN만 — 학내망 방화벽·인터넷 정책 확인(CDN 차단 시 폰트·효과 폴백으로 동작 ✓)
By 시간: