2026년 9월 15일 화요일

[바이브 코딩 영상] 제미나이 10초 동영상 4번 이어붙이기! 컷 편집 없이 40초 스토리 애니메이션 완성하는 팁

🎬 제미나이 동영상 만들기 대발견: 10초 클립 4번 연속 프롬프트로 컷 편집 없이 40초 완성 스토리 애니메이션 뽑아내기!

💡 이번 AI 영상 제작 30초 핵심 다이제스트:
생성형 AI로 수업이나 교사 연수용 동영상을 만들 때 가장 큰 고민은 "클립 길이가 너무 짧고(5~10초), 장면마다 화풍이나 캐릭터가 뒤죽박죽 바뀐다"는 점이었습니다.
하지만 제미나이의 동영상 생성 기능에서 이전 장면의 맥락과 마지막 프레임을 그대로 이어받아 확장하는 연속 프롬프트(Extend) 기법을 활용하면, 따로 영상 편집 툴을 켜서 자르고 이어 붙이는 번거로움 없이 단 4번의 프롬프트만으로 40초짜리 매끄러운 풀 스토리 애니메이션을 한 번에 뽑아낼 수 있습니다!
수업 시작과 연수 오프닝에서 교사와 학생들의 시선을 단숨에 사로잡는 40초 영상 설계 공식과 BGM·자막 얹기 실전 꿀팁을 공개합니다.

📊 한눈에 보는 3대 핵심 변화 분석표

무엇이 바뀌었나요? (영역)	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
🔗 맥락 유지 연속 프롬프트 (Extend)	10초짜리 영상을 만들고 "이어서 다음 장면은~" 형태로 프롬프트를 넣으면 이전 캐릭터와 배경을 그대로 유지하며 이어붙여 줍니다.	[10초: 고민하는 선생님] ➔ [20초: 제미나이 발견] ➔ [30초: 뚝딱 웹앱 완성] ➔ [40초: 환호하는 교실] 연속 생성하기
⏱️ 무편집 40초 원테이크 워크플로	프리미어나 컷 편집 프로그램을 열어 4개 조각을 타임라인에 맞추는 고된 수작업 없이, 제미나이 안에서 완성본 1개 파일로 출력됩니다.	수업 준비 시간이 촉박한 아침 시간, 5분 만에 수업 동기유발 애니메이션 인트로 제작
🎵 수업 몰입을 극대화하는 BGM & 타이틀	통통 튀는 실로폰/우쿨렐레 무료 BGM과 컷 전환 공감 자막, 엔딩 타이틀만 얹으면 프로 수준의 연수·수업 오프닝 영상이 완성됩니다.	마지막 장면에 "말하면 만들어지는 교실 앱: 제미나이 × 바이브 코딩" 타이틀 큼직하게 띄우기

🎯 교실 연수 & 수업 오프닝을 사로잡는 40초 스토리라인 설계법

1구간 (0~10초) - 문제 공감:
교실에서 복잡한 교구 준비나 반복 업무로 지친 선생님의 모습. 컴퓨터 화면을 보며 막막해하는 표정을 담아 동료 교사와 학생들의 즉각적인 공감을 유도합니다.
2구간 (10~20초) - 대안 발견:
자연어로 대화하듯 아이디어를 입력하자, 제미나이 화면에서 반짝이는 빛과 함께 아이디어가 시각적 구조로 정리되는 순간을 표현합니다.
3구간 (20~30초) - 마법 같은 실현:
코딩을 전혀 몰라도 브라우저에 알록달록한 인터랙티브 퀴즈 웹앱과 교구가 뚝딱 완성되어 실행되는 역동적인 화면을 연출합니다.
4구간 (30~40초) - 기쁨과 엔딩:
스마트 기기를 들고 즐겁게 참여하며 환호하는 아이들과 밝게 웃는 선생님의 교실 풍경. 마지막 장면에 "말하면 만들어지는 교실 앱: 제미나이 × 바이브 코딩" 엔딩 문구를 띄우고 페이드아웃합니다.

💡 2% 완성도를 더하는 BGM 및 자막 배치 전략

배경음악(BGM) 선곡: 유튜브 오디오 보관함(YouTube Audio Library)이나 공유마당 등 무료 음원 저장소에서 Playful, Cute Kids, Whimsical 키워드로 검색하여, 통통 튀는 실로폰이나 우쿨렐레 기반의 밝고 경쾌한 곡을 깔아줍니다.
자막 호흡 조절: 컷이 넘어가는 타이밍(10초 단위)에 맞춰 화면 하단에 "교실 속 반짝이는 아이디어, 코딩을 몰라도 괜찮아요"와 같은 짧고 직관적인 공감 문구를 1줄씩 배치합니다.

🛠️ 현장 교사를 위한 바이브 코딩 실전 3단계

📌 따라하기 3단계 순서

1단계 (거꾸로 프롬프트 복사): 아래 제공된 [4단 연속 영상 생성 프롬프트]를 복사하여 제미나이에 전달합니다.
2단계 (역질문 답변으로 세부 튜닝): 제미나이가 되묻는 3가지 질문(애니메이션 화풍, 교실 과목 테마, 캐릭터 설정)에 맞춰 1줄로 답변합니다.
3단계 (10초씩 이어 생성하기): 제미나이가 단계별로 출력해 준 4개의 프롬프트를 차례대로 입력하여 40초 완성본 영상을 저장합니다.

📋 복사해서 바로 쓰는 '40초 연속 동영상 스토리 거꾸로 프롬프트'

당신은 교육 영상 및 애니메이션 기획 전문 AI 디렉터입니다.
초등 교사 연수 오프닝 및 수업 동기유발용으로 사용할 40초짜리(10초 클립 4개 연속 확장) 애니메이션 제작 프롬프트를 작성해 주세요.

[🚨 영상 일관성 및 맥락 유지 필수 안전장치 (Consistency Baseline)]
1. 화풍 및 캐릭터 통일: 4개 클립 전체에 동일한 캐릭터(선생님과 학생들), 동일한 3D 클레이 애니메이션 또는 따뜻한 2D 파스텔 일러스트 스타일 프롬프트를 고정할 것.
2. 씬 간 연결성(Seamless Transition): 이전 10초 영상의 마지막 프레임 동작과 카메라 구도를 이어받아 자연스럽게 다음 동작으로 이어지는 연속 확장(Extend) 구조로 짤 것.
3. 무편집 완결성: 영상 편집 프로그램 없이도 4편이 하나의 완결된 호흡(기승전결)을 갖도록 타임라인을 설계할 것.

[🎬 40초 타임라인 구성 (10초 × 4클립)]
- 1클립 (0~10초): 교실에서 수업 준비로 고민하는 따뜻한 분위기의 선생님
- 2클립 (10~20초): 제미나이에 자연어로 아이디어를 말하자 화면이 반짝이며 앱 기획이 구체화되는 장면
- 3클립 (20~30초): 복잡한 코드 없이 직관적이고 알록달록한 교육용 웹앱이 브라우저에 뚝딱 완성되는 장면
- 4클립 (30~40초): 완성된 웹앱 교구로 태블릿을 터치하며 환호하는 아이들과 흐뭇한 선생님의 모습

[❓ 역질문 유도 (Reverse Prompting)]
영상 프롬프트를 확정하기 전에, 나에게 아래 3가지 질문을 먼저 던져서 기획을 구체화해 줘:
1. 영상의 전체 비주얼 화풍을 3D 픽사 스타일, 따뜻한 2D 수채화 일러스트, 레트로 픽셀 중 어떤 스타일로 할까요?
2. 3구간에서 만들어지는 교실 웹앱의 테마(수학 퀴즈, 과학 실험 시뮬레이션, 학급 자리배치기 등)는 무엇인가요?
3. 엔딩 자막 문구에 학교명이나 연수명을 커스텀해서 넣을 수 있도록 템플릿을 제공해 드릴까요?

🎯 에디터 한줄평

"10초짜리 조각 영상에 머물던 AI 비디오가, 맥락을 이어가는 연속 프롬프트 덕분에 완벽한 스토리텔링 도구로 진화했습니다. 40초의 짧은 몰입이 연수와 수업의 시작을 완전히 바꿔놓을 것입니다!"

🔗 관련 기술 및 공식 레퍼런스:
• Google Gemini Video Generation & Multi-turn Prompt Chaining
• YouTube Audio Library (저작권 걱정 없는 교육용 BGM 저장소)
• 교실 수업 동기유발을 위한 40초 마이크로 러닝 영상 설계법

[쉬운 AI 소식] 깃허브 코파일럿(GitHub Copilot) - 자동 모델 선택 3대 티어 출시(비용·품질 내 맘대로 제어)

⚡ 깃허브 코파일럿 '자동 모델 선택 3대 티어' 공식 출시 — 비용·품질·응답 속도를 내 작업에 맞게 완벽 제어하기!

💡 이번 릴리즈 30초 핵심 다이제스트:
"간단한 함수 설명 주석 하나 다는데 최고급 플래그십 AI 모델 토큰이 낭비되는 건 아닐까?" 혹은 "복잡한 알고리즘을 짜야 하는데 가벼운 모델이 엉뚱한 코드를 짜면 어쩌지?" 고민하셨나요?
깃허브 코파일럿(GitHub Copilot)이 2026년 9월 14일, 작업의 성격에 맞춰 AI 모델의 가성비와 품질을 직접 조율할 수 있는 '자동 모델 선택 3대 티어(효율성·균형·지능)' 기능을 전격 출시했습니다!
이제 프롬프트마다 AI가 난이도를 실시간 판별하여 최적의 모델로 스마트하게 연결해 주며, 유료 구독자는 자동 선택 경유 시 10% 추가 할인 혜택까지 누릴 수 있습니다.

📊 한눈에 보는 3대 핵심 변화 분석표

무엇이 바뀌었나요? (영역)	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
⚡ 효율성 티어 (Efficiency)	비용 절감을 최우선으로 삼고, 빠르고 가벼운 모델을 매칭하여 즉각적인 응답 속도를 보장합니다.	오탈자 수정, 단순 변수명 변경, 함수 독스트링(Docstring) 주석 달기 등 빠른 반복 작업에 적용
⚖️ 균형 티어 (Balance)	비용과 코드 품질, 지연 시간(Latency)의 밸런스를 절묘하게 맞춘 일상 개발 표준 모드입니다.	일상적인 교육용 웹앱 페이지 제작, 폼 유효성 검사 함수 작성, 표준 UI 컴포넌트 구현에 기본 사용
🧠 지능 티어 (Intelligence)	비용보다 결과물의 품질과 깊은 추론 능력을 최우선하여, 고난도 아키텍처를 해결하는 프론티어 모델을 투입합니다.	다중 파일 데이터 연동, 복잡한 게임 물리 엔진 계산, 비동기 상태 관리 디버깅에 활용

🔍 코파일럿 자동 모델 라우팅의 핵심 동작 원리

1. 프롬프트 단위 실시간 난이도 평가:
3가지 티어 모두 동일한 최신 모델 풀(Pool)을 공유합니다. 내가 '지능(Intelligence)' 모드로 설정해 두었더라도, "이 함수에 주석 달아줘" 같은 사소한 요청에는 알아서 가볍고 빠른 모델을 호출하여 불필요한 과금을 막아줍니다.
2. 광범위한 플랫폼 동시 배포:
Visual Studio Code 에디터뿐만 아니라, 터미널 환경의 코파일럿 CLI(Copilot CLI), 그리고 깃허브 코파일럿 데스크톱 앱 전반에 걸쳐 순차 적용됩니다.
3. 자동 선택 경유 시 10% 과금 할인:
유료 구독자(Copilot Pro/Business/Enterprise)가 모델을 수동 고정하지 않고 자동 선택(Auto)을 사용할 경우, 실제 선택된 모델 비용에서 10% 할인된 요율이 적용되어 경제성이 크게 향상됩니다.

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

📌 따라하기 3단계 순서

1단계 (티어 지정): VS Code 내 코파일럿 채팅창 모델 선택 메뉴에서 Auto (Balance) 또는 Auto (Efficiency)를 선택합니다.
2단계 (목적 중심 프롬프트 입력): 아래 제공된 [비용 최적화 바이브 코딩 거꾸로 프롬프트]를 복사해 원하는 기능 구현을 요청합니다.
3단계 (스마트 라우팅 체감): 단순 UI 다듬기는 1초 만에 완료되고, 복잡한 로직은 심층 추론 모델이 안정적으로 코드를 생성하는 과정을 확인합니다!

📋 복사해서 바로 쓰는 '비용·품질 최적화 에러 제로 바이브 코딩 프롬프트'

당신은 풀스택 소프트웨어 아키텍트이자 교육용 웹앱 개발 전문가입니다.
사용자의 요구사항을 바탕으로 브라우저에서 단독 구동되는 고품질 단일 HTML5 웹 애플리케이션을 제작해 주세요.

[🚨 에러 방지 및 비용 최적화 필수 안전장치 (Zero-Error Baseline)]
1. 단일 파일 완결성: 외부 번들러나 백엔드 서버 없이 브라우저 더블클릭으로 열리는 단일 index.html 파일 안에 HTML5, Tailwind CSS(CDN), Lucide Icons(CDN), 순수 바닐라 자바스크립트(ES6+)를 모두 포함할 것. 생략 주석(// TODO 등) 없이 100% 완전한 코드로 출력할 것.
2. 경량화 및 불필요 연산 차단: 로컬스토리지(LocalStorage) 저장 시 JSON 직렬화 예외 처리를 반드시 포함하고, 복잡한 외부 그래픽 라이브러리 대신 인라인 SVG와 Tailwind 유틸리티 클래스로 경량 렌더링할 것.
3. 개인정보 제로 원칙: 사용자 실명이나 연락처를 수집하지 않고, 가상 닉네임이나 12간지 캐릭터 선택 방식을 적용할 것.
4. 사운드 자체 합성: 외부 MP3 음원 파일 링크 없이 브라우저 내장 Web Audio API(AudioContext)로 효과음을 주파수 합성할 것.

[❓ 역질문 유도 (Reverse Prompting)]
코드를 작성하기 전에, 현재 작업의 복잡도와 모델 티어에 맞춰 나에게 아래 3가지 질문을 먼저 던져줘:
1. 이번 웹앱의 핵심 타깃 사용자와 가장 중요하게 해결해야 할 핵심 기능 1가지는 무엇인가요?
2. 현재 구현 단계가 가벼운 화면 UI 프로토타입인가요, 아니면 복잡한 상태 판별 알고리즘인가요?
3. 전체 디자인 테마(산뜻한 모던 블루, 부드러운 파스텔 크림, 다크 아케이드 모드) 중 선호하는 스타일이 있나요?

🎯 에디터 한줄평

"비싼 플래그십 모델을 항상 켜둘 필요도, 그렇다고 저렴한 모델의 오답을 불안해할 필요도 없습니다. 코파일럿의 3대 티어 라우팅과 함께라면 누구나 가장 경제적이면서도 완벽한 코딩 파트너를 손에 쥐게 됩니다!"

🔗 공식 릴리즈 노트 원문:
GitHub Changelog — Configure cost and quality in Copilot auto model selection (2026-09-14)

2026년 9월 14일 월요일

[쉬운 AI 소식] 딥시크(DeepSeek) V4.1-Flash 전격 전환 - V4-Pro 뛰어넘는 성능 & 파격적 비용 절감!

⚡ 딥시크(DeepSeek) V4.1-Flash 공식 전환: V4-Pro를 뛰어넘는 추론 속도 & KV 캐시 1/4 압축으로 여는 초저비용 바이브 코딩!

💡 이번 릴리즈 핵심 30초 다이제스트:
복잡한 교육용 웹앱을 AI로 개발할 때, 긴 대화가 이어질수록 토큰 비용이 급증하거나 응답 속도가 느려져 답답하셨나요?
글로벌 오픈소스 AI의 대표 주자 딥시크(DeepSeek)가 2026년 9월 14일 04:00(UTC)를 기점으로 기존 플래그십 모델인 V4-Pro를 공식 은퇴시키고 차세대 'V4.1-Flash'로 전면 자동 라우팅 전환을 단행했습니다.
새로운 비대칭 인코더-디코더 구조로 더 강력한 코딩 벤치마크 점수와 네이티브 멀티모달(시각 이해)을 제공하면서도, KV 캐시 메모리를 4분의 1로 압축해 사용 비용을 획기적으로 낮춘 혁신적 모델입니다. 현장 교사와 초보 바이브 코더가 부담 없이 마음껏 코드를 실험할 수 있는 최고의 기회입니다!

📊 한눈에 보는 3대 핵심 변화 분석표

무엇이 바뀌었나요? (영역)	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
🚀 V4-Pro를 뛰어넘는 비대칭 MoE 추론	552B 총 파라미터 중 입력 8B, 출력 16B 활성 파라미터만 스마트하게 사용하여 무거운 플래그십 모델보다 훨씬 빠르고 정확하게 코딩합니다.	학급 퀴즈 게임이나 시간표 자동 생성 등 500줄 이상의 복잡한 자바스크립트 코드를 초고속으로 출력하기
💾 KV 캐시 1/4 압축 & 파격적 요금	이전 대화 맥락을 기억하는 메모리(KV 캐시) 용량을 4분의 1로 압축하여, 긴 대화를 이어가도 캐시 히트 비용이 파격적으로 절감됩니다.	코드 수정과 기능 추가를 수십 번 반복해도 비용 걱정 없이 1년 치 교육용 웹앱 완성도 끌어올리기
👁️ 네이티브 비전(멀티모달) 기본 탑재	별도의 비전 전용 모델로 바꿀 필요 없이, 화면 스크린샷이나 손그림 와이어프레임을 보고 레이아웃과 UI를 즉시 이해합니다.	종이에 손으로 그린 교실 웹앱 화면 배치를 스마트폰으로 찍어 올린 뒤 "이대로 단일 HTML로 짜줘" 요청하기

🧩 딥시크 V4.1-Flash 전환이 바이브 코딩에 주는 3대 실전 가치

1. 자동 전환으로 인한 무중단 업그레이드:
기존 API 엔드포인트(deepseek-v4-pro, deepseek-v4-flash)를 그대로 쓰더라도, 9월 14일부터 시스템 차원에서 V4.1-Flash로 자동 연결되어 별도 코드 수정 없이 즉시 속도 향상과 요금 할인을 누릴 수 있습니다.
2. 강화학습(RL) 기반의 버그 추론 능력 강화:
대규모 강화학습 사후 훈련을 통해, 프론트엔드 자바스크립트의 비동기 오류(Promise, 이벤트 리스너 누락)나 CSS 깨짐 현상의 근본 원인을 한 번에 짚어내는 디버깅 역량이 월등해졌습니다.
3. 오픈소스 에코시스템의 폭넓은 호환성:
Hugging Face를 통해 모델 가중치와 기술 보고서가 공개되어, 로컬 PC나 학교 실습실 GPU 서버에서도 독립적으로 인퍼런스 엔진을 구동할 수 있는 확장성을 제공합니다.

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

📌 따라하기 3단계 순서

1단계 (프롬프트 복사): 아래 제공된 [딥시크 V4.1-Flash 최적화 거꾸로 프롬프트]를 복사합니다.
2단계 (역질문 3가지 답변): AI가 먼저 되묻는 3가지 질문(대상 학년, 핵심 수업 기능, 디자인 무드)에 내 학급 상황에 맞춰 1줄로 답변합니다.
3단계 (단일 index.html 실행): 초고속으로 출력된 완성형 코드를 메모장에 넣고 index.html로 저장한 뒤 브라우저에서 더블 클릭하면 즉시 실행됩니다!

📋 복사해서 바로 쓰는 '딥시크 V4.1-Flash 에러 제로 프롬프트'

당신은 딥시크 V4.1-Flash(DeepSeek-V4.1-Flash) 기반의 프론트엔드 수석 웹 개발자이자 교육공학 설계자입니다.
초등학교 교실에서 교사와 학생들이 즉시 활용할 수 있는 [수업 주제 / 학급 경영 주제] 웹앱을 제작해 주세요.
별도 설치나 서버 없이 브라우저에서 바로 열리는 단일 HTML5 파일(HTML + Tailwind CSS CDN + Lucide CDN + Vanilla JS)로 작성해 주세요.

[🚨 에러 방지 및 개인정보 안심 필수 안전장치 (Zero-Error Baseline)]
1. 단일 파일 완결성: 외부 복잡한 번들러 없이, 단일 HTML5 파일 안에 모든 스타일과 스크립트를 포함할 것. 생략 주석(// TODO, /* 생략 */ 등) 없이 100% 실행 가능한 완전체 코드로 출력할 것.
2. 개인식별정보 원천 차단: 학생 실명, 학번, 연락처 입력을 요구하지 말고, 입장 화면에서 12가지 귀여운 동물 닉네임(계산왕 호랑이, 지혜로운 부엉이 등)을 선택해 시작하도록 할 것.
3. Web Audio API 사운드 합성: 외부 MP3 다운로드 없이 브라우저 내장 AudioContext로 정답 차임벨(도-미-솔)과 조작 효과음을 자체 합성할 것.
4. 모바일/태블릿 터치 최적화: PC 마우스 조작뿐만 아니라 교실 스마트기기(태블릿, 크롬북) 화면에서도 터치 2~3번 만에 핵심 기능에 도달하도록 큰 버튼과 반응형 그리드를 지원할 것.
5. 결과 포토카드 저장: 활동 완료 시 닉네임과 점수, 배지가 담긴 학습 인증서를 html2canvas CDN을 활용해 PNG 이미지 파일로 다운로드할 수 있게 할 것.

[❓ 역질문 유도 (Reverse Prompting)]
코드를 작성하기 전에, 나에게 아래 3가지 질문을 먼저 던져서 세부 구성을 확정해 줘:
1. 대상 학년과 이번 웹앱을 활용할 핵심 교과 단원 목표는 무엇인가요?
2. 학생들이 직접 조작해야 할 핵심 상호작용(스피드 퀴즈, 드래그 선 잇기, 가상 조작 시뮬레이터 등)은 어떤 방식인가요?
3. 전체 그래픽 테마를 부드러운 크림/파스텔 네오브루탈리즘과 모던 클린 테마 중 어떤 스타일로 맞출까요?

🎯 에디터 한줄평

"더 똑똑해졌는데 속도는 2배 빠르고 가격은 파격적으로 저렴해졌습니다. 딥시크 V4.1-Flash의 전격 출시는 교실 현장의 아이디어를 웹앱으로 현실화하는 바이브 코딩의 경제적·기술적 문턱을 다시 한번 완벽히 무너뜨렸습니다!"

🔗 공식 릴리즈 노트 원문 확인하기:
DeepSeek API News — DeepSeek-V4.1-Flash: Smarter, Faster, More Efficient (2026.09.14 전면 전환 공식 발표)

2026년 9월 13일 일요일

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

십분의 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)을 더블클릭해 먼저 체험해 보세요. 학내망 배포 전 확인 체크리스트: 인터넷 연결 없이 더블클릭 실행 ✓ / 학생 데이터 입력·저장 기능 없음 ✓ / 외부 통신 없음 ✓

[초등 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. 초보자를 위한 바이브 코딩 실전 사용 예시

제미나이를 열고 아래 프롬프트를 복사해서 붙여넣기 — 먼저 제미나이가 3가지 확인 질문을 하면, 원하는 답(문제 범위·문제 수·배포 방식)을 알려주세요.
완성되면 파일 다운로드 → index.html 더블클릭 — 서버 실행·프로그램 설치 없이 브라우저에서 바로 열립니다.
동작 확인 — 문제 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 차단 시 폰트·효과 폴백으로 동작 ✓)

[초등 4-2 수학] 자연수가 없는 소수 두 자리 수 범위의 덧셈

백분의 자리까지 맞춰 더한다! 자연수 없는 소수 두 자리 덧셈 웹앱

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

이 앱이 잡아주는 것: ① 백분의 1(1/100) 개념을 소수점 열 정렬 세로식에 확장 ② 십분·백분 자릿수별로 나눠 더하는 감각 ③ 자연수 부분은 항상 0! 오개념 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계해서, 맞추기 경주가 아니라 계산 원리를 붙잡는 연습이 됩니다.

📖 한 줄 정의

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
소수점 열 정렬 세로식(십분+백분)	0.23 + 0.46을 [0][.][2][3] 형태로 소수점을 축으로 세워줍니다. 십분의 자리=초록, 백분의 자리=주황으로 자릿값 색이 나뉘어 두 자리 덧셈이 눈에 들어옵니다.	"0.23 + 0.46 세로식으로 풀 때 소수점 아래 두 자리를 맞추는 걸 알려줘"
입력·지우기	백분의 자리부터 → 십분의 자리 → 자연수 부분(0) 순서로 입력합니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고칩니다. 전부 정답일 때만 폭죽과 축하 음향!	"백분의 자리부터 입력하고, 틀린 칸은 지우기 버튼으로 고치게 해줘"
10칸 스트립 2개 힌트	0.23은 2칸과 부분칸, 0.46은 4칸과 부분칸으로 그려지고 "십분: 2+4=6, 백분: 3+6=9 → 0.69!" 단계 설명이 나옵니다. 백분의 1이 10개 모이면 십분의 1이라는 원리를 강조해요.	"십분·백분 자릿수별로 스트립 힌트 애니메이션을 만들어줘"

수업 현장 팁: 유형 2는 백분의 1(1/100)이 처음 등장하는 단계예요. 시작 전에 "0.01이 몇 개 모이면 0.1일까?"를 입으로 가볍게 짚고 들어가세요. 힌트의 스트립 2개를 함께 보여주면 "십분끼리, 백분끼리 따로 더한다"는 감각이 붙습니다. 복습용은 5문제, 단원 확인용은 20문제 모드가 적당해요.

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

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

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

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

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 두 수 모두 0.ab 소수(0.01~0.49)로 하고 각 자릿수 합이 9 이하(받아올림 없음, 합이 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.ab 형태(0.01~0.49). 십분의 자리 두 숫자의 합 ≤ 9이고 백분의 자리 두 숫자의 합 ≤ 9(받아올림 없음, 합이 1 미만). 예: 0.23 + 0.46 = 0.69.
- 두 수의 자릿수는 같은 형태(둘 다 백분위)로 정렬되게 생성. 직전 문제 반복 금지, generateProblem() 함수 분리.

[상황 카드]
- 상황 문장(예: "실 0.23m와 0.46m를 이으면 모두 몇 m일까요?")과 배지 시각화.

[풀이 UI - 소수 세로식 + 네모 칸 입력]
- 세로식 그리드: [기호 열 40px | 일의 자리 84px | 소수점 28px | 십분의 자리 84px | 백분의 자리 84px]. 소수점이 모든 행에서 한 열에 수직 정렬. 피연산자는 [0][.][십분][백분] 4칸으로 표시.
- 자릿값 색: 일의 자리=빨강, 십분=초록, 백분=주황, 소수점 기호=회색.
- 답안 칸: [자연수 부분(빨강)][소수점 표시][십분(초록)][백분(주황)], 84px.
- 입력 순서(중요): 오른쪽 끝(백분의 자리)부터 → 십분의 자리 → 자연수 부분(0). 화면 숫자판+키보드.
- 클릭 선택: 네모 칸 클릭으로 커서 이동. ⌫ 지우기 버튼(숫자판+Backspace): 선택 칸 지우고 재입력(풀이 중에만).
- 문제 완료 조건: 모든 칸을 채우면 정답 여부와 관계없이 다음 문제로 자동 진행. 전부 정답일 때만 confetti + 축하 아르페지오 + "정답! 🎉", 오답 포함 시 축하 없이 "다음 문제로 넘어가요!". 오답은 빨간 배경+shake+낮은 톤, 오답 숫자 유지. 한 문제에서 2칸 이상 오답 시도 시 다음 문제 전 힌트 제안. 음소거/음량 버튼.

[힌트 모드]
- 10칸 스트립 2개 시각화: 첫 스트립에 첫 수를 칠하기(십분의 자리 칸 + 백분만큼 부분 칸, 예: 0.23), 둘째 스트립에 둘째 수 표시 후 "십분의 자리 2+4=6, 백분의 자리 3+6=9 → 0.69!" 단계 설명. 백분의 1이 10개 모이면 십분의 1 칸이 채워지는 원리 강조.
- 힌트 사용 문제는 결과에서 구분.

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

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

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 첫 시도 기준 진단(아이 눈높이 격려 톤, [틀린 부분]+[이유]+[해결 방법] 형식):
  - 백분의 자리 반복 실수(정답±1) → "백분의 자리 덧셈이 아직 어색해요" → 백분의 1 조각 소리 내어 세기.
  - 십분의 자리 실수(백분에서 올라올 값을 놓친 것처럼 ±1) → 자릿수별 소리 내어 덧셈.
  - 자연수 부분을 0으로 쓰지 않음 → "합이 1보다 작으면 자연수 부분은 0!" → 소수점 왼쪽 확인 습관.
  - 자릿수 어긋남(입력값이 옆 자릿수 정답과 동일) → 소수점 기준 자릿수 짚기.
  - 해당 없음 → 순간 실수 → 칸마다 먼저 세는 검산 습관.
- 맞춤 보충 연습 버튼(틀린 자릿수 위주 5문제), 오답 문제 목록(과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 자연수가 있는 소수 두 자리 수 덧셈 도전!" 추천, "다시 연습" 버튼.

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

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

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

에디터 한줄평: 백분의 1이 처음 나오는 유형 2는 "십분끼리, 백분끼리 따로 더한다"는 자릿수 감각의 분기점이에요. 스트립 2개 힌트가 두 수를 나란히 놓고 비교하게 해 주는 게 좋습니다. 백분의 자리부터 채우는 흐름이 몸에 붙으면 소수 세 자리도 같은 원리라는 걸 아이가 스스로 느낍니다.

참고 링크 카드

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

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

소수점만 맞추면 자연수도 한 방에! 자연수 있는 소수 두 자리 덧셈 웹앱

한 줄 소개: 1.25 + 2.14 = 3.39, 자연수 부분과 소수 부분을 소수점 기준으로 나눠 더하기를 잡아주는 4학년 2학기 '소수의 덧셈과 뺄셈' 유형 3 연습 웹앱(web app)입니다. 프롬프트 복사 → 제미나이에 붙여넣기 → 완성된 index.html 더블클릭, 수업 준비 3분이면 끝!

이 앱이 잡아주는 것: ① 자연수 부분과 소수 부분을 나눠 더하는 원리 ② 자연수 자릿수가 달라도 소수점 기준으로 정렬한다는 소수 덧셈의 대원칙 ③ 자릿수 어긋남 오류 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계해서, 맞추기 경주가 아니라 계산 원리를 붙잡는 연습이 됩니다.

📖 한 줄 정의

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
소수점 열 정렬 세로식	1.25 + 2.14를 소수점을 축으로 [1][.][2][5], [2][.][1][4]로 세워줍니다. 자연수 부분 자릿수가 달라도 소수점 기준으로 정렬됨을 학습합니다. 일의 자리=빨강, 십분=초록, 백분=주황.	"1.25 + 2.14 세로식에서 소수점을 기준으로 자릿수를 맞추는 걸 알려줘"
입력·지우기	백분의 자리부터 → 십분의 자리 → 자연수 부분(진짜 계산 값) 순서로 입력합니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고칩니다. 전부 정답일 때만 폭죽과 축하 음향!	"백분의 자리부터 입력하고 자연수 부분도 계산해 채우게 해줘"
자릿수별 열 플래시 힌트	"백분: 5+4=9! 십분: 2+1=3! 자연수 부분: 1+2=3! → 3.39!" 해당 자릿수 열이 순서대로 반짝이며 단계 설명이 나옵니다.	"자릿수별로 열을 반짝이며 단계별 힌트 애니메이션을 만들어줘"

수업 현장 팁: 유형 3은 "소수점을 맞추면 자릿수가 서로 맞춰진다"는 소수 덧셈의 대원칙 확인용이에요. 자연수 부분 자릿수가 달라도(예: 3.5 + 12.42) 소수점 기준으로만 세우면 되는 걸 비교 문제 하나로 짚어 주세요. 자릿수별 열 플래시 힌트는 자릿수끼리의 약속을 눈과 소리로 동시에 넣어 줍니다.

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

제미나이를 열고 아래 프롬프트를 복사해서 붙여넣기 — 먼저 제미나이가 3가지 확인 질문을 하면, 원하는 답(문제 범위·문제 수·배포 방식)을 알려주세요.
완성되면 파일 다운로드 → index.html 더블클릭 — 서버 실행·프로그램 설치 없이 브라우저에서 바로 열립니다.
동작 확인 — 문제 3개쯤 풀어보고, 백분의 자리부터 입력되는지, 자연수 부분도 진짜 계산 값으로 채워지는지, 힌트의 열 플래시가 재생되는지 확인하세요.

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

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

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 두 수 모두 a.ab 소수(자연수 부분 1~9, 소수점 아래 두 자리)로 하고 자연수 부분 합 ≤ 9, 십분·백분 자릿수 합 ≤ 9(받아올림 없음)일지
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에도 저장하지 마.

[문제 생성]
- 두 수 모두 a.ab 형태(자연수 부분 1~9, 소수점 아래 두 자리). 자연수 부분의 합 ≤ 9(답의 자연수 부분이 한 자리 유지), 십분의 자리 합 ≤ 9, 백분의 자리 합 ≤ 9(받아올림 없음). 예: 1.25 + 2.14 = 3.39.
- 직전 문제 반복 금지, generateProblem() 함수 분리.

[상황 카드]
- 상황 문장(예: "상자 무게 1.25kg와 2.14kg를 합치면 모두 몇 kg일까요?")과 배지 시각화.

[풀이 UI - 소수 세로식 + 네모 칸 입력]
- 세로식 그리드: [기호 열 40px | 일의 자리 84px | 소수점 28px | 십분의 자리 84px | 백분의 자리 84px]. 소수점이 모든 행에서 한 열에 수직 정렬 — 자연수 부분 자릿수가 달라도 소수점 기준으로 정렬됨을 학습.
- 자릿값 색: 일의 자리(자연수 부분)=빨강, 십분=초록, 백분=주황, 소수점 기호=회색.
- 답안 칸: [자연수 부분(빨강)][소수점 표시][십분(초록)][백분(주황)], 84px. (자연수 부분은 빈 칸이 아니라 진짜 계산 값)
- 입력 순서(중요): 오른쪽 끝(백분의 자리)부터 → 십분의 자리 → 자연수 부분. 화면 숫자판+키보드.
- 클릭 선택: 네모 칸 클릭으로 커서 이동. ⌫ 지우기 버튼(숫자판+Backspace): 선택 칸 지우고 재입력(풀이 중에만).
- 문제 완료 조건: 모든 칸을 채우면 정답 여부와 관계없이 다음 문제로 자동 진행. 전부 정답일 때만 confetti + 축하 아르페지오 + "정답! 🎉", 오답 포함 시 축하 없이 "다음 문제로 넘어가요!". 오답은 빨간 배경+shake+낮은 톤, 오답 숫자 유지. 한 문제에서 2칸 이상 오답 시도 시 다음 문제 전 힌트 제안. 음소거/음량 버튼.

[힌트 모드]
- 단계별 설명 + 해당 자릿수 열 플래시: "백분의 자리: 5+4=9! 십분의 자리: 2+1=3! 자연수 부분: 1+2=3! → 3.39!" 소수점 맞추기 강조(자연수 부분끼리, 십분끼리, 백분끼리 각각).
- 힌트 사용 문제는 결과에서 구분.

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

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

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 첫 시도 기준 진단(아이 눈높이 격려 톤, [틀린 부분]+[이유]+[해결 방법] 형식):
  - 자연수 부분 반복 실수(정답±1) → "자연수 부분 덧셈이 아직 어색해요" → 자연수 부분을 따로 모아 덧셈 연습.
  - 백분/십분의 자리 실수 → 자릿수별 소리 내어 덧셈.
  - 자릿수 어긋남(십분의 수를 자연수 칸에 적는 등) → 소수점 기준 자릿수 짚기.
  - 해당 없음 → 순간 실수 → 자릿수별 검산 습관.
- 맞춤 보충 연습 버튼(틀린 자릿수 위주 5문제), 오답 문제 목록(과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 소수 세 자리 수 범위의 덧셈 도전!" 추천, "다시 연습" 버튼.

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

[완료 기준]
- 자연수 부분이 포함된 소수점 정렬 세로식, 백분의 자리부터의 입력 흐름(클릭 선택+⌫ 수정 지원), 모든 칸 채우면 진행 규칙, 자릿수별 힌트, 첫 시도 기준 오답 분석, 맞춤 보충 연습이 모두 동작; 문제 생성 규칙(자연수 합 ≤ 9, 각 소수 자릿수 합 ≤ 9, 무받아올림)이 항상 지켜져야 함.

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

에디터 한줄평: "소수점만 맞추면 자릿수가 알아서 맞춰진다"는 원칙을 자연수 부분까지 확장하는 유형 3은 소수 덧셈의 완성형이에요. 열 플래시 힌트가 자릿수끼리의 약속을 명확히 보여 주고, 첫 시도 기준으로 실수를 따로 세어 주는 디테일이 좋습니다. 자연수 부분도 "진짜 계산 값"이라는 안내가 자릿수 어긋남을 예방합니다.

참고 링크 카드

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

[초등 4-2 수학] 분모가 같은 진분수의 덧셈 (합이 진분수)

분자끼리 더하고 분모는 그대로! 분모가 같은 진분수 덧셈 웹앱(합이 진분수)

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

이 앱이 잡아주는 것: ① 분수의 덧셈 첫 단추인 "분모가 같으면 분자끼리 더한다" 원리 ② 분수 세로식에서 위칸(분자)·아래칸(분모) 위치 감각 ③ "분모까지 더한다"(1/5 + 2/5 = 3/10) 대표 오개념 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계해서, 맞추기 경주가 아니라 원리를 붙잡는 연습이 됩니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
분수 세로식(분자-가로선-분모)	1/5 + 2/5를 분자와 분모를 각각 세로 칸으로 세워 보여줍니다. 분자=빨강, 분모=파랑으로 자리 색이 나뉘어 "위칸이 분자, 아래칸이 분모"가 먼저 보입니다.	"분모가 같은 진분수 덧셈을 세로식으로 풀 때 분자와 분모 자리를 알려줘"
분자의 합 → 분모 입력	분자(위칸)를 먼저 더해 채우고, 분모는 원래 분모를 그대로 씁니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고치고, 모든 칸을 채우면 다음 문제로 넘어갑니다(전부 정답일 때만 폭죽!).	"분자를 먼저 입력하게 하고 분모는 그대로 쓰게 해줘. 틀린 칸은 지우기 버튼으로 고치게 해줘"
분수 막대 힌트	분모만큼 나눈 막대에 분자만큼 칠하기가 애니메이션으로 재생됩니다. 1/5는 1칸(주황), 2/5는 2칸(파랑), 합친 막대 3칸(초록)으로 "1+2=3, 분모는 그대로 5 → 3/5"가 눈으로 보입니다.	"분모만큼 나눈 막대에 분자만큼 칠하는 힌트 애니메이션을 만들어줘"

수업 현장 팁: 유형 1은 받아올림이 전혀 없는 분수 덧셈의 '첫 단추'예요. 먼저 "5등분한 피자 조각 몇 개?"를 입으로 가볍게 세고 앱을 여세요. 분자 칸(빨강)을 먼저 짚게 하면 "분모까지 더하기" 실수가 눈에 띕니다. 복습용은 5문제, 단원 도입 후 확인용은 20문제 모드가 적당해요.

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

제미나이를 열고 아래 프롬프트를 복사해서 붙여넣기 — 먼저 제미나이가 3가지 확인 질문을 하면, 원하는 답(문제 범위·문제 수·배포 방식)을 알려주세요.
완성되면 파일 다운로드 → index.html 더블클릭 — 서버 실행·프로그램 설치 없이 브라우저에서 바로 열립니다.
동작 확인 — 문제 3개쯤 풀어보고, 분자·분모 자리가 색으로 구분되는지, 분자의 합을 먼저 채우는지, 힌트 막대가 재생되는지 확인하세요.

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

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

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 분모 5~9의 분모가 같은 진분수끼리(예: 1/5 + 2/5 = 3/5)로 하고 분자의 합이 항상 분모보다 작게 할지
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에도 저장하지 마.

[문제 생성]
- 분모 d는 5~9에서 뽑고, 두 분자는 각각 1 이상으로 분자의 합이 d-1 이하(합이 진분수)가 되도록 생성. 예: 1/5 + 2/5 = 3/5.
- 두 분수의 분모는 항상 같게. 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.

[상황 카드]
- 상황 문장(예: "피자 1/5조각과 2/5조각을 먹으면 모두 몇 조각을 먹은 걸까요?")과 배지로 시각화(피자/케이크/빵/수박 조각 테마).

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

[힌트 모드]
- 분수 막대 시각화: 분모만큼 나눈 막대 3개 — 첫 막대에 첫 분자만큼(주황), 둘째 막대에 둘째 분자만큼(파랑), 마지막 막대에 합친 분자만큼(초록) 순서대로 칠하기. "분자끼리: 1+2=3! 분모는 그대로 5! → 3/5" 표시.
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.

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

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

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 첫 시도 기준으로 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 분모를 분모끼리 더함(분모 칸 시도 = 분모×2) → 이유: "분모가 같을 때는 분모를 더하지 않아요" → 해결: 분모 칸에는 원래 분모를 그대로 쓰기.
  - 분자 칸에 분모 값을 씀 → 이유: "위칸과 아래칸을 바꿔 읽었어요" → 해결: 위칸이 분자, 아래칸이 분모! 먼저 짚고 쓰기.
  - 분자 덧셈 반복 실수(정답±1, 2회 이상) → 이유: "분자끼리 더할 때 계산이 틀렸어요" → 해결: 분수 조각을 손가락으로 짚으며 소리 내어 세기.
  - 해당 없음 → 이유: "순간적인 실수예요" → 해결: "분자끼리 먼저 세어 보는 검산 습관".
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 문제의 분자합·분모 위주 5문제), 오답 문제 목록(막대 과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 합이 가분수인 덧셈 도전!" 추천, "다시 연습" 버튼.

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

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

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

에디터 한줄평: 유형 1은 분수 덧셈의 기초 공사예요. "분모는 자리를 맞추는 표시일 뿐, 더하지 않는다"는 감각이 여기서 잡혀야 나중에 가분수·대분수 단계에서 흔들리지 않아요. 분자·분모 자리 색과 막대 힌트가 원리를 눈으로 보여 주는 디테일이 좋습니다.

참고 링크 카드

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

[초등 4-2 수학] 분모가 같은 진분수의 덧셈 (합이 가분수)

분자가 분모를 넘으면 가분수! 분모가 같은 진분수 덧셈 웹앱(합이 가분수)

한 줄 소개: 3/5 + 4/5 = 7/5, 분자의 합이 처음으로 분모를 넘는 단계를 분수 세로식과 "꽉 찬 1" 막대 힌트로 잡아주는 4학년 2학기 '분수의 덧셈과 뺄셈' 유형 2 연습 웹앱(web app)입니다. 프롬프트 복사 → 제미나이에 붙여넣기 → 완성된 index.html 더블클릭, 수업 준비 3분이면 끝!

이 앱이 잡아주는 것: ① 분자끼리 더한 값이 분모보다 커지는 순간의 감각 ② "분모만큼 꽉 차면 1"이라는 가분수 원리 눈으로 보기 ③ "분모만큼 빼고 남은 수만 분자로 쓰는" 실수 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계했습니다.

📖 한 줄 정의

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
합이 가분수인 문제만	두 분수는 각각 진분수(분자<분모)인데 분자의 합은 분모보다 큽니다(예: 3/5 + 4/5 = 7/5). "분자끼리 더하면 분모를 넘는다"는 경험을 안전하게 먼저 만들어 줍니다.	"분자의 합이 분모보다 커지는 진분수 덧셈 문제만 만들어줘"
분자의 합 → 분모 입력	분자(위칸)를 먼저 더해 채우고 분모는 그대로. 틀린 칸은 클릭해 골라 지우기(⌫)로 고치고, 모든 칸을 채우면 다음 문제로(전부 정답일 때만 폭죽!).	"분자를 먼저 입력하고 분모는 그대로. 틀린 칸은 지우기 버튼으로 고치게 해줘"
꽉 찬 1 + 남은 칸 막대	힌트에서 분자끼리 더한 막대가 분모만큼 꽉 차면 "1!"이 되고 남은 칸이 곧 분자라는 걸 보여줍니다. "7/5는 1보다 큰 가분수"가 눈으로 보입니다.	"분모만큼 꽉 찬 막대 1개와 남은 칸 막대로 가분수 원리를 보여줘"

수업 현장 팁: 유형 2는 아이가 처음으로 "1보다 큰 분수"를 답으로 쓰는 단계예요. "5/5면 1인데, 7/5는?"을 막대 힌트로 보여 주면 가분수가 무섭지 않습니다. 이 유형에서는 가분수를 대분수로 고치지 않고 그대로 두는 것(4학년 범위)을 앱 문구로도 알려 주니, 미리 배운 아이가 헷갈리지 않게 안내해 주세요.

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

제미나이를 열고 아래 프롬프트를 복사해서 붙여넣기 — 먼저 제미나이가 3가지 확인 질문을 하면, 원하는 답(문제 범위·문제 수·배포 방식)을 알려주세요.
완성되면 파일 다운로드 → index.html 더블클릭 — 서버 실행·프로그램 설치 없이 브라우저에서 바로 열립니다.
동작 확인 — 문제 3개쯤 풀어보고, 분자의 합이 분모를 넘는 문제에서 답이 가분수로 쓰이는지, 힌트의 "꽉 찬 1 + 남은 칸" 막대가 재생되는지 확인하세요.

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

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

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 분모 5~9의 분모가 같은 진분수끼리인데 분자의 합이 분모보다 큰(가분수) 문제(예: 3/5 + 4/5 = 7/5)로 할지
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에도 저장하지 마.

[문제 생성]
- 분모 d는 5~9에서 뽑고, 두 분자는 각각 d보다 작은 진분수 분자이면서 분자의 합은 d+1 이상(합이 가분수)이 되도록 생성. 예: 3/5 + 4/5 = 7/5.
- 두 분수의 분모는 항상 같게. 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.

[상황 카드]
- 상황 문장(예: "피자 3/5조각과 4/5조각을 먹으면 모두 몇 조각을 먹은 걸까요?")과 배지로 시각화(피자/케이크/빵/수박 조각 테마).

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

[힌트 모드]
- 분수 막대 시각화: 막대 4개 — 첫 막대에 첫 분자만큼(주황), 둘째 막대에 둘째 분자만큼(파랑), 세 번째 막대는 분모만큼 꽉 찬 1(초록), 네 번째 막대에 분모를 넘은 남은 칸(초록)을 순서대로 칠하기. "분자끼리: 3+4=7! 분모는 그대로 5! 분모만큼 꽉 차면 1! 남은 칸이 2 → 7/5(1보다 큰 가분수)" 표시.
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.

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

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

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 첫 시도 기준으로 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 분모를 분모끼리 더함(분모 칸 시도 = 분모×2) → 이유: "분모가 같을 때는 분모를 더하지 않아요" → 해결: 분모 칸에는 원래 분모를 그대로 쓰기.
  - 분모만큼 빼고 남은 수만 씀(분자 칸 시도 = 분자의 합−분모) → 이유: "분자가 분모를 넘은 값 전체가 분자예요(분모만큼 빼지 않아요)" → 해결: 분자끼리 더한 값을 그대로 위칸에 쓰기.
  - 분자 칸에 분모 값을 씀 → 이유: "위칸과 아래칸을 바꿔 읽었어요" → 해결: 위칸이 분자, 아래칸이 분모! 먼저 짚고 쓰기.
  - 분자 덧셈 반복 실수(정답±1, 2회 이상) → 이유: "분자끼리 더할 때 계산이 틀렸어요" → 해결: 분수 조각을 소리 내어 세기.
  - 해당 없음 → 이유: "순간적인 실수예요" → 해결: "분자끼리 먼저 세어 보는 검산 습관".
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 문제의 분자합·분모 위주 5문제), 오답 문제 목록(막대 과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 대분수의 덧셈(분자의 합이 분모보다 작을 때) 도전!" 추천, "다시 연습" 버튼.

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

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

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

에디터 한줄평: 처음으로 1을 넘는 가분수를 답으로 쓰는 유형 2는 분수 덧셈의 확장 순간이에요. "꽉 찬 1 + 남은 칸" 막대가 가분수를 무섭지 않게 보증해 주고, "분모만큼 빼고 남은 수만 쓰는" 실수를 첫 시도 기준으로 잡아 주는 진단이 좋습니다.

참고 링크 카드

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

[초등 4-2 수학] 분모가 같은 대분수의 덧셈 (분자의 합 < 분모)

자연수끼리, 분수끼리 따로! 대분수 덧셈 웹앱(분자의 합이 분모보다 작을 때)

한 줄 소개: 1과 2/5 + 2과 1/5 = 3과 3/5, 대분수(자연수와 진분수) 덧셈의 "따로 더하기"를 세로식과 열 플래시 힌트로 잡아주는 4학년 2학기 '분수의 덧셈과 뺄셈' 유형 3 연습 웹앱(web app)입니다. 프롬프트 복사 → 제미나이에 붙여넣기 → 완성된 index.html 더블클릭, 수업 준비 3분이면 끝!

이 앱이 잡아주는 것: ① 대분수는 자연수 부분과 분수 부분을 나눠 더한다는 원리 ② 분수 부분은 분자끼리, 분모는 그대로 ③ 자연수를 더하지 않거나 분자 값을 자연수 칸에 쓰는 실수 사전 차단. 틀린 칸은 지우기(⌫)로 스스로 고치게 설계했습니다.

📖 한 줄 정의

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

1. 3대 핵심 분석 비교표

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

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
대분수 세로식	자연수 칸(보라) 옆에 분수 [분자(빨강)/가로선/분모(파랑)]를 세워 대분수를 그대로 보여줍니다. 답도 [자연수][분자/가로선/분모] 같은 구조라 "어디가 무엇인지"가 명확합니다.	"대분수를 자연수 칸과 분수 세로식으로 보여주고 답도 같은 구조로 알려줘"
분자의 합 → 분모 → 자연수 입력	분자(위칸)의 합 → 분모(그대로) → 자연수(따로 합) 순서로 입력합니다. 틀린 칸은 클릭해 골라 지우기(⌫)로 고치고, 모든 칸을 채우면 다음 문제로(전부 정답일 때만 폭죽!).	"분자, 분모, 자연수 순서로 입력하게 하고 틀린 칸은 지우기 버튼으로 고치게 해줘"
자릿수별 열 플래시 힌트	힌트를 누르면 분자끼리 → 분모 그대로 → 자연수끼리 순서로 해당 칸이 반짝이며 단계 설명이 나옵니다. "→ 3과 3/5! 자연수끼리, 분수끼리 따로 더했어요!"로 마무리.	"분자, 분모, 자연수 칸을 순서대로 반짝이며 단계별 힌트를 만들어줘"

수업 현장 팁: 유형 3은 대분수 덧셈의 기본형이에요. "자연수끼리 따로, 분수끼리 따로"를 손가락 두 개(자연수 칸·분자 칸)로 짚게 하면 실수가 확 줄어요. 이 유형은 분자의 합이 분모를 넘지 않는 문제만 나오니, 넘는 경우는 다음 유형에서 다룬다고 미리 말해 주면 아이가 안심합니다.

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

제미나이를 열고 아래 프롬프트를 복사해서 붙여넣기 — 먼저 제미나이가 3가지 확인 질문을 하면, 원하는 답(문제 범위·문제 수·배포 방식)을 알려주세요.
완성되면 파일 다운로드 → index.html 더블클릭 — 서버 실행·프로그램 설치 없이 브라우저에서 바로 열립니다.
동작 확인 — 문제 3개쯤 풀어보고, 답의 자연수 부분도 진짜 계산 값으로 채워지는지, 힌트의 열 플래시가 분자→분모→자연수 순서로 재생되는지 확인하세요.

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

[목표]
초등학교 4학년 2학기 '분수의 덧셈과 뺄셈' 유형 3(분모가 같은 대분수의 덧셈, 분자의 합이 분모보다 작을 때) 연습 웹앱을
단일 index.html 파일로 만들어줘. 서버 실행·설치 없이 더블클릭으로 열리는 완결 앱이어야 해.

[먼저 이렇게 물어봐]
작업 시작 전에 아래 3가지를 나에게 확인해.
1. 문제 범위: 대분수끼리(예: 1과 2/5 + 2과 1/5 = 3과 3/5)로 자연수 부분의 합은 한 자리(9 이하), 분자의 합은 분모보다 작게 할지
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에도 저장하지 마.

[문제 생성]
- 분모 d는 5~9, 자연수 부분은 각각 1~9에 합이 9 이하, 두 분자는 각각 1 이상에 합이 d-1 이하(분수 부분이 진분수로 유지)가 되도록 생성. 예: 1과 2/5 + 2과 1/5 = 3과 3/5.
- 두 분수의 분모는 항상 같게. 직전 문제 반복 금지. 문제 생성 규칙은 generateProblem() 함수 하나로 분리해 다른 유형에서 재사용하기 쉽게.

[상황 카드]
- 상황 문장(예: "케이크 1과 2/5조각과 2과 1/5조각을 먹으면 모두 몇 조각을 먹은 걸까요?")과 배지로 시각화(피자/케이크/빵/수박 조각 테마). 대분수 표기는 자연수 받침에 맞춰 '1과', '2와'처럼 조사를 붙여 써요.

[풀이 UI - 대분수 세로식 + 네모 칸 입력]
- 대분수 세로식: 피연산자 두 개를 [자연수 칸][분자 칸 / 가로선 / 분모 칸] 구조로 나란히 세우고(+ 기호는 가로선 높이에 표시), 답도 같은 구조로 아래에.
- 자릿값 색: 자연수 부분=보라, 분자=빨강, 분모=파랑, 가로선=회색.
- 답안 칸: [자연수 칸(보라 테두리)][분자 칸(빨강 테두리)][가로선][분모 칸(파랑 테두리)], 84px. (자연수 칸은 빈 칸이 아니라 진짜 계산 값)
- 입력 순서(중요): 분자(위칸)의 합 → 분모(원래 분모 그대로) → 자연수 부분. 화면 숫자판(0~9)+키보드.
- 클릭 선택: 네모 칸을 클릭하면 해당 칸으로 커서 이동(수정할 칸 선택 가능).
- ⌫ 지우기 버튼(숫자판에 배치, 키보드 Backspace 동일): 현재 선택 칸의 입력을 지워 다시 입력할 수 있음(풀이 중에만 사용).
- 문제 완료 조건: 모든 칸을 채우면 정답 여부와 관계없이 다음 문제로 자동 진행. 전부 정답일 때만 confetti 파티클 + 축하 아르페지오 + "정답! 🎉", 오답이 포함되면 축하 없이 "다음 문제로 넘어가요!" 표시.
- 오답 반응: 빨간 배경 + 좌우 shake + 낮은 톤, 오답 숫자는 빨간 칸에 그대로 유지. 한 문제에서 2칸 이상 오답 시도가 있으면 다음 문제 전에 힌트 버튼 깜빡임 제안. 음소거/음량 버튼.

[힌트 모드]
- 자릿수별 열 플래시: 힌트를 누르면 분자 칸들 → 분모 칸들 → 자연수 칸들 순서대로 반짝이며 단계 설명 표시. "분자끼리: 2+1=3! 분모는 그대로 5! 자연수끼리: 1+2=3! → 3과 3/5! 자연수끼리, 분수끼리 따로 더했어요!"
- 힌트를 쓴 문제는 결과 화면에서 "힌트 사용"으로 구분.

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

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

[결과 화면 - 오답 분석]
- 요약 카드: 바로 맞힌 문제, 실수한 문제, 힌트 사용 횟수, 정답률.
- 오답이 있으면 첫 시도 기준으로 틀린 유형/이유/해결 방법을 아이 눈높이 문장으로 출력:
  - 자연수를 더하지 않음(자연수 칸 시도 = 자연수 하나) → 이유: "대분수는 자연수와 분수를 함께 더해요" → 해결: 자연수끼리 따로 더하는 걸 잊지 않기.
  - 분자 값을 자연수 칸에 씀 → 이유: "분자는 분수의 위칸, 자연수는 왼쪽 칸이에요" → 해결: 칸 위치를 먼저 짚고 값 채우기.
  - 분모를 분모끼리 더함 → 이유: "분모가 같을 때는 분모를 더하지 않아요" → 해결: 분모 칸에는 원래 분모를 그대로 쓰기.
  - 분자 하나만 씀(분자 칸 시도 = 두 분자 중 하나) → 이유: "두 수를 더해야 하는데 하나만 적었어요" → 해결: 두 칸의 수를 짚고 다 더하기.
  - 분자와 분모를 바꿔 씀 → 이유: "위칸과 아래칸을 바꿔 읽었어요" → 해결: 위칸이 분자, 아래칸이 분모! 먼저 짚고 쓰기.
  - 자연수 덧셈 반복 실수(정답±1, 2회 이상) → 이유: "자연수 부분끼리 더할 때 계산이 틀렸어요" → 해결: 자연수 부분만 모아 소리 내어 더하기.
  - 분자 덧셈 반복 실수(정답±1, 2회 이상) → 이유: "분자끼리 더할 때 계산이 틀렸어요" → 해결: 분수 조각을 소리 내어 세기.
  - 해당 없음 → 이유: "순간적인 실수예요" → 해결: "자릿수별로 하나씩 검산하는 습관".
  - 각 진단은 [틀린 부분 요약] + [이유] + [해결 방법] 형식, 격려 톤.
- 맞춤 보충 연습 버튼(틀린 문제의 분자합·자연수합 위주 5문제), 오답 문제 목록(과정 다시 보기), 전부 정답 시 축하 파티클 + "다음 단계: 분자의 합이 분모를 넘는 대분수 덧셈 도전!" 추천, "다시 연습" 버튼.

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

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

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

에디터 한줄평: 대분수 덧셈의 기본형을 정확히 잡는 유형 3이에요. "자연수끼리, 분수끼리 따로"를 칸 색(보라·빨강·파랑)과 열 플래시 힌트로 반복 각인시켜 주는 설계가 좋고, 분자 값을 자연수 칸에 쓰는 자리 혼동까지 진단해 줍니다.

참고 링크 카드

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