2026년 9월 13일 일요일

[초등 4-2 수학] 자연수가 없는 소수 두 자리 수 범위의 덧셈

백분의 자리까지 맞춰 더한다! 자연수 없는 소수 두 자리 덧셈 웹앱

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

이 앱이 잡아주는 것: ① 백분의 1(1/100) 개념을 소수점 열 정렬 세로식에 확장 ② 십분·백분 자릿수별로 나눠 더하는 감각 ③ 자연수 부분은 항상 0! 오개념 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계해서, 맞추기 경주가 아니라 계산 원리를 붙잡는 연습이 됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역초보자를 위한 쉬운 설명이렇게 한번 써보세요!
소수점 열 정렬 세로식(십분+백분)0.23 + 0.46을 [0][.][2][3] 형태로 소수점을 축으로 세워줍니다. 십분의 자리=초록, 백분의 자리=주황으로 자릿값 색이 나뉘어 두 자리 덧셈이 눈에 들어옵니다."0.23 + 0.46 세로식으로 풀 때 소수점 아래 두 자리를 맞추는 걸 알려줘"
입력·지우기백분의 자리부터 → 십분의 자리 → 자연수 부분(0) 순서로 입력합니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고칩니다. 전부 정답일 때만 폭죽과 축하 음향!"백분의 자리부터 입력하고, 틀린 칸은 지우기 버튼으로 고치게 해줘"
10칸 스트립 2개 힌트0.23은 2칸과 부분칸, 0.46은 4칸과 부분칸으로 그려지고 "십분: 2+4=6, 백분: 3+6=9 → 0.69!" 단계 설명이 나옵니다. 백분의 1이 10개 모이면 십분의 1이라는 원리를 강조해요."십분·백분 자릿수별로 스트립 힌트 애니메이션을 만들어줘"

수업 현장 팁: 유형 2는 백분의 1(1/100)이 처음 등장하는 단계예요. 시작 전에 "0.01이 몇 개 모이면 0.1일까?"를 입으로 가볍게 짚고 들어가세요. 힌트의 스트립 2개를 함께 보여주면 "십분끼리, 백분끼리 따로 더한다"는 감각이 붙습니다. 복습용은 5문제, 단원 확인용은 20문제 모드가 적당해요.

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

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

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

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

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 두 수 모두 0.ab 소수(0.01~0.49)로 하고 각 자릿수 합이 9 이하(받아올림 없음, 합이 1 미만)일지
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에도 저장하지 마.

[문제 생성]
- 두 수 모두 0.ab 형태(0.01~0.49). 십분의 자리 두 숫자의 합 ≤ 9이고 백분의 자리 두 숫자의 합 ≤ 9(받아올림 없음, 합이 1 미만). 예: 0.23 + 0.46 = 0.69.
- 두 수의 자릿수는 같은 형태(둘 다 백분위)로 정렬되게 생성. 직전 문제 반복 금지, generateProblem() 함수 분리.

[상황 카드]
- 상황 문장(예: "실 0.23m와 0.46m를 이으면 모두 몇 m일까요?")과 배지 시각화.

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

[힌트 모드]
- 10칸 스트립 2개 시각화: 첫 스트립에 첫 수를 칠하기(십분의 자리 칸 + 백분만큼 부분 칸, 예: 0.23), 둘째 스트립에 둘째 수 표시 후 "십분의 자리 2+4=6, 백분의 자리 3+6=9 → 0.69!" 단계 설명. 백분의 1이 10개 모이면 십분의 1 칸이 채워지는 원리 강조.
- 힌트 사용 문제는 결과에서 구분.

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

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

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 첫 시도 기준 진단(아이 눈높이 격려 톤, [틀린 부분]+[이유]+[해결 방법] 형식):
  - 백분의 자리 반복 실수(정답±1) → "백분의 자리 덧셈이 아직 어색해요" → 백분의 1 조각 소리 내어 세기.
  - 십분의 자리 실수(백분에서 올라올 값을 놓친 것처럼 ±1) → 자릿수별 소리 내어 덧셈.
  - 자연수 부분을 0으로 쓰지 않음 → "합이 1보다 작으면 자연수 부분은 0!" → 소수점 왼쪽 확인 습관.
  - 자릿수 어긋남(입력값이 옆 자릿수 정답과 동일) → 소수점 기준 자릿수 짚기.
  - 해당 없음 → 순간 실수 → 칸마다 먼저 세는 검산 습관.
- 맞춤 보충 연습 버튼(틀린 자릿수 위주 5문제), 오답 문제 목록(과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 자연수가 있는 소수 두 자리 수 덧셈 도전!" 추천, "다시 연습" 버튼.

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

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

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

에디터 한줄평: 백분의 1이 처음 나오는 유형 2는 "십분끼리, 백분끼리 따로 더한다"는 자릿수 감각의 분기점이에요. 스트립 2개 힌트가 두 수를 나란히 놓고 비교하게 해 주는 게 좋습니다. 백분의 자리부터 채우는 흐름이 몸에 붙으면 소수 세 자리도 같은 원리라는 걸 아이가 스스로 느낍니다.

참고 링크 카드

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