2026년 9월 13일 일요일

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

소수점을 세로로 맞춰 0.3 + 0.5 = 0.8! 자연수 없는 소수 한 자리 덧셈 웹앱

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

이 앱이 잡아주는 것: ① 소수점을 맞춰 세우는 세로식 습관 ② 십분의 자리끼리 그대로 더하는 "받아올림 없음" 감각 ③ 자연수 부분은 항상 0! "1보다 작은 소수의 자연수 부분" 오개념 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계해서, 맞추기 경주가 아니라 계산 원리를 붙잡는 연습이 됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역초보자를 위한 쉬운 설명이렇게 한번 써보세요!
소수점 열 정렬 세로식0.3 + 0.5를 손으로 풀 때처럼 소수점을 세로로 맞춰 [0][.][3] 형태로 세워줍니다. 자릿값 색(일의 자리 빨강·십분의 자리 초록·소수점 회색)이 "어디가 어느 자리인지" 먼저 보여줍니다."0.3 + 0.5 세로식으로 풀 때 소수점 아래 자리를 맞추는 걸 알려줘"
입력·지우기십분의 자리부터 입력하고 자연수 부분(0)까지 채우면 바로 다음 문제로 넘어갑니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고칩니다. 전부 정답일 때만 폭죽과 축하 음향!"답은 십분의 자리부터 입력하게 하고, 틀린 칸은 지우기 버튼으로 고치게 해줘"
10칸 스트립 힌트0.3은 10칸 중 3칸(주황), 0.5는 5칸(파랑)이 순서대로 칠해지고 "3+5=8, 십분의 자리 그대로!" 합친 칸 수로 0.8이 보입니다."십분의 일을 10칸 스트립으로 그려서 힌트 애니메이션을 만들어줘"

수업 현장 팁: 유형 1은 받아올림이 전혀 없어 소수 덧셈의 '첫 단추'예요. 앱을 열기 전에 십분의 1 조각 세기("0.1이 몇 개일까?")를 입으로 가볍게 하고 시작하세요. 십분의 자리끼리 더할 때 초록 칸을 손가락으로 짚게 하면 자릿수 실수가 눈에 띕니다. 복습용은 5문제, 단원 확인용은 20문제 모드가 적당해요.

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

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

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

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

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 두 수 모두 0.x 소수(예: 0.3 + 0.5 = 0.8)로 하고 합이 항상 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.x 형태의 소수 한 자리 수(0.1~0.8). 각 수의 십분의 자리 숫자의 합이 9 이하(받아올림 없음, 합이 1 미만)가 되도록 생성. 예: 0.3 + 0.5 = 0.8.
- 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.

[상황 카드]
- 상황 문장(예: "리본 0.3m와 0.5m를 이으면 모두 몇 m일까요?")과 배지로 시각화(리본 m/사탕 kg/주스 L 테마).

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

[힌트 모드]
- 10칸 스트립 시각화: "십분의 1이 10개 모이면 1!" — 0.3은 10칸 중 3칸(주황)이 순서대로 칠해지고, 0.5는 5칸(파랑)이 칠해진 뒤 합친 칸 수(8칸)로 0.8 도출. "3+5=8, 십분의 자리 그대로!" 표시.
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.

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

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

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 첫 시도 기준으로 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 자연수 부분을 0으로 쓰지 않음(자연수 칸 시도 ≠ 0) → 이유: "합이 1보다 작으면 자연수 부분은 0이에요" → 해결: 소수점 왼쪽 칸 확인하는 습관.
  - 십분의 수를 자연수 칸에 적은 자릿수 어긋남 → 이유: "자릿수를 어긋나게 읽었어요" → 해결: 소수점 기준으로 자릿수 짚기.
  - 십분의 자리 덧셈 반복 실수(정답±1, 2회 이상) → 이유: "십분의 자리 덧셈이 아직 어색해요" → 해결: 십분의 1 조각을 소리 내어 세기.
  - 해당 없음 → 이유: "순간적인 실수예요" → 해결: "십분의 1이 몇 개인지 먼저 세는 습관".
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 문제의 소수합 위주 5문제), 오답 문제 목록(스트립 과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 소수 두 자리 범위의 덧셈 도전!" 추천, "다시 연습" 버튼.

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

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

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

에디터 한줄평: 십분의 1을 "칸 수"로 세어 보게 하는 유형 1은 소수 덧셈의 기초 공사예요. 소수점 열 정렬과 십분끼리 그대로 더하는 감각이 여기서 잡혀야 나중에 받아올림에서 흔들리지 않아요. 칸을 클릭해 골라 고치는 지우기(⌫) 방식이 아이 스스로 검산하는 힘을 키워 줍니다.

참고 링크 카드

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