[실과·사회·과학] 학교 탐구 프로젝트 4대 앱 유형 진단기 - 나만의 1인 1웹앱 설계 도우미

내 탐구에는 어떤 웹앱이 맞을까? — 4대 앱 유형 진단 및 1인 1웹앱 제작 도우미

🔍 초등 5~6학년 실과 '소프트웨어로 문제를 해결해요' 및 사회·과학 자유탐구 융합 — 학생들이 풀고 싶은 문제의 특성을 4가지 질문으로 진단하면, 가장 적합한 앱 유형(정보 검색기, 계산 시뮬레이터, 데이터 트래커, 인터랙티브 게임)을 자동 추천하고 나만의 웹앱 설계서 초안까지 뽑아주는 디지털 수행평가 도우미입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
유형 1: 정보 검색기 (Searcher)	"우리 동네 역사 인물 알아보기"처럼 데이터를 찾아 보여주는 앱입니다.	키워드 입력 → WIDE 검색 결과 → 카드 레이아웃 정렬
유형 2: 계산 시뮬레이터 (Calculator)	"내가 버린 쓰레기가 환경에 미치는 영향"처럼 공식으로 결과를 계산하는 앱입니다.	슬라이더 입력 → 즉시 결과 숫자/그래프 갱신
유형 3: 데이터 트래커 (Tracker)	"1주일간 내 심박수 변화 기록"처럼 날짜별 데이터를 쌓는 앱입니다.	localStorage 입력 → 시간순 정렬 → 꺾은선 그래프 출력
유형 4: 인터랙티브 게임 (Game)	"습관을 바꾸는 선택 게임"처럼 사용자가 클릭할 때마다 결과가 달라지는 앱입니다.	선택지 터치 → 다음 시나리오 로딩 → 점수 부여

2. 핵심 아키텍처 해설

① 4대 진단 질문 매트릭스

const DIAGNOSIS = [
  { q: "내가 찾으려는 정보는 이미 있는가?", yes: "searcher", no: 2 },
  { q: "공식으로 계산할 수 있는가?", yes: "calculator", no: 3 },
  { q: "시간이 지나며 데이터를 쌓아야 하는가?", yes: "tracker", no: "game" }
];

복잡한 AI 없이 3개의 간단한 예/아니오 분기로 학생의 탐구 주제에 딱 맞는 앱 유형을 진단합니다.

② 설계서 초안 자동 생성 엔진

function generatePlan(type) {
  const plans = {
    "searcher": { view: "검색창+카드", logic: "배열 필터링(filter)", data: "EMBED_ENTRIES 상수" },
    "calculator": { view: "슬라이더+결과", logic: "수식 연산", data: "계수 상수" },
    "tracker": { view: "입력 폼+차트", logic: "localStorage CRUD", data: "사용자 입력" },
    "game": { view: "선택 버튼", logic: "분기 논리", data: "EMBED_SCENARIOS" }
  };
  return plans[type];
}

진단된 유형에 맞는 구체적인 화면(view), 로직(logic), 데이터 저장 방식(data) 설계서를 자동 생성하여 학생이 제미나이에 바로 넣을 수 있는 프롬프트 템플릿으로 변환합니다.

③ 인쇄용 설계서 서식 (A4 반쪽)

@media print {
  .diagnosis-result {
    border: 3px solid #4a90d9;
    padding: 20px;
  }
  .diagnosis-result h3 {
    border-bottom: 2px solid #4a90d9;
    padding-bottom: 8px;
  }
}

진단 결과를 A4 종이 반쪽에 담아 수행평가 파일에 끼워 넣을 수 있는 공식적인 기록물 서식으로 출력합니다.

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

1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
2. 역질문 답변 — 제미나이가 묻는 탐구 분야(과학/사회/보건)와 학년에 답합니다.
3. HTML 파일 실행 — 메모장에 붙여넣고 나의앱유형진단기.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 외부 폰트 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): DIAGNOSIS 분기 매트릭스 상수에 4대 유형 진단 로직을 완전히 내장한다.
3. 설계서 자동 생성: 진단 완료 시 해당 유형별 화면 구성 예시, 핵심 코드 골격, 필요 데이터 구조를 구체적으로 텍스트로 출력한다.
4. 학생 개인정보 0: 실명 입력 없이 탐구 주제 키워드만 자유롭게 입력받는다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 진단 결과에 예시 탐구 주제 3가지를 포함할까요?
2. 진단 결과 화면 디자인은 심플 카드형과 컬러 매트릭스 중 어느 것을 선호하시나요?
3. 각 유형별 '제미나이용 프롬프트 템플릿'을 복사 버튼으로 포함할까요?

🎯 에디터 한줄평

"아이들이 웹앱을 만들 때 가장 자주 포기하는 이유는 '어떤 앱을 만들어야 할지 모르겠다'입니다. 이 진단기는 아이들이 가진 막연한 탐구 꿈을 4개의 질문을 통해 구체적인 SW 설계도로 바꿔주는 디지털 로드맵입니다. 좋은 설계는 개발의 80%를 이기는 법입니다."

📚 기술·교육 참고 링크

• CS 언플러그드 SW 설계 개념: 문제 정의 → 알고리즘 설계 → 프로그래밍 → 테스트
• 교육과정 연계: 초등 5~6학년 실과(소프트웨어로 문제를 해결해요), 사회(탐구 주제 선정), 과학(자유 탐구 설계)

[창체·자치] 새 학기 학습 성향 & 의사소통 스타일 진단기 - 갈등 없는 모둠 편성의 비밀

너는 어떤 스타일이야? — 새 학기 학습 성향 & 의사소통 스타일 진단 퀴즈 웹앱

🤝 초등 3~6학년 창의적 체험활동 및 학급 자치 '새 학기 관계 맺기' 주간 — 학생들이 모둠 활동 시 나타나는 4대 학습 성향(아이디어 뱅크형, 꼼꼼 기록형, 열정 발표형, 묵묵 실천형)과 의사소통 스타일을 8개 상황 퀴즈로 진단합니다. 진단 결과는 아기자기한 캐릭터 카드와 함께 '나와 잘 맞는 협동 짝꿍' 조언을 제공하며, 담임교사는 이 데이터를 바탕으로 한쪽에 쏠리지 않는 조화로운 모둠을 1초 만에 자동 편성합니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
성격 검사 vs 교실 협동 스타일	일반 MBTI 대신 모둠 프로젝트 실전 상황(주제 정하기, 역할 나누기, 갈등 해결)에 맞춘 4대 행동 양식을 진단합니다.	3월 첫 주 스마트패드로 3분 진단 후 결과 카드를 환경판에 부착.
균형 모둠 자동 믹싱 엔진	특정 성향(예: 아이디어형만 4명)이 한 모둠에 쏠리지 않도록 4개 유형을 지그재그로 분배하는 라운드 로빈 알고리즘을 내장합니다.	'모둠 편성하기' 버튼 클릭 시 4인 1조 황금 밸런스 모둠표 즉시 생성.
협동 가이드라인 카드 제공	단순 결과 통보를 넘어 "이 친구와 활동할 때는 이렇게 말해봐요"라는 구체적 대화 스킬 문장을 함께 제시합니다.	국어 '서로의 의견을 존중해요' 수업 토의 자료로 직접 연계.

2. 핵심 아키텍처 해설

① 8개 상황 문항 매트릭스: QUIZ_ITEMS 상수

const QUIZ_ITEMS = [
  {
    q: "모둠 발표 주제를 정할 때 나는?",
    options: [
      { text: "재미있고 엉뚱한 아이디어를 계속 던진다", type: "idea" },
      { text: "친구들의 의견을 칠판이나 공책에 정리한다", type: "record" },
      { text: "어떤 주제가 청중에게 좋을지 발표를 맡는다", type: "present" },
      { text: "결정된 주제에 맞춰 자료를 묵묵히 찾아온다", type: "action" }
    ]
  }
];

아이들의 실제 모둠 활동 상황을 반영한 문항과 선택지별 유형 매핑 데이터를 상수로 내장하는 심기 모드(데이터 임베딩) 구조입니다.

② 라운드 로빈 균형 모둠 편성 알고리즘

function makeBalancedTeams(students, teamSize = 4) {
  // 성향별로 버킷(bucket) 분리
  const buckets = { idea: [], record: [], present: [], action: [] };
  students.forEach(s => buckets[s.type].push(s));
  
  const numTeams = Math.ceil(students.length / teamSize);
  const teams = Array.from({ length: numTeams }, () => []);
  
  // 각 유형에서 모둠마다 골고루 1명씩 배분
  ["idea", "record", "present", "action"].forEach(type => {
    buckets[type].forEach((student, idx) => {
      teams[idx % numTeams].push(student);
    });
  });
  return teams;
}

한 모둠에 말하는 사람만 모이거나 기록할 사람이 없어 표류하는 현상을 방지하는 공학적 분배 로직입니다.

③ 개인정보 보호 세션 운영

학생 이름 대신 번호(1~25번)와 닉네임만 다루며, 진단 데이터는 브라우저 세션 메모리에서만 유지되어 외부 클라우드로 일절 전송되지 않습니다.

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

1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
2. 역질문 답변 — 제미나이가 묻는 학급 인원수(기본: 20~25명)와 모둠당 인원에 답합니다.
3. HTML 파일 실행 — 메모장에 붙여넣고 학습성향진단.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), CSS 프레임워크 없이 순수 바닐라 HTML/CSS/JS로 작성한다.
2. 심기 모드(데이터 임베딩): 8개 모둠 협동 상황 퀴즈와 4대 성향(아이디어, 기록, 발표, 실천) 결과를 상수로 내장한다.
3. 자동 모둠 편성 엔진: 진단 완료 후 교사용 탭에서 학생 목록을 입력하면 4개 성향이 골고루 섞이는 균형 모둠 테이블을 생성한다.
4. 학생 개인정보 0: 학생 실명 대신 학생 번호와 캐릭터 닉네임만 표시한다.
5. 모바일 반응형: 교실 크롬북과 태블릿 터치 화면에 최적화된 큰 선택 버튼(최소 48px)을 제공한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 학급 한 모둠의 기본 인원수는 몇 명(권장: 4명 또는 5명)으로 설정할까요?
2. 결과 카드에 표시할 캐릭터 테마(동물 탐험대, 우주 비행사, 판타지 직업)는 어느 것으로 할까요?
3. 모둠 편성 결과를 인쇄용 서식(@media print)으로도 출력할 수 있게 할까요?

🎯 에디터 한줄평

"모둠 활동이 망가지는 가장 큰 이유는 능력이 부족해서가 아니라 성향이 충돌하기 때문입니다. 아이디어만 쏟아내고 마무리를 못 하는 모둠, 다들 조용히 눈치만 보는 모둠을 미리 예방해 주는 이 작은 진단기는 새 학기 교실을 갈등의 전쟁터가 아닌 상호 보완의 협동 학습장으로 바꾸어 줍니다."

📚 기술·교육 참고 링크

• 협동학습(Cooperative Learning) 이론: 긍정적 상호의존성과 역할 분담의 원리
• 교육과정 연계: 초등 3~6학년 창의적 체험활동(자율·자치 활동, 관계 맺기), 국어(의견을 나누어요, 마음을 나누는 대화)

[과학·사회] 과학 자유탐구 4단계 진도율 트래커 - 길 잃지 않는 장기 프로젝트 내비게이션

장기 탐구 프로젝트의 내비게이션! — 초등 과학 자유탐구 4단계 하위 미션 실시간 진도율 트래커

🧭 초등 5~6학년 과학 '자유 탐구' 및 사회과 프로젝트 학습 단원 — 몇 주에 걸쳐 진행되는 장기 탐구에서 학생들이 중간에 길을 잃지 않도록, 4대 핵심 단계(주제 선정 ➔ 가설 설정 및 실험 설계 ➔ 데이터 수집 및 분석 ➔ 결론 도출 및 나눔)마다 세부 체크리스트를 두고 실시간 달성률(%)을 시각적 게이지 바로 안내해 주는 프로젝트 관리 웹앱입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
막연한 과제 vs 4단계 12개 마이크로 미션	"보고서 써와" 대신 4단계별로 3개씩 쪼갠 작은 체크박스를 클릭하며 성취감을 쌓습니다.	1단계(준비물 사진 찍기) 완료 시 프로그레스 바가 즉시 8% 상승.
모둠별 실시간 진도율 한눈에 보기	교탁 화면에 학급 전체 모둠의 진행률(0~100%)이 시각화되어 지체되는 모둠을 즉시 피드백합니다.	진도율 75% 미만 모둠에 '탐구 도우미 교사 파견' 신호등 표시.
중간 저장 브라우저 LocalStorage	외부 서버 없이 태블릿 브라우저에 체크 상태가 자동 저장되어 다음 과학 시간에도 그대로 이어집니다.	수업 끝날 때 '진도 보고서 내보내기'로 교사에게 결과 전달.

2. 핵심 아키텍처 해설

① 4단계 마이크로 미션 데이터 구조

const PROJECT_STEPS = [
  {
    phase: 1,
    title: "1단계: 문제 발견 & 주제 선정",
    tasks: [
      { id: "p1_1", text: "우리 생활 주변의 궁금한 현상 3가지 브레인스토밍하기" },
      { id: "p1_2", text: "실험으로 검증 가능한 하나의 질문으로 좁히기" },
      { id: "p1_3", text: "선행 탐구 자료 및 기존 과학 지식 2건 찾아보기" }
    ]
  },
  {
    phase: 2,
    title: "2단계: 가설 설정 & 실험 계획",
    tasks: [
      { id: "p2_1", text: "'만약 ~라면 ~할 것이다' 형태로 가설 문장 쓰기" },
      { id: "p2_2", text: "다르게 할 조건(조작변인)과 같게 할 조건(통제변인) 구별하기" },
      { id: "p2_3", text: "실험 준비물 및 안전 수칙 체크리스트 확정하기" }
    ]
  }
];

과학 탐구의 전 과정을 12개의 마이크로 액션으로 쪼갠 심기 모드(데이터 임베딩) 표준 설계도입니다.

② 진도율 실시간 자동 계산 수식

function calculateProgress(checkedIds) {
  const totalTasks = PROJECT_STEPS.reduce((acc, step) => acc + step.tasks.length, 0);
  const completed = checkedIds.length;
  const percentage = Math.round((completed / totalTasks) * 100);
  return { percentage, completed, totalTasks };
}

체크박스를 누를 때마다 전체 12개 미션 중 완료된 개수를 백분율로 환산하여 상단 게이지 바 너비를 width: ${percentage}%로 실시간 애니메이션합니다.

③ LocalStorage 로컬 지속성

태블릿을 껐다 켜도 체크 상태가 유지되도록 브라우저 로컬 저장소에 체크된 미션 ID 배열을 저장하며, 학생 개인정보는 일절 수집하지 않습니다.

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

1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
2. 역질문 답변 — 제미나이가 묻는 탐구 주제와 총 진행 주차(예: 3주 완성)에 답합니다.
3. HTML 파일 실행 — 메모장에 붙여넣고 탐구진도트래커.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 외부 폰트 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const PROJECT_STEPS = [...] 상수에 과학 자유탐구 4단계 12개 하위 체크리스트를 기본 내장한다.
3. 실시간 진도율 시각화: 상단에 0~100% 프로그레스 바를 두고, 미션 체크 시 부드러운 애니메이션과 함께 퍼센트 수치가 갱신되도록 한다.
4. 로컬 지속성: 브라우저 localStorage를 활용하여 새로고침하거나 창을 닫아도 체크 상태가 유지되도록 한다.
5. 학생 개인정보 0: 학생 실명 대신 모둠 번호와 탐구 과제명만 입력받는다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 탐구 단계별 미션 개수는 기본(단계당 3개, 총 12개)으로 할까요?
2. 100% 완주 시 축하 팡파르(Web Audio 합성음)와 디지털 완주 배지를 띄울까요?
3. 모둠별 탐구 일지를 간단히 적을 수 있는 '오늘의 메모' 입력란도 포함할까요?

🎯 에디터 한줄평

"아이들이 장기 과제에서 좌절하는 이유는 게을러서가 아니라, '지금 내가 전체 어디쯤 서 있는지' 보이지 않기 때문입니다. 등산길의 이정표처럼 12개의 작은 깃발을 꽂아주는 것만으로도, 포기하던 아이들이 마지막 100% 깃발을 향해 자발적으로 발걸음을 옮기기 시작합니다."

📚 기술·교육 참고 링크

• 초등 과학과 자유탐구 지도 매뉴얼: 변인 통제와 데이터 분석 가이드
• 교육과정 연계: 초등 5~6학년 과학(자유 탐구), 사회(지속가능한 발전과 지역 문제), 실과(문제 해결과 프로그래밍)

[실과·사회·수학] 초등 모의투자 알고리즘 - 우리 반 AI 펀드매니저 만들기

수학 공식으로 주식을 굴린다! — 초등 모의투자 API 연동 우리 반 AI 펀드매니저 알고리즘

📈 초등 5~6학년 사회 '우리나라의 경제 발전', 수학 '비율과 통계', 실과 '알고리즘 설계' 융합 — 학생들이 100만 원의 가상 시드머니를 가지고 나만의 '투자 규칙(알고리즘)'을 코딩합니다. "어제보다 3% 떨어지면 매수", "목표 수익률 5% 도달 시 매도" 같은 단순한 수학적 조건문이 매일 가상 시장 데이터와 만나 포트폴리오 수익률을 계산하는 실전 금융·소프트웨어 융합 프로젝트입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
도박형 주식 게임 vs 룰 기반 알고리즘	감(Feeling)으로 사고파는 대신, "언제 사고 언제 팔 것인가"의 수학적 조건문을 사전에 작성해 기계가 실행합니다.	조건 A: 변동률 -2% 이하 시 10주 매수 ➔ 조건 B: 수익률 +5% 시 전량 매도.
가상 시뮬레이션 시장 데이터	실제 금융 API 계좌 개설 없이, 최근 30일간의 가상 지수(KOSPI 시뮬레이션) 배열을 기반으로 안전하게 모의 운용합니다.	'1초 만에 30일 투자 돌려보기' 버튼으로 백테스팅(과거 데이터 검증) 수행.
수익률 꺾은선 차트 자동 렌더링	복잡한 외부 차트 라이브러리 없이 순수 HTML5 Canvas로 나의 자산 변화 곡선을 직접 그립니다.	사회 시간 '합리적 소비와 투자' 토론 보고서 그래프 자료로 연계.

2. 핵심 아키텍처 해설

① 가상 주가 시계열 데이터: MARKET_PRICES 상수

// 30일간의 가상 친환경 기업 주가 추이 (심기 모드)
const MARKET_PRICES = [
  { day: 1, price: 50000 }, { day: 2, price: 49000 },
  { day: 3, price: 51500 }, { day: 4, price: 53000 },
  { day: 5, price: 52000 }, { day: 6, price: 48500 }
  // ... 30일치 주가 데이터 내장
];

금융 보안 인증서나 유료 증권 API 없이도 아이들이 실제 시장 변동을 체감할 수 있도록 정제된 시계열 데이터를 파일 상단에 심는 심기 모드(데이터 임베딩) 방식입니다.

② 펀드매니저 알고리즘 실행 루프

function runSimulation(buyDipRate, takeProfitRate) {
  let cash = 1000000; // 100만 원 시드머니
  let stockHoldings = 0;
  let avgBuyPrice = 0;
  
  MARKET_PRICES.forEach((today, i) => {
    if (i === 0) return;
    const prevPrice = MARKET_PRICES[i - 1].price;
    const changeRate = (today.price - prevPrice) / prevPrice;
    
    // 조건 1: 하락 매수 규칙
    if (changeRate <= buyDipRate && cash >= today.price * 5) {
      cash -= today.price * 5;
      stockHoldings += 5;
      avgBuyPrice = today.price;
    }
    // 조건 2: 목표 수익률 도달 익절 규칙
    const currentProfit = (today.price - avgBuyPrice) / avgBuyPrice;
    if (stockHoldings > 0 && currentProfit >= takeProfitRate) {
      cash += stockHoldings * today.price;
      stockHoldings = 0;
    }
  });
  return cash + (stockHoldings * MARKET_PRICES[MARKET_PRICES.length - 1].price);
}

입력한 두 개의 매개변수(매수 임계치, 매도 수익률)에 따라 컴퓨터가 매일매일 자동으로 매매 결정을 내리는 퀀트(Quant) 알고리즘의 기초를 배웁니다.

③ 순수 Canvas 자산 곡선 렌더링

외부 차트 CDN 호출 없이 캔버스 2D 컨텍스트의 lineTo() 수식으로 30일간의 자산 증감 곡선을 부드럽게 그려내어 학내망 원칙을 완벽히 준수합니다.

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

1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
2. 역질문 답변 — 제미나이가 묻는 가상 투자 종목(우주항공, 친환경에너지 등)에 답합니다.
3. HTML 파일 실행 — 메모장에 붙여넣고 AI펀드매니저.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 금융 API나 Chart.js 등 외부 라이브러리 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const MARKET_PRICES = [...] 상수에 30일치 가상 주가 데이터를 기본 내장한다.
3. 퀀트 알고리즘 인터페이스: 슬라이더 2개('하락 시 추가 매수 기준 %', '목표 수익 매도 기준 %')를 조작하면 '30일 백테스팅 실행' 버튼 클릭 시 즉시 최종 수익률(%)과 잔고를 도출한다.
4. 순수 Canvas 꺾은선 차트: 30일간의 일별 총자산 변화를 Canvas에 파란색 선 그래프로 렌더링한다.
5. 건전한 금융 교육 안내: 화면 하단에 '※ 투자는 원금 손실 위험이 있으며, 규칙 기반 분산 투자가 안전합니다' 교육용 안내문을 포함한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 가상으로 운용할 모의 주식 종목 이름(예: 미래우주로봇, 푸른지구에너지)은 무엇으로 할까요?
2. 기본 시드머니는 100만 원으로 고정할까요?
3. 최고 수익률을 기록한 친구의 알고리즘 규칙을 공유할 수 있는 '명예의 전당' 랭킹표도 포함할까요?

🎯 에디터 한줄평

"주식 투자 교육의 핵심은 돈을 버는 기술이 아니라, '감정에 휘둘리지 않고 정해진 규칙을 지키는 힘'을 기르는 것입니다. 아이들이 짠 작은 알고리즘 코드가 30일간의 파도를 헤치며 자산을 지켜내는 과정을 지켜보는 것, 이것이 진정한 미래 경제 문해력의 시작입니다."

📚 기술·교육 참고 링크

• 알고리즘 트레이딩(Algorithmic Trading) 기초: 규칙 기반 의사결정과 백테스팅의 원리
• 교육과정 연계: 초등 5~6학년 사회(우리나라의 경제 발전, 합리적 소비와 자산 관리), 수학(비율과 그래프), 실과(알고리즘 설계)

[국어·과학] 6단계 에이전틱 글쓰기 봇 - 탐구 보고서부터 과학 동화까지

질문만 던지면 동화가 뚝딱? — 6단계 에이전틱 파이프라인 기반 탐구 보고서 및 과학 동화 창작 봇

📚 초등 5~6학년 국어 '작품을 감상하고 창작해요' 및 과학 '탐구 결과를 발표해요' 융합 — 한 번에 글을 써달라고 하면 엉뚱한 이야기를 지어내는 AI의 환각(Hallucination)을 막기 위해, 6단계 파이프라인(소재 발굴 ➔ 줄거리 뼈대 ➔ 등장인물 설정 ➔ 과학 원리 검증 ➔ 본문 집필 ➔ 제목 및 교훈 도출)을 거치며 아이가 감독이 되어 한 단계씩 승인하며 완성하는 에이전틱 창작 웹앱입니다.

📖 한 줄 정의

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

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

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역	초보자를 위한 쉬운 설명	이렇게 한번 써보세요!
원샷 글쓰기 vs 6단계 순차 승인	"동화 한 편 써줘" 대신 개요 ➔ 인물 ➔ 검증 ➔ 본문 순서로 사람이 각 단계를 컨펌하며 통제권을 갖습니다.	3단계 '과학 원리 팩트체크' 통과 시에만 다음 단계 버튼 활성화.
과학적 사실과 문학적 상상력의 결합	예를 들어 '광합성' 원리를 배운 뒤, 엽록체 요정이 햇빛과 물로 포도당 빵을 굽는 과학 동화로 재창작합니다.	단원 학습 마무리 차시의 형성평가 대체 창작 과제로 활용.
완성작 전자책 뷰어 및 PDF 인쇄	완성된 4막 동화는 책 넘김 카드 UI로 감상하고, A4 반접이 소책자 서식으로 즉시 인쇄합니다.	학급 문고 코너에 모둠별 과학 동화책 실물 비치.

2. 핵심 아키텍처 해설

① 6단계 에이전틱 상태 머신 구조

const PIPELINE_STAGES = [
  { step: 1, name: "소재 탐색", role: "어떤 과학 원리를 다룰까요? (예: 모세관 현상, 중력)" },
  { step: 2, name: "기승전결 뼈대", role: "주인공이 겪을 갈등과 해결 사건 4막 개요 짜기" },
  { step: 3, name: "등장인물 설정", role: "원리를 의인화한 캐릭터 성격 및 이름 정의" },
  { step: 4, name: "과학 팩트체크", role: "동화 속 사건이 실제 과학 법칙에 맞는지 검증" },
  { step: 5, name: "본문 집필", role: "대화와 묘사를 살린 완성형 동화 본문 작성" },
  { step: 6, name: "제목 & 교훈", role: "독자에게 전하고 싶은 한 줄 메시지 도출" }
];

학생이 글을 쓸 때 막막해하지 않도록 글쓰기의 논리적 여정을 6개의 구체적 프롬프트 블록으로 표준화한 심기 모드(데이터 임베딩) 아키텍처입니다.

② 순차 승인 게이트 로직

let currentStep = 1;
const storyDraft = {};

function approveCurrentStep(content) {
  storyDraft[`step_${currentStep}`] = content;
  if (currentStep < 6) {
    currentStep++;
    renderNextPrompt(currentStep, storyDraft);
  } else {
    renderFinalBook(storyDraft);
  }
}

이전 단계의 결과물이 다음 단계의 입력 컨텍스트로 자동 전달되는 체인형(Chained) 에이전트 구조를 브라우저 로컬 자바스크립트 안에서 구현합니다.

③ 소책자 인쇄 서식 지원

브라우저의 @media print 규격을 적용하여, 화면에서 완성된 동화를 A4 용지에 2쪽씩 모아 찍어 반으로 접으면 손바닥 미니 동화책이 되도록 조판합니다.

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

1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
2. 역질문 답변 — 제미나이가 묻는 주제 과학 단원(빛과 렌즈, 지층과 화석 등)에 답합니다.
3. HTML 파일 실행 — 메모장에 붙여넣고 과학동화봇.html로 저장 후 더블클릭합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 외부 API 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const SCIENCE_TOPICS = [...] 상수에 초등 5~6학년 핵심 과학 주제 10선과 단계별 가이드 질문을 내장한다.
3. 6단계 단계별 진행 UI: 상단에 1~6단계 인디케이터 바를 두고, '학생 수정 및 승인' 버튼을 눌러야만 다음 단계 질문 카드로 이동하도록 설계한다.
4. 전자책 뷰어 & 소책자 인쇄: 완성 후 좌우 화살표로 책장을 넘기는 뷰어 모드와 A4 인쇄용 서식(@media print)을 동시 제공한다.
5. 학생 개인정보 0: 학생 실명 대신 '꼬마 작가' 필명만 입력받는다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 기본으로 제공할 대표 과학 주제 3가지는 무엇으로 고를까요? (예: 화산 폭발, 물의 상태 변화, 생태계 먹이사슬)
2. 완성 동화의 분량은 4쪽 분량(단편)으로 맞출까요?
3. 책 표지에 들어갈 간단한 SVG 아이콘 선택기도 포함할까요?

🎯 에디터 한줄평

"AI에게 모든 것을 맡기면 글은 매끄러울지 몰라도 아이의 성장은 멈춥니다. 하지만 6단계의 문지기가 되어 AI의 글을 검토하고 고쳐 쓰는 과정에서, 아이는 단순한 소비자가 아니라 AI를 지휘하는 '총괄 디렉터'로 성장합니다. 그것이 바로 우리가 지향해야 할 생성형 AI 시대의 참된 문해력 교육입니다."

📚 기술·교육 참고 링크

• 에이전틱 워크플로(Agentic Workflow) 개념: 순차적 계획 수립 및 자체 반성(Self-Reflection) 기법
• 교육과정 연계: 초등 5~6학년 국어(창작의 즐거움, 생각을 표현해요), 과학(탐구 결과의 발표와 소통)

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

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

💡 초등 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-shadow와 backdrop-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학년 사회(우리 고장의 변화와 발전), 수학(평균과 가능성, 비율그래프), 실과(정보 다루기)