지금 우리 동네는 체육 수업 OK? — 기상청 API 실시간 날씨 & 미세먼지 알리미 대시보드
🌤️ 초등 5~6학년 실과 및 사회 '우리 고장의 기후와 생활' 단원 — 기상청 공식 OpenAPI를 불러와 지금 우리 동네의 실시간 기온, 강수 확률, 미세먼지 수치를 전자칠판 대시보드에 한눈에 보여주고, 오늘 야외 체육 수업이 가능한지를 체육 신호등(빨강/노랑/초록)으로 자동 판정합니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 기상청 공식 OpenAPI 연동 | 기상청 단기예보 공공데이터 API를 호출하여 현재 기온·강수 확률·풍속·습도를 30분 단위로 자동 갱신하는 대시보드입니다. | 공공데이터포털에서 무료 키를 발급받고 파일 상단에 넣어 실행합니다. |
| 미세먼지 수치 시각화 | 측정소별 실시간 미세먼지(PM10)와 초미세먼지(PM2.5) 농도를 색상 라벨로 표시합니다. | '좋음(파랑)' ~ '매우나쁨(빨강)' 4단계 신호등 라벨 자동 판정. |
| 체육 수업 신호등 자동 판정 | 오늘 날씨 조건을 알고리즘으로 평가해서 체육 신호등 아이콘과 안내 카드가 표시됩니다. | 과학적 의사결정을 학생과 함께 토론하며 기후 문해력을 키웁니다. |
2. 핵심 아키텍처 해설
① GET 요청: 기상청 단기예보 API 호출
const KEY = "발급받은인증키";
async function fetchWeather() {
const url = "https://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst"
+ "?serviceKey=" + encodeURIComponent(KEY)
+ "&pageNo=1&numOfRows=10&dataType=JSON"
+ "&base_date=20260906&base_time=0700&nx=62&ny=124";
const json = await (await fetch(url)).json();
return json.response.body.items.item;
}공공데이터포털에서 발급받은 키와 우리 동네 격자 좌표(nx, ny)를 넣으면 30분 전 실황 데이터가 JSON 배열로 돌아옵니다.
② 미세먼지 신호등 자동 판정 알고리즘
function trafficLight(pm10, pm25) {
const worst = Math.max(pm10, pm25);
if (worst >= 151) return { color: "빨강", label: "매우 나쁨", icon: "🔴", outdoor: "실내 체육" };
if (worst >= 81) return { color: "주황", label: "나쁨", icon: "🟠", outdoor: "마스크 착용 체육" };
if (worst >= 31) return { color: "노랑", label: "보통", icon: "🟡", outdoor: "일반 체육" };
return { color: "초록", label: "좋음", icon: "🟢", outdoor: "야외 체육 추천" };
}PM10과 PM2.5 중 더 나쁜 쪽을 기준으로 4단계 신호등을 판정하고, 오늘 체육 수업 권장 방식을 안내 문구로 출력합니다.
③ EMBED 폴백 이중 모드
const EMBED_WEATHER = null; // 심기 모드 데이터를 넣으면 오프라인 폴백
async function getData() {
if (EMBED_WEATHER) return EMBED_WEATHER;
try {
return await fetchWeather();
} catch (e) {
return EMBED_LAST; // 키 만료·장애 시 심기 데이터 자동 전환
}
}원칙 정정에 따라 실시간 fetch를 기본으로 하되, 키 만료나 네트워크 장애가 발생하면 EMBED_LAST 상수에 심어둔 어제 데이터로 자동 폴백하여 수업이 멈추지 않습니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 격자 좌표(동네 위치)와 대시보드 스타일에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
체육신호등.html로 저장하여 전자칠판에 띄웁니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN) 없이 순수 바닐라 HTML/CSS/JS로 완성한다. 기상청 공공데이터 API fetch는 유일한 외부 통신이다.
2. EMBED 폴백 필수: const EMBED_LAST = {...} 상수에 어제 실측 데이터를 심어두고, 키 만료·장애 시 자동 전환하여 수업이 멈추지 않게 한다.
3. 체육 신호등 알고리즘: PM10과 PM2.5 중 더 나쁜 값을 기준으로 4단계(좋음/보통/나쁨/매우나쁨) 신호등 아이콘 + 체육 수업 권장 방식을 자동 판정한다.
4. 학생 개인정보 0: 학생 이름·의견 등은 일절 다루지 않으며, 동네 기상 데이터만 취급한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 격자 좌표(nx, ny)는 우리 학교 동네 기준으로 어떤 값을 사용할까요?
2. 화면 대시보드 색상 톤은 블루 스카이와 그린 포레스트 중 어느 것으로 갈까요?
3. 갱신 주기는 30분마다 자동 폴링으로 할까요?🎯 에디터 한줄평
"기상청 앱을 켜보는 것은 데이터를 '구경'하는 것이고, 기상청 API를 브라우저에서 직접 호출해보는 것은 데이터를 '소유'하는 것입니다. 오늘 아이들에게 가장 먼저 알려주어야 할 것은 지식이 아니라, 지금 이 교실의 공기를 과학적으로 읽고 안전한 선택을 스스로 내리는 힘입니다."
📚 기술·교육 참고 링크
- 기상청 공공데이터포털 및 교육부 에어컨/미세먼지 학생 건강 안내
- 교육과정 연계: 초등 5~6학년 실과 및 사회(우리 고장의 기후와 생활), 체육(건강 증진), 과학(기후 변화)
