2026년 9월 6일 일요일

[실과·사회·체육] 기상청 실시간 날씨 & 미세먼지 알리미 - 체육 신호등 판정



지금 우리 동네는 체육 수업 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. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 격자 좌표(동네 위치)와 대시보드 스타일에 답합니다.
  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학년 실과 및 사회(우리 고장의 기후와 생활), 체육(건강 증진), 과학(기후 변화)
By 시간: