2026년 9월 8일 화요일

[과학·사회] 과학 자유탐구 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학년 과학(자유 탐구), 사회(지속가능한 발전과 지역 문제), 실과(문제 해결과 프로그래밍)
By 시간: