우리 동네 수영장에서 나의 재능을 찾다! — 공공 체육시설 탐구 지도 & 다중지능 맞춤 진로 추천기
🏊 초등 5~6학년 체육, 사회(우리 고장의 시설), 진로교육 융합 — 학생들이 우리 고장의 공공 체육시설(수영장, 체육관, 축구장, 공원)을 지도에서 탐색하며 자신의 다중지능(Multiple Intelligences) 유형에 맞는 체육 활동을 발견하고, 진로 방향을 추천받는 참여형 교구입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 지도 하면서 배우는 공공 시설 | 인라인 SVG로 우리 동네의 공공 체육시설(수영장, 체육관, 농구장, 육상 트랙)을 도형으로 시각화합니다. | 시설 핀 마커 클릭 시 용도 및 운영 시간, 무료/유료 정보 팝업 표시. |
| 다중지능(MI) 진단 퀴즈 | 8대 다중지능(언어, 논리, 공간, 신체, 음악, 대인, 내면, 자연) 중 나에게 강한 지능 유형을 6개 문항으로 판별합니다. | 판정 결과에 따라 공공 체육시설의 추천 운동 종목이 자동으로 표시됩니다. |
| 진로 연계 체육 직업 안내 | 해당 다중지능 유형에 맞는 체육 관련 진로(수영 선수, 체육 지도자, 스포츠 재활사, 심판 등)를 자동 제안합니다. | 진로 아이콘 클릭 시 상세 설명 카드가 펼쳐지는 아코디언 UI. |
2. 초보자를 위한 바이브 코딩 실전 사용 예시
제미나이(Gemini)에 아래 프롬프트를 붙여넣으면 단일 HTML 파일로 즉시 완성됩니다.
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 학교 위치(시/도)와 지도 배경 색상에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
체육시설탐구.html로 저장 후 더블클릭합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리, 소셜 로그인, DB 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 시설 데이터 심기 모드: const FACILITIES = [{ id: "P001", name: "○○ 수영장", type: "수영", fee: "무료", x: 120, y: 200 }, ...] 상수에 5~8개의 공공 체육시설 데이터를 내장한다.
3. 인라인 SVG 지도: 도시 도로망을 SVG 선과 사각형으로 표현하고, 시설 위치는 x/y 좌표에 핀 마커(파랑, 초록, 주황)로 렌더링한다.
4. 다중지능 진단 퀴즈: 6개 문항을 가중치 판정으로 8대 지능 유형(언어, 논리, 공간, 신체, 음악, 대인, 내면, 자연) 중 최상위 2개를 도출한다.
5. 진로 추천 엔진: 다중지능 결과에 따라 관련 체육 직업(선수, 지도자, 심판, 재활사, 스포츠 관리자)을 아코디언 UI로 자동 추천한다.
6. 학생 개인정보 0: 학생 실명을 절대 입력받지 않으며, 닉네임만으로 진단 결과를 표시한다.
7. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 기획을 구체화하기 위한 다음 3가지 질문을 먼저 나에게 던져줘:
1. 학교가 소재한 시·도 및 주요 공공 체육시설 3곳은 어디인가요?
2. 다중지능 진단 퀴즈의 난이도는 초등 4학년 기준으로 맞출까요?
3. 진로 아이콘은 이모지로 표시할까요, 아니면 캔바에서 만든 SVG 아이콘을 사용할까요?🎯 에디터 한줄평
"체육 수업이 교실 안 이론으로만 끝나면 아이들은 몸의 감각을 잃습니다. 우리 동네 수영장, 체육관, 공원을 지도로 직접 탐색하면서 '나는 신체 지능이 높다'는 사실을 발견하는 것은 단순한 체육 학습을 넘어 진로 설계의 첫 단추입니다."
📚 기술·교육 참고 링크
- 하워드 가드너 다중지능(MI) 이론 및 초등 진로교육 연계 가이드
- 교육과정 연계: 초등 5~6학년 체육(건강 증진), 사회(우리 고장의 시설과 공간), 실과(진로 탐색)
