바이브코딩_프롬프트_17유형

2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 몇백 + 몇백 몇십 덧셈 (받아올림 없음) 바이브 코딩 프롬프트 [유형 1] 몇백 + 몇백 몇십의 덧셈(받아올림 없음) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 받아올림이 없는 "몇백 + 몇백 몇십" 덧셈(예: 300 + 250 = 550)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. - CDN 사용: 파티클은 canvas-confetti(https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js), 한글 폰트는 구글 폰트 CDN(Jua). 소리는 외부 오디오 파일 없이 Web Audio API로 직접 생성(정답=밝은 "딩" 상승음과 축하 아르페지오, 오답=낮고 부드러운 톤). - CDN이 로드되지 않는 오프라인 환경에서도 문제 풀기·채점은 동작하도록 폴백 처리(파티클은 CSS 애니메이션 대체, 폰트는 시스템 한글 글꼴). 문제 생성: - 두 수 중 하나는 몇백(100~900의 백 단위 수), 다른 하나는 몇백 몇십(110~990, 일의 자리가 0인 수)으로 무작위 생성, 순서는 뒤바뀌어도 좋음. - 합은 항상 990 이하(세 자리)로만 생성. 바로 직전 문제와 같은 수 조합은 나오지 않게. - 문제 생성 규칙은 generateProblem() 함수 하나로 분리해서 재사용·수정이 쉽게. 풀이 UI (세로식 + 네모 칸 입력): - 문제를 항상 세로식으로: 피가산수 → + 기호 → 가로줄 → 자릿수별 정사각형 네모 답안 칸(일·십·백 3개). 칸은 한 변 84px 이상, 자릿값별 색 구분(백=파랑, 십=초록, 일=빨강), 현재 입력 칸은 노란색 테두리 하이라이트. - 학습자가 오른쪽(일의 자리)부터 한 칸씩 직접 숫자 입력. 화면 숫자판(0~9)과 키보드 둘 다 지원. 답의 일의 자리 0도 학습자가 직접 입력(자릿값 학습). - 원샷 입력: 각 칸의 숫자는 한 번만 입력하고, 정답·오답 관계없이 입력 즉시 다음 칸으로 자동 이동(재입력 불가 — 찍어서 맞추는 것 차단). - 칸별 반응: 맞으면 초록색 채움+"딩" 소리 / 틀리면 빨간 배경+좌우 shake+낮은 톤, 입력한 오답 숫자는 그대로 남음. - 모든 칸을 채우면 문제 완료: 전부 정답일 때만 confetti 파티클+축하 아르페지오+"정답! 🎉". 오답이 있으면 축하 없이 "다음 문제로 넘어가요!" 후 자동 이동. - 한 문제에서 2칸 이상 틀리면 다음 문제 전에 힌트 버튼이 깜빡이며 "다음 문제는 힌트를 눌러 도움을 받아볼까? 💡" 제안. - 음소거/음량 버튼 제공. 힌트 모드: - "힌트" 버튼: 십의 자리 → 백의 자리 순서로 계산 과정을 애니메이션으로 표시(해당 자릿수 열이 노란색으로 플래시). 예: 400 + 380 → 십의 자리: 0+8=8, 백의 자리: 4+3=7 → 780. - 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분. 학습 기록: 각 문제마다 자릿수별 입력(위치·값·정오)과 힌트 사용 여부를 모두 기록 — 결과 화면 분석의 재료. 진행: 문제 수 선택(5/10/20), 상단 진행률 바 표시. 결과 화면 — 오답 분석: - 요약 카드: 맞힌 문제, 틀린 문제, 틀린 칸 수, 힌트 사용 횟수. - 학습 기록을 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력: - 특정 자릿수 반복 오류(같은 자릿수에서 2문제 이상) → 그 자릿수 보충 연습 처방. - 자릿수 어긋남(입력값이 옆 자리 정답과 동일) → 자릿값 색을 짚어가며 읽는 습관. - ±1 착각(입력값=정답±1) → "받아올림을 미리 반영한 착각" → 각 자리끼리만 더하는 연습. - 일의 자리 0 실수(일의 자리만 틀림) → 빈 자릿값은 0 확인 연습. - 해당 없으면 일회성 실수 → 검산 습관. 모든 진단은 [틀린 곳]+[이유]+[해결 방법] 형식, 격려 톤. - "맞춤 보충 연습" 버튼: 틀린 자릿수 위주 문제 5개 미니 세트. - "다시 볼 문제들": 오답 문제 정답 표시+"계산 과정 보기" 재생. - 전부 맞히면: 가득 축하 파티클+"다음 단계: 받아올림 1번 덧셈에 도전해볼까?" 추천. "다시 연습" 버튼. 스타일: 밝고 부드러운 색감, 동글동글한 한글 폰트, 큰 글자와 큰 터치 영역, 여백은 절제해 화면을 꽉 차게, 스마트폰 세로 화면 반응형. 완료 기준: index.html을 열면 바로 연습이 시작되고, 문제 생성 규칙(몇백+몇백몇십, 받아올림 없음, 합 세 자리)이 항상 지켜지며, 원샷 입력·자릿수별 채점·반응 효과·힌트·학습 기록·오답 분석·맞춤 보충 연습이 모두 동작해야 해. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 자리 수 덧셈 (받아올림 없음) 바이브 코딩 프롬프트 [유형 2] 세 자리 수 덧셈(받아올림 없음) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 받아올림이 없는 세 자리 수끼리의 덧셈(예: 234 + 152 = 386)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. - CDN 사용: 파티클은 canvas-confetti, 한글 폰트는 구글 폰트 Jua. 소리는 Web Audio API로 직접 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 몇백 몇십 몇(100~999, 백의 자리는 1~9)으로 무작위 생성. - 일·십·백 모든 자리에서 받아올림이 일어나지 않게(각 자리의 합이 9 이하) 생성. 합은 세 자리. - 바로 직전 문제와 같은 수 조합은 나오지 않게. 문제 생성 규칙은 generateProblem() 함수 하나로 분리. 풀이 UI: - 세로식 표시: 피가산수 → + 기호 → 가로줄 → 답안 칸(일·십·백 3개, 84px 이상). 자릿값별 색 구분(백=파랑, 십=초록, 일=빨강). - 일의 자리부터 입력. 원샷 입력(재입력 불가, 즉시 다음 칸 이동). - 칸별 반응: 맞으면 초록 채움+"딩" / 틀리면 빨간 배경+shake+낮은 톤(오답 숫자 유지). - 전부 정답 시 confetti+축하 아르페지오, 오답 시 자동 이동. 2칸 이상 오답 시 힌트 제안. 음소거/음량 버튼. 힌트 모드: - 일 → 십 → 백 순서로 계산 과정 표시(해당 열 플래시). 예: 234 + 152 → 일: 4+2=6, 십: 3+5=8, 백: 2+1=3 → 386. 학습 기록: 자릿수별 입력과 힌트 기록. 진행: 문제 수 선택(5/10/20), 진행률 바. 결과 화면 — 오답 분석: - 요약 카드(맞힌 문제, 틀린 문제, 틀린 칸 수, 힌트). - 분석: 특정 자릿수 오류 / 자릿수 어긋남 / ±1 착각(받아올림 착각) / 일회성 실수 진단 및 해결 방법. - "맞춤 보충 연습" 버튼, "다시 볼 문제들", 전부 맞히면 축하 파티클+"다음 단계: 받아올림 1번 덧셈 도전!" 추천. 스타일: 밝은 색감, 큰 터치 영역, 여백 절제, 반응형. 완료 기준: 문제 생성 규칙(세 자리+세 자리, 무받아올림) 준수, 원샷 입력·오답 분석·보충 연습 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 자리 수 덧셈 (받아올림 1번) 바이브 코딩 프롬프트 [유형 3] 세 자리 수 덧셈(받아올림 1번) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 받아올림이 정확히 1번 일어나는 세 자리 수 덧셈(예: 248 + 135 = 383)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 세 자리 수(100~999). - 받아올림이 일의 자리에서 십의 자리로(일의 자리 합 >= 10, 십의 자리 합+1 <= 9) 또는 십의 자리에서 백의 자리로(일의 자리 합 <= 9, 십의 자리 합 >= 10) 정확히 한 곳에서만 발생. - 합은 세 자리(999 이하). 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 세로식: 피가산수 윗줄에 받아올림 보조 칸(□) → 피가산수 → + 기호 → 가로줄 → 답안 칸(일·십·백 3개, 84px 이상). - 일의 자리부터 입력. 원샷 입력(재입력 불가, 즉시 이동). - 정답 초록 채움, 오답 빨간 배경+shake(오답 숫자 유지). 전부 정답 시 confetti+축하 아르페지오. 2칸 이상 오답 시 힌트 제안. 음소거/음량 버튼. 힌트 모드: - 일의 자리부터 계산 과정 표시. 받아올림 자리는 "8 + 5 = 13 → 3을 쓰고 1을 받아올림!" 시각 애니메이션 강조. 학습 기록: 자릿수별 입력과 힌트 기록. 결과 화면 — 오답 분석: - 요약 카드(맞힌 문제, 틀린 문제, 틀린 칸 수, 힌트). - 분석: - 받아올림 누락(입력값 = 정답 - 1, 받아올림 받는 자리) → "받아올림한 1을 더하는 것을 잊었어요!" 처방. - 받아올림 이중 적용(입력값 = 정답 + 1) → "받아올림이 없는 자리에 1을 더했어요!" 처방. - 특정 자릿수 오류 / 자릿수 어긋남 / 일회성 실수 분석. - "맞춤 보충 연습" 버튼, "다시 볼 문제들", 전부 맞히면 파티클+"다음 단계: 받아올림 2번 덧셈 도전!" 추천. 완료 기준: 받아올림 정확히 1번 문제 생성, 받아올림 누락/이중적용 진단·원샷 입력·보충 연습 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 자리 수 덧셈 (받아올림 2번) 바이브 코딩 프롬프트 [유형 4] 세 자리 수 덧셈(받아올림 2번) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 연속 2번 받아올림이 일어나는 세 자리 수 덧셈(예: 468 + 273 = 741)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 세 자리 수(100~999). - 일의 자리(합 >= 10)와 십의 자리(합+1 >= 10)에서 연속 2번 받아올림 발생. - 백의 자리 합+1은 9 이하로 합은 여전히 세 자리(999 이하). - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 세로식: 피가산수 위 받아올림 보조 칸 → 피가산수 → + 기호 → 가로줄 → 답안 칸(일·십·백 3개). - 일의 자리부터 입력. 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake(오답 숫자 유지). 전부 정답 시 confetti. 2칸 이상 오답 시 힌트 제안. 힌트 모드: - 일(8+3=11 → 1 쓰고 1 올림) → 십(1+6+7=14 → 4 쓰고 1 올림) → 백(1+4+2=7) 단계별 애니메이션. 결과 화면 — 오답 분석: - 요약 카드. - 분석: 연속 받아올림 누락(십·백 모두 정답-1) / 한 자리 받아올림 누락 / 특정 자릿수 오류 분석 및 맞춤 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"다음 단계: 받아올림 3번 덧셈 도전!" 추천. 완료 기준: 연속 2회 받아올림(합 세 자리) 준수, 연속 받아올림 누락 진단·원샷 입력 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 자리 수 덧셈 (받아올림 3번, 합이 네 자리) 바이브 코딩 프롬프트 [유형 5] 세 자리 수 덧셈(받아올림 3번, 합이 네 자리) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 모든 자리에서 받아올림이 일어나 합이 네 자리 수가 되는 덧셈(예: 789 + 567 = 1356)을 세로식으로 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 세 자리 수(100~999). - 일의 자리(합 >= 10), 십의 자리(합+1 >= 10), 백의 자리(합+1 >= 10) 모두 받아올림 발생 → 최종 합은 반드시 1000 이상 네 자리 수(천의 자리는 항상 1). - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI (4칸 답안 칸): - 답안 칸 4개(천·백·십·일). 자릿값 색(천=보라, 백=파랑, 십=초록, 일=빨강). - 일의 자리부터 천의 자리 순서로 입력. 천의 자리(항상 1)도 직접 입력하여 네 자리 수 확장 체감. - 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake(오답 숫자 유지). 전부 정답 시 confetti. 힌트 모드: - 일 → 십 → 백 → 천(올라온 1 그대로 내려옴) 순서 애니메이션. 결과 화면 — 오답 분석: - 요약 카드. - 분석: 천의 자리 누락(천의 자리를 안 쓰거나 틀림) → "합이 1000이 넘어서 천의 자리에 1이 생겼다는 점을 놓쳤어요!" 처방 / 연속 받아올림 누락 분석. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 축하 파티클+"세 자리 덧셈 마스터! 다음은 네 자리 수 덧셈 도전!" 추천. 완료 기준: 받아올림 3회(네 자리 합) 준수, 4칸 원샷 입력·천의 자리 누락 진단 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 네 자리 수 + 세 자리 수 바이브 코딩 프롬프트 [유형 6] 네 자리 수 + 세 자리 수 덧셈 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 자릿수가 다른 두 수(네 자리 수 + 세 자리 수, 예: 2345 + 123 = 2468)를 세로식에서 오른쪽(일의 자리)을 맞추어 정렬하고 덧셈하는 원리를 익히는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 직접 생성. CDN 폴백 처리. 문제 생성: - 첫 번째 수는 네 자리 수(1000~8999), 두 번째 수는 세 자리 수(100~999). - 자릿수 정렬 원리 학습이 핵심이므로 기본 설정은 받아올림 없는 문제(각 자리 합 <= 9). 합은 네 자리 수. - 직전 문제 반복 금지, generateProblem() 함수 분리. 풀이 UI (자릿수 정렬 세로식 + 4칸 답안 칸): - 세로식 정렬(핵심): 세 자리 수의 천의 자리 칸은 비워두고, 일·십·백의 자리가 네 자리 수와 정확히 오른쪽 정렬되도록 그리드 구성. - 답안 칸은 4개(천·백·십·일). 자릿값 색(천=보라, 백=파랑, 십=초록, 일=빨강). - 일의 자리부터 천의 자리 순서로 입력. 천의 자리는 더할 수가 없으므로 네 자리 수의 천의 자리 숫자가 그대로 내려옴(학생이 직접 입력). - 원샷 입력(재입력 불가, 즉시 이동). 정답 초록 채움, 오답 빨간 배경+shake(오답 숫자 유지). 전부 정답 시 confetti. 힌트 모드: - 세 자리 수를 오른쪽에 맞추어 정렬하는 안내 → 일 → 십 → 백 → 천(그대로 내려옴) 순서 애니메이션. 결과 화면 — 오답 분석: - 요약 카드. - 분석: 자릿수 정렬 오류(세 자리 수를 왼쪽/천의 자리에 맞추어 더함) → "세로식에서는 항상 오른쪽(일의 자리)을 맞추어야 해요!" 처방 / 천의 자리 누락 분석. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"다음 단계: 네 자리 수 + 네 자리 수 도전!" 추천. 완료 기준: 세 자리 수 오른쪽 정렬 레이아웃 완비, 자릿수 정렬 오류 감지 및 진단 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 네 자리 수 + 네 자리 수 바이브 코딩 프롬프트 [유형 7] 네 자리 수 + 네 자리 수 덧셈 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 네 자리 수끼리의 덧셈(예: 2345 + 1234 = 3579)을 자릿수에 맞추어 세로식으로 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 네 자리 수(1000~8999). - 자릿수 확장 기본 단계이므로 초기 설정은 받아올림 없는 문제(각 자리 합 <= 9). 합은 네 자리 수(9999 이하). - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 세로식: 피가산수 → + 기호 → 가로줄 → 답안 칸(천·백·십·일 4개). - 일의 자리부터 천의 자리 순서 입력. 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake(오답 숫자 유지). 전부 정답 시 confetti. 힌트 모드: - 일 → 십 → 백 → 천 순서로 각 자리끼리 더하는 과정 표시. 결과 화면 — 오답 분석: - 특정 자릿수 반복 오류 / 자릿수 어긋남 / 일회성 실수 분석. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"네 자리 수 덧셈 성공! 다음은 뺄셈에 도전해볼까?" 추천. 완료 기준: 네 자리 수 세로식 정렬 완비, 4칸 원샷 입력·오답 분석·보충 연습 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 몇백 몇십 − 몇백 (받아내림 없음) 바이브 코딩 프롬프트 [유형 8] 몇백 몇십 − 몇백 뺄셈(받아내림 없음) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 받아내림이 없는 "몇백 몇십 − 몇백" 형태의 뺄셈(예: 750 − 300 = 450)을 세로식으로 직접 풀어보며 뺄셈의 기본 자릿값 원리를 익히는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 첫 번째 수는 몇백 몇십(210~990, 일의 자리는 0), 두 번째 수는 몇백(100~800). 차는 항상 양수. - 받아내림 없음. 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 세로식: 나뉨수 → − 기호 → 감수 → 가로줄 → 답안 칸(일·십·백 3개, 84px 이상). - 일의 자리부터 백의 자리 순서 입력. 일의 자리(0−0=0)도 학생이 직접 0을 입력하여 자릿값 체감. - 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake(오답 숫자 유지). 전부 정답 시 confetti. 힌트 모드: - 일(0−0=0) → 십(뺄 것이 없으니 그대로) → 백(백끼리 뺌) 순서 애니메이션. 결과 화면 — 오답 분석: - 분석: 뺄셈 대신 덧셈 실수(더하기로 계산함) → 연산 기호 확인 처방 / 일의 자리 0 실수(빈 자리 0 채우기) 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"다음 단계: 세 자리 수 뺄셈 도전!" 추천. 완료 기준: 몇백 몇십 − 몇백 생성 준수, 뺄셈 세로식 원샷 입력·덧셈 착각 오답 진단 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 자리 수 뺄셈 (받아내림 없음) 바이브 코딩 프롬프트 [유형 9] 세 자리 수 뺄셈(받아내림 없음) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 받아내림이 없는 세 자리 수끼리의 뺄셈(예: 579 − 243 = 336)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 세 자리 수(100~999). 첫 번째 수의 각 자리 숫자가 두 번째 수보다 크거나 같음(받아내림 전혀 없음). 차는 세 자리 수. - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 세로식: 나뉨수 → − 기호 → 감수 → 가로줄 → 답안 칸(일·십·백 3개). - 일의 자리부터 입력. 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. 전부 정답 시 confetti. 힌트 모드: - 일 → 십 → 백 순서로 각 자리끼리 빼는 과정 표시. 결과 화면 — 오답 분석: - 뺄셈 대신 덧셈 실수 / 특정 자릿수 뺄셈 오류 / 일회성 실수 진단 및 맞춤 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"다음 단계: 받아내림 1번 뺄셈 도전!" 추천. 완료 기준: 세 자리 뺄셈(무받아내림) 준수, 원샷 입력·오답 분석·보충 연습 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 자리 수 뺄셈 (받아내림 1번) 바이브 코딩 프롬프트 [유형 10] 세 자리 수 뺄셈(받아내림 1번) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 받아내림이 정확히 1번 일어나는 세 자리 수 뺄셈(예: 543 − 218 = 325)을 세로식으로 직접 풀어보며 받아내림의 원리를 익히는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 세 자리 수(100~999), 첫 번째 수 > 두 번째 수. - 일의 자리 또는 십의 자리 중 정확히 한 곳에서만 받아내림 발생. - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI (받아내림 보조 메모 + 세로식): - 피감수 윗줄에 받아내림 보조 표시(10 빌려준 자리 사선 및 -1 표시, 빌려받은 자리에 작은 '10' 표시) → 피감수 → − 기호 → 감수 → 가로줄 → 답안 칸(일·십·백 3개). - 일의 자리부터 입력. 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. 전부 정답 시 confetti. 힌트 모드: - 받아내림 과정 단계별 표시: "3에서 8을 뺄 수 없으니 십의 자리에서 10을 빌려와요! 13 − 8 = 5!" 애니메이션 시각화. 결과 화면 — 오답 분석: - 위아래 거꾸로 뺄셈(작은 수에서 큰 수를 못 빼니 아래에서 위를 뺀 값 입력) → "아래에서 위를 빼면 안 돼요! 윗자리에서 10을 빌려와야 해요!" 처방. - 받아내림 후 1 줄이기 누락(빌려준 자리에서 1을 빼지 않음) → "10을 빌려준 자리는 1 줄어들어요!" 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"다음 단계: 받아내림 2번 뺄셈 도전!" 추천. 완료 기준: 받아내림 1회 문제 준수, 거꾸로 뺄셈/빌려준 자리 감산 누락 진단 오답 분석 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 자리 수 뺄셈 (받아내림 2번) 바이브 코딩 프롬프트 [유형 11] 세 자리 수 뺄셈(받아내림 2번) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 연속 2번 받아내림이 일어나는 세 자리 수 뺄셈(예: 523 − 148 = 375)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 세 자리 수(100~999), 첫 번째 수 > 두 번째 수. - 일의 자리와 십의 자리 모두에서 연속 받아내림 발생. - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 세로식: 피감수 위 연속 받아내림 보조 표시 → 피감수 → − 기호 → 감수 → 가로줄 → 답안 칸(일·십·백 3개). - 일의 자리부터 입력. 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. 전부 정답 시 confetti. 힌트 모드: - 일의 자리 받아내림 → 십의 자리도 모자라 백의 자리에서 다시 빌려오는 연속 받아내림 단계별 애니메이션. 결과 화면 — 오답 분석: - 연속 받아내림 누락(줄어든 숫자를 반영하지 않음) / 거꾸로 뺄셈 / 특정 자릿수 오류 분석 및 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"세 자리 뺄셈 마스터! 다음은 네 자리 수 뺄셈 도전!" 추천. 완료 기준: 연속 2회 받아내림 준수, 연속 받아내림 누락 진단·원샷 입력 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 네 자리 수 − 세 자리 수 바이브 코딩 프롬프트 [유형 12] 네 자리 수 − 세 자리 수 뺄셈 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 네 자리 수에서 세 자리 수를 빼는 계산(예: 2345 − 123 = 2222)을 오른쪽(일의 자리)을 맞추어 정렬하고 푸는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 첫 번째 수는 네 자리 수(1000~8999), 두 번째 수는 세 자리 수(100~999). - 초기 기본 설정은 받아내림 없는 문제. 차는 네 자리 수. - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI (자릿수 정렬 세로식 + 4칸 답안 칸): - 세로식 정렬(핵심): 세 자리 감수의 천의 자리는 비워두고 일·십·백의 자리가 네 자리 수와 정확히 오른쪽 정렬되도록 구성. - 답안 칸은 4개(천·백·십·일). 일의 자리부터 천의 자리 순서 입력. - 천의 자리는 뺄 것이 없으므로 첫 번째 수의 천의 자리 숫자가 그대로 내려옴(학생이 직접 입력). - 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. 전부 정답 시 confetti. 힌트 모드: - 세 자리 수를 오른쪽에 맞추어 정렬하는 안내 → 일 → 십 → 백 → 천(그대로 내려옴) 순서 애니메이션. 결과 화면 — 오답 분석: - 자릿수 정렬 오류(세 자리 수를 천의 자리에 맞춰서 뺌) / 천의 자리 누락 / 뺄셈 대신 덧셈 실수 분석 및 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"다음 단계: 네 자리 수 − 네 자리 수 도전!" 추천. 완료 기준: 네 자리-세 자리 오른쪽 정렬 세로식 완비, 정렬 오류 감지 및 원샷 입력 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 네 자리 수 − 네 자리 수 바이브 코딩 프롬프트 [유형 13] 네 자리 수 − 네 자리 수 뺄셈 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 네 자리 수끼리의 뺄셈(예: 3579 − 2345 = 1234)을 자릿수에 맞추어 세로식으로 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 네 자리 수(1000~8999), 첫 번째 수 > 두 번째 수. - 초기 기본 설정은 각 자리별 윗수 >= 아랫수인 받아내림 없는 문제. 차는 네 자리 수. - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 세로식: 피감수 → − 기호 → 감수 → 가로줄 → 답안 칸(천·백·십·일 4개). - 일의 자리부터 천의 자리 순서 입력. 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. 전부 정답 시 confetti. 힌트 모드: - 일 → 십 → 백 → 천 순서로 각 자리끼리 빼는 과정 표시. 결과 화면 — 오답 분석: - 특정 자릿수 뺄셈 오류 / 뺄셈 대신 덧셈 실수 / 일회성 실수 분석. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클+"네 자리 뺄셈 완벽! 다음은 종합 연습에 도전해볼까?" 추천. 완료 기준: 네 자리 뺄셈 정렬 완비, 4칸 원샷 입력·오답 분석 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 자리 수 덧셈 종합 (받아올림 섞임) 바이브 코딩 프롬프트 [유형 14] 세 자리 수 덧셈 종합(받아올림 섞임) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 받아올림이 없거나 1번, 2번, 3번 일어나는 세 자리 수 덧셈 문제들을 무작위로 섞어 풀며 상황 판단력과 종합 연산력을 기르는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 세 자리 수(100~999). - 받아올림 0회, 1회, 2회, 3회(합 네 자리) 중 무작위로 골고루 출제. 합은 세 자리 또는 네 자리. - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 합의 자릿수에 맞추어 답안 칸이 3칸 또는 4칸으로 동적 표시. - 받아올림 보조 칸 지원. 일의 자리부터 입력. 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. 전부 정답 시 confetti. 힌트 모드: - 각 문제의 받아올림 횟수에 맞추어 일→십→백(→천) 단계별 애니메이션 동적 제공. 결과 화면 — 오답 분석: - 요약 카드(맞힌 문제, 틀린 문제, 틀린 칸 수, 힌트). - **종합 진단(핵심)**: 오답이 발생한 문제들의 받아올림 횟수를 분류하여, "받아올림 2번 문제에서 자주 틀려요! 유형 4를 다시 복습하면 좋겠어요!"처럼 취약 유형을 직접 지목. - "맞춤 보충 연습"(취약했던 받아올림 횟수 위주 5문제), "다시 볼 문제들", 전부 맞히면 축하 파티클. 완료 기준: 0~3회 받아올림 무작위 혼합 출제 준수, 받아올림 유형별 취약점 진단 및 보충 연습 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 네 자리 수 덧셈 종합 (받아올림 섞임) 바이브 코딩 프롬프트 [유형 15] 네 자리 수 덧셈 종합(받아올림 섞임) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 네 자리 수끼리의 덧셈에서 받아올림이 1~3회 일어나는 종합 문제를 세로식으로 풀어보는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 두 수 모두 네 자리 수(1000~8999). 받아올림이 1회~3회 일어나는 문제 무작위 출제. 합은 9999 이하. - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 세로식: 피가산수 위 받아올림 보조 칸 → 가로줄 → 답안 칸(천·백·십·일 4개). - 일의 자리부터 천의 자리 순서 입력. 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. 전부 정답 시 confetti. 힌트 모드: - 일 → 십 → 백 → 천 순서 단계별 받아올림 과정 표시. 결과 화면 — 오답 분석: - 네 자리 수에서의 받아올림 누락 및 특정 자릿수 오류 분석. 취약 자리 맞춤 보충 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 축하 파티클. 완료 기준: 네 자리 받아올림 섞임 출제 준수, 4칸 원샷 입력·받아올림 누락 진단 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 수의 덧셈/뺄셈 (세 자리 수) 바이브 코딩 프롬프트 [유형 16] 세 수의 덧셈/뺄셈(세 자리 수) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 세 개의 세 자리 수가 덧셈과 뺄셈으로 섞여 있는 식(예: 350 + 240 − 180 = □ 또는 670 − 230 + 150 = □)을 '앞에서부터 순서대로 2단계로 나누어 푸는 원리'를 익히는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 세 수 모두 세 자리 수(100~900). 연산자 조합은 (+, +), (+, −), (−, +), (−, −) 중 무작위. - 앞에서부터 차례대로 계산할 때 중간 결과와 최종 결과가 모두 양수(세 자리 수)가 되도록 수치 제약. - 초기 설정은 중간 및 최종 계산에서 받아올림/받아내림이 없거나 1회 이하인 적정 난이도 유지. 직전 문제 반복 금지. 풀이 UI (2단계 단계별 카드 + 세로식/가로식 연계): - 상단에 전체 가로식(예: 350 + 240 − 180 = □) 표시. - 하단에 [1단계: 350 + 240 계산하기] 세로식 네모 칸 입력 → 1단계 완료 시 맞힌 중간 결과(590)가 자동으로 다음 연산으로 연결되어 [2단계: 590 − 180 계산하기] 세로식 네모 칸으로 순차 진행. - 각 단계의 세로식은 일의 자리부터 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. - 2단계를 모두 마치면 confetti 파티클+축하 아르페지오. 음소거/음량 버튼. 힌트 모드: - "세 수의 계산은 반드시 왼쪽(앞)에서부터 차례대로 두 수씩 묶어서 풀어요!" 핵심 원리 강조 애니메이션. 결과 화면 — 오답 분석: - 1단계(첫 번째 계산) 오류인지, 2단계(중간 결과를 이용한 두 번째 계산) 오류인지 구분 진단. - 뒤의 두 수를 먼저 계산한 오류 패턴 감지 시 → "앞에서부터 순서대로 계산해야 해요!" 원칙 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 파티클. 완료 기준: 세 수 혼합식 2단계 순차 풀이 UI 완비, 순서 오류 감지 및 원샷 입력 완비. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 덧셈과 뺄셈 > 세 수의 덧셈/뺄셈 (네 자리 수) 바이브 코딩 프롬프트 [유형 17] 세 수의 덧셈/뺄셈(네 자리 수) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 세 개의 네 자리 수 혼합 계산(예: 2540 + 1230 − 1650 = □)을 앞에서부터 순서대로 2단계 세로식으로 나누어 해결하는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript 단일 index.html 파일. - CDN: canvas-confetti, 구글 폰트 Jua. Web Audio API 사운드 생성. CDN 폴백 처리. 문제 생성: - 세 수 모두 네 자리 수(1000~8000). (+, +), (+, −), (−, +), (−, −) 조합. - 중간 결과 및 최종 결과 모두 1000~9999 범위 유지. - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI (네 자리 2단계 단계별 세로식 연계): - 전체 가로식 표시 → [1단계 네 자리 계산] 4칸 답안 세로식 → 중간 결과가 자동으로 2단계 식의 첫 번째 수로 진입 → [2단계 네 자리 계산] 4칸 답안 세로식 순차 진행. - 일의 자리부터 천의 자리 순서 원샷 입력. 정답 초록 채움, 오답 빨간 배경+shake. - 2단계 완료 시 confetti 파티클+축하 아르페지오. 힌트 모드: - 1단계와 2단계 계산 과정을 순차적으로 애니메이션 안내. 결과 화면 — 오답 분석: - 1단계 vs 2단계 오답 분석, 네 자리 수 자릿수 정렬 및 연산 실수 처방. - "맞춤 보충 연습", "다시 볼 문제들", 전부 맞히면 "초등학교 3학년 1학기 덧셈과 뺄셈 전체 과정 완벽 마스터!" 최종 수료 축하 연출. 완료 기준: 네 자리 세 수 혼합 2단계 연계 UI 완비, 단계별 원샷 입력 및 최종 종합 수료 연출 완비.