2026년 9월 13일 일요일

[바이브 코딩 교구] 나이스(NEIS) 오픈 API 연동: 전국 학교 급식 반찬 랭킹 검색기 (비동기 병렬 스캔 & 제미나이 프롬프트)

🍱 나이스(NEIS) 공공데이터 API 연동: 우리 지역에서 '돈까스·마라탕'이 가장 많이 나온 학교는? 전국 학교 급식 반찬 랭킹 검색기

💡 이번 실전 교구 바이브 코딩 30초 핵심 다이제스트:
"우리 동네 초등학교 중에 올해 돈까스가 가장 많이 나온 학교는 어디일까요? 마라탕이나 떡볶이는 1년에 몇 번이나 나올까요?"
학생들이 매일 가장 손꼽아 기다리는 '학교 급식 식단' 공공데이터를 활용해, 17개 시·도 교육청 소속 수백 개 학교의 1년 치 식단을 실시간으로 탐색하고 순위를 집계하는 '전국 학교 급식 반찬 랭킹 검색기'를 제미나이 바이브 코딩으로 제작해 보세요!
나이스(NEIS) 교육정보 개방포털의 오픈 API를 연동하여, 브라우저 내 15개교 단위 비동기 병렬 청크 스캔(Promise.all) 기법으로 수백 개 학교 데이터를 20~30초 만에 분석하고 프로그레스 바로 진행 상황을 시각화합니다. 실과, 사회, 정보 교과와 융합할 수 있는 최고의 실생활 데이터 리터러시 교구입니다!

📊 한눈에 보는 3대 핵심 기술 & 교육적 변화 분석표

무엇이 바뀌었나요? (영역) 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
🍱 1개교 식단 조회 ➔ 지역 전체 랭킹 전수 분석 우리 학교 오늘 식단만 조회하던 기존 앱과 달리, 교육청 관내 수백 개 학교의 1년 치 급식을 전수 스캔하여 특정 반찬 제공 빈도를 랭킹으로 산출합니다. "올해 부산 지역 초등학교 중 수육이 가장 많이 나온 TOP 5 학교 찾기" 탐구 활동 진행
⚡ 순차 호출 지연 ➔ 15개교 동시 병렬 청크 스캔 학교를 하나씩 부르면 수 분이 걸리지만, Promise.all로 15개교씩 묶어 동시에 비동기 호출하여 20~30초 만에 전수 조사를 완료합니다. 실시간 퍼센트(%) 프로그레스 바로 분석 진행률을 보며 데이터 수집 과정을 시각적으로 체득
🔒 공공데이터 API 보안 & 무설치 단일 파일 백엔드 서버나 DB 설치 없이, 누구나 무료 발급 가능한 나이스 오픈 API 키 하나로 브라우저 단독 구동 단일 HTML 웹앱을 구축합니다. 학생 실명 수집 없이 키워드 기반으로 분석하므로 개인정보 감사 걱정 없는 100% 안심 수업 교구

🛠️ 나이스(NEIS) 오픈 API 2단계 파이프라인 아키텍처

  • 1. 1단계: 시·도 교육청별 학교 목록 수집 (schoolInfo):
    사용자가 선택한 시·도 교육청 코드(예: 부산 C10, 서울 B10)와 학교급(초등/중학/고등)을 기반으로 관내 학교 표준코드(SD_SCHUL_CODE)와 학교명을 1차 수집합니다.
  • 2. 2단계: 15개교 단위 비동기 병렬 스캔 (mealServiceDietInfo):
    수집된 학교들을 15개 단위(Chunk)로 쪼개어 올해 1월 1일(YYYY0101)부터 12월 31일(YYYY1231)까지의 급식 식단 메뉴를 병렬 호출한 뒤, 입력된 반찬 키워드(예: '돈까스')가 포함된 횟수(hitCount)를 실시간 누적합니다.
  • 3. 3단계: 내림차순 랭킹 소팅 & 하이라이트 뱃지 렌더링:
    식단에 해당 반찬이 나온 총 횟수를 기준으로 내림차순 정렬하여 1~3위 학교에는 골드 뱃지를 부여하고, 총 제공 횟수와 참여 학교 비율을 산출합니다.
  • 4. 4단계: API 인증키 안전 관리 수칙 (보안 원칙):
    개인 인증키가 공개 웹페이지에 노출되지 않도록 상용 배포 시에는 사용자 직접 입력 폼이나 환경 변수로 분리하고, 나이스 교육정보 개방포털에서 누구나 1분 만에 무료로 발급받아 교체할 수 있도록 안내합니다.

💡 초보자를 위한 바이브 코딩 실전 사용 예시

📌 따라하기 3단계 순서

  1. 1단계 (나이스 오픈 API 키 발급): 나이스 교육정보 개방포털(https://open.neis.go.kr)에 접속하여 무료 회원가입 후 [인증키 신청]을 누르면 즉시 개인 오픈 API 키가 발급됩니다.
  2. 2단계 (제미나이에 프롬프트 입력): 아래 [나이스 급식 랭킹 검색기 거꾸로 프롬프트]를 복사하여 제미나이에 전달하고, 되묻는 질문에 맞춤 설정을 답변합니다.
  3. 3단계 (API 키 입력 후 실행): 생성된 코드 상단의 API_KEY 변수에 발급받은 인증키를 넣고 meal_ranking.html로 저장한 뒤 더블 클릭하면 브라우저에서 즉시 급식 랭킹 분석이 실행됩니다!

📋 복사해서 바로 쓰는 '나이스 급식 랭킹 검색기 에러 제로 프롬프트'

당신은 공공데이터 포털 API 연동 및 프론트엔드 비동기 최적화 전문 수석 엔지니어입니다.
나이스(NEIS) 교육정보 개방포털 오픈 API를 활용하여, 전국 17개 시·도 교육청 소속 학교들의 1년 치 급식을 실시간 스캔해 특정 반찬 제공 빈도 랭킹을 집계하는 '학교 급식 반찬 랭킹 검색기' 웹앱을 단일 HTML5 파일로 제작해 주세요.

[🚨 에러 방지 및 API 보안 필수 안전장치 (Zero-Error Baseline)]
1. 단일 파일 완결성: 외부 서버 설치 없이 브라우저에서 바로 열리는 단일 HTML5 파일 안에 HTML, Tailwind CSS(CDN), Phosphor Icons(CDN), 순수 바닐라 자바스크립트를 모두 포함할 것. 생략 주석(// TODO 등) 없이 100% 동작하는 완전한 코드로 출력할 것.
2. API 키 보안 자리표시자: 코드 상단에 `const API_KEY = "YOUR_NEIS_API_KEY";` 형태로 플레이스홀더를 배치하고, 나이스 포털에서 발급받은 키를 쉽게 교체할 수 있도록 친절한 안내 주석을 달 것.
3. 2단계 비동기 API 파이프라인:
   - 1단계: `https://open.neis.go.kr/hub/schoolInfo`를 호출해 해당 지역 학교 목록(이름, 학교코드) 획득.
   - 2단계: `https://open.neis.go.kr/hub/mealServiceDietInfo`를 호출해 당해 연도 1월 1일~12월 31일 식단을 스캔.
4. 대규모 병렬 스캔 최적화: 수백 개 학교를 순차 호출하면 지연되므로, 15개교 단위로 묶어 `Promise.all`로 병렬 처리하고, 예외(개별 학교 에러) 발생 시 `try/catch`로 건너뛰어 전체 프로세스가 멈추지 않도록 작성할 것.
5. 실시간 진행률 표시: 분석 진행 중 프로그레스 바(0~100%)와 현재 스캔 중인 학교 수(예: 30/120개교 완료)를 화면에 실시간으로 업데이트할 것.
6. 결과 시각화: 총 제공 횟수 및 1~3위 뱃지가 적용된 반응형 순위 테이블을 렌더링하고, 검색 결과가 없을 경우 친절한 안내 메시지를 출력할 것.

[❓ 역질문 유도 (Reverse Prompting)]
코드를 작성하기 전에, 나에게 아래 3가지 질문을 먼저 던져서 세부 구성을 확정해 줘:
1. 검색 기본 지역(예: 서울특별시, 부산광역시, 경기도 등)과 학교급(초등학교 기본 선택 등)을 어떻게 설정할까요?
2. 랭킹 결과에서 상위 몇 위까지 표시할까요 (TOP 10, TOP 20, 조건 만족 전체)?
3. 전체 디자인 컬러 테마를 따뜻한 앰버/옐로우 급식 테마와 깔끔한 모던 슬레이트 테마 중 어떤 스타일로 맞출까요?

🎯 에디터 한줄평

"학생들이 매일 먹는 급식 식단표가 실시간 공공데이터 API와 병렬 비동기 프로그래밍을 만났습니다! 아이들의 호기심을 자극하고 빅데이터의 힘을 피부로 느끼게 해주는 최고의 실생활 SW 융합 교구입니다!"

🔗 공공데이터 및 오픈 라이브러리 레퍼런스:
• 나이스 교육정보 개방포털 (NEIS Open API): https://open.neis.go.kr
• Tailwind CSS CDN: https://cdn.tailwindcss.com
• Phosphor Icons CDN: https://unpkg.com/@phosphor-icons/web
By 시간: