2026년 9월 9일 수요일

[초등 수학] 네 자리 수 덧셈 종합 (받아올림 섞임) - 큰 수 연산의 마지막 관문 웹앱



네 자리 수 덧셈, 받아올림이 1번이든 3번이든! — 네 자리 수 덧셈 종합 연산 웹앱

🧮 2022 개정교육과정 초등학교 3학년 1학기 수학 '덧셈과 뺄셈' 단원 — 네 자리 수끼리의 덧셈에서 받아올림이 1회~3회 일어나는 종합 문제를 무작위로 섞어 출제하는 인터랙티브 웹앱입니다. 천의 자리까지 받아올림이 연속되는 복잡한 상황에서도 흔들리지 않는 자릿값 체계와 침착한 연산 집중력을 확인하는 세 자리 수 덧셈의 마지막 관문입니다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
네 자리 수 받아올림 1~3회 혼합 일·십·백·천의 자리 중 어디서든 받아올림이 1~3회 일어나는 다양한 문제를 무작위로 섞어 연산 유연성을 평가합니다. 피감수 윗줄에 받아올림 보조 칸(□)이 촘촘히 배치됩니다.
네 자릿수 받아올림 누락 정밀 진단 네 자리 수 덧셈에서 어떤 자릿수에서 받아올림 1을 놓쳤는지, 혹은 없는 자리에 1을 더했는지를 세밀히 분석합니다. 결과 화면에서 취약 자리와 취약 회차를 핀셋 지목하는 맞춤 처방.
원샷 입력 & 4칸 하이라이트 천·백·십·일 4칸의 큼직한 답안 칸을 노란 하이라이트와 함께 차례로 정직하게 채워 나갑니다. 2칸 이상 오답 시 힌트 버튼 깜빡임으로 능동적 도움 요청 유도.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 문제 수와 화면 톤에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 네자리수_덧셈_종합.html로 저장한 뒤 더블클릭합니다.

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

[역할 정의]
너는 초등학교 수학 교육과정 및 인터랙티브 웹앱 전문 프런트엔드 개발자야.
초등학교 3학년 1학기 학생들이 네 자리 수끼리의 덧셈에서 받아올림이 1~3회 일어나는 종합 문제를 세로식으로 풀어보는 단일 HTML 웹앱을 만들어줘.

[목적 및 대상]
- 대상: 초등학교 3학년 1학기 학생
- 연산 유형: 네 자리 수 덧셈 종합 (받아올림 1~3회 무작위 혼합, 합은 9999 이하 네 자리 수)

[기술 조건 및 안전장치]
1. 단일 index.html 파일 완결성: 외부 서버, DB 없이 브라우저에서 단일 파일로 100% 동작한다.
2. 무설치 Web Audio API: 외부 음원 없이 내장 발진기로 정답 딩 소리와 오답 부드러운 저음을 직접 합성한다.
3. 오프라인 폴백: CDN 미로드 시에도 시스템 폰트와 CSS 애니메이션으로 완벽 구동된다.
4. 학생 개인정보 0: 학생 실명 없이 세션 메모리로만 연산 기록을 처리한다.

[문제 생성 알고리즘]
- generateProblem() 함수로 분리: 두 수 모두 1000~8999 네 자리 수.
- 받아올림 1회~3회가 일어나는 문제 무작위 출제. 합은 9999 이하.
- 직전 문제와 동일한 수 조합 배제.

[풀이 UI 및 세로식 덧셈 인터랙션]
- 세로식 구성: 피가산수 윗줄에 받아올림 보조 칸(□) 제공 ➔ 피가산수 ➔ + 기호 ➔ 가로줄 ➔ 답안 칸(천·백·십·일 4개, 각 변 84px 이상).
- 자릿값 색상: 천=보라, 백=파랑, 십=초록, 일=빨강. 현재 입력 칸 노란 테두리 하이라이트.
- 일의 자리부터 천의 자리 순서 입력. 화면 숫자판(0~9) 및 키보드 지원.
- 원샷 입력: 한 번 입력 시 정/오 무관 즉시 다음 칸으로 이동(재입력 불가). 오답 시 빨간 배경+shake(오답 숫자 유지). 전원 정답 시 confetti 축하 파티클.
- 힌트 모드: 일 ➔ 십 ➔ 백 ➔ 천 순서 단계별 받아올림 과정 표시.

[결과 화면 및 오답 분석]
- 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수.
- 맞춤형 원인 진단: 네 자리 수에서의 받아올림 누락 및 특정 자릿수 오류 분석, 취약 자리 맞춤 보충 처방.
- "맞춤 보충 연습(5문제)" 및 오답 복습 제공.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 기본 문제 수는 5문제, 10문제, 20문제 중 어떤 것을 기본값으로 할까요?
2. 받아올림이 3회 일어나는 문제의 출제 비중을 특별히 조절할까요?
3. 전체 완료 시 큰 수 덧셈 마스터 뱃지를 표시할까요?

📚 기술·교육 참고 링크

  • 2022 개정 초등학교 수학과 교육과정: 네 자리 수 덧셈의 받아올림 알고리즘 및 연산 유창성 종합
  • Web Audio API 무설치 사운드 합성 표준 명세서
By 시간: