2026년 9월 13일 일요일

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

분자끼리 더하고 분모는 그대로! 분모가 같은 진분수 덧셈 웹앱(합이 진분수)

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

이 앱이 잡아주는 것: ① 분수의 덧셈 첫 단추인 "분모가 같으면 분자끼리 더한다" 원리 ② 분수 세로식에서 위칸(분자)·아래칸(분모) 위치 감각 ③ "분모까지 더한다"(1/5 + 2/5 = 3/10) 대표 오개념 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계해서, 맞추기 경주가 아니라 원리를 붙잡는 연습이 됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역초보자를 위한 쉬운 설명이렇게 한번 써보세요!
분수 세로식(분자-가로선-분모)1/5 + 2/5를 분자와 분모를 각각 세로 칸으로 세워 보여줍니다. 분자=빨강, 분모=파랑으로 자리 색이 나뉘어 "위칸이 분자, 아래칸이 분모"가 먼저 보입니다."분모가 같은 진분수 덧셈을 세로식으로 풀 때 분자와 분모 자리를 알려줘"
분자의 합 → 분모 입력분자(위칸)를 먼저 더해 채우고, 분모는 원래 분모를 그대로 씁니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고치고, 모든 칸을 채우면 다음 문제로 넘어갑니다(전부 정답일 때만 폭죽!)."분자를 먼저 입력하게 하고 분모는 그대로 쓰게 해줘. 틀린 칸은 지우기 버튼으로 고치게 해줘"
분수 막대 힌트분모만큼 나눈 막대에 분자만큼 칠하기가 애니메이션으로 재생됩니다. 1/5는 1칸(주황), 2/5는 2칸(파랑), 합친 막대 3칸(초록)으로 "1+2=3, 분모는 그대로 5 → 3/5"가 눈으로 보입니다."분모만큼 나눈 막대에 분자만큼 칠하는 힌트 애니메이션을 만들어줘"

수업 현장 팁: 유형 1은 받아올림이 전혀 없는 분수 덧셈의 '첫 단추'예요. 먼저 "5등분한 피자 조각 몇 개?"를 입으로 가볍게 세고 앱을 여세요. 분자 칸(빨강)을 먼저 짚게 하면 "분모까지 더하기" 실수가 눈에 띕니다. 복습용은 5문제, 단원 도입 후 확인용은 20문제 모드가 적당해요.

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

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

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

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

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

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

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

[힌트 모드]
- 분수 막대 시각화: 분모만큼 나눈 막대 3개 — 첫 막대에 첫 분자만큼(주황), 둘째 막대에 둘째 분자만큼(파랑), 마지막 막대에 합친 분자만큼(초록) 순서대로 칠하기. "분자끼리: 1+2=3! 분모는 그대로 5! → 3/5" 표시.
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.

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

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

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

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

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

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

에디터 한줄평: 유형 1은 분수 덧셈의 기초 공사예요. "분모는 자리를 맞추는 표시일 뿐, 더하지 않는다"는 감각이 여기서 잡혀야 나중에 가분수·대분수 단계에서 흔들리지 않아요. 분자·분모 자리 색과 막대 힌트가 원리를 눈으로 보여 주는 디테일이 좋습니다.

참고 링크 카드

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