2026년 9월 6일 일요일

[바이브 코딩 교구] 제미나이로 만드는 초3 수학 '수의 계열과 크기 비교' 동적 선 잇기 웹앱 (SVG 실시간 연결 & 거꾸로 프롬프트)

🔗 제미나이 바이브 코딩으로 만드는 초3 수학 '수의 계열과 크기 비교' 선 잇기 웹앱: SVG 동적 연결선 & 에러 제로 거꾸로 프롬프트

💡 이번 교구 바이브 코딩 30초 핵심 다이제스트:
초등학교 3학년 수학 '다섯 자리 이상의 수의 범위에서 수의 계열과 크기 비교'는 단순 지필 학습지로는 뛰어세기 규칙과 자릿수 비교 과정을 시각적으로 체득하기 어렵습니다.
클릭 한 번으로 왼쪽 조건과 오른쪽 결과가 실시간 SVG 연결선으로 이어지는 인터랙티브 'A-B 매칭(선 잇기)' 디지털 교구를 제미나이와 함께 단일 HTML5 파일로 완성해 보세요!
학생 개인정보를 철저히 보호하는 12가지 동물 닉네임 시스템과 정답 확인 시 초록/빨강 시각 피드백, 그리고 결과 화면의 학습 인증 포토카드 PNG 다운로드까지 갖춘 완성형 수학 교구입니다.

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

무엇이 바뀌었나요? (영역) 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
📐 실시간 동적 SVG 선 잇기 인터랙션 왼쪽 항목과 오른쪽 항목을 마우스나 손가락으로 누르면 화면에 푸른색 연결선이 부드럽게 그려집니다. 전자칠판 앞에서 학생이 직접 터치하며 '34500보다 100 큰 수'를 찾아 선으로 잇기
🔢 뛰어세기 계열 & 자릿값 대소 비교 100씩, 1000씩 뛰어세기 규칙과 높은 자리부터 비교하는 수의 대소 비교 알고리즘을 5개 실전 짝으로 학습합니다. 48200과 48190처럼 최고자리는 같고 십의 자리가 다른 수의 정밀 비교 훈련
🛡️ 개인정보 제로 & 단일 파일 완결 실명 수집과 복잡한 서버 설치 없이, 브라우저 단독 실행 단일 HTML 파일로 오프라인에서도 완벽 구동됩니다. 선 연결 완료 후 시도 횟수와 점수가 담긴 학습 인증서를 PNG 이미지로 내려받아 패들렛에 제출

🎯 초등 3학년 수학 '수의 계열과 크기 비교' 교육과정 비계설정 포인트

  • 1. 뛰어세기를 통한 수의 규칙적 계열화:
    100씩 뛰어세기(예: 34500 ➔ 34600), 1000씩 거꾸로 뛰어세기(예: 70000보다 1000 작은 수 = 69000)를 매칭하여 수의 규칙성을 손으로 직접 연결합니다.
  • 2. 수의 범위와 사이 수 추론:
    "56000과 57000 사이의 수" 조건을 제시하여 56500을 매칭하게 함으로써, 수직선 상에서 수의 상대적 위치 감각을 체득합니다.
  • 3. 최고자리부터 순차 비교하는 대소 판별:
    자릿수가 같은 두 수(48200 vs 48190)에서 만의 자리와 천의 자리가 같을 때 십의 자리(0 vs 9)를 비교하여 부등호(>, <) 관계를 도출하는 체계적 사고를 유도합니다.
  • 4. 정답 확인 및 시각적 색상 피드백:
    [정답 확인] 버튼을 누르면 올바른 연결선은 선명한 초록색, 잘못된 연결선은 붉은색 테두리로 바뀌어 학생 스스로 오개념을 수정할 기회를 제공합니다.

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

📌 따라하기 3단계 순서

  1. 1단계 (거꾸로 프롬프트 복사): 아래 제공된 [제미나이 전용 수의 계열 선 잇기 거꾸로 프롬프트]를 복사하여 구글 제미나이(https://gemini.google.com)에 입력합니다.
  2. 2단계 (역질문 3가지 답변): 제미나이가 되묻는 질문(매칭 문항 수, 난이도 범위, 디자인 테마)에 내 교실 상황에 맞게 1줄로 답변합니다.
  3. 3단계 (단일 index.html 실행): 제미나이가 출력한 완성형 코드를 메모장에 넣고 math_match_game.html로 저장한 뒤 더블 클릭하면 브라우저에서 즉시 선 잇기 교구가 실행됩니다!

📋 복사해서 바로 쓰는 '제미나이 전용 선 잇기 에러 제로 프롬프트'

당신은 초등 수학 교육과정 전문가이자 프론트엔드 인터랙티브 웹 개발자입니다.
2022 개정 초등학교 3학년 수학 성취기준: "다섯 자리 이상의 수의 범위에서 수의 계열을 이해하고, 수의 크기를 비교하며 그 방법을 설명할 수 있다."를 완벽히 구현한 'A와 B 동적 선 잇기(Matching Pairs)' 교구 웹앱을 단일 HTML5 파일로 제작해 주세요.

[🚨 에러 방지 및 개인정보 안심 필수 안전장치 (Zero-Error Baseline)]
1. 단일 파일 완결성: 외부 서버 설치 없이, 브라우저에서 바로 열리는 단일 HTML5 파일 안에 HTML, Tailwind CSS(CDN), Lucide Icons(CDN), 동적 SVG 선 렌더링 자바스크립트를 모두 포함할 것. 생략 주석(// TODO, /* 생략 */ 등) 없이 완전한 코드로 출력할 것.
2. 개인정보 원천 차단: 학생 실명/학번 입력을 요구하지 말고, 입장 화면에서 12가지 귀여운 동물 닉네임(탐구왕 호랑이, 지혜로운 여우 등)을 선택해 입장하도록 할 것.
3. 실시간 SVG 선 렌더링: 왼쪽 박스와 오른쪽 박스를 클릭하면 두 요소의 중심 좌표를 계산하여 실시간 SVG <line> 요소를 화면에 부드럽게 그릴 것. 연결 수정 및 재연결 로직을 직관적으로 지원할 것.
4. 성취기준 5대 매칭 데이터 내장:
   - 왼쪽 1: '34500보다 100 큰 수' ➔ 오른쪽: '34600'
   - 왼쪽 2: '56000과 57000 사이의 수' ➔ 오른쪽: '56500'
   - 왼쪽 3: '99990보다 10 큰 수' ➔ 오른쪽: '100000 (십만)'
   - 왼쪽 4: '48200과 48190의 크기 비교' ➔ 오른쪽: '48200 > 48190'
   - 왼쪽 5: '70000보다 1000 작은 수' ➔ 오른쪽: '69000'
5. 시각 및 청각 피드백: Web Audio API로 연결음과 정답음을 합성하고, [정답 확인] 클릭 시 맞힌 선은 초록색, 틀린 선은 붉은색 테두리로 표시할 것.
6. 결과 포토카드 저장: 5쌍을 모두 맞히면 html2canvas CDN을 활용해 닉네임, 점수, 시도 횟수가 담긴 학습 카드를 PNG 파일로 다운로드할 수 있게 할 것.

[❓ 역질문 유도 (Reverse Prompting)]
코드를 작성하기 전에, 나에게 아래 3가지 질문을 먼저 던져서 세부 구성을 확정해 줘:
1. 문항 난이도를 다섯 자리 수(만 단위) 집중으로 할까요, 억·조 단위 큰 수까지 혼합할까요?
2. 모바일/태블릿 터치 시 선을 드래그해서 긋는 방식과 탭-탭(Tap to Connect) 방식 중 어떤 것을 우선할까요?
3. 전체 디자인 톤을 부드러운 파스텔 크림/블루 테마와 교실 칠판 테마 중 어떤 스타일로 맞출까요?

🎯 에디터 한줄평

"눈으로만 보던 수의 크기와 규칙이, 마우스와 손끝을 따라 그려지는 푸른 연결선을 통해 직관적인 수 감각으로 완성됩니다. 지필 평가의 지루함을 한 방에 날리는 인터랙티브 교구입니다!"

🔗 교육과정 및 웹 표준 레퍼런스:
• 2022 개정 교육과정 초등학교 수학과 교육과정 (수와 연산 [4수01-02])
• HTML5 Inline SVG Line Rendering API
• Web Audio API & Tailwind CSS CDN
By 시간: