2026년 9월 6일 일요일

[보건·체육·수학] 학생 신체발달 백분위 계산 - 질병청 성장 곡선 기반 건강 성장 트래커



키와 몸무게, 숫자가 아닌 성장 그래프로 본다 — '학생 신체발달 표준 백분위 계산기'

📏 초등 4~6학년 보건·체육·수학 융합 — 신체 측정 주간에 학생들이 자신의 키와 몸무게를 입력하면, 질병관리청 표준 성장 곡선(LMS 파라미터)과 대조하여 백분위수(Percentile)를 시각화합니다. 균형 잡힌 식습관과 수면 시간의 중요성을 수학 통계 데이터로 스스로 탐구하는 융합 건강 웹앱입니다.

📖 한 줄 정의

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

학내망 원칙: 학생 개인정보(실명·의견·성적·상담 기록)의 외부 수집·저장·전송 금지(쿼리에 학생 데이터가 담기는 외부 API 호출 포함) — 일반 공개 쿼리의 외부 호출은 허용하며, 학생 배포본은 심기 폴백(EMBED 상수)을 항상 내장한다.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
질병청 표준 성장 곡선 심기 성별·연령별 평균 키·몸무게 표준 백분위 표(3th~97th)를 파일 상단 상수로 심어 외부 통신 없이 즉시 계산합니다. 나이와 성별을 고르고 내 측정값을 입력하여 내 위치를 확인합니다.
순수 캔버스 백분위 시각화 외부 차트 라이브러리(Chart.js 등) 없이 순수 Canvas로 정규분포 곡선 위에 내 위치 핀(마커)을 그립니다. "또래 100명 중 45번째"와 같은 백분위수를 직관적으로 확인합니다.
학생 민감 정보 세션 메모리 키·몸무게 등 민감한 신체 정보는 파일이나 서버에 저장되지 않고 창을 닫으면 즉시 소멸됩니다. 이름 칸이 없어 옆 친구가 봐도 누구 것인지 모르는 안전한 프라이버시.

2. 핵심 아키텍처 해설

① 표준 성장 곡선 상수: GROWTH_CHART

const GROWTH_CHART = {
  male_11y: {
    height: [136.2, 140.5, 145.2, 149.8, 154.5], // 3th, 15th, 50th, 85th, 97th
    weight: [29.8, 34.5, 41.2, 49.5, 58.2]
  },
  female_11y: {
    height: [136.8, 141.2, 146.0, 151.1, 156.2],
    weight: [29.5, 34.1, 40.8, 48.9, 57.5]
  }
};

질병관리청 표준 성장 곡선의 핵심 분기점을 상수로 심어두어 인터넷이 끊긴 보건실에서도 백분위를 즉시 계산합니다.

② 백분위수(Percentile) 보간 계산 알고리즘

function calcPercentile(val, arr) {
  const percentiles = [3, 15, 50, 85, 97];
  if (val <= arr[0]) return 3;
  if (val >= arr[4]) return 97;
  for (let i = 0; i < 4; i++) {
    if (val >= arr[i] && val <= arr[i+1]) {
      const ratio = (val - arr[i]) / (arr[i+1] - arr[i]);
      return Math.round(percentiles[i] + ratio * (percentiles[i+1] - percentiles[i]));
    }
  }
  return 50;
}

선형 보간(linear interpolation) 공식으로 내 측정값이 표준 곡선의 몇 퍼센타일에 해당하는지 정밀하게 산출합니다.

③ 순수 캔버스 정규분포 곡선 렌더링

function drawBellCurve(ctx, percentile) {
  ctx.clearRect(0, 0, 400, 200);
  ctx.beginPath();
  // 가우시안 정규분포 곡선 그리기
  for (let x = 0; x <= 400; x++) {
    const norm = (x - 200) / 60;
    const y = 180 - 150 * Math.exp(-0.5 * norm * norm);
    if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();
  // 내 위치 빨간 핀 그리기
  const markerX = (percentile / 100) * 400;
  ctx.fillStyle = "red";
  ctx.fillRect(markerX - 2, 20, 4, 160);
}

차트 라이브러리 없이 순수 수학 수식으로 종 모양 정규분포 곡선을 그리고, 내 위치를 빨간 선으로 명확히 짚어줍니다.

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

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트'를 복사합니다.
  2. 역질문 답변 — 제미나이가 묻는 대상 학년(4~6학년)과 표시할 건강 조언에 답합니다.
  3. HTML 파일 실행 — 메모장에 붙여넣고 성장계산기.html로 저장하여 보건 수업에 활용합니다.

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

[🚨 에러 방지 기본 안전장치]
1. 단일 HTML 파일 완결성: 외부 라이브러리(Chart.js 등), 외부 CDN 없이 순수 HTML5 Canvas와 바닐라 JS로 완성한다.
2. 질병청 성장 곡선 데이터 심기: 초등 4~6학년 남녀 표준 키·몸무게 백분위수(3, 15, 50, 85, 97th)를 상수로 내장한다.
3. 캔버스 정규분포 곡선: 가우시안 수식으로 종 모양 곡선을 그리고 학생의 백분위 위치에 빨간색 세로 핀을 렌더링한다.
4. 학생 개인정보 0: 학생 실명 입력 칸은 없으며, 성별·연령·키·몸무게는 세션 메모리로만 유지되고 창을 닫으면 소멸한다.
5. 건강 피드백 카드: 백분위에 맞춰 '충분한 수면(9시간)과 단백질 섭취를 추천해요' 등 긍정적 성장 조언을 출력한다.
6. // TODO, /* 생략 */ 등의 미완성 코드는 절대 넣지 말고 끝까지 완성한다.

[❓ 역질문 유도]
코드를 즉시 작성하지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 대상 연령 범위를 10~12세(초4~6)로 맞출까요?
Q2. 비만도(BMI) 계산 카드도 함께 표시할까요?
Q3. 화면 테마를 보건실 민트 그린과 파스텔 블루 중 어느 것으로 갈까요?

🎯 에디터 한줄평

"키와 몸무게는 단순한 숫자가 아니라 성장하고 있는 내 몸의 이야기입니다. 백분위 그래프 위에서 내 위치를 확인하는 순간, 비교의 불안은 사라지고 건강하게 잘 먹고 푹 자야겠다는 생활의 결심이 수학적 통계로부터 자연스럽게 피어납니다."

📚 기술·교육 참고 링크

  • 질병관리청 소아청소년 표준 성장도표 및 LMS 통계 방법론
  • 교육과정 연계: 초등 5~6학년 보건(성장과 발달), 체육(신체 발달과 건강), 수학(통계와 평균)
By 시간: