십분의 1이 10개 모이면 1! 소수 한 자리 덧셈 웹앱
한 줄 소개: 0.3 + 0.5 = 0.8, 그런데 0.7 + 0.6은 왜 1.3이 될까요? 십분의 일 개념을 10칸 스트립(strip)으로 눈에 보이게 잡아주는 4학년 2학기 '소수의 덧셈과 뺄셈' 유형 1 연습 웹앱(web app)입니다. 프롬프트 복사 → 제미나이에 붙여넣기 → 완성된 index.html 더블클릭, 수업 준비 3분이면 끝!
이 앱이 잡아주는 것: ① 소수점을 맞춰 세우는 세로식 습관 ② 십분의 일(1/10)이 10개 모이면 1이 된다는 받아올림 원리 ③ "답 0.13" 같은 소수 오개념 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계해서, 맞추기 경주가 아니라 계산 원리를 붙잡는 연습이 됩니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0)
학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일)
1. 3대 핵심 분석 비교표
이 앱에서 바로 눈에 보이는 핵심 기능 3가지입니다. 오른쪽 문장을 제미나이에 그대로 쓰면 같은 기능이 나옵니다.
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 소수점 열 정렬 세로식 | 0.3 + 0.5를 손으로 풀 때처럼 소수점을 세로로 맞춰 계산하게 세워줍니다. "0.13"처럼 소수점 자리를 무시하는 오류가 눈에 보입니다. | "0.3 + 0.5 세로식으로 풀 때 소수점 아래 자리를 맞추는 걸 알려줘" |
| 입력·지우기 | 십분의 자리부터 입력하고, 틀린 칸은 지우기(⌫) 버튼으로 스스로 고칩니다. 전부 맞히면 폭죽과 축하 음향! | "답은 십분의 자리부터 입력하게 하고, 틀린 칸은 지우기 버튼으로 고치게 해줘" |
| 10칸 스트립 힌트 | 0.3은 3칸, 0.5는 5칸, 합치면 8칸 = 0.8. 7칸+6칸=13칸이면 10칸이 모여 1! 을 색으로 보여줍니다. | "십분의 일을 10칸 스트립으로 그려서 힌트 애니메이션을 만들어줘" |
수업 현장 팁: 받아올림 문제(0.7 + 0.6)를 먼저 풀어보게 하고, 아이들이 "0.13"라고 쓰는 순간 이 앱의 스트립 힌트를 힌트 모드로 열어보세요. "십분의 1이 10개 모이면 1"이라는 문장이 눈과 귀로 동시에 들어갑니다. 복습용으로는 5문제 모드가 적당하고, 받아올림 문제가 나올 때까지 반복해 보는 용도로는 20문제 모드가 좋습니다.
2. 초보자를 위한 바이브 코딩 실전 사용 예시
- 제미나이를 열고 아래 프롬프트를 복사해서 붙여넣기 — 먼저 제미나이가 3가지 확인 질문을 하면, 원하는 답(문제 범위·소수점 자리·배포 방식)을 알려주세요.
- 완성되면 파일 다운로드 → index.html 더블클릭 — 서버 실행·프로그램 설치 없이 브라우저에서 바로 열립니다.
- 동작 확인 — 문제 3개쯤 풀어보고, 받아올림 문제(0.7 + 0.6)에서 10칸 스트립 힌트가 재생되는지, 지우기(⌫)로 고쳐지는지 확인하세요.
제미나이 전용 에러 제로 프롬프트
[목표]
초등학교 4학년 2학기 '소수의 덧셈과 뺄셈' 유형 1(소수 한 자리 수끼리의 덧셈) 연습 웹앱을
단일 index.html 파일로 만들어줘. 서버 실행·설치 없이 더블클릭으로 열리는 완결 앱이어야 해.
[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 합이 1을 넘는 받아올림 문제도 포함할지 (예: 0.7 + 0.6 = 1.3)
2. 소수점 자리: 십분의 자리(소수 첫째 자리)만 사용할지
3. 배포 방식: 교사 PC 시연용인지, 학생 단말(오프라인) 배포용인지
[안전장치 - 반드시 지켜]
- 외부 CDN·API·이미지 주소를 절대 쓰지 마. 인터넷 없이도 완전히 동작해야 해.
- 구글 폰트(Jua 등) CDN 링크를 쓰지 말고 시스템 한글 글꼴('Malgun Gothic', sans-serif)을 써.
- 폭죽 효과는 canvas 라이브러리 없이 CSS 애니메이션으로 직접 구현.
- 효과음은 Web Audio API로 직접 합성하고, 음소거 토글과 음량 조절 슬라이더를 제공해.
- 학생 개인정보(이름·기록 저장)는 절대 다루지 마. 실행 중 외부 통신이 0이어야 해.
[문제 생성]
- 두 개의 한 자리 소수(십분의 자리)를 무작위로 뽑아 더하기 문제를 출제 (예: 0.3 + 0.5).
- 정수부 0~9, 십분의 자리 1~9로 하고, 합이 9.9를 넘지 않게 해.
- 받아올림 문제(십분의 자리 합이 10 이상, 예: 0.7 + 0.6 = 1.3)와 받아올림 없는 문제가 자연스럽게 섞이게 해.
- 바로 직전 문제와 같은 조합은 금지. 문제 생성은 generateProblem() 함수 하나로 완전 분리.
[풀이 UI]
- 세로식 카드: 피수 → + 기호 → 피수 → 가로줄 → 답안 칸. 소수점이 세로로 정렬되게 CSS로 배치.
- 자릿값 색: 정수부 초록, 십분의 자리 빨강. 답안 칸은 한 변 84px 이상, 현재 입력 칸은 노란 테두리.
- 입력 순서: 십분의 자리 먼저, 그다음 정수부. 화면 숫자판(0~9) + 키보드 지원.
- 입력 즉시 초록(맞음)·빨강(틀림) 채점. 틀리면 빨간 배경+좌우 shake+낮은 톤.
- '지우기(⌫)' 버튼과 키보드 Backspace: 마지막에 입력한 칸을 지우고 되돌아가 다시 입력 가능.
- 모든 칸을 전부 맞히면 자동 완료 — CSS confetti+축하 아르페지오+"정답! 🎉" 후 다음 문제.
- 틀린 칸이 남으면 "지우기(⌫)로 틀린 칸을 고쳐 보세요!" 안내와 함께 두 갈래:
고치면 자동 완료, 고치지 않고 넘어가려면 [다음으로 제출] 버튼 — 제출 시 "정답은 0.7 + 0.6 = 1.3 이에요!" 표시.
- 제출 후 틀린 문제가 연속 2개가 되면 다음 문제 전에 힌트 버튼이 깜빡임.
[힌트 모드]
- "힌트" 버튼: 10칸 스트립 애니메이션 — 첫 수의 십분의 1 개수만큼 파란 칸(0.3 → 3칸),
둘째 수의 개수만큼 빨간 칸(0.5 → 5칸)을 차례로 채우고, 합쳐서 몇 칸인지 세어 보여줘.
- 받아올림 문제는 "7칸 + 6칸 = 13칸 → 10개가 모이면 1!"이 되는 과정을 주황색 칸으로 보여줘.
- 힌트 사용 문제는 결과 화면에서 '힌트 사용'으로 별도 표시.
[학습 기록 및 진행]
- 문제별 입력값·정오·힌트·지우기 사용 기록. 문제 수 선택(5/10/20), 상단 진행률 바.
[결과 화면 — 오답 분석]
- 요약 카드: 바로 정답/지우기로 고친 정답/틀린 문제/정답률 + 힌트·지우기 사용 횟수.
- 틀린 문제만 분석 카드로: [틀린 곳]+[이유]+[해결 방법]을 아이 눈높이 격려 톤으로.
* 받아올림 누락(십분의 자리는 맞고 정수부가 1 부족): "십분의 1이 10개 모이면 1이 돼요!" 처방
* 십분의 자리 실수: "십분의 1끼리 더하고 10을 넘는지 확인해요." 처방
* ±1 실수, 단순 실수: 격려 톤 처방
- 맞춤 보충 연습(5문제, 받아올림 문제 위주), 다시 볼 문제들(풀이 과정 표시), 만점 시 축하 연출+"다음 유형 도전" 추천.
[스타일]
- 밝고 따뜻한 배경(#FAF8F5), 큼직한 글자와 터치 영역, 모바일 세로 화면 대응 반응형.
[완료 기준]
- index.html 더블클릭으로 바로 연습 시작; 받아올림 포함 소수 한 자리 덧셈 무작위 출제;
소수점 세로 정렬·입력·지우기·자동 완료·[다음으로 제출] 흐름; 10칸 스트립 힌트;
오답 분석·보충 연습 정상 작동; 인터넷 연결이 끊겨도 모든 기능 동작.3. 에디터 한줄평 & 참고 링크
에디터 한줄평: "0.13"이라는 답 한 번 보면 소수 덧셈의 받아올림은 이제 잡히는 거예요. 십분의 일을 칸 수로 세어 보게 만드는 이 앱은 소수를 계산기로 때려맞추게 하는 게 아니라 원리를 눈으로 캐치하게 하는 시각 도구입니다. 지우기로 고친 정답도 따로 세어 주는 디테일이 교사 마음을 사로잡습니다.
참고 링크 카드
- 2022 개정 교육과정 초등 수학 성취기준 — 국가교육과정 정보 시스템(ncs.re.kr)에서 '수와 연산 → 소수의 덧셈과 뺄셈' 단원 확인
- 완성 앱 예시 — 이 원고와 함께 배포하는 샘플 HTML(샘플_254_소수한자리덧셈_지우기.html)을 더블클릭해 먼저 체험해 보세요. 학내망 배포 전 확인 체크리스트: 인터넷 연결 없이 더블클릭 실행 ✓ / 학생 데이터 입력·저장 기능 없음 ✓ / 외부 통신 없음 ✓
