2026년 9월 8일 화요일

[과학·실과] 수도관과 도로로 배우는 전기 회로 & 컴퓨터 네트워크 시뮬레이터

수도꼭지를 잠그면 전기가 끊긴다? — 일상 사물 비유 전기 회로 & 컴퓨터 네트워크 원리 시뮬레이터

💡 초등 6학년 과학 '전기의 이용' 및 실과 '네트워크와 정보 전달' 단원 — 눈에 보이지 않는 전자의 흐름과 인터넷 패킷의 이동을 학생들이 가장 익숙한 '수도관(수압, 밸브, 물레방아)''우편배달부(편지, 주소, 택배 터미널)'에 1:1로 매핑하여 애니메이션으로 조작해 보는 과학·정보 융합 인터랙티브 시뮬레이터입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
추상적 개념 vs 실물 사물 비유 전압=수압(물탱크 높이), 전류=물 흐름 속도, 저항=수도관 굵기, 스위치=수도꼭지 밸브로 1:1 시각화합니다. 슬라이더로 물탱크를 높이면 전구(물레방아)가 빨라지는 직관적 체험.
네트워크 패킷과 편지 배달부 인터넷 데이터가 작게 쪼개진 패킷(Packet)이 되어 라우터를 거쳐 목적지 IP 주소로 배달되는 과정을 트럭 애니메이션으로 구현합니다. 실과 '인터넷 통신' 단원에서 패킷 손실 및 재전송 원리 수업.
순수 Canvas 동적 애니메이션 외부 물리 엔진 라이브러리 없이 순수 HTML5 캔버스로 물 입자와 편지 트럭이 파이프/도로를 달리는 모습을 그립니다. 전자칠판에 전체 화면으로 띄워 터치 조작 실습.

2. 핵심 아키텍처 해설

① 물리 비유 매핑 모델: ANALOGY_MODELS 상수

const ANALOGY_MODELS = {
  circuit: {
    voltage: { name: "전압 (V)", metaphor: "물탱크 높이 (수압)", unit: "V", default: 5 },
    current: { name: "전류 (I)", metaphor: "흘러가는 물의 양", unit: "A", formula: "V / R" },
    resistance: { name: "저항 (R)", metaphor: "파이프의 좁은 정도", unit: "Ω", default: 10 },
    switch: { name: "스위치", metaphor: "수도꼭지 밸브", state: true }
  },
  network: {
    packet: { name: "데이터 패킷", metaphor: "작게 나뉜 택배 상자" },
    router: { name: "라우터/공유기", metaphor: "우체국 물류 분류 센터" },
    ip: { name: "IP 주소", metaphor: "우리 집 도로명 주소" }
  }
};

과학과 정보 교과의 핵심 개념을 일상 사물의 언어로 번역한 심기 모드(데이터 임베딩) 사전 구조입니다.

② 옴의 법칙(Ohm's Law) 시뮬레이션 계산 루프

function calculateCircuit(v, r, isClosed) {
  if (!isClosed) return { current: 0, bulbBrightness: 0 };
  const current = v / r; // I = V / R
  const brightness = Math.min(100, Math.round((current / 1.5) * 100));
  return { current: current.toFixed(2), bulbBrightness: brightness };
}

슬라이더로 전압(수압)을 높이거나 저항(파이프 굵기)을 좁힐 때마다 옴의 법칙에 따라 전류가 실시간 재계산되며, 연결된 전구의 밝기가 노란색 광채(glow)로 즉시 갱신됩니다.

③ 순수 Canvas 파티클 흐름 렌더링

파란색 물 입자(전자)들이 파이프 회로를 따라 일정한 속도로 회전하는 애니메이션 루프를 requestAnimationFrame으로 구동하여 완벽한 오프라인 단일 HTML 구동을 보장합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 기본 모드(전기 회로 vs 컴퓨터 네트워크)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 과학사물시뮬레이터.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 물리 엔진, 외부 그래픽 라이브러리 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 2대 모드 탭 지원: 상단 탭으로 '① 전기 회로(수도관 비유)'와 '② 컴퓨터 네트워크(택배 배달 비유)'를 자유롭게 전환할 수 있도록 한다.
3. 옴의 법칙 슬라이더 인터랙션: 전압 슬라이더(1~12V)와 저항 슬라이더(1~20Ω), 스위치 토글을 두어 전구 밝기와 물 흐름 속도가 실시간 변화하도록 한다.
4. 네트워크 패킷 애니메이션: 송신 컴퓨터에서 출발한 3개의 택배 상자가 공유기(라우터)를 거쳐 수신 컴퓨터에 도달하는 애니메이션을 Canvas에 그린다.
5. 학생 개인정보 0: 학생 실명 입력 없이 누구나 즉시 조작해 보는 탐구 도구로 완결한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 기본으로 먼저 열릴 탭은 전기 회로 모드와 네트워크 모드 중 어느 것으로 할까요?
2. 전구(물레방아) 과부하 시 '퓨즈 단선' 경고 연출도 포함할까요?
3. 네트워크 모드에서 패킷 전송 속도를 조절하는 속도 슬라이더도 배치할까요?

🎯 에디터 한줄평

"과학과 기술이 어려운 이유는 공식 때문이 아니라 '눈에 보이지 않기 때문'입니다. 수도꼭지를 잠그면 불이 꺼지고, 우체국 택배가 나뉘어 배달되는 장면을 눈으로 확인하는 순간, 아이들은 더 이상 옴의 법칙이나 IP 주소를 외우지 않고 당연한 상식으로 이해하게 됩니다."

📚 기술·교육 참고 링크

  • 비유를 활용한 과학 교수학습 모형(FAR 모델: Focus-Action-Reflection)
  • 교육과정 연계: 초등 6학년 과학(전기의 이용, 전지 연결), 실과(정보 사회와 네트워크 통신)

[창체·실과] 교실 불편 해결 아이디어톤 - 학생 주도 1일 1웹앱 제작 챌린지

교실의 작은 불편, 우리가 직접 코딩으로 푼다! — 우리 반 불편 사항 해결 아이디어톤 & 1일 1웹앱 제작 챌린지

💡 초등 5~6학년 창의적 체험활동 및 실과 '소프트웨어와 문제 해결' 단원 — "우유 당번 확인이 헷갈려요", "도서관 책 반납일이 기억 안 나요" 등 아이들이 교실 생활에서 겪는 생생한 불편을 발굴하고, 브레인스토밍부터 요구사항 정의, 제미나이 프롬프팅을 거쳐 단 하루 만에 작동하는 웹앱을 만들어 배포하는 해커톤형 프로젝트 수업입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
불평하기 vs 해결사 되기 교실 규칙에 대해 단순히 불만을 털어놓는 데서 끝나지 않고, "어떤 도구가 있으면 편해질까?"로 생각을 전환해 직접 만듭니다. 포스트잇에 불편 3가지 적기 ➔ 투표로 모둠 대표 해결 과제 1개 선정.
4단계 린(Lean) 빌드 파이프라인 불편 한 줄 정의 ➔ 해결 기능 2가지 압축 ➔ 제미나이 1차 생성 ➔ 교실 실기 테스트의 초단기 사이클을 경험합니다. 2시간 블록 수업 안에 기획부터 실행 가능한 HTML 파일 완성까지 완결.
학급 공식 앱 스토어 공유 각 모둠이 만든 단일 HTML 파일을 학급 공용 PC나 전자칠판의 '우리 반 앱 서랍'에 바로가기로 등록해 매일 실사용합니다. 일주일간 사용 후 '가장 유용했던 앱' 피드백 스티커 수여.

2. 핵심 아키텍처 해설

① 교실 문제 정의 템플릿: PROBLEM_SPEC 상수

const PROBLEM_SPEC = {
  problem: "급식 먹을 때 오늘 메뉴 알레르기 유발 물질 확인이 번거로움",
  targetUser: "우리 반 전체 학생",
  coreFeatures: [
    "오늘의 식단 텍스트를 입력하면 알레르기 유발 번호(1~19번) 강조 표시",
    "내 알레르기 번호를 체크해두면 경고 팝업 및 배경색 변경"
  ],
  outputType: "단일 HTML 웹앱"
};

기능을 욕심내다 미완성으로 끝나는 일을 막기 위해, 핵심 기능 딱 2가지만 명세서로 압축해 프롬프트에 넣는 심기 모드(데이터 임베딩) 사전 기획 규격입니다.

② 모둠별 앱 서랍 런처(Launcher) 구조

const CLASS_APPS = [
  { id: "app-1", name: "우유 당번 자동 알리미", author: "1모둠", file: "milk_helper.html", icon: "🥛" },
  { id: "app-2", name: "급식 알레르기 세이프존", author: "2모둠", file: "allergy_safe.html", icon: "🥗" },
  { id: "app-3", name: "쉬는 시간 소음 신호등", author: "3모둠", file: "noise_light.html", icon: "🚦" }
];

각 모둠이 완성한 단일 파일들을 학급 전자칠판에서 태블릿 터치 한 번으로 띄울 수 있도록 목록을 관리하는 가벼운 런처 대시보드 설계입니다.

③ 개인정보 0 학내망 원칙 준수

학생 실명 대신 '1모둠', '디지털해결사' 등 모둠 닉네임만 표시하며, 사용자 설정값은 브라우저 localStorage에만 보관되어 외부 유출이 원천 차단됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 우리 반의 해결 대상 불편 사항에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 교실해결앱.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 CDN, 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 초간결 MVP 규칙: 해결하고 싶은 교실 불편 사항에 대해 핵심 인터랙션 버튼 2개와 결과 카드 1개로 화면을 압축 구성한다.
3. 로컬 지속성: 브라우저 localStorage를 활용하여 새로고침해도 학생이 설정한 옵션이나 데이터가 유지되도록 한다.
4. 학생 개인정보 0: 학생 실명 입력을 일절 배제하고 모둠 닉네임만 사용한다.
5. 직관적 피드백: 버튼 클릭 시 Web Audio API 합성 효과음('띡', '짜잔')을 넣어 초등학생이 성취감을 느끼게 한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 모둠이 해결하려는 교실 내 구체적 불편 상황은 무엇인가요?
2. 이 웹앱의 가장 핵심적인 조작 버튼 1~2개는 무엇으로 구성할까요?
3. 초등학생 눈높이에 맞춘 메인 테마 색상(파스텔 블루, 민트 그린 등)은 무엇이 좋을까요?

🎯 에디터 한줄평

"코딩 교육의 진정한 가치는 프로그래머를 양성하는 것이 아니라, 주변의 불편을 능동적으로 해결하는 '시민적 주체'를 길러내는 데 있습니다. 아이들이 직접 만든 도구가 교실 전자칠판에 상시 구동되어 친구들의 하루를 편안하게 해주는 경험은 그 어떤 교과서보다 강렬한 효능감을 선물합니다."

📚 기술·교육 참고 링크

  • 디자인 씽킹(Design Thinking) 초등 교육 적용 모델: 공감-정의-아이디어-시제품-테스트
  • 교육과정 연계: 초등 5~6학년 실과(소프트웨어와 문제 해결), 창의적 체험활동(자율·자치 적응 활동)

[미술·실과] 1인 1작품 네온 다크모드 갤러리 - Antigravity 8대 룰로 여는 학급 전시회

교실 불을 끄면 열리는 환상적인 미술관 — Antigravity 8대 룰 기반 학생 1인 1작품 전시회 네온 다크모드 갤러리 웹앱

🎨 초등 3~6학년 미술 '작품 감상과 전시' 및 실과 '웹 디자인과 표현' 단원 — 교실 벽면의 좁은 게시판을 벗어나, 깊은 밤의 전시관처럼 칠흑 같은 다크모드 배경 위로 학생들의 그림이 영롱한 네온(Neon) 빛 액자에 담겨 떠오르는 1인 1작품 가상 갤러리입니다. 복잡한 UI 프레임워크 없이 Antigravity의 8대 미학 룰을 순수 CSS로 재현하여 시각적 몰입감을 극대화합니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
흰색 웹페이지 vs 네온 다크모드 미학 눈부신 흰 바탕 대신 차콜 블랙(#0f172a)과 네온 사이언/퍼플 빛 그림자(glow)로 작품을 입체감 있게 강조합니다. 전자칠판 화면을 다크 갤러리로 띄우고 교실 조명을 낮춰 미술관 분위기 연출.
Antigravity 8대 룰의 순수 CSS화 부유감(Float), 네온 글로우, 글래스모피즘, 부드러운 감속을 라이브러리 없이 box-shadowbackdrop-filter로 구현합니다. 카드에 마우스를 올리면 액자가 앞으로 살짝 솟아오르는 인터랙션.
작품 설명 라이트박스 팝업 작품을 누르면 어두운 암전 속에서 확대 이미지와 함께 학생 작가의 한 줄 작품 의도가 감성적으로 떠오릅니다. 학부모 공개수업 주간 모바일 QR코드로 전시회 초대장 배포.

2. 핵심 아키텍처 해설

① 전시 작품 데이터셋: ART_GALLERY 상수

const ART_GALLERY = [
  {
    id: "art-1",
    title: "우리 동네의 노을빛",
    artist: "1번 별빛작가",
    genre: "수채화",
    desc: "하교할 때 보았던 아파트 너머 붉은 하늘을 투명하게 번지는 물감으로 표현했습니다.",
    glowColor: "#38bdf8", // 네온 스카이블루
    image: "data:image/svg+xml;utf8,..." // Base64 또는 인라인 SVG
  },
  {
    id: "art-2",
    title: "미래 도시의 숲",
    artist: "2번 초록바람",
    genre: "디지털 드로잉",
    desc: "빌딩 옥상마다 거대한 나무가 자라나 공기를 맑게 해주는 상상을 담았습니다.",
    glowColor: "#a855f7", // 네온 퍼플
    image: "data:image/svg+xml;utf8,..."
  }
];

외부 이미지 서버가 끊겨도 언제나 전시회가 열릴 수 있도록 작품 메타데이터와 인라인 그래픽을 파일 상단에 심어두는 심기 모드(데이터 임베딩) 표준 구조입니다.

② Antigravity 네온 글로우 CSS 엔진

.neon-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.neon-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 25px var(--glow), 0 20px 40px rgba(0, 0, 0, 0.5);
  border-color: var(--glow);
}

부드러운 스프링 감속 곡선(Cubic-bezier)과 듀얼 레이어 박스 섀도(Box-shadow)로 물체가 공중에 떠 있는 듯한 무중력(Antigravity) 시각 효과를 연출합니다.

③ 개인정보 0 익명 작가 보호

학생의 실제 성명 대신 번호와 자치 필명('1번 별빛작가')만 노출하고, 방명록 하트 응원은 브라우저 세션 메모리에서만 카운트되어 외부 데이터 유출이 없습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 전시회 주제(가을 풍경, 미래 상상화 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 네온갤러리.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 CSS/JS 라이브러리 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 네온 다크모드 미학: 짙은 네이비/블랙(#0b0f19) 배경 위로 카드 호버 시 화려한 네온 글로우(Cyan, Purple, Emerald)가 빛나도록 CSS를 설계한다.
3. 심기 모드(데이터 임베딩): const ART_GALLERY = [...] 상수에 모둠별 샘플 미술 작품 6~8편과 작품 설명, 네온 컬러 코드를 기본 내장한다.
4. 라이트박스 팝업: 카드를 클릭하면 화면 전체가 어두워지며 중앙에 큰 액자와 작품 해설이 뜨는 모달(Modal) 창을 구현한다.
5. 학생 개인정보 0: 학생 실명 대신 번호와 '예술가 닉네임'만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 이번 학급 전시회의 대표 테마 명칭(예: 꿈꾸는 밤의 미술관)은 무엇으로 할까요?
2. 네온 액자의 메인 컬러톤은 사이언/블루 계열과 퍼플/핑크 계열 중 무엇으로 지정할까요?
3. 관람객이 작품마다 누를 수 있는 '응원 하트(❤️)' 카운터 기능도 포함할까요?

🎯 에디터 한줄평

"같은 그림이라도 어떤 조명 아래 걸리느냐에 따라 작품의 무게가 달라집니다. 아이들이 정성껏 그린 그림을 어두운 밤하늘의 네온 액자 속에 띄워주는 것만으로도, 아이들은 자신이 교실의 학생을 넘어 세상에 울림을 주는 '진짜 작가'가 되었음을 가슴 깊이 체감합니다."

📚 기술·교육 참고 링크

  • 글래스모피즘(Glassmorphism)과 다크모드 UI 인터랙션 설계 가이드
  • 교육과정 연계: 초등 3~6학년 미술(작품의 감상과 비평, 나도 큐레이터), 실과(디지털 매체 표현)

[도덕·국어·미술] 키워드 조합형 상호 칭찬 롤링페이퍼 - 형용사 선택이 어려운 친구를 위한 글쓰기 도우미

버튼만 누르면 글쓰기가 되는 마법! — 키워드 버튼 조합형 학생 상호 칭찬 롤링페이퍼 & 바른 언어 글쓰기 도우미

✏️ 초등 4~6학년 도덕 '칭찬과 격려의 말' 및 국어 '글쓰기 도우미' 융합 — 친구들에게 글을 쓰다 보면 "별로 아무렇지 않은 것 같은데"라며 어떻게 표현해야 할지 난감할 때가 있습니다. 미리 정해진 성향 키워드 버튼 9개(성실, 배려, 유머, 긍정, 꾸준함, 협동, 창의, 책임, 공감)를 클릭만으로 조합하면 어색하지 않고 따뜻한 문장이 저절로 완성되는 상호 반응형 롤링페이퍼입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
어색한 지필 메모 vs 선택형 문장 조립 빈 종이 앞에서 막막한 학생을 위해 3~4개의 긍정적 키워드를 선택하면 문법적으로 완전한 칭찬 문장이 자동 조립됩니다. [성실]+[수학]+[조원] 체크 → "매일 수학 시간마다 성실하게 알림장을 지우고 친구들을 도와주는 모습이 멋있어!" 자동 완성.
부정적 언어 차단 방식 빈칸 자유 입력 방식에서 발생할 수 있는 '곤란한 말'의 실수를 원천 차단하고 긍정적 사고의 기둥만 제공합니다. 부정 어휘 선택란이 아예 없으므로 친구들 사이에 상처를 주는 순간을 최소화합니다.
교실 벽에 띄우는 라이브 롤링페이퍼 모든 글이 모아지면 학급 전자칠판에서 종이롤처럼 자동으로 위로 넘어가며 명예의 전당처럼 보여줍니다. 학급 회의 종료 후 하루 품사 결과를 스티커 투표로 마무리.

2. 핵심 아키텍처 해설

① 문장 조립 구성 요소: KEYWORD_MAP 상수

const KEYWORD_MAP = {
  "성실": { adj: "성실하게", noun: "성실함" },
  "배려": { adj: "친구들을 배려하며", noun: "친구를 배려하는 마음" },
  "긍정": { adj: "밝게 웃으며", noun: "항상 밝은 긍정적인 태도" },
  "협동": { adj: "적극적으로 협동하며", noun: "협동심" },
  "책임": { adj: "책임감 있게", noun: "책임감" }
};

문장의 어디에 들어가느냐에 따라 형태소를 변형하는 표준 한국어 조합 사전을 상수로 내장하는 심기 모드(데이터 임베딩) 구조입니다.

② 칭찬 문장 자동 조립 엔진

function buildSentence(selectedTags, subject) {
  // 태그별 문장 시작부 필터링 및 조합
  const selKeys = selectedTags.map(t => KEYWORD_MAP[t]);
  const adjectivePart = selKeys.map(k => k.adj).join("하고 ");
  const nounPart = selKeys.map(k => k.noun).join("과 ");
  return `${subject}의 모습은 정말 ${adjectivePart} 보기 좋습니다. ${nounPart}은(는) 우리 반의 보물입니다!`;
}

표현을 접해보지 못한 초보 작가들이 토씨 하나 틀리지 않고 깔끔한 칭찬 문장을 완성할 수 있도록 문장 뼈대를 조립해 주는 혁신적 국어 학습 도구입니다.

③ 세션 기반 롤링 페이퍼 리스트

작성된 문장은 즉시 HTML 카드 리스트의 상단에 추가되어 화면 상단으로 떠오르는 부드러운 트랜지션(transition) 효과로 교실 화면에 상시 노출됩니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 키워드 버튼 주제(교실 청소, 수업 협동 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 칭찬롤링페이퍼.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 외부 폰트 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 키워드 조합 레시피: 성향 키워드 버튼 6~9개(성실, 배려, 유머 등)를 클릭하여 자연스러운 칭찬 문장을 자동 조립하는 로직을 구현한다.
3. 학생 개인정보 0: 실명 대신 모둠 닉네임 표기만 사용하며, 익명성 보장을 위해 로그인 절차를 완전히 생략한다.
4. 심기 모드(데이터 임베딩): KEYWORD_MAP 상수에 긍정적 키워드 랜덤 문장 조립 파라미터를 기본 내장한다.
5. 롤링 효과음 및 트랜지션: 학생이 문장을 제출하면 종이가 접히는 듯한 애니메이션과 함께 새 카드가 맨 위로 올라오도록 연출한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 반 아이들이 제일 좋아하는 키워드 버튼 6개는 무엇으로 고를까요?
2. 완성된 문장은 그냥 보여줄까요, 아니면 밝은 노트용지 효과로 꾸며줄까요?
3. 문장 생성 시 양식이 똑같지 않게 하기 위해 최소 3개 이상의 랜덤 템플릿을 섞어볼까요?

🎯 에디터 한줄평

"친구를 칭찬하고 싶은데 글쓰기 실력이 부족한 아이들의 막힌 자연스러운 문장을 풀어주는 훌륭한 학습 도우미입니다. 도덕적 감수성을 기르면서 동시에 학생들이 어려워하는 한국어 형용사와 연접 조합의 문장 확장 규칙을 자연스럽게 학습하는 완벽한 실용적 도구입니다."

📚 기술·교육 참고 링크

  • 바른 말(어순 및 띄어쓰기) 표현 가이드: 긍정적 상호 피드백 언어 조립 훈련
  • 교육과정 연계: 초등 4~6학년 도덕(바라보는 눈과 칭찬), 국어(문장 완성하기와 태도)

[사회·수학·실과] 공공데이터 PDF 표 추출 - 엑셀 통계 그래프와 인포그래픽 만들기

딱딱한 보고서 표가 살아있는 그래프로 변신! — 초등 우리 고장 공공데이터 PDF 표 추출 & 엑셀 통계 그래프 인포그래픽 제작

📊 초등 5~6학년 사회 '우리 고장의 통계와 생활' 및 수학 '꺾은선그래프/비율그래프' 융합 — 시청이나 구청 홈페이지에 올라온 공공데이터 통계 보고서 PDF에서 복사도 안 되는 굵은 표를 텍스트로 똑똑하게 추출하고, 엑셀 표로 정리한 뒤 단 1초 만에 알록달록한 웹 인터랙티브 인포그래픽 그래프로 변환하는 실전 데이터 분석 수업 프로젝트입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
눈으로만 보던 PDF 표 vs 데이터화 그림처럼 굳어있는 공공데이터 표를 CSV/JSON 규격 텍스트로 변환해 내 컴퓨터가 읽을 수 있는 데이터로 바꿉니다. 우리 동네 최근 5년간 어린이 도서관 이용자 수 변화 표 추출.
복잡한 파이썬 없이 순수 Canvas 시각화 외부 차트 라이브러리(CDN) 없이 순수 HTML5 캔버스로 막대그래프와 꺾은선그래프를 부드러운 애니메이션으로 그립니다. 마우스를 올리면 정확한 연도와 수치가 말풍선 툴팁으로 팝업.
우리 동네 인포그래픽 포스터 인쇄 분석한 수치와 학생들이 작성한 '해석 한 줄'을 결합해 A4 규격 인포그래픽 보고서로 즉시 출력합니다. 사회과 탐구 학습 결과물로 교실 뒷벽 게시판 전시.

2. 핵심 아키텍처 해설

① 고장 통계 데이터셋: LOCAL_STATS 상수

const LOCAL_STATS = {
  title: "우리 동네 초등학생 인구 및 공원 면적 추이",
  years: ["2022년", "2023년", "2024년", "2025년", "2026년"],
  indicators: [
    { name: "초등학생 수 (명)", data: [1240, 1180, 1120, 1050, 990], color: "#3b82f6" },
    { name: "녹지 공원 면적 (천㎡)", data: [45, 48, 52, 55, 60], color: "#10b981" }
  ]
};

PDF에서 추출한 정제 데이터를 코드 상단에 심어두는 심기 모드(데이터 임베딩) 표준 구조로, 네트워크 통신 없이 오프라인에서 즉시 실행됩니다.

② 순수 Canvas 듀얼 축 그래프 렌더링

function drawBarChart(ctx, stats) {
  const maxVal = Math.max(...stats.indicators[0].data);
  stats.years.forEach((yr, idx) => {
    const val = stats.indicators[0].data[idx];
    const barHeight = (val / maxVal) * 200;
    ctx.fillStyle = stats.indicators[0].color;
    ctx.fillRect(50 + idx * 70, 250 - barHeight, 40, barHeight);
    ctx.fillText(yr, 50 + idx * 70, 270);
  });
}

외부 Chart.js 등 무거운 라이브러리에 의존하지 않고 좌표 계산 수식만으로 막대와 눈금선을 그려 가볍고 안전합니다.

③ CSV 붙여넣기 실시간 갱신

학생들이 엑셀에서 복사한 데이터를 텍스트 입력창에 붙여넣으면 즉시 정규식으로 파싱하여 새로운 그래프로 다시 그려주는 실시간 반응형 파이프라인을 갖추고 있습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 분석 대상 고장 통계(인구, 도서관, 자전거 도로 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 통계인포그래픽.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 CDN 차트 라이브러리 없이 순수 바닐라 HTML/CSS/JS 및 HTML5 Canvas로 완성한다.
2. 심기 모드(데이터 임베딩): const LOCAL_STATS = {...} 상수에 초등 사회과 관련 가상 공공데이터 2세트(연도별 수치)를 내장한다.
3. 엑셀 데이터 붙여넣기 폼: 엑셀에서 복사한 탭/쉼표 구분 텍스트를 붙여넣으면 즉시 캔버스 그래프가 다시 그려지는 입력창을 제공한다.
4. 그래프 애니메이션: 페이지 로딩 시 막대가 바닥에서 솟아오르는 부드러운 애니메이션 효과를 부여한다.
5. 학생 개인정보 0: 학생 실명 입력 없이 지역 통계 데이터만 다룬다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 고장의 어떤 통계 지표를 기본 예시로 탑재할까요? (예: 어린이 교통사고 감소 추이, 1인당 도서 대출 권수)
2. 그래프 형태는 막대그래프와 꺾은선그래프 중 무엇을 기본으로 할까요?
3. A4 인쇄 시 통계 그래프 아래에 '학생 데이터 해석 소감문' 작성 칸을 포함할까요?

🎯 에디터 한줄평

"통계표를 외우는 것은 지루한 암기지만, 숫자가 솟아오르는 그래프로 바뀌는 순간 데이터는 우리 동네의 이야기가 됩니다. 공공기관의 차가운 PDF 문서를 살아 숨 쉬는 인포그래픽으로 탈바꿈시키는 이 수업은, 아이들에게 세상을 데이터의 렌즈로 통찰하는 진짜 시민의 눈을 틔워줍니다."

📚 기술·교육 참고 링크

  • 공공데이터포털(data.go.kr) 지자체 통계 연감 활용 가이드
  • 교육과정 연계: 초등 5~6학년 사회(우리 고장의 변화와 발전), 수학(평균과 가능성, 비율그래프), 실과(정보 다루기)

[미술·체육·실과] 퍼스널 컬러 진단 & 나만의 스포츠 유니폼 디자인 모바일 앱

내 몸에 꼭 맞는 색과 번호! — 초등 체형·퍼스널 컬러 진단 & 나만의 스포츠 유니폼 디자인 모바일 웹앱

🎽 초등 5~6학년 미술 '색의 조화와 배색' 및 체육 '체형과 운동' 융합 — 학생들이 4가지 피부 톤(봄 웜, 여름 쿨, 가을 웜, 겨울 쿨)과 활동 체형(스피드형, 파워형, 밸런스형)을 자가 진단하고, SVG 벡터 그래픽으로 구현된 농구/축구 유니폼에 메인 컬러, 줄무늬, 배번, 영문 이니셜을 실시간으로 배색해보는 인터랙티브 디자인 스튜디오입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
눈대중 배색 vs 퍼스널 컬러 이론 사계절 퍼스널 컬러 팔레트 4종을 기본 제공하여 피부 톤과 대비되는 보색/유사색 조화를 직접 체험합니다. 봄 웜톤 팔레트 선택 시 산뜻한 코랄/라임/아이보리 조합 자동 추천.
실시간 SVG 유니폼 커스텀 외부 3D 그래픽 엔진 없이 순수 SVG 도면 위로 색상 팔레트 클릭 한 번에 옷깃, 몸통, 소매 색상이 즉시 변경됩니다. 등번호(0~99)와 영문 닉네임 입력 시 유니폼 뒷면 실시간 렌더링.
우리 반 운동회 유니폼 굿즈 도면 출력 완성된 유니폼 앞뒤 도면을 A4 규격 카드 형태로 브라우저 인쇄하여 학급 운동회 팀 조끼 디자인에 활용합니다. 학급 체육 대회 백팀/청팀 대표 유니폼 공모전 투표.

2. 핵심 아키텍처 해설

① 퍼스널 컬러 팔레트 사전: PALETTES 상수

const PALETTES = {
  springWarm: { name: "봄 웜톤 (생기발랄)", colors: ["#ff7f50", "#ffd700", "#98fb98", "#ffffff"] },
  summerCool: { name: "여름 쿨톤 (청량상쾌)", colors: ["#6495ed", "#b0e0e6", "#dda0dd", "#f8fafc"] },
  autumnWarm: { name: "가을 웜톤 (깊고따뜻)", colors: ["#d2691e", "#8b4513", "#556b2f", "#fef3c7"] },
  winterCool: { name: "겨울 쿨톤 (선명모던)", colors: ["#000080", "#dc143c", "#0f172a", "#ffffff"] }
};

미술 교과의 색채학 이론을 디지털 16진수 색상 코드로 매핑한 심기 모드(데이터 임베딩) 표준 데이터셋입니다.

② 동적 SVG 유니폼 렌더링 엔진

function renderJersey(mainColor, subColor, num, name) {
  return `
    <svg viewBox="0 0 200 240" class="jersey-svg">
      <!-- 몸통 -->
      <path d="M 40 40 L 70 20 L 130 20 L 160 40 L 140 220 L 60 220 Z" fill="${mainColor}" stroke="#333" stroke-width="2"/>
      <!-- 소매 스트라이프 -->
      <path d="M 40 40 L 20 80 L 50 90 L 60 60 Z" fill="${subColor}"/>
      <path d="M 160 40 L 180 80 L 150 90 L 140 60 Z" fill="${subColor}"/>
      <!-- 등번호 및 닉네임 -->
      <text x="100" y="80" text-anchor="middle" font-size="14" fill="${subColor}" font-weight="bold">${name}</text>
      <text x="100" y="150" text-anchor="middle" font-size="52" fill="${subColor}" font-weight="900">${num}</text>
    </svg>
  `;
}

외부 이미지 다운로드 없이 순수 수학 좌표로 유니폼의 옷본을 그리고, 사용자의 색상 선택에 따라 fill 속성을 실시간 교체하여 초고화질로 출력합니다.

③ 개인정보 0 안전한 굿즈 카드

학생의 본명 대신 체육 유니폼용 영문 이니셜(예: 'LION', 'SPEED-7')만 입력받으며, 모든 디자인 결과는 브라우저 안에서만 처리되어 외부 유출이 없습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 스포츠 종목(축구, 농구, 야구)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 유니폼디자인.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 이미지 파일이나 무거운 3D 라이브러리 없이 인라인 SVG와 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 실시간 SVG 유니폼: 메인 컬러, 서브 컬러(줄무늬), 등번호, 영문 닉네임을 변경할 때마다 중앙의 유니폼 SVG가 깜빡임 없이 즉각 재렌더링되도록 한다.
3. 사계절 퍼스널 컬러 팔레트: 봄/여름/가을/겨울 4대 팔레트 탭을 제공하여 추천 배색 4종을 원클릭으로 적용할 수 있게 한다.
4. 모바일 터치 최적화: 좌우 분할(좌측 유니폼 뷰어, 우측 조작 패널) 레이아웃으로 모바일 및 태블릿 화면에서 가로 스크롤 없이 시원하게 표시한다.
5. 학생 개인정보 0: 학생 실명 대신 영문 이니셜/스포츠 닉네임만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 기본으로 띄울 유니폼 스타일은 축구 유니폼과 농구 민소매 유니폼 중 무엇으로 할까요?
2. 유니폼 앞면(팀 로고)과 뒷면(등번호+이름)을 뒤집어볼 수 있는 플립 버튼을 넣을까요?
3. 디자인 완성 후 '디자인 도면 인쇄' 버튼을 눌렀을 때 A4 규격 카드 서식으로 출력할까요?

🎯 에디터 한줄평

"색채학 수업이 지루했던 이유는 도화지에 물감을 칠하는 번거로움 때문이었습니다. 코드로 만들어진 SVG 유니폼 위에서 색을 클릭 한 번으로 갈아입혀 보며, 아이들은 보색과 명도 대비가 스포츠 경기장의 가시성을 어떻게 높이는지 직관적으로 깨닫습니다. 실생활과 예술이 코딩으로 만나는 가장 신나는 무대입니다."

📚 기술·교육 참고 링크

  • W3C SVG 2.0 그래픽 벡터 표준 명세 및 웹 인터랙션
  • 교육과정 연계: 초등 5~6학년 미술(색의 조화와 배색, 디자인과 생활), 체육(신체 발달과 운동 참여)

[수학·미술] 3D 입체도형 공간 회전 시뮬레이터 - 손으로 돌려보는 가상 조각 전시관

교과서 속 겨냥도가 화면에서 살아 움직인다! — 3D 입체도형 공간 회전 시뮬레이터 & 나만의 3D 가상 조각 전시관

📐 초등 5~6학년 수학 '직육면체와 정육면체', '각기둥과 각뿔' 및 미술 '입체 조형' 융합 — 종이 교과서의 평면 겨냥도만으로는 보이지 않는 모서리와 꼭짓점을 마우스나 손가락 터치로 360도 자유롭게 돌려보며 공간 지각력을 기르고, 여러 입체도형을 블록처럼 쌓아 나만의 가상 조각상(Sculpture)을 완성해보는 3D 수학 융합 교구입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
평면 겨냥도 vs 360도 3D 인터랙션 점선과 실선으로 상상하던 보이지 않는 면과 모서리를 손끝으로 돌려보며 직관적으로 확인합니다. 마우스 드래그로 각기둥을 돌리며 꼭짓점(vertex) 개수 세기 미션.
무거운 Three.js 없이 순수 Canvas 3D 수식 외부 3D 엔진(Three.js 등 CDN) 없이 3차원 좌표 변환 삼각함수 공식만으로 브라우저에 직접 렌더링합니다. 인터넷이 차단된 교실 크롬북에서도 60fps로 매끄럽게 구동.
입체 조각 조합 모드 정육면체, 삼각기둥, 사각뿔 등을 레고 블록처럼 쌓아 올려 나만의 디지털 조각품을 만듭니다. 완성된 조각상을 회전 뷰어로 감상하며 조형미와 부피(volume) 계산.

2. 핵심 아키텍처 해설

① 3D 입체도형 정점(Vertex) 좌표: SHAPES 상수

const SHAPES = {
  cube: {
    name: "정육면체",
    vertices: [
      [-50, -50, -50], [50, -50, -50], [50, 50, -50], [-50, 50, -50],
      [-50, -50, 50],  [50, -50, 50],  [50, 50, 50],  [-50, 50, 50]
    ],
    edges: [
      [0,1],[1,2],[2,3],[3,0], [4,5],[5,6],[6,7],[7,4], [0,4],[1,5],[2,6],[3,7]
    ],
    faces: 6, verticesCount: 8, edgesCount: 12
  }
};

외부 3D 모델 파일(.obj/.gltf)을 다운로드할 필요 없이 8개의 정점 좌표와 12개의 모서리 연결 규칙을 상수로 심어두는 심기 모드(데이터 임베딩) 구조입니다.

② 순수 삼각함수 기반 3D 회전 투영 엔진

function project(x, y, z, angleX, angleY, fov = 300) {
  // Y축 회전
  let cosY = Math.cos(angleY), sinY = Math.sin(angleY);
  let x1 = x * cosY + z * sinY;
  let z1 = -x * sinY + z * cosY;

  // X축 회전
  let cosX = Math.cos(angleX), sinX = Math.sin(angleX);
  let y2 = y * cosX - z1 * sinX;
  let z2 = y * sinX + z1 * cosX;

  // 2D 원근 투영(Perspective Projection)
  let distance = fov / (fov + z2 + 200);
  return {
    px: x1 * distance + 200,
    py: y2 * distance + 180
  };
}

수학 시간에 배우는 삼각비(sin, cos)가 화면 속 물체를 회전시키는 핵심 원리임을 코드로 증명하는 강력한 수학 융합 아키텍처입니다.

③ 모서리(Edge) 렌더링 및 겨냥도 모드

뒷면에 가려진 모서리를 점선(dashed line)으로 표시하는 '겨냥도 모드 토글'을 탑재하여 초등 수학 성취기준의 핵심 개념을 완벽하게 지원합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 입체도형 종류(정육면체, 각뿔 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 3D도형시뮬레이터.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: Three.js 등 외부 3D CDN 라이브러리 없이 순수 HTML5 Canvas와 삼각함수 투영 수식으로 3D 회전 및 렌더링을 완성한다.
2. 심기 모드(데이터 임베딩): const SHAPES = {...} 상수에 정육면체, 직육면체, 삼각기둥, 사각뿔의 정점(vertices) 및 모서리(edges) 좌표를 내장한다.
3. 360도 터치/드래그 회전: 캔버스 위에서 마우스 드래그 또는 모바일 터치 스와이프로 X축/Y축 각도를 부드럽게 회전시키는 인터랙션을 구현한다.
4. 겨냥도 전환 토글: 버튼 클릭 시 뒷면 모서리를 점선으로 투시하는 '겨냥도 모드'와 실선만 보이는 '입체 모드'를 전환할 수 있게 한다.
5. 학생 개인정보 0: 학생 실명 입력 없이 조작 결과만 브라우저 세션에 유지한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 초등 5~6학년 수학 교육과정에 맞춰 기본 제공할 입체도형 3~4가지는 무엇으로 정할까요?
2. 도형의 면 색상을 반투명 파스텔 톤으로 채우는 '면 칠하기' 옵션도 추가할까요?
3. 정점, 모서리, 면의 개수를 화면 한편에 실시간 카운터 배지로 보여줄까요?

🎯 에디터 한줄평

"겨냥도 앞에서 턱을 괴고 눈을 감은 채 머릿속으로 도형을 돌려보던 아이들에게 마우스 터치 한 번으로 3D 세계를 열어줍니다. 외부 라이브러리 하나 없이 순수 삼각함수 10줄로 화면에 공간감이 피어나는 순간, 수학은 더 이상 시험지 위의 문제가 아니라 세상을 빚어내는 살아있는 언어가 됩니다."

📚 기술·교육 참고 링크

  • 컴퓨터 그래픽스 기초: 3D 원근 투영(Perspective Projection) 공식 해설
  • 교육과정 연계: 초등 5~6학년 수학(직육면체와 정육면체, 각기둥과 각뿔), 미술(입체 조형과 공간)

[사회·안전·지리] 우리 동네 안전 통학로 디지털 지도 - 위험 구역 제보와 안전 쉼터

우리 손으로 지키는 매일 아침 등굣길! — 초등 우리 동네 안전 통학로 & 위험 구역 안내 디지털 지도 웹앱

🚸 초등 3~4학년 사회 '우리 고장의 환경과 안전' 및 창체 안전 교육 단원 — 학생들이 매일 걷는 학교 주변 통학로에서 발견한 공사 현장, CCTV 사각지대, 파손된 보도블록 등 위험 요소를 직접 조사하여 지도 위에 주의 마커(Marker)로 찍고, 안전 지킴이 쉼터와 비상벨 위치를 함께 엮어 학급 전체가 완성하는 디지털 안전 지도입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
종이 안전 점검표 vs 인터랙티브 지도 체크리스트에 글씨만 쓰던 수업에서 벗어나, 학교 주변 약도 위에 핀을 꽂고 사진과 제보 내용을 팝업으로 확인합니다. 지도 상의 빨간 핀을 누르면 "횡단보도 신호등 고장!" 제보 상세 확인.
외부 지도 키 없이 순수 SVG 캔버스 맵 카카오맵/구글맵 API 키 발급이나 결제 없이, 학교 주변 약도를 가벼운 인라인 SVG 벡터 도로망으로 렌더링합니다. 인터넷이 차단된 교실이나 야외 태블릿에서도 더블클릭 즉시 구동.
주의 등급별 3색 신호등 핀 단순 위치 표시를 넘어 주의(노랑), 경고(주황), 위험(빨강) 3단계로 심각도를 직관적으로 시각화합니다. 위험 구역을 피해서 걸을 수 있는 '추천 안전 통학로' 경로 표시선 제공.

2. 핵심 아키텍처 해설

① 학교 주변 안전 데이터: SAFETY_POINTS 상수

const SAFETY_POINTS = [
  {
    id: "p1",
    title: "정문 앞 사거리",
    type: "안전", // 안전(초록), 주의(노랑), 위험(빨강)
    coords: { x: 250, y: 180 },
    icon: "🟢",
    desc: "녹색어머니회 및 교통안전 도우미 상주 구역 (안전 횡단보도)"
  },
  {
    id: "p2",
    title: "후문 빌라 골목길",
    type: "위험",
    coords: { x: 120, y: 310 },
    icon: "🔴",
    desc: "CCTV 사각지대 및 불법 주정차 심함, 보차 분리 안 됨"
  },
  {
    id: "p3",
    title: "아람문구점",
    type: "쉼터",
    coords: { x: 380, y: 220 },
    icon: "🏪",
    desc: "아동 안전 지킴이집 (비상 시 도움 요청 가능)"
  }
];

학교 주변의 주요 도로 좌표와 위험/안전 거점 8~10곳을 코드 상단에 심어두는 심기 모드(데이터 임베딩) 구조로 언제나 0.1초 만에 지도가 펼쳐집니다.

② 순수 SVG 도로망 및 인터랙티브 핀 렌더링

function renderMap(points) {
  const pins = points.map(p => `
    <g class="map-pin" transform="translate(${p.coords.x}, ${p.coords.y})" onclick="showDetail('${p.id}')">
      <circle r="14" class="pin-bg pin-${p.type}" />
      <text text-anchor="middle" dy="5" font-size="12">${p.icon}</text>
    </g>
  `).join("");
  return `<svg viewBox="0 0 500 400" class="town-map">${ROAD_PATHS}${pins}</svg>`;
}

무거운 외부 맵 타일 라이브러리(Leaflet 등) 없이 경량 SVG 벡터 패스로 도로를 그리고 마커 클릭 이벤트를 바인딩해 터치에 즉각 반응합니다.

③ 개인정보 0 안전한 크라우드소싱

학생의 집 주소나 개인 통학 경로는 일절 입력받지 않으며, '우리 동네 공공 통학로의 객관적 도로 환경'만을 취급하여 개인정보 노출 위험을 원천 차단합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 학교 주변 주요 거점(정문, 후문, 육교 등)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 안전통학로지도.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 카카오맵 등 외부 지도 API나 CDN 없이 인라인 SVG 약도와 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const SAFETY_POINTS = [...] 상수에 학교 주변 안전 쉼터, 주의 구역, 위험 지점 6~8곳의 상대 좌표와 설명을 내장한다.
3. 3단계 위험도 필터: 상단에 '전체보기 / 🔴 위험구역 / 🟢 안전쉼터' 필터 버튼을 두어 원하는 핀만 골라볼 수 있게 한다.
4. 마커 상세 모달: 지도 위 마커를 클릭/터치하면 하단에 제보 제목, 위험 사유, 안전 행동 요령 카드가 매끄럽게 떠오르도록 한다.
5. 학생 개인정보 0: 학생 개인의 집 위치나 실명 저장을 금지하며, 공공 통학로 시설물 정보만 다룬다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 학교 주변 약도에 표시할 대표 건물 3~4곳(예: 학교 본관, 문구점, 사거리, 놀이터)은 무엇인가요?
2. 지도 테마 색상은 산뜻한 그린/아이보리 톤과 도시적인 슬레이트 그레이 톤 중 어느 것으로 할까요?
3. 학생들이 새로운 위험 구역을 지도에 직접 찍어보는 '새 핀 제보 모드'도 포함할까요?

🎯 에디터 한줄평

"안전 교육은 '조심해라'는 백 마디 잔소리보다, 내가 매일 걷는 골목길의 위험을 스스로 지도 위에 찍어보는 순간 완성됩니다. 아이들이 직접 발굴한 안전 핀들이 모여 한 장의 지도가 될 때, 교실은 마을을 지키는 든든한 방재 센터가 됩니다."

📚 기술·교육 참고 링크

  • 커뮤니티 매핑(Community Mapping) 시민 참여 지도 만들기 방법론
  • 교육과정 연계: 초등 3~4학년 사회(우리 고장의 환경과 안전), 창의적 체험활동(안전·환경 교육)

[창체·자치·실과] 교실 분실물 & 학급 비품 스마트 보관함 - 사물함 위치 시각화 대시보드

"선생님, 제 연필 어디 갔어요?"를 끝내는 법 — 교실 내 분실물 & 학급 비품 위치 시각화 스마트 보관함 웹 대시보드

🎒 초등 전 학년 창의적 체험활동 자치 활동 및 실과 '생활 자원 관리' 단원 — 매일 교탁 위에 수북이 쌓이는 지우개, 연필, 네임펜 등 분실물과 공용 줄넘기, 보드게임, 보조 배터리 등 학급 비품을 교실 사물함 및 수납장 그리드(Grid) 화면에 등록하여, 물건을 잃어버린 학생이 자기 자리에서 클릭 한 번으로 어느 수납함에 보관되어 있는지 실시간으로 찾아가는 스마트 분실물 센터입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
교탁 위 플라스틱 바구니 vs 디지털 수납함 먼지 쌓이던 실물 바구니 대신, 4×6 사물함 칸 번호와 수납 위치가 화면에 블록 형태로 명확히 표시됩니다. "지우개 분실" 검색 시 "사물함 3번 상단 바구니에 보관 중" 하이라이트.
학급 1인 1역 '정리 부장'의 실전 도구 정리 당번 학생이 바닥에 떨어진 물건을 주워 품목, 색상, 보관 칸을 선택해 '등록' 버튼만 누르면 끝납니다. 등록 시 칭찬 스탬프와 함께 학급 자치 기여도 포인트 자동 적립.
주인 찾기 완료(Claim) 원클릭 반환 물건을 찾아간 학생이 화면에서 '찾아감' 버튼을 누르면 목록에서 회색으로 전환되며 처리 이력이 남습니다. 학기말 미수령 물품 나눔 장터 목록으로 원클릭 CSV 내보내기.

2. 핵심 아키텍처 해설

① 사물함 보관함 데이터셋: CABINET_ITEMS 상수

const CABINET_ITEMS = [
  {
    id: "item-1",
    name: "파란색 뚜껑 텀블러",
    category: "학용품/물병",
    location: "수납장 A-2",
    date: "9월 7일 2교시",
    finder: "3번 정리대장",
    status: "보관중" // 보관중, 찾아감
  },
  {
    id: "item-2",
    name: "30cm 투명 방안자",
    category: "문구",
    location: "교탁 첫 번째 서랍",
    date: "9월 6일 방과후",
    finder: "선생님",
    status: "찾아감"
  }
];

교실 수납공간 구역(사물함 A~D열, 교탁 서랍 등)과 보관 물품 메타데이터를 상수로 관리하는 심기 모드(데이터 임베딩) 표준 설계입니다.

② CSS Grid 교실 사물함 시각화 맵

.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.locker-box {
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
  min-height: 80px;
}

.locker-box.has-item {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1);
}

실제 교실 뒤편 사물함 번호 배열과 똑같은 바둑판 배치를 순수 CSS Grid로 재현하여 직관적인 위치 인지를 돕습니다.

③ 브라우저 LocalStorage 기반 오프라인 저장

등록 및 찾아감 상태는 학생 개인 브라우저가 아닌 교실 전면 TV/키오스크 태블릿의 로컬 저장소에 안전하게 누적되며, 외부 클라우드 전송이 전혀 없습니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 사물함 규격(가로×세로 칸수)에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 스마트보관함.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 DB나 서버 없이 순수 바닐라 HTML/CSS/JS 및 LocalStorage로 완성한다.
2. 심기 모드(데이터 임베딩): const CABINET_ITEMS = [...] 상수에 교실 대표 분실물 및 공용 비품 4~6개의 보관 위치 샘플을 내장한다.
3. 사물함 격자 시각화: 교실 사물함(가로 4칸 × 세로 4칸 등)을 그리드로 렌더링하고, 물품이 들어있는 사물함 칸에 알림 배지와 파란색 테두리를 부여한다.
4. 물품 등록 및 찾아감 필터: 상단에 물품 검색창과 '보관 중만 보기' 체크박스를 제공하고, 물품을 클릭하면 '주인 찾아감' 처리 토글을 지원한다.
5. 학생 개인정보 0: 잃어버린 학생 실명을 적지 않고 품목 특징(예: 검은색 삼색볼펜)과 보관 위치만 기록한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 교실 사물함 배치(예: 가로 5칸 × 세로 4칸)는 어떻게 설정할까요?
2. 공용 비품(보드게임, 체육 교구 등)도 함께 관리할 수 있는 비품 탭을 분리할까요?
3. 물품 등록 시 사진 대신 귀여운 이모지 아이콘(✏️, 텀블러🥤, 모자🧢 등)을 고를 수 있게 할까요?

🎯 에디터 한줄평

"교실 바닥에 뒹굴던 지우개 하나가 제 주인을 찾아가는 과정은 단순한 청소가 아닙니다. 물건의 소중함을 알고 공동체의 자원을 존중하는 가장 따뜻한 자치 훈련입니다. 화면 속 사물함 번호 하나를 찾아가는 아이들의 발걸음에서 디지털이 교실의 일상을 얼마나 질서 있고 다정하게 만드는지 확인하게 됩니다."

📚 기술·교육 참고 링크

  • 초등 학급 자치 1인 1역 '환경 정리 및 물품 관리부' 운영 실무 가이드
  • 교육과정 연계: 초등 전 학년 창의적 체험활동(자율·자치활동), 실과(생활 자율 관리)

[사회·실과·창체] 초등 1인 1사회참여 웹 청원 - 우리 학교와 마을을 바꾸는 제안 포털

우리 아이들도 지역을 바꿀 수 있어! — 초등 1인 1사회참여 웹 청원/제안 포털 만들기 (바이브 코딩 4단계 지도)

🗳️ 초등 5~6학년 사회 '지역사회 참여' 및 실과 'SW로 문제를 해결해요' 융합 — 우리 학교 앞 교차로에 신호등이 필요해요, 급식 잔반이 많아요, 도서관에서 나무 벤치가 떨어져 있어요. 학생들이 발견한 사회 문제를 4단계 바이브 코딩 지도(탐구 ➔ 제안 ➔ 코딩 ➔ 제안)에 따라 직접 웹 청원 페이지로 만들고, 친구들의 상호 지지 투표를 거쳐 실제 교무실이나 동사무소에 제안하는 시민 참여 프로젝트입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
본교 개인 창의 수업 vs 사회 참여 확장 일반적으로 나만의 게임을 만드는 데 그치지 않고, 우리 사회의 문제를 해결하는 소통 도구를 만드는 사회적 임팩트로 확장합니다. "우리 학교 앞 신호등을 20초에서 30초로 늘려달라" 청원서 작성.
4단계 바이브 코딩 지도 ① 문제 발견(사진·메모) ② 해결 아이디어 정리 ③ 웹 청원 페이지 코딩 ④ 상대(교장/시장님)에게 제안하는 논리 흐름을 한번에 배웁니다. 학생들이 문제를 발견하고 직접 창안한 제안서 모니터 반복 실습.
참여 투표와 상호 피드백 모둠원들이 서로의 청원서를 보고 '공감 👍' 버튼을 누르며 긍정적인 사회 참여 순위가 표시됩니다. 완성된 청원서는 인쇄하여 실제 담임이나 행정실에 제출하는 실전 동선.

2. 핵심 아키텍처 해설

① 사회 문제 제안 아카이브: PROPOSALS 상수

const PROPOSALS = [
  {
    id: "prop-1",
    title: "우리 학교 주차장 골목 속도제한판 설치 요청",
    category: "안전",
    problem: "등교 시간에 차가 빨리 달려서 사고 위험이 큽니다.",
    solution: "스마트 속도 단속판 1대 설치와 노란 안전 도장을 칠해주세요.",
    votes: 12, // 찬성 표수
    status: "제안" // 제안 → 검토중 → 완료
  },
  {
    id: "prop-2",
    title: "교실 뒷벽 개인 책장 자율 정리 요청",
    category: "질서",
    problem: "아침마다 책이 쓰러져 바닥이 어지럽습니다.",
    solution: "넓은 책상 보드 또는 2단 서랍장 5개를 도입하면 좋겠습니다.",
    votes: 8,
    status: "제안"
  }
];

학생들의 사회 문제 발견, 해결 아이디어, 찬성 투표 수를 모두 상수로 심어두는 심기 모드(데이터 임베딩) 구조로 언제나 즉시 작동합니다.

② 찬성 투표 트랜지션 애니메이션

.vote-btn {
  background: #dbeafe;
  border-radius: 9999px;
  padding: 8px 16px;
  color: #1d4ed8;
  transition: all 0.3s ease;
}
.vote-btn:hover { background: #1d4ed8; color: white; transform: scale(1.05); }

공감 버튼을 클릭하면 원을 순간 팽창했다가 알맞은 크기로 돌아오는 부드러운 상호작용을 구현해 초등학생들이 지겹지 않게 여러 번 투표할 수 있게 합니다.

③ 4단계 문제 해결 리소스 체크리스트

단순히 웹페이지를 만드는 것을 넘어, 학생들이 사회 문제 발굴 ➔ 공론화 ➔ 디지털 제작 ➔ 실제 접수까지의 사이클을 종이 노트에 배부해서 체크할 수 있게 합니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 우리 학교의 개선 희망 문제 3가지에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 사회참여청원.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 청원 사이트나 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const PROPOSALS = [...] 상수에 초등생들이 직접 발견한 사회/학교 문제 해결 제안 4~6개를 내장한다.
3. 참여 투표 로직: 각 제안서 카드 옆에 '👍 공감' 버튼을 누르면 카운트가 올라가고 자동 내림차순 정렬로 다시 그려지는 애니메이션을 적용한다.
4. 청원 상태 관리: 카드 하단에 [제안 ➔ 검토중 ➔ 완료] 3단계 진행 배지를 표시하여 문제 해결의 여정을 시각화한다.
5. 학생 개인정보 0: 제안자는 실명이 아닌 모둠명 또는 '익명의 학생 7명' 형태로 표기한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 우리 학교나 동네에서 해결하고 싶은 구체적인 사회 문제 3가지는 무엇인가요?
2. 카드 스타일은 파랑과 흰색 톤의 시청 스타일과 화염 오렌지 및 노란 톤 중 어느 것으로 할까요?
3. 제안서 카드를 클릭하면 하단에 '이렇게 바뀌면 좋겠어요' 상세 설명이 펼쳐지도록 만들까요?

🎯 에디터 한줄평

"사회적으로 쓸모 있는 것은 코드로 만들어진 게임이 아니라, 이 땅의 우리 아이들이 발견한 조그만 불편함이 인정받고 현실로 바뀌는 과정입니다. 웹 청원은 단순한 HTML이 아니라 민주적 시민 의사소통의 훈련장이며, 아이들이 스스로 쓴 청원서를 학교 행정실장에게 전달하는 성찰 단계는 어쩌면 사회 교육의 최고 백미입니다."

📚 기술·교육 참고 링크

  • 국민참여청원 사이트 구조 학습 및 실제 사회 참여 사례
  • 교육과정 연계: 초등 5~6학년 사회(지역 사회의 문제 해결과 협력), 실과(정보 활용 능력), 도덕(정의롭게 사는 삶)