2026년 9월 13일 일요일

[초등 4-2 수학] 자연수가 있는 소수 두 자리 수끼리의 덧셈

소수점만 맞추면 자연수도 한 방에! 자연수 있는 소수 두 자리 덧셈 웹앱

한 줄 소개: 1.25 + 2.14 = 3.39, 자연수 부분과 소수 부분을 소수점 기준으로 나눠 더하기를 잡아주는 4학년 2학기 '소수의 덧셈과 뺄셈' 유형 3 연습 웹앱(web app)입니다. 프롬프트 복사 → 제미나이에 붙여넣기 → 완성된 index.html 더블클릭, 수업 준비 3분이면 끝!

이 앱이 잡아주는 것: ① 자연수 부분과 소수 부분을 나눠 더하는 원리 ② 자연수 자릿수가 달라도 소수점 기준으로 정렬한다는 소수 덧셈의 대원칙 ③ 자릿수 어긋남 오류 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계해서, 맞추기 경주가 아니라 계산 원리를 붙잡는 연습이 됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역초보자를 위한 쉬운 설명이렇게 한번 써보세요!
소수점 열 정렬 세로식1.25 + 2.14를 소수점을 축으로 [1][.][2][5], [2][.][1][4]로 세워줍니다. 자연수 부분 자릿수가 달라도 소수점 기준으로 정렬됨을 학습합니다. 일의 자리=빨강, 십분=초록, 백분=주황."1.25 + 2.14 세로식에서 소수점을 기준으로 자릿수를 맞추는 걸 알려줘"
입력·지우기백분의 자리부터 → 십분의 자리 → 자연수 부분(진짜 계산 값) 순서로 입력합니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고칩니다. 전부 정답일 때만 폭죽과 축하 음향!"백분의 자리부터 입력하고 자연수 부분도 계산해 채우게 해줘"
자릿수별 열 플래시 힌트"백분: 5+4=9! 십분: 2+1=3! 자연수 부분: 1+2=3! → 3.39!" 해당 자릿수 열이 순서대로 반짝이며 단계 설명이 나옵니다."자릿수별로 열을 반짝이며 단계별 힌트 애니메이션을 만들어줘"

수업 현장 팁: 유형 3은 "소수점을 맞추면 자릿수가 서로 맞춰진다"는 소수 덧셈의 대원칙 확인용이에요. 자연수 부분 자릿수가 달라도(예: 3.5 + 12.42) 소수점 기준으로만 세우면 되는 걸 비교 문제 하나로 짚어 주세요. 자릿수별 열 플래시 힌트는 자릿수끼리의 약속을 눈과 소리로 동시에 넣어 줍니다.

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

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

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

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

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 두 수 모두 a.ab 소수(자연수 부분 1~9, 소수점 아래 두 자리)로 하고 자연수 부분 합 ≤ 9, 십분·백분 자릿수 합 ≤ 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에도 저장하지 마.

[문제 생성]
- 두 수 모두 a.ab 형태(자연수 부분 1~9, 소수점 아래 두 자리). 자연수 부분의 합 ≤ 9(답의 자연수 부분이 한 자리 유지), 십분의 자리 합 ≤ 9, 백분의 자리 합 ≤ 9(받아올림 없음). 예: 1.25 + 2.14 = 3.39.
- 직전 문제 반복 금지, generateProblem() 함수 분리.

[상황 카드]
- 상황 문장(예: "상자 무게 1.25kg와 2.14kg를 합치면 모두 몇 kg일까요?")과 배지 시각화.

[풀이 UI - 소수 세로식 + 네모 칸 입력]
- 세로식 그리드: [기호 열 40px | 일의 자리 84px | 소수점 28px | 십분의 자리 84px | 백분의 자리 84px]. 소수점이 모든 행에서 한 열에 수직 정렬 — 자연수 부분 자릿수가 달라도 소수점 기준으로 정렬됨을 학습.
- 자릿값 색: 일의 자리(자연수 부분)=빨강, 십분=초록, 백분=주황, 소수점 기호=회색.
- 답안 칸: [자연수 부분(빨강)][소수점 표시][십분(초록)][백분(주황)], 84px. (자연수 부분은 빈 칸이 아니라 진짜 계산 값)
- 입력 순서(중요): 오른쪽 끝(백분의 자리)부터 → 십분의 자리 → 자연수 부분. 화면 숫자판+키보드.
- 클릭 선택: 네모 칸 클릭으로 커서 이동. ⌫ 지우기 버튼(숫자판+Backspace): 선택 칸 지우고 재입력(풀이 중에만).
- 문제 완료 조건: 모든 칸을 채우면 정답 여부와 관계없이 다음 문제로 자동 진행. 전부 정답일 때만 confetti + 축하 아르페지오 + "정답! 🎉", 오답 포함 시 축하 없이 "다음 문제로 넘어가요!". 오답은 빨간 배경+shake+낮은 톤, 오답 숫자 유지. 한 문제에서 2칸 이상 오답 시도 시 다음 문제 전 힌트 제안. 음소거/음량 버튼.

[힌트 모드]
- 단계별 설명 + 해당 자릿수 열 플래시: "백분의 자리: 5+4=9! 십분의 자리: 2+1=3! 자연수 부분: 1+2=3! → 3.39!" 소수점 맞추기 강조(자연수 부분끼리, 십분끼리, 백분끼리 각각).
- 힌트 사용 문제는 결과에서 구분.

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

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

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 첫 시도 기준 진단(아이 눈높이 격려 톤, [틀린 부분]+[이유]+[해결 방법] 형식):
  - 자연수 부분 반복 실수(정답±1) → "자연수 부분 덧셈이 아직 어색해요" → 자연수 부분을 따로 모아 덧셈 연습.
  - 백분/십분의 자리 실수 → 자릿수별 소리 내어 덧셈.
  - 자릿수 어긋남(십분의 수를 자연수 칸에 적는 등) → 소수점 기준 자릿수 짚기.
  - 해당 없음 → 순간 실수 → 자릿수별 검산 습관.
- 맞춤 보충 연습 버튼(틀린 자릿수 위주 5문제), 오답 문제 목록(과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 소수 세 자리 수 범위의 덧셈 도전!" 추천, "다시 연습" 버튼.

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

[완료 기준]
- 자연수 부분이 포함된 소수점 정렬 세로식, 백분의 자리부터의 입력 흐름(클릭 선택+⌫ 수정 지원), 모든 칸 채우면 진행 규칙, 자릿수별 힌트, 첫 시도 기준 오답 분석, 맞춤 보충 연습이 모두 동작; 문제 생성 규칙(자연수 합 ≤ 9, 각 소수 자릿수 합 ≤ 9, 무받아올림)이 항상 지켜져야 함.

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

에디터 한줄평: "소수점만 맞추면 자릿수가 알아서 맞춰진다"는 원칙을 자연수 부분까지 확장하는 유형 3은 소수 덧셈의 완성형이에요. 열 플래시 힌트가 자릿수끼리의 약속을 명확히 보여 주고, 첫 시도 기준으로 실수를 따로 세어 주는 디테일이 좋습니다. 자연수 부분도 "진짜 계산 값"이라는 안내가 자릿수 어긋남을 예방합니다.

참고 링크 카드

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