내 하루 밥상을 데이터로 그리는 '건강 지킴이 일일 영양 & 신체활동 트래커'
💪 초등 5~6학년 실과 '균형 잡힌 식생활' 및 체육 '건강 증진' 단원 — 학생들이 오늘 급식 메뉴와 방과 후 운동량을 터치로 입력하면, 5대 영양소(탄수화물·단백질·지방·비타민·무기질) 섭취 밸런스와 소모 칼로리가 레이더 차트로 시각화되고 자기 몸에 맞는 건강 피드백 카드가 나옵니다. 교과서 속 영양 지식이 자기 하루 데이터와 직접 만나는 자기주도 건강 관리 앱입니다.
📖 한 줄 정의
심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).
학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.
1. 3대 핵심 분석 비교표
| 무엇이 바뀌었나요? / 영역 | 초보자를 위한 쉬운 설명 | 이렇게 한번 써보세요! |
|---|---|---|
| 급식 메뉴 → 영양소 자동 매핑 | 오늘 급식 메뉴(현미밥, 콩국, 돈가스, 배추김치)를 터치하면 5대 영양소 비율이 자동으로 계산됩니다. 영양사 선생님과 협업한 급식 데이터를 상수에 심어두는 방식입니다. | '오늘 급식 뭐 먹었어?' 버튼 클릭 → 급식 식단이 영양소 원뿔(Radar) 그래프로 변신. |
| 운동량 → 소모 칼로리 계산 | 줄넘기기(10분당 약 100kcal), 축구(30분당 약 250kcal) 등 활동 목록을 터치하면 오늘 나의 총 소모 에너지가 즉시 계산됩니다. | 오늘의 섭취 칼로리와 소모 칼로리를 저울(비율) 그래프로 비교. |
| 건강 피드백 카드 | AI가 아닌 정해진 규칙 기반의 건강 조언 엔진이 '단백질이 조금 부족해요! 저녁에 두부나 계란을 먹어볼까요?'처럼 친절하게 알려줍니다. | 일주일치 데이터를 모으면 '나만의 건강 리포트' 카드가 나타납니다. |
2. 핵심 아키텍처 해설
① 급식 메뉴 영양 DB: MENU_DB 상수
const MENU_DB = {
"현미밥": { carb: 60, protein: 5, fat: 1, vitamin: 2, mineral: 3, kcal: 270 },
"돈까스": { carb: 20, protein: 18, fat: 22, vitamin: 1, mineral: 2, kcal: 420 },
"콩국": { carb: 10, protein: 8, fat: 4, vitamin: 3, mineral: 4, kcal: 150 }
};학교 급식 메뉴의 대략적인 영양 성분값을 교사와 영양사가 협업해 심어두면, 학생이 메뉴를 터치하는 것만으로 5대 영양소 지표가 합산됩니다.
② 레이더 차트(Radar Chart) 캔버스 그리기
function drawRadar(ctx, values) {
const axes = Object.keys(values);
const center = { x: 150, y: 150 };
const step = (2 * Math.PI) / axes.length;
ctx.beginPath();
for (let i = 0; i <= axes.length; i++) {
const angle = i * step - Math.PI / 2;
const r = (values[axes[i % axes.length]] / 100) * 120;
const x = center.x + r * Math.cos(angle);
const y = center.y + r * Math.sin(angle);
i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
}
ctx.closePath();
ctx.stroke();
}외부 차트 라이브러리 없이 캔버스 삼각함수만으로 5각형 레이더 차트를 직접 그립니다. 학생의 섭취 비율과 표준 섭취 기준을 비교해 부족한 영양소 꼭짓점이 오목하게 들어가 보입니다.
③ 소모 칼로리 저울 시각화
섭취 칼로리 대비 운동 소모 칼로리의 비율을 저울 양쪽 접시처럼 그려서, 오늘 하루 에너지 균형(Energy Balance)을 즉각적으로 체감하게 합니다. 수학 비율 단원과 함께 연계하여 계산 검증까지 할 수 있습니다.
3. 초보자를 위한 바이브 코딩 실전 사용 예시
- 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
- 역질문 답변 — 제미나이가 묻는 학생 학년·성별 기준 표준 영양 섭취량에 답합니다.
- HTML 파일 실행 — 메모장에 붙여넣고
건강트래커.html로 저장하여 태블릿에 배포합니다.
제미나이 전용 에러 제로 프롬프트
[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(CDN), 백엔드 서버 없이 순수 바닐라 HTML/CSS/JS로 완성한다.
2. 심기 모드(데이터 임베딩): const MENU_DB = {...} 상수에 급식 식단 및 일반 음식 15가지의 영양 성분값을 내장하여 브라우저에서 즉시 계산이 되도록 한다.
3. 레이더 차트 캔버스: HTML5 Canvas의 삼각함수로 5각형 레이더 차트를 그리며, 오늘 섭취 비율과 표준 섭취 기준을 겹쳐 표시한다.
4. 개인정보 보호: 학생 실명과 체중 대신 모둠명과 닉네임만 쓰며, 모든 데이터는 브라우저 세션 메모리로만 유지한다.
5. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.
[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지 질문을 먼저 나에게 던져줘:
1. 5대 영양소 외에 추가할 항목이 있나요? (수분, 식이섬유, 당류 등)
2. 운동 강도 단위는 분(줄넘기기 10분당 100kcal 등)으로 잡을까요?
3. 피드백 문구를 짧게 알림창처럼 띄울까요, 길게 카드 형태로 쓸까요?🎯 에디터 한줄평
"'식단의 균형'이라는 글자를 외우기만 했던 과거와 달리, 이제 아이들은 자기 점심의 영양소 꼭짓점이 어디가 꺼져 있는지 눈으로 보고, 부족한 부분을 저녁 메뉴로 채우며 실제 식습관을 고쳐갑니다. 자기 몸의 데이터를 스스로 분석하는 것, 그것이 가장 견고한 건강 문해력(Health Literacy)의 출발점입니다."
📚 기술·교육 참고 링크
- 식약처 및 교육부 급식 영양 관리 안내 : 학교 급식 영양소 기준 정보 참고
- 교육과정 연계: 초등 5~6학년 실과(균형 잡힌 식생활), 체육(건강 증진), 수학(비율 및 통계)
