우리 고장 환경 문제를 네 가지 관점에서 본다! — 4대 비동기 에이전트 병렬 탐구 웹앱
🌍 초등 5~6학년 과학(환경), 사회(지역 문제 해결), 실과(SW 활용) 융합 — 학생들이 조사한 우리 고장 환경 문제(쓰레기, 물 오염, 녹지 감소, 소음 등)를 4대 역할의 에이전트(생태 조사관, 경제 분석가, 사회 복지 전문가, 기술 전문가)가 각각 분석하여 하나의 종합 보고서로 통합하는 다각도 탐구 웹앱입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 한 가지 관점 ➔ 네 가지 관점 | 환경 문제를 과학자만 보는 것이 아니라, 생태学家와 경제학자와 사회복지사와 기술자가 동시에 봅니다. | 4대 에이전트가 동시에 실행되어 각자의 결과가 병렬로 표시됩니다. |
| 보고서만 ➔ 시각적 통합 | 4가지 관점의 분석 결과를 하나의 대시보드에 카드로 나란히 배치하여 종합 요약합니다. | 2×2 그리드 레이아웃에 각 에이전트의 아이콘·색상·분석 결과가 동시 표시. |
| 정답 하나 ➔ 다각도 해결책 | 환경 문제에는 하나의 정답이 없습니다. 네 관점에서 본 해결책을 합쳐 최선의 방안을 학생들이 투표합니다. | "우리 모둠의 최선의 해결책은?" 투표 버튼으로 종합 결론 도출. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 단일 HTML 파일로 즉시 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 환경 주제, 에이전트 유형, 통합 보고서 서식에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
환경탐구.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 탐구 데이터 심기 모드: const AGENTS = [{ role: "생태 조사관", icon: "🌿", color: "#4caf50", logic: "..." }, ...] 상수에 4대 에이전트의 역할, 아이콘, 분석 로직을 내장한다.
3. 병렬 실행 시각화: 4대 에이전트가 동시에 실행되며, 각 카드가 로딩 스피너 → 완료 체크로 전환되는 애니메이션을 구현한다.
4. 종합 대시보드: 2×2 그리드 레이아웃에 각 에이전트의 분석 결과가 나란히 표시되고, 하단에 종합 요약이 자동 생성된다.
5. 학생 개인정보 0: 학생 실명을 절대 저장하지 않으며, 모둠 번호 및 닉네임만 사용한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 탐구할 환경 주제는 무엇인가요? (기본: 쓰레기 분리수거 / 하천 오염 / 녹지 감소)
2. 4대 에이전트의 역할은 무엇으로 할까요? (기본: 생태 조사관, 경제 분석가, 사회 복지 전문가, 기술 전문가)
3. 통합 보고서는 전자칠판 발표 형식으로 할까요, 아니면 A4 인쇄 형식으로 할까요?🎯 에디터 한줄평
"환경 문제의 해결책은 과학자에게만 있지 않습니다. 경제학자가 비용을 계산하고, 사회복지사가 영향을 받는 사람을 찾고, 기술자가 해결 도구를 제안합니다. 네 가지 관점을 나란히 놓고 보는 이 웹앱은 아이들이 세상을 하나의 렌즈로 보지 않도록 훈련하는 최고의 사회적 상상력 교구입니다."
📚 기술·교육 참고 링크
- 다각도(다면적) 문제 해결 및 병렬 에이전트(Parallel Agents) 개념 가이드
- 교육과정 연계: 초등 5~6학년 과학(환경과 생태), 사회(지역 문제 해결), 실과(SW 활용)
