바이브코딩_프롬프트_곱셈

2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 곱셈 > 몇십 × 몇 곱셈 바이브 코딩 프롬프트 [유형 1] 몇십 × 몇 곱셈 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 몇십 × 몇의 곱셈(예: 30 × 4 = 120)을 세로식으로 직접 풀어보며 "십의 자리 수끼리 곱한 뒤 일의 자리에 0을 붙인다"는 원리를 익히는 인터랙티브 웹앱. 기술 조건: - HTML+CSS+JavaScript를 전부 포함한 단일 index.html 파일. - CDN 사용: 파티클은 canvas-confetti, 한글 폰트는 구글 폰트 CDN(Jua). 소리는 외부 오디오 파일 없이 Web Audio API로 직접 생성(정답=밝은 상승음과 축하 아르페지오, 오답=낮고 부드러운 톤). - CDN이 로드되지 않는 오프라인 환경에서도 문제 풀기·채점은 동작하도록 폴백 처리(파티클은 CSS 애니메이션으로 대체). 문제 생성: - 피승수는 몇십(20~90, 일의 자리가 0인 수), 승수는 몇(2~9의 한 자리 수)으로 무작위 생성. - 곱은 40~810 (두 자리 또는 세 자리 수). - 바로 직전 문제와 같은 수 조합은 나오지 않게. - 문제 생성 규칙은 generateProblem() 함수 하나로 분리해서, 다른 유형 웹앱에서 그 함수만 바꿔 재사용하기 쉽게. 풀이 UI (세로식 + 네모 칸 입력): - 문제를 항상 세로식으로: 윗줄에 피승수(몇십), 아랫줄에 승수(몇)와 곱셈 기호(×), 가로줄, 그 아래 자릿수별 정사각형 네모 답안 칸. - CSS Grid 3열 자릿수 표준 정렬: 1열=백의 자리(84px), 2열=십의 자리(84px), 3열=일의 자리(84px). - 1행 피승수: 2열에 십의 자리, 3열에 일의 자리 0. 2행 승수: 1열에 × 기호, 3열에 승수 한 자리(피승수 일의 자리 바로 아래 수직 일치 정렬). 3행 가로선(1열~3열). 4행 답안 칸. - 학습자가 오른쪽(일의 자리)부터 한 칸씩 직접 숫자 입력: 일의 자리(항상 0) → 십의 자리 → 백의 자리(세 자리 곱일 때만, 두 자리 곱이면 백의 자리 칸은 빈 칸 표시). - 원샷 입력(중요): 각 칸에 숫자는 딱 한 번만 입력 가능. 정답이든 오답이든 입력 즉시 다음 칸으로 자동 이동, 재입력·지우기 불가(시스템 게이밍 원천 차단). - 칸별 반응: 맞으면 초록색 채움 + "딩" 소리(단계마다 음이 올라가면 더 좋음) / 틀리면 빨간색 + 좌우 shake 애니메이션 + 낮은 톤, 오답 숫자는 빨간 배경에 그대로 유지. - 문제 완료: 모든 칸이 정답일 때만 canvas-confetti 파티클 + 축하 아르페지오 + "정답! 🎉". 오답이 있으면 축하 없이 "다음 문제로 넘어가요!" 메시지 후 자동 이동. - 한 문제에서 2칸 이상 틀렸으면 다음 문제 전에 힌트 버튼이 깜빡이며 제안. 음소거/음량 버튼 제공. 상황 카드: - 상단에 상황 문장(예: "사탕 30개씩 4봉지 있어요. 모두 몇 개일까요?")과 묶음 배지(예: 🍬×3묶음 배지 4개)를 표시해 곱셈의 의미(같은 수씩 여러 묶음)를 시각화. 힌트 모드: - "힌트" 버튼: 누적 더하기 방식으로 묶음을 차례로 보여주고(1봉지 30, 누적 30 → 2봉지 60 …), 핵심 원리를 강조: "십의 자리끼리의 곱셈구구(3×4=12)를 먼저 계산하고, 일의 자리에 0을 붙이면 120!" 해당 자릿수 열이 노란색으로 플래시. - 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분. 학습 기록 (분석용 데이터): - 각 문제마다 자릿수별 입력(위치, 값, 정/오)과 힌트 사용 여부를 모두 기록. 이 기록이 결과 화면 분석의 재료. 진행: - 문제 수 선택(5/10/20), 상단에 진행률 바 표시. 결과 화면 — 오답 분석: - 요약 카드: 맞힌 문제, 틀린 문제, 힌트 사용 횟수, 정답률. - 오답이 있으면 학습 기록을 분석해 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력: - 일의 자리 0 누락(일의 자리에 0 이외의 숫자 입력) → 이유: "몇십을 곱할 때는 일의 자리에 항상 0이 와요" → 해결: "10이 몇 묶음인지 생각하고 마지막에 꼭 0을 쓰는 규칙 기억하기". - 곱셈 대신 덧셈 계산(입력 조합이 피승수+승수와 일치, 예: 30+4=34) → 이유: "연산 기호(×)를 보고도 두 수를 더했어요" → 해결: "기호가 ×인지 +인지 먼저 눈으로 짚고 계산하는 습관". - 구구단(십의 자리) 실수 2회 이상 → 이유: "몇십의 앞 숫자와 승수 사이의 곱셈구구에서 실수했어요" → 해결: "앞의 한 자리 수끼리 곱셈구구를 먼저 외운 뒤 0 붙이기". - 백의 자리 놓침(세 자리 곱에서 백의 자리 오답) → 이유: "십의 자리 곱이 두 자리 수(예: 3×4=12)일 때 앞자리를 백의 자리로 옮겨 적는 게 헷갈렸어요" → 해결: "십의 자리 곱의 앞자리를 백의 자리로 옮겨 적는 연습". - 어느 것도 해당 없으면 → 이유: "순간적인 계산 실수예요" → 해결: "답 쓰기 전 십의 자리와 일의 자리 0을 눈으로 검산". - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤("~가 조금 부족해요, 이렇게 해보자!"). - 맞춤 보충 연습 버튼: 분석 결과에 맞춘 문제 5개로 미니 세트 시작(예: 일의 자리 오류가 많으면 세 자리 곱 위주 출제). - 오답 문제 목록: 각 문제의 정답과 "계산 과정 보기" 버튼(누적 더하기 과정 다시 보기). - 전부 맞혔으면: 축하 파티클 + "다음 단계: 몇십 몇 × 몇(올림 없음)에 도전해볼까?" 추천 메시지. "다시 연습" 버튼. 스타일: 밝고 부드러운 색감, 동글동글한 한글 폰트, 세로식 숫자 최소 50px, 큰 터치 영역, 스마트폰 세로 화면 반응형. 완료 기준: index.html을 열면 바로 연습 시작; 세로식 네모 칸 원샷 입력·자릿수별 즉시 채점·정답 파티클+사운드·오답 shake+사운드(오답 칸 유지)·힌트·학습 기록·오답 분석 결과 화면·맞춤 보충 연습이 모두 동작; 문제 생성 규칙(몇십×몇, 곱 40~810)이 항상 지켜져야 함. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 곱셈 > 몇십 몇 × 몇 곱셈 (올림 없음) 바이브 코딩 프롬프트 [유형 2] 몇십 몇 × 몇 곱셈(받아올림 없음) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 두 자리 수 × 한 자리 수 곱셈(예: 23 × 3 = 69)을 받아올림 없이 세로식으로 직접 풀어보며 두 자리 수 곱셈의 자릿수 원리를 익히는 인터랙티브 웹앱. 기술 조건: [유형 1과 동일 — 단일 index.html, canvas-confetti + 구글 폰트 Jua CDN, Web Audio API 사운드 합성, 오프라인 폴백] 문제 생성: - 피승수는 두 자리 수(21~89, 십의 자리 2~9, 일의 자리 1~9), 승수는 한 자리 수(2~9). - 받아올림이 전혀 없도록 생성: 십의 자리 × 승수 <= 9, 일의 자리 × 승수 <= 9 (곱은 항상 세 자리 미만, 예: 23×3=69, 32×2=64). - 바로 직전 문제와 같은 수 조합 금지. generateProblem() 함수 분리. 풀이 UI (세로식 + 네모 칸 입력): [유형 1과 동일한 CSS Grid 3열 규격] - 1행 피승수(두 자리 수: 2열 십의 자리, 3열 일의 자리), 2행 승수(1열 × 기호, 3열 승수 한 자리 수직 정렬), 3행 가로선, 4행 답안 칸(일→십 순차 원샷 입력, 곱은 항상 두 자리). - 원샷 입력(정/오 무관 즉시 다음 칸 이동, 재입력 불가), 오답 칸 빨간 배경 유지 + shake + 낮은 톤, 정답 칸 초록 채움 + 상승 "딩". - 전부 정답 시 confetti+아르페지오, 2칸 이상 오답 시 힌트 제안, 음소거/음량 버튼. 상황 카드: [유형 1과 동일] 상황 문장 + 묶음 배지(예: 연필 23개씩 3묶음) 표시. 힌트 모드: - 일의 자리 곱셈구구(3×3=9) → 십의 자리 곱셈구구(2×3=6) 순서로 단계 표시, "각 자릿수끼리 따로따로 곱하면 받아올림 없이 바로 답이 나와요!" 학습 기록, 진행: [유형 1과 동일] 자릿수별 기록 + 문제 수 선택(5/10/20) + 진행률 바. 결과 화면 — 오답 분석: [유형 1 프레임워크 동일] - 특화 진단: - 구구단 실수(특정 자릿수 오답) → "어떤 단 구구(예: 3단)에서 틀렸는지 지목 + 소리 내어 구구 외우기 처방". - 곱셈 대신 덧셈 계산(입력 조합이 두 수의 합과 일치) → 연산 기호 확인 습관 처방. - 자릿수 어긋남(일의 자리 값이 십의 자리 칸에 입력됨) → "일의 자리와 십의 자리를 따로따로 곱하는 것을 색으로 짚어가며 연습". - 일회성 실수 → 검산 습관 처방. - 맞춤 보충 연습(5문제), 다시 볼 문제들(계산 과정 보기), 전부 맞히면 축하 파티클 + "다음 단계: 십의 자리 올림 곱셈 도전!" 추천. 스타일: [유형 1과 동일] 완료 기준: 받아올림 없는 두 자리 × 한 자리 곱 생성 준수, 3열 자릿수 Grid 원샷 입력·오답 분석(구구단 지목)·보충 연습 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 곱셈 > 몇십 몇 × 몇 곱셈 (십의 자리 올림 있음) 바이브 코딩 프롬프트 [유형 3] 몇십 몇 × 몇 곱셈(십의 자리 올림) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 일의 자리 곱이 한 자리 수를 넘지 않으면서 십의 자리 곱이 10 이상(백의 자리로 올림)이 되는 두 자리 × 한 자리 곱셈(예: 41 × 3 = 123, 70×8=560 등)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: [유형 1과 동일] 문제 생성: - 피승수는 두 자리 수(12~98), 승수는 한 자리 수(2~9). - 조건: 일의 자리 × 승수 <= 9 (받아올림 없음) AND 십의 자리 × 승수 >= 10 (십의 자리 곱이 두 자리 → 백의 자리 발생). 곱은 항상 세 자리 수. - 바로 직전 문제 반복 금지, generateProblem() 함수 분리. 풀이 UI: [유형 1 규격 동일 — 3열 Grid] - 이 유형은 곱이 항상 세 자리이므로 4행의 백의 자리 칸(1열)도 활성 입력 칸. - 입력 순서: 일의 자리(3열) → 십의 자리(2열) → 백의 자리(1열). 원샷 입력(재입력 불가). - 정답 초록 채움, 오답 빨간 배경+shake+낮은 톤(오답 유지), 전부 정답 시 confetti+아르페지오, 2칸 이상 오답 시 힌트 제안. 상황 카드: [유형 1 동일] 힌트 모드: - 단계 표시: "십의 자리 곱셈구구: 4×3=12! → 십의 자리에는 2, 백의 자리로 1이 올라가요!" → "일의 자리: 1×3=3" → "정답 123!" 자릿수 열 플래시. 학습 기록, 진행: [유형 1 동일] 결과 화면 — 오답 분석: [유형 1 프레임워크 동일] - 특화 진단: - 백의 자리 누락/오류 → 이유: "십의 자리 곱이 두 자리(예: 4×3=12)일 때 앞자리 1을 백의 자리로 옮겨 적는 걸 잊었어요" → 해결: "십의 자리 곱셈구구 결과에서 앞자리는 백의 자리로, 뒷자리는 십의 자리로 옮겨 적는 연습". - 구구단 실수 / 덧셈 착각 / 일회성 실수 분석. - 맞춤 보충 연습(5문제), 다시 볼 문제들, 전부 맞히면 축하 + "다음 단계: 일의 자리에서 올림이 있는 곱셈 도전!" 추천. 스타일: [유형 1 동일] 완료 기준: 십의 자리 올림(백의 자리 생성) 조건 문제 생성 준수, 3단계 원샷 입력·오답 분석(백의 자리 옮겨 적기 진단)·보충 연습 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 곱셈 > 몇십 몇 × 몇 곱셈 (일의 자리에서 올림) 바이브 코딩 프롬프트 [유형 4] 몇십 몇 × 몇 곱셈(일의 자리 올림) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 일의 자리 곱에서 받아올림이 발생하고, 그 올림수를 십의 자리 곱에 더하는 두 자리 × 한 자리 곱셈(예: 24 × 3 = 72, 18 × 4 = 72)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: [유형 1과 동일] 문제 생성: - 피승수는 두 자리 수(12~98), 승수는 한 자리 수(2~9). - 조건: 일의 자리 × 승수 >= 10 (일의 자리에서 십의 자리로 받아올림 발생) AND (십의 자리 × 승수 + 올림수) <= 9 (십의 자리는 백의 자리로 올림되지 않음, 즉 곱은 항상 두 자리 수). - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI (받아올림 보조 메모 + 3열 Grid): - 세로식 구성: 피승수 윗줄에 "받아올림 표시 영역"(십의 자리 숫자 위에 작은 주황색 네모 또는 작은 숫자 칸) → 피승수 → 승수 및 × 기호 → 가로줄 → 답안 칸(일→십 순차 원샷 입력). - 올림수 보조 메모 기능: 일의 자리를 곱했을 때 올림수(예: 4×3=12에서 1)를 십의 자리 윗칸에 작은 숫자로 보여주어 올림수를 기억하게 도움. - 원샷 입력: 일의 자리(3열) → 십의 자리(2열). 재입력 불가. - 정답 초록 채움, 오답 빨간 배경+shake+낮은 톤(오답 숫자 유지). 전부 정답 시 confetti+아르페지오, 2칸 이상 오답 시 힌트 제안. 상황 카드, 힌트 모드: - 힌트: "일의 자리 4×3=12! → 일의 자리에 2를 쓰고, 10은 십의 자리 위로 올려 적어요" → "십의 자리 2×3=6에 올림수 1을 더하면 7!" 자릿수 플래시. 학습 기록, 진행: [유형 1 동일] 결과 화면 — 오답 분석: - 특화 진단: - **올림수 더하기 누락(가장 흔한 오류)**: 십의 자리 곱에 올림수를 더하지 않고 그냥 십의 자리 곱셈구구 값만 씀(예: 2×3=6을 그대로 써서 답을 62로 씀) → 이유: "일의 자리에서 올려준 1을 십의 자리에 더하는 걸 깜빡했어요" → 해결: "일의 자리 계산 후 올림수를 손가락으로 가리키거나 위에 먼저 적고, 십의 자리 곱한 값에 꼭 더하는 습관". - 올림수 이중 적용(올림수를 두 번 더함) / 구구단 실수 / 덧셈 착각 분석. - 맞춤 보충 연습(5문제), 다시 볼 문제들, 전부 맞히면 축하 + "다음 단계: 십과 일의 자리 모두 올림이 있는 곱셈 도전!" 추천. 스타일: [유형 1 동일] 완료 기준: 일의 자리 올림 발생 AND 십의 자리 올림 없음 조건 준수, 올림수 더하기 누락 진단 오답 분석·보충 연습 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 곱셈 > 몇십 몇 × 몇 곱셈 (십, 일의 자리 올림 있음) 바이브 코딩 프롬프트 [유형 5] 몇십 몇 × 몇 곱셈(십, 일의 자리 모두 올림) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 일의 자리에서 십의 자리로 올림이 일어나고, 십의 자리에서도 백의 자리로 올림이 일어나는 연속 받아올림 곱셈(예: 48 × 3 = 144, 76 × 4 = 304)을 세로식으로 직접 풀어보는 인터랙티브 웹앱. 기술 조건: [유형 1과 동일] 문제 생성: - 피승수는 두 자리 수, 승수는 한 자리 수(2~9). - 조건: 일의 자리 × 승수 >= 10 (일의 자리 올림 발생) AND (십의 자리 × 승수 + 올림수) >= 10 (십의 자리에서도 백의 자리로 올림 발생). 곱은 항상 세 자리 수(100~891). - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 3열 Grid 규격, 곱이 세 자리이므로 1열(백의 자리), 2열(십의 자리), 3열(일의 자리) 모두 활성화. - 십의 자리 위에 일의 자리 올림수 보조 표시. - 입력 순서: 일의 자리(3열) → 십의 자리(2열) → 백의 자리(1열) 순차 원샷 입력. - 정답 초록 채움, 오답 빨간 배경+shake+낮은 톤(오답 유지), 전부 정답 시 confetti+아르페지오, 2칸 이상 오답 시 힌트 제안. 상황 카드, 힌트 모드: - 힌트: "1단계 일의 자리: 8×3=24 → 4 쓰고 2 올림" → "2단계 십의 자리: 4×3=12, 여기에 올림수 2를 더하면 14! → 4는 십의 자리에, 1은 백의 자리에" → "정답 144!" 연속 단계 애니메이션. 학습 기록, 진행: [유형 1 동일] 결과 화면 — 오답 분석: - 특화 진단: - **일의 자리 올림수 더하기 누락**: 십의 자리 계산 시 올림수를 더하지 않음(예: 4×3=12로 계산해 답을 124로 씀). - **백의 자리 누락/착각**: 십의 자리 계산(14)에서 십의 자리에만 쓰고 백의 자리를 빠뜨리거나 자릿값 정렬 오류. - 구구단 오답 / 연쇄 올림 처리 혼동 분석. - 맞춤 보충 연습(5문제), 다시 볼 문제들, 전부 맞히면 축하 + "다음 단계: 곱셈 종합 도전!" 추천. 스타일: [유형 1 동일] 완료 기준: 일·십의 자리 모두 올림 발생 조건 준수, 3단계 원샷 입력·연쇄 올림 누락 진단·보충 연습 동작. --- 2022 개정교육과정 > 초등학교 > 3학년 1학기 > 수학 > 연산 > 곱셈 > 몇십 몇 × 몇 곱셈 (종합) 바이브 코딩 프롬프트 [유형 6] 몇십 몇 × 몇 곱셈(종합) 연습 웹앱을 만들어줘. 목적·대상: 초등학교 3학년 1학기 학생이 앞서 배운 모든 유형(올림 없음, 십의 자리 올림, 일의 자리 올림, 두 자리 모두 올림)의 두 자리 × 한 자리 곱셈을 무작위로 섞어 풀며 종합적인 곱셈 연산 유창성을 기르는 인터랙티브 웹앱. 기술 조건: [유형 1과 동일] 문제 생성: - 피승수는 두 자리 수(12~99), 승수는 한 자리 수(2~9). - 아래 4가지 올림 유형 중 무작위로 균등하게 섞어서 출제: 1) 올림 없음 (예: 23×3=69) 2) 십의 자리만 올림 (예: 41×3=123) 3) 일의 자리만 올림 (예: 24×3=72) 4) 십과 일의 자리 모두 올림 (예: 48×3=144) - 직전 문제 반복 금지, generateProblem() 분리. 풀이 UI: - 3열 Grid 규격. 문제에 따라 곱이 두 자리면 십·일 2칸, 곱이 세 자리면 백·십·일 3칸으로 자동 전환. - 일의 자리부터 원샷 입력(재입력 불가). - 정답 초록 채움, 오답 빨간 배경+shake+낮은 톤, 전부 정답 시 confetti+아르페지오, 2칸 이상 오답 시 힌트 제안. 상황 카드, 힌트 모드: [유형 1 동일, 해당 문제의 올림 유형에 맞는 맞춤 힌트 표시] 학습 기록, 진행: [유형 1 동일] 각 문제의 올림 유형(0~3)도 함께 기록하여 분석. 결과 화면 — 종합 오답 진단 및 취약 유형 분류: - 요약 카드(맞힌 문제, 틀린 문제, 힌트, 정답률). - **올림 유형별 정답률 통계 카드**: [올림 없음: 100%] / [십의 자리 올림: 80%] / [일의 자리 올림: 40%] / [연속 올림: 20%] 처럼 유형별 강점과 약점을 한눈에 보여줌. - 가장 오답이 많은 특정 유형을 지목: "일의 자리에서 올려주는 곱셈에서 실수가 잦아요! 올림수를 십의 자리에 더하는 연습을 더 해보자!" - 맞춤 보충 연습: 학습자가 **가장 많이 틀린 취약 올림 유형의 문제만 5개** 모아서 집중 훈련 시작. - 다시 볼 문제들(계산 과정 보기), 전부 맞히면 화면 가득 축하 파티클 + "3학년 1학기 곱셈 완전 정복! 🎉" 칭찬. 스타일: [유형 1 동일] 완료 기준: 4개 올림 유형 균등 출제, 2칸/3칸 자동 전환 원샷 입력, 올림 유형별 취약점 분류 진단·취약 유형 집중 보충 연습 동작.