📢 핵심 30초 요약
교과서 속 평면 지도를 넘어 우리 동네 진짜 수영장을 탐험해요! 구글 제미나이(Gemini)에 프롬프트를 입력하면, 복잡한 지도 API 키 발급 없이도 [Leaflet.js 기반 우리 고장 인터랙티브 지도 + 생존수영 교육 시설 필터 + 안전 수칙 팝업 + 체험 계획서 인쇄]가 지원되는 단일 HTML 융합 수업 웹앱이 완성됩니다.
선생님, 그리고 아이들과 함께 생생한 지역사회 탐구 및 안전 교육을 실천하시는 교육자 여러분 안녕하세요! 프롬프트로 배우는 바이브 코딩 블로그 에디터입니다. 😊
초등 3학년 사회과 '우리 고장의 공공시설' 단원과 체육과 '생존수영 교육'을 연계할 때, "우리 지역에 어떤 공공 수영장과 체육시설이 있는지 아이들이 직접 찾아보고 안전 수칙을 익힐 수 있는 스마트한 지도 교구"가 필요하셨을 텐데요.
구글 제미나이(Gemini)용 바이브 코딩 프롬프트 하나면, 오픈소스 지도(Leaflet.js)를 활용해 우리 고장 수영장의 수심, 레인 수, 생존수영 교육 지원 여부를 클릭 한 번으로 확인하고 나만의 체험 계획서까지 뽑아내는 '인터랙티브 생존수영 지도 웹앱'을 단 1분 만에 구축할 수 있답니다!
📊 제미나이 생존수영 탐구 지도의 3가지 핵심 기능
사회과 공간 탐구와 체육과 안전 교육을 자연스럽게 융합한 핵심 기능입니다.
| 무엇이 바뀌었나요? (영역) | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 🗺️ 오픈소스 반응형 지도 (Leaflet.js Map Engine) |
유료 API 키 없이도 우리 고장(시·군·구) 지도를 자유롭게 확대·축소하고 수영장, 종합체육관 위치 핀을 탐색합니다. | 학교 위치와 가장 가까운 생존수영 거점 수영장 거리 찾아보기 |
| 🏊 생존수영 상세 정보 팝업 (Safety & Facility Specs) |
마커를 누르면 수심(1.2m~1.4m), 유아풀 유무, 잎새뜨기 요령 및 구명조끼 착용 수칙이 물방울 소리와 함께 팝업됩니다. | 수영장 가기 전 꼭 알아야 할 3대 안전 수칙 퀴즈 풀기 |
| 📋 나만의 체험 계획서 출력 (Plan Export Sheet) |
가고 싶은 시설을 선택하고 준비물(수영모, 물안경, 수건 등)을 체크하면 A4 1장 예쁜 체험 학습 계획서로 즉시 출력됩니다. | 사회·체육 융합 포트폴리오 과제물로 제출 및 가정 연계 |
💡 초보자를 위한 바이브 코딩 실전 사용 예시
학생들의 공간 정보 탐색력과 위기 대응 안전 역량을 함께 길러주는 제미나이 전용 완성형 바이브 코딩 프롬프트입니다. AI가 우리 학교가 위치한 지역(시·군·구)을 먼저 확인하도록 '거꾸로 프롬프트(Reverse Prompting)'가 내장되어 있습니다.
🪄 제미나이 전용 '우리 고장 생존수영 탐구 지도' 만능 프롬프트
"당신은 초등 사회·체육 융합 교육 및 인터랙티브 지도 웹앱 전문 개발자입니다.
초등학교 3학년 '우리 고장 공공시설 및 생존수영 탐구' 수업에서 사용할 '우리 고장 생존수영 & 공공체육시설 탐구 지도 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장, Leaflet.js CDN 포함)로 제작해 주세요.
[핵심 요구 기능 및 기술 사양]
1. Leaflet.js 오픈스트리트맵 기반 인터랙티브 지도:
- 별도 API 키 없이 동작하는 가볍고 빠른 반응형 지도 렌더링
- 수영장(🏊), 체육관(🏟️), 체육공원(⚽) 카테고리별 커스텀 컬러 핀 배치
2. 우리 고장 공공 체육시설 데이터 (기본 6~8곳 샘플 내장):
- 시설명, 도로명 주소, 수영장 규격(25m 6레인, 수심 1.2m 등), 생존수영 교육 지원 여부(✅/❌)
- 상단 '🏊 생존수영 시설만 보기' 원클릭 토글 필터칩 제공
3. 안전 수칙 팝업 & Web Audio 사운드:
- 마커 클릭 시 퐁당 물방울 효과음(Web Audio API 합성)과 함께 '생존수영 3대 핵심 수칙(잎새뜨기, 체온 유지, 구명조끼 착용법)' 카드 팝업
4. 학생용 '생존수영 체험 계획서' 생성기:
- 학생이 탐색한 수영장을 찜(선택)하고, [이동 방법, 필수 준비물 체크리스트, 나의 다짐]을 적으면 A4 1장 인쇄용 계획서로 렌더링
5. 디자인: 시원한 마린 블루/아쿠아 톤의 깔끔한 UI, 크롬북 및 스마트패드 터치 완벽 호환
코드를 작성하기 전, 지도의 기본 중심 위치(예: 부산 해운대구, 서울 마포구 등 특정 지역)나 추가하고 싶은 시설 데이터를 나에게 2가지 질문을 먼저 물어봐줘."
초등학교 3학년 '우리 고장 공공시설 및 생존수영 탐구' 수업에서 사용할 '우리 고장 생존수영 & 공공체육시설 탐구 지도 웹앱'을 단일 HTML 파일(HTML+CSS+JS 내장, Leaflet.js CDN 포함)로 제작해 주세요.
[핵심 요구 기능 및 기술 사양]
1. Leaflet.js 오픈스트리트맵 기반 인터랙티브 지도:
- 별도 API 키 없이 동작하는 가볍고 빠른 반응형 지도 렌더링
- 수영장(🏊), 체육관(🏟️), 체육공원(⚽) 카테고리별 커스텀 컬러 핀 배치
2. 우리 고장 공공 체육시설 데이터 (기본 6~8곳 샘플 내장):
- 시설명, 도로명 주소, 수영장 규격(25m 6레인, 수심 1.2m 등), 생존수영 교육 지원 여부(✅/❌)
- 상단 '🏊 생존수영 시설만 보기' 원클릭 토글 필터칩 제공
3. 안전 수칙 팝업 & Web Audio 사운드:
- 마커 클릭 시 퐁당 물방울 효과음(Web Audio API 합성)과 함께 '생존수영 3대 핵심 수칙(잎새뜨기, 체온 유지, 구명조끼 착용법)' 카드 팝업
4. 학생용 '생존수영 체험 계획서' 생성기:
- 학생이 탐색한 수영장을 찜(선택)하고, [이동 방법, 필수 준비물 체크리스트, 나의 다짐]을 적으면 A4 1장 인쇄용 계획서로 렌더링
5. 디자인: 시원한 마린 블루/아쿠아 톤의 깔끔한 UI, 크롬북 및 스마트패드 터치 완벽 호환
코드를 작성하기 전, 지도의 기본 중심 위치(예: 부산 해운대구, 서울 마포구 등 특정 지역)나 추가하고 싶은 시설 데이터를 나에게 2가지 질문을 먼저 물어봐줘."
🏃 실전 적용 3단계 순서
- 1단계 (제미나이에 프롬프트 입력): 위 프롬프트를 복사하여 구글 제미나이에 전달하고, 우리 학교가 위치한 지역명(시·군·구)을 AI에게 알려줍니다.
- 2단계 (HTML 파일 저장): 제미나이가 완성해 준 단일 HTML 코드를 메모장에 붙여넣고
swimming_map.html로 저장합니다. - 3단계 (스마트 융합 수업): 태블릿으로 지도를 열어 우리 동네 수영장 위치와 안전 수칙을 탐색하고 계획서를 출력하는 실감 나는 사회·체육 수업을 진행합니다!
🎯 에디터 한줄평
"내가 사는 지역의 실제 공간을 탐구할 때 아이들의 배움은 진짜 삶과 연결됩니다. 제미나이 바이브 코딩으로 교실 안에 살아 숨 쉬는 우리 고장 디지털 지도를 펼쳐보세요!"
📌 구글 제미나이 웹 및 개발자 리소스
Google Gemini 공식 포털 바로가기 🔗
