2026년 9월 13일 일요일

[바이브 코딩 교구] 제미나이로 3분 만에 만드는 '오늘의 학교 급식' 조회 웹앱 (나이스 오픈API 연동 & 단일 HTML)

🍱 "선생님, 오늘 급식 뭐 나와요?" — 제미나이 바이브 코딩으로 3분 만에 만드는 '오늘의 학교 급식' 조회 웹앱 (나이스 오픈API 연동)

💡 이번 교구 바이브 코딩 30초 핵심 다이제스트:
매일 아침 교실에 들어서자마자 "선생님, 오늘 급식 메뉴 뭐예요?"라고 묻는 아이들의 초롱초롱한 눈망울을 마주하곤 합니다.
종이 식단표를 뒤적일 필요 없이, 학교 이름만 입력하면 교육부 나이스(NEIS) 교육정보 개방포털에서 오늘의 따끈따끈한 급식 식단을 1초 만에 불러오는 웹앱을 제미나이와 함께 만들어 보세요!
별도 백엔드 서버나 유료 인증키 없이 순수 프론트엔드 자바스크립트의 fetch()와 Tailwind CSS만으로 단일 HTML 파일 완결형으로 제작되며, 복잡한 알레르기 번호까지 말끔히 정제되어 교실 전자칠판이나 학급 키오스크에 띄워두기 안성맞춤입니다.

📊 한눈에 보는 3대 핵심 변화 분석표

무엇이 바뀌었나요? (영역) 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
🍱 종이 식단표 찾기 ➔ 실시간 나이스 오픈API 연동 학교 이름만 검색창에 넣으면 교육부 공인 데이터베이스에서 오늘의 식단 정보를 실시간으로 끌어옵니다. 아침 자습 시간이나 4교시 마치기 직전 전자칠판에 띄워 아이들의 즐거운 점심시간 동기 유발
🧹 복잡한 번호 ➔ 정규식 기반 알레르기 정보 자동 정제 원문에 섞여 있는 알레르기 유발물질 번호(1.2.5.6.* 등)를 자바스크립트 정규식으로 지워 순수 메뉴명만 보기 좋게 출력합니다. '친환경차수수밥(1)' 대신 '친환경차수수밥'으로 깔끔한 글머리 기호 카드 렌더링
💻 서버/DB 0개 ➔ 단일 HTML5 무설치 웹앱 Node.js나 데이터베이스 설치 없이, 파일 하나만 더블 클릭하면 모든 PC와 태블릿 브라우저에서 즉시 작동합니다. 학교 홈페이지 바로가기 아이콘이나 교실 즐겨찾기에 등록해 두고 원클릭으로 매일 확인

🧩 나이스(NEIS) 오픈API 2단계 파이프라인 심층 해설

  • 1. 1단계: 학교 기본정보 검색 (schoolInfo):
    사용자가 입력한 학교명(예: 배산초)으로 open.neis.go.kr/hub/schoolInfo를 호출합니다. 전국 동명 학교 중 일치하는 학교의 시도교육청코드(ATPT_OFCDC_SC_CODE)와 표준학교코드(SD_SCHUL_CODE)를 추출합니다.
  • 2. 2단계: 당일 급식 식단 정보 조회 (mealServiceDietInfo):
    추출된 고유 코드와 오늘 날짜(YYYYMMDD)를 파라미터로 결합하여 open.neis.go.kr/hub/mealServiceDietInfo를 연속 호출합니다. 별도 백엔드 서버 없이 브라우저의 비동기 async/await fetch() 체이닝으로 매끄럽게 연결됩니다.
  • 3. 3단계: 메뉴 텍스트 정제 및 배열 변환:
    원시 데이터 DDISH_NM에 포함된 <br/> 태그와 숫자, 마침표, 별표(알레르기 번호)를 .replace(/[0-9\.\*\#]/g, '') 정규식으로 지우고, 배열로 나누어 불릿 리스트로 예쁘게 정돈합니다.
  • 4. 4단계: 예외 처리 (휴일/방학 및 로딩 상태):
    주말, 공휴일, 방학 등 급식이 없는 날에는 "오늘의 급식 정보가 없거나 휴일/방학입니다"라는 친절한 안내 메시지를 표시하며, 로딩 중에는 스피너를 보여주어 사용자 경험(UX)을 극대화합니다.

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

📌 따라하기 3단계 순서

  1. 1단계 (거꾸로 프롬프트 복사): 아래 제공된 [제미나이 전용 나이스 급식 웹앱 프롬프트]를 복사하여 구글 제미나이(https://gemini.google.com)에 입력합니다.
  2. 2단계 (역질문 3가지 답변): 제미나이가 되묻는 질문(기본 학교 설정, 칼로리/영양 정보 표시 여부, UI 테마)에 맞춰 1줄로 답변합니다.
  3. 3단계 (단일 index.html 저장 및 실행): 출력된 완전한 코드를 메모장에 넣고 school_lunch.html로 저장한 뒤 더블 클릭하면 설치 없이 바로 전국 학교 급식이 조회됩니다!

📋 복사해서 바로 쓰는 '나이스 급식 연동 에러 제로 프롬프트'

당신은 교육 공공데이터 활용 및 프론트엔드 인터랙티브 웹 개발 전문가입니다.
교육부 나이스(NEIS) 교육정보 개방포털 오픈API를 활용하여, 전국 초·중·고등학교의 오늘의 급식 메뉴를 실시간으로 조회하는 '오늘의 학교 급식 웹앱'을 단일 HTML5 파일로 제작해 주세요.

[🚨 엄격한 제약조건 및 에러 방지 안전장치 (Zero-Error Baseline)]
1. 단일 파일 완결성: Node.js나 별도 백엔드 프록시 서버 없이, 브라우저에서 바로 열리는 단일 HTML5 파일 안에 HTML, Tailwind CSS(CDN), 바닐라 자바스크립트를 모두 포함할 것. 생략 주석(// TODO 등) 없이 완전한 코드로 출력할 것.
2. 나이스 오픈API 직접 호출:
   - 1차 호출: `https://open.neis.go.kr/hub/schoolInfo?Type=json&pSize=5&SCHUL_NM={학교명}`
   - 2차 호출: `https://open.neis.go.kr/hub/mealServiceDietInfo?Type=json&ATPT_OFCDC_SC_CODE={교육청코드}&SD_SCHUL_CODE={학교코드}&MLSV_YMD={YYYYMMDD}`
3. 날짜 자동 계산 & UI:
   - 시스템 오늘 날짜(YYYY년 M월 D일 O요일)를 상단에 자동 표시하고, API 호출용 YYYYMMDD 포맷을 생성할 것.
4. 텍스트 정제 및 예외 처리:
   - 메뉴명에 섞인 알레르기 유발물질 번호(숫자, 마침표, 특수기호)를 정규식으로 지우고 깔끔한 글머리 기호 목록으로 렌더링할 것.
   - 휴일, 방학, 미운영 시 "오늘의 급식 정보가 없거나 휴일/방학입니다" 안내 메시지를 표시할 것.
   - 로딩 중일 때 "급식을 불러오는 중..." 표시를 띄우고, 엔터키 입력으로도 검색되게 할 것.

[❓ 역질문 유도 (Reverse Prompting)]
코드를 작성하기 전에, 나에게 아래 3가지 질문을 먼저 던져서 세부 요구사항을 확인해 줘:
1. 웹앱을 처음 열었을 때 자동으로 기본 조회되도록 설정할 기본 학교(예: 특정 초등학교)가 있나요?
2. 중식 외에 조식이나 석식, 칼로리(Kcal) 정보도 화면에 함께 표시할까요?
3. 전체 디자인 톤을 따뜻한 오렌지/앰버 테마와 깔끔한 민트/슬레이트 테마 중 어떤 스타일로 맞출까요?

🎯 에디터 한줄평

"공공데이터 API가 복잡하고 어렵다는 편견을 단번에 깨주는 최고의 실생활 교구입니다. 단 100줄 남짓한 바이브 코딩으로 교실 전자칠판 위에 전국 모든 학교의 따뜻한 식판이 펼쳐집니다!"

🔗 공공데이터 및 오픈API 레퍼런스:
• 나이스(NEIS) 교육정보 개방포털: https://open.neis.go.kr
• 학교기본정보(schoolInfo) 및 급식식단정보(mealServiceDietInfo) 오픈API 가이드
• Tailwind CSS CDN: https://cdn.tailwindcss.com
By 시간: