2026년 9월 13일 일요일

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

자연수끼리, 분수끼리 따로! 대분수 덧셈 웹앱(분자의 합이 분모보다 작을 때)

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

이 앱이 잡아주는 것: ① 대분수는 자연수 부분과 분수 부분을 나눠 더한다는 원리 ② 분수 부분은 분자끼리, 분모는 그대로 ③ 자연수를 더하지 않거나 분자 값을 자연수 칸에 쓰는 실수 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계했습니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역초보자를 위한 쉬운 설명이렇게 한번 써보세요!
대분수 세로식자연수 칸(보라) 옆에 분수 [분자(빨강)/가로선/분모(파랑)]를 세워 대분수를 그대로 보여줍니다. 답도 [자연수][분자/가로선/분모] 같은 구조라 "어디가 무엇인지"가 명확합니다."대분수를 자연수 칸과 분수 세로식으로 보여주고 답도 같은 구조로 알려줘"
분자의 합 → 분모 → 자연수 입력분자(위칸)의 합 → 분모(그대로) → 자연수(따로 합) 순서로 입력합니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고치고, 모든 칸을 채우면 다음 문제로(전부 정답일 때만 폭죽!)."분자, 분모, 자연수 순서로 입력하게 하고 틀린 칸은 지우기 버튼으로 고치게 해줘"
자릿수별 열 플래시 힌트힌트를 누르면 분자끼리 → 분모 그대로 → 자연수끼리 순서로 해당 칸이 반짝이며 단계 설명이 나옵니다. "→ 3과 3/5! 자연수끼리, 분수끼리 따로 더했어요!"로 마무리."분자, 분모, 자연수 칸을 순서대로 반짝이며 단계별 힌트를 만들어줘"

수업 현장 팁: 유형 3은 대분수 덧셈의 기본형이에요. "자연수끼리 따로, 분수끼리 따로"를 손가락 두 개(자연수 칸·분자 칸)로 짚게 하면 실수가 확 줄어요. 이 유형은 분자의 합이 분모를 넘지 않는 문제만 나오니, 넘는 경우는 다음 유형에서 다룬다고 미리 말해 주면 아이가 안심합니다.

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

  1. 제미나이를 열고 아래 프롬프트를 복사해서 붙여넣기 — 먼저 제미나이가 3가지 확인 질문을 하면, 원하는 답(문제 범위·문제 수·배포 방식)을 알려주세요.
  2. 완성되면 파일 다운로드 → index.html 더블클릭 — 서버 실행·프로그램 설치 없이 브라우저에서 바로 열립니다.
  3. 동작 확인 — 문제 3개쯤 풀어보고, 답의 자연수 부분도 진짜 계산 값으로 채워지는지, 힌트의 열 플래시가 분자→분모→자연수 순서로 재생되는지 확인하세요.

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

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

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 대분수끼리(예: 1과 2/5 + 2과 1/5 = 3과 3/5)로 자연수 부분의 합은 한 자리(9 이하), 분자의 합은 분모보다 작게 할지
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, 자연수 부분은 각각 1~9에 합이 9 이하, 두 분자는 각각 1 이상에 합이 d-1 이하(분수 부분이 진분수로 유지)가 되도록 생성. 예: 1과 2/5 + 2과 1/5 = 3과 3/5.
- 두 분수의 분모는 항상 같게. 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.

[상황 카드]
- 상황 문장(예: "케이크 1과 2/5조각과 2과 1/5조각을 먹으면 모두 몇 조각을 먹은 걸까요?")과 배지로 시각화(피자/케이크/빵/수박 조각 테마). 대분수 표기는 자연수 받침에 맞춰 '1과', '2와'처럼 조사를 붙여 써요.

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

[힌트 모드]
- 자릿수별 열 플래시: 힌트를 누르면 분자 칸들 → 분모 칸들 → 자연수 칸들 순서대로 반짝이며 단계 설명 표시. "분자끼리: 2+1=3! 분모는 그대로 5! 자연수끼리: 1+2=3! → 3과 3/5! 자연수끼리, 분수끼리 따로 더했어요!"
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.

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

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

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

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

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

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

에디터 한줄평: 대분수 덧셈의 기본형을 정확히 잡는 유형 3이에요. "자연수끼리, 분수끼리 따로"를 칸 색(보라·빨강·파랑)과 열 플래시 힌트로 반복 각인시켜 주는 설계가 좋고, 분자 값을 자연수 칸에 쓰는 자리 혼동까지 진단해 줍니다.

참고 링크 카드

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