2026년 9월 8일 화요일

[실과·사회·과학] 학교 탐구 프로젝트 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학년 실과(소프트웨어로 문제를 해결해요), 사회(탐구 주제 선정), 과학(자유 탐구 설계)
By 시간: