2026년 9월 6일 일요일

[바이브 코딩] 식약처 조리식품 레시피 DB API - 영양·식습관 탐색 웹앱 만들기



영양·식습관 탐색 웹앱 만들기 — 식약처 조리식품 레시피 DB API 완전 정복

🥗 식약처 조리식품의 레시피 데이터 API는 1,100여 건 이상의 정식 레시피(재료·조리 순서·열량·나트륨·단백질)를 제공하는 식품의약품안전처 공식 공개 데이터입니다. 실측으로 샘플 키('sample')만으로도 즉시 200 OK 응답을 확인했고, 브라우저에서 직접 호출할 수 있게 CORS가 개방되어 있습니다.

실과 '음식과 영양' 단원에서 학생들이 재료·열량·나트륨을 데이터로 비교하며 균형 잡힌 식단을 설계하는 영양 탐색 앱의 완벽한 데이터 창고입니다.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
실측 접근성 국내 공공 API 중 드물게 샘플 키('sample')로 바로 조회가 가능하고, CORS가 완전 개방되어 브라우저 직접 fetch도 실측으로 확인했습니다. 교사 PC 시연은 샘플 키로 바로, 학생 배포용은 심기 모드(데이터 임베딩)로.
영양 수치 데이터 레시피마다 열량(INFO_ENG)·나트륨(INFO_NA)·단백질(INFO_PRO)·지방(INFO_FAT)·탄수화물(INFO_CAR)이 함께 옵니다. 같은 재료 조합 레시피의 나트륨 순위 매기기(수학 통계 연계).
조리 사진 20단계 MANUAL01~20의 조리 순서와 MANUAL_IMG01~20의 사진 주소가 세트로 옵니다. 조리 순서 카드 뒤집기(단계 순서 맞추기 게임).

2. 핵심 아키텍처 해설 — 레시피 API와 영양 수치 설계

① URL 해부와 파라미터

레시피 API의 주소 체계는 다음과 같습니다(실측 확인):

https://openapi.foodsafetykorea.go.kr/api/{인증키}/COOKRCP01/json/1/20
  • {인증키}: 식품안전나라 회원 인증키. 실측으로 샘플 키 sample도 조회 가능(건수 제한 주의).
  • COOKRCP01: 조리식품의 레시피 데이터 서비스 코드
  • json/1/20: 형식/시작 페이지/한 페이지 건수(최대 1000)

② 실측 응답 데이터 모양

{
  "COOKRCP01": {
    "total_count": "1156",
    "RESULT": { "CODE": "INFO-000", "MSG": "정상처리되었습니다" },
    "row": [{
      "RCP_NM": "부추콩가루찜",
      "RCP_PAT2": "반찬",
      "RCP_WAY2": "찌기",
      "INFO_ENG": "215",
      "INFO_NA": "240",
      "RCP_PARTS_DTLS": "부추 50g, 콩가루 7g(1/2작은술)",
      "MANUAL01": "1. 부추는 깨끗하게 씻어 물기를 털어낸다."
    }]
  }
}

row[] 배열에 레시피가 담기고, 재료·조리 단계(MANUAL01~20)·영양 수치(INFO_ 접두 필드)가 세트로 옵니다. 텍스트 속 쉼표·줄바꿈은 화면 표시 전에 가운뎃점(·)으로 정리하는 것이 안전합니다.

③ 이중 모드 설계 (실시간 fetch + 심기 폴백)

CORS가 개방되어 있어 실시간 모드가 가능하지만, 학생 배포용은 외부 통신 0 원칙에 맞춰 두 모드를 상수 하나로 전환합니다.

const EMBED_RECIPES = [
  { name: "부추콩가루찜", kind: "반찬", eng: 215, na: 240, pro: 14 },
  { name: "방울토마토 겉절이", kind: "반찬", eng: 45, na: 277, pro: 2 }
];

async function loadRecipes(key) {
  if (EMBED_RECIPES.length > 0) return EMBED_RECIPES;   // 심기 모드(데이터 임베딩)
  const res = await fetch("https://openapi.foodsafetykorea.go.kr/api/"
    + key + "/COOKRCP01/json/1/50");
  const json = await res.json();
  return json.COOKRCP01.row;
}

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

  1. 제미나이 전용 에러 제로 프롬프트 복사 — Gemini에 붙여넣습니다.
  2. 역질문 3가지에 답변 — 요리 분류, 나트륨 vs 열량 표시 축, 카드 톤을 결정합니다.
  3. HTML 파일 저장 후 더블클릭 — 학생 배포본은 심기 모드(데이터 임베딩)로 통신 0 완결.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·폰트·이미지 없이 단일 HTML 파일로 완성한다(더블클릭 즉시 실행).
2. 파일 상단 EMBED_RECIPES 상수에 수업용 레시피 세트를 심기 모드(데이터 임베딩)로 내장한다(학생 배포용 외부 통신 0).
3. 실시간 모드는 EMBED_RECIPES가 비어 있을 때만 동작하며, 식약처 조리식품 레시피 API(COOKRCP01)를 fetch한다.
4. 레시피 텍스트 속 쉼표·줄바꿈은 가운뎃점(·)으로 정리해 표기한다(CSV 저장 대비).
5. 영양 비교 모드: 열량(INFO_ENG)·나트륨(INFO_NA)·단백질(INFO_PRO) 중 선택한 축으로 순위 정렬(수학 통계 연계).
6. 조리 순서 게임 모드: MANUAL01~20 단계 카드를 섞어 올바른 순서로 맞추는 짝 맞추기, 정답 판정음은 Web Audio 합성.
7. 학생 표기는 번호·닉네임만 허용(실명·기록 저장 금지), 모둠 점수는 세션 메모리로만 관리.
8. 모바일 터치 대응: 뷰포트 메타 태그 필수, 버튼 최소 44×44px, 360px 화면 가로 스크롤 금지.
9. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.

[❓ 역질문 유도]
Q1. 어떤 요리 분류로 시작할까? (반찬 / 밥 / 후식 / 간식)
Q2. 영양 비교의 축은? (나트륨 낮은 순 / 열량 낮은 순 / 단백질 높은 순)
Q3. 카드 톤은? (식당 메뉴판 느낌 / 파스텔 식습관 책상)

🎯 에디터 한줄평

'음식과 영양' 단원의 정답 문답식 수업이 '나트륨 순위표를 뒤집어 보는 데이터 수업'으로 바뀌었습니다. 실측으로 샘플 키('sample')만으로도 즉시 조회가 되는 접근성까지 확인되어, 교사는 오늘 바로 시연에 나설 수 있습니다. 나트륨 순위 매기기와 조리 순서 짝 맞추기가 수학·실과를 한 화면에 묶습니다.

📚 기술·교육 참고 링크

By 시간: