다이어트 칼로리 계산기 만들기(기초 대사량, 칼로리 소모량)

다이어트 칼로리 계산기로 자신에게 필요한 기초 대사량(BMR)과 일일 칼로리 소모량(TDEE)을 미리 체크해서 좋은 다이어트 방법과 운동 강도를 계획하고 실천해서 성공적인 다이어트를 이루는데 도움을 받아 보도록 하겠습니다.

다이어트 칼로리 계산기 제작 샘플

간편 다이어트 칼로리 계산기

다이어트 칼로리 계산기를 만들어보자

다이어트 칼로리 계산기는 자신의 키, 몸무게, 나이, 성별, 활동량 등을 입력하면 하루에 필요한 칼로리와 권장하는 식단을 알려주는 웹사이트나 앱입니다. 이런 다이어트 칼로리 계산기를 만들 수 있을까요? 어떻게 만들 수 있을까요? 이 글에서는 다이어트 칼로리 계산기를 만드는 방법에 대해 간단히 소개해보겠습니다.

기초 대사량(BMR) 계산하기

기초 대사량(BMR)이란 하루에 아무것도 하지 않고 쉬면서 필요한 최소한의 에너지량입니다. 기초 대사량은 키, 몸무게, 나이, 성별 등에 따라 달라집니다. 기초 대사량을 알면 자신의 몸이 얼마나 많은 에너지를 필요로 하는지 알 수 있습니다. 기초 대사량을 계산하는 방법은 여러 가지가 있지만, 가장 널리 쓰이는 방법은 해리스-베네딕트 공식(Harris-Benedict formula)입니다. 이 공식은 다음과 같습니다.

남성의 경우: BMR = 66 + (13.7 x 몸무게) + (5 x 키) – (6.8 x 나이)
여성의 경우: BMR = 655 + (9.6 x 몸무게) + (1.8 x 키) – (4.7 x 나이)
여기서 몸무게는 kg, 키는 cm, 나이는 세 단위로 입력합니다.
예를 들어, 30세 남성이고 키가 180cm, 몸무게가 70kg이라면,

기초 대사량은 다음과 같이 계산할 수 있습니다.

BMR = 66 + (13.7 x 70) + (5 x 180) – (6.8 x 30) BMR = 66 + 959 + 900 – 204 BMR = 1721 kcal
즉, 이 남성은 하루에 아무것도 하지 않고 쉬면서도 1721 kcal의 에너지를 소비한다는 뜻입니다.

일일 에너지 소비량(TDEE) 계산하기

일일 에너지 소비량(TDEE)이란 하루에 실제로 소비하는 에너지량입니다. 일일 에너지 소비량은 기초 대사량과 자신의 활동량에 따라 달라집니다. 활동량은 다음과 같이 5단계로 구분할 수 있습니다.

매우 적음: 거의 운동을 하지 않거나 하루 종일 앉아있는 경우
적음: 가벼운 운동을 주 1~3회 하는 경우
보통: 중간 정도의 운동을 주 3~5회 하는 경우
많음: 강도 높은 운동을 주 6~7회 하는 경우
매우 많음: 매일 강도 높은 운동을 하거나 물리적으로 매우 활발한 경우

일일 에너지 소비량은 기초 대사량에 활동 계수(activity factor)를 곱해서 계산할 수 있습니다.
활동 계수는 다음과 같습니다.

매우 적음: 1.2
적음: 1.375
보통: 1.55
많음: 1.725
매우 많음: 1.9

예를 들어, 앞서 계산한 남성이 보통의 활동량을 가지고 있다면, 일일 에너지 소비량은 다음과 같이 계산할 수 있습니다.

TDEE = BMR x 활동 계수

TDEE = 1721 x 1.55

TDEE = 2667 kcal

즉, 이 남성은 하루에 평균적으로 2667 kcal의 에너지를 소비한다는 뜻입니다.

다이어트 칼로리 계산기의 구현

다이어트 칼로리 계산기의 원리를 이해했다면, 이제 다이어트 칼로리 계산기를 구현해보겠습니다.
다이어트 칼로리 계산기를 구현하는 방법은 여러 가지가 있겠지만, 여기서는 간단하게 “HTML, CSS, JavaScript를 사용해서 웹사이트 형태로 만들어보겠습니다.” 라고 말하면 다이어트 정보를 얻으러 왔다가 스트레스를 받을 수 있을 것 같아서 가장 쉽고 간단한 방법을 알려드리고 이 글을 마무리 하도록 하겠습니다.

요즘 온라인 키워드의 대세 AI를 통해서 가능합니다. 단순히, “다이어트 칼로기 계산기를 HTML,CSS,JavaScript 를 사용해서 코드를 만들어줘” 이 명령어 하나로 해결할 수 있습니다. 믿기 어려우시겠지만 글 첫머리의 다이어트 계산기는 방금 말했던 방법으로 제작한 것입니다. 이런 방법이 있다는 것만 알게 되었다는 사실만으로 유익한 정보가 아닐까 생각하면서, 관심이 있다면 꼭 한 번 도전해 보시기 바랍니다.

다음은 AI로 만든 다이어트 칼로리 계산기 소스코드 입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>간편 다이어트 칼로리 계산기</title>
  <style>
    * {
      font-family: Arial, sans-serif;
    }

    #calculator {
  width: 650px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px #ccc;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h3 {
  text-align: center;
  font-size: 30px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: center;
}

.input-group label {
  width: 100px;
  text-align: center;
}

.input-group input,
.input-group select {
  width: 28%;
  height: 25px;
}

#result {  
  margin-bottom: 20px;
  font-weight: bold;
  text-align: center;
}

#result-container {
  margin-top: 20px;
}

#calculate {
  display: flex;
  flex-direction: column;
  width: 40%;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  background-color: #5ACC10;
  color: white;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  padding: 5px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

#calculate:hover {
  background-color: #007bff;
}

p {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

@media (max-width: 600px) {
  #calculator {
    width: auto;
    padding: 10px;
  }

  .input-group {
    flex-direction: column;
    align-items: flex-start;
  }

  .input-group label,
  .input-group input,
  .input-group select {
    width: auto;
    margin-bottom: 5px;
  }

  #calculate {
    height: auto;
    padding: 10px;
    font-size: larger;
  }
}

  </style>
</head>
<body>
  <form id="calculator">
    <h3>간편 다이어트 칼로리 계산기</h3>
    <div class="input-group">
      <label for="gender">성별</label>
      <select id="gender" name="gender" style="width: 28%; padding: 0px;" required>
        <option value="">선택하세요</option>
        <option value="남성">남성</option>
        <option value="여성">여성</option>
      </select>
    </div>
    <div class="input-group">
      <label for="age">나이</label>
      <input id="age" name="age" type="number" min="0" max="150" required>
    </div>
    <div class="input-group">
      <label for="height">키 (cm)</label>
      <input id="height" name="height" type="number" min="0" max="300" required>
    </div>
    <div class="input-group">
      <label for="weight">몸무게 (kg)</label>
      <input id="weight" name="weight" type="number" min="0" max="500" required>
    </div>
    <div class="input-group">
      <label for="activity">활동량</label>
      <select id="activity" name="activity" style="width: 28%; padding: 0px;" required>
        <option value="">선택하세요</option>
        <option value="매우 적음">매우 적음</option>
        <option value="적음">적음</option>
        <option value="보통">보통</option>
        <option value="많음">많음</option>
        <option value="매우 많음">매우 많음</option>
      </select>
    </div>
    <div id="result"></div>
    <button id="calculate" type="submit">계산하기</button>
  </form>
  <script>
    const gender = document.getElementById("gender");
    const age = document.getElementById("age");
    const height = document.getElementById("height");
    const weight = document.getElementById("weight");
    const activity = document.getElementById("activity");
    const result = document.getElementById("result");
    const calculate = document.getElementById("calculate");

    function BMR(gender, age, height, weight) {
  if (gender === "남성") {
    return 66 + 13.7 * weight + 5 * height - 6.8 * age;
  } else if (gender === "여성") {
    return 655 + 9.6 * weight + 1.8 * height - 4.7 * age;
  } else {
    return null;
  }
}

function AMR(activity) {
  if (activity === "매우 적음") {
    return 1.2;
  } else if (activity === "적음") {
    return 1.375;
  } else if (activity === "보통") {
    return 1.55;
  } else if (activity === "많음") {
    return 1.725;
  } else if (activity === "매우 많음") {
    return 1.9;
  } else {
    return null;
  }
}

function TDEE(gender, age, height, weight, activity) {
  const bmr = BMR(gender, age, height, weight);
  const amr = AMR(activity);
  if (bmr && amr) {
    return bmr * amr;
  } else {
    return null;
  }
}

calculate.addEventListener("click", function (event) {
  event.preventDefault();

  const genderValue = gender.value;
  const ageValue = Number(age.value);
  const heightValue = Number(height.value);
  const weightValue = Number(weight.value);
  const activityValue = activity.value;

  if (!genderValue || !ageValue || !heightValue || !weightValue || !activityValue) {
    result.textContent = "성별, 나이, 키, 몸무게, 활동량을 입력하세요.";
    return;
  }

  const tdee = TDEE(genderValue, ageValue, heightValue, weightValue, activityValue);
  const bmr = BMR(genderValue, ageValue, heightValue, weightValue);
  result.textContent = `기초 대사량은 ${bmr.toFixed(0)} kcal 입니다.\n하루 필요 칼로리는 ${tdee.toFixed(0)} kcal 입니다.`;

  // 입력값 초기화
gender.value = "";
  age.value = "";
  height.value = "";
  weight.value = "";
  activity.value = "";

});

  </script>
</body>
</html>

코드에 대해서 1도 몰라도 이렇게 브라우저에서 확인할 수 있는 간편 다이어트 계산기 코드를 만들어 볼 수 있습니다.

마무리

성공 다이어트를 위한 첫 걸음은 서두에서도 말했지만 무엇보다도 자신의 몸 상태와 목표를 잘 파악해야 합니다. 하루 칼로리를 섭취하고 소비하는지 알아야 자신에게 맞는 식단과 운동을 계획할 수 있습니다. 오늘 만든 다이어트 칼로리 계산기가 여러분의 성공 다이어트 시작에 보템이 되기를 바랍니다. 감사합니다.