프로그래밍을 잘 몰라도 HTML 하나로 실생활에 바로 쓰는 계산기 앱을 만들 수 있습니다. 오늘 만들 것은 하루 사료량을 10초 만에 계산해 주는 고양이 사료량 계산기입니다. 완성된 계산기는 이 글에서 바로 사용해 볼 수 있으니 끝까지 따라와 보세요. 천천히 따라와 주세요.
계산기 앱의 정체 — HTML, CSS, JavaScript
계산기 앱이라고 해서 어려울 것은 없습니다. 웹에서 돌아가는 계산기는 딱 3가지로 이루어져 있습니다.
- HTML — 입력칸과 버튼 같은 뼈대
- CSS — 색깔, 둥근 모서리 등 예쁘게 꾸미기
- JavaScript — 숫자를 넣고 계산하는 두뇌
우리가 보는 웹사이트는 모두 이 3가지로 만들어집니다. 오늘 만들 것은 이 3가지가 한 파일 안에 들어 있는 한 페이지짜리 앱입니다. HTML 파일 하나면 끝이라, 별도 설치나 회원가입이 필요 없습니다.
계산 공식 먼저 정리하기
코드를 짜기 전에, 무슨 계산을 할지 먼저 정리하는 것이 중요합니다. 고양이 사료량은 수의사들이 쓰는 표준 공식(RER)을 따릅니다.
- 하루 필요 칼로리(RER) = 70 × 체중(kg)의 0.75제곱
- 활동량 보정: 적음 × 0.9 / 보통 × 1.2 / 많음 × 1.5
- 하루 필요 칼로리(MER) = RER × 활동량 계수
- 사료로 줘야 할 칼로리 = MER – 간식 칼로리
- 하루 사료량(g) = (MER – 간식 칼로리) ÷ (사료 100g당 kcal ÷ 100)
예를 들어 4kg 냥이, 활동량 보통, 사료 100g당 380kcal, 간식 10kcal라면? RER은 70 × 4의 0.75제곱 = 약 197.9kcal, MER은 197.9 × 1.2 = 약 237.5kcal, 사료로 줄 칼로리는 237.5 – 10 = 227.5kcal, 하루 사료량은 227.5 ÷ 3.8 = 약 59.9g이 됩니다. 이 계산을 자동으로 해 주는 것이 우리가 만들 앱입니다. 계산 공식을 다루는 다른 글이 궁금하시다면 엑셀 함수 정리 7가지 글도 참고해 보세요.
HTML로 입력칸 만들기
먼저 뼈대부터 만들겠습니다. 체중, 활동량, 사료 칼로리, 간식 칼로리를 입력받는 화면입니다.
[[CODE1]]
간단하죠? input은 입력칸, select는 선택칸, button은 버튼입니다. id는 JavaScript에서 이 칸을 부를 때 쓰는 이름표입니다.
JavaScript로 계산 두뇌 넣기
이제 입력된 숫자로 계산하는 부분입니다.
[[CODE2]]
핵심은 딱 3줄입니다. Math.pow(w, 0.75)는 체중의 0.75제곱을, rer * act는 활동량 곱하기를, (mer - snack) / (kcal100 / 100)는 사료량 계산을 담당합니다. 이 정도면 충분히 내가 앱을 만들었다고 말할 수 있는 수준입니다.
완성! 직접 사용해 보세요
여기에 CSS로 꾸미기만 더하면 아래처럼 완성됩니다. 직접 값을 넣어 보세요.
[[CALCULATOR]]
4kg 냥이, 활동량 보통 기준으로 계산하면 하루 필요 칼로리 238kcal, 하루 사료량 60g이 나옵니다. 체중을 5kg으로 바꾸고 활동량을 많음으로 선택하면 결과가 어떻게 달라지는지도 바로 확인됩니다.
응용 아이디어 — 이 패턴이면 뭐든 됩니다
오늘 만든 구조(입력칸 + 버튼 + 계산 + 결과 표시)는 모든 계산기에 똑같이 적용됩니다. 공식만 바꾸면 끝입니다.
- 4대보험 계산기: 월급 입력 → 국민연금·건강보험·고용보험 계산
- 식단 칼로리 계산기: 음식별 칼로리 합산
- D-day 계산기: 날짜 차이 계산
- 할인율 계산기: 정가·할인율 → 최종가 계산
HTML과 CSS, JavaScript의 기초 문법은 W3Schools HTML 튜토리얼과 MDN 웹 문서에서 무료로 배울 수 있습니다. 코딩 없이 생활 속 반복 작업을 자동화하는 데 관심이 있다면 ChatGPT로 PDF 읽고 요약하는 방법 글도 추천합니다.
실전 적용 팁 — 오늘 바로 써먹는 법
이 계산기를 바로 활용하려면 두 가지만 기억하면 됩니다. 첫째, 사료 봉투 뒷면에 적힌 100g당 칼로리(kcal)를 꼭 확인하세요. 같은 브랜드라도 제품마다 칼로리가 달라서, 이 값을 잘못 넣으면 계산 결과가 크게 달라집니다. 둘째, 간식 칼로리를 빼먹지 마세요. 하루 간식이 20kcal만 넘어도 사료량이 눈에 띄게 줄어야 하는데, 이걸 반영하지 않으면 살이 찌는 원인이 됩니다.
또한 한 달에 한 번 체중을 기록해서 계산기에 다시 넣어 보세요. 중성화 수술 후에는 활동량이 줄어 보통 기준에서 적음 기준으로 바뀌는 경우가 많습니다. 같은 사료를 줘도 체중과 활동량이 변하면 급여량은 달라져야 합니다. 이 계산기를 주기적으로 돌려 보는 것만으로도 냥이 체중 관리에 큰 도움이 됩니다.
자주 묻는 질문 (FAQ)
Q1. 이 계산기로 나온 사료량이 정확한가요?
RER 공식은 수의학에서 널리 쓰는 기준값이라 출발점으로 좋습니다. 다만 개체별 차이(나이, 질병, 임신 등)가 있을 수 있어, 정확한 급여량은 담당 수의사와 상담하는 것이 가장 안전합니다.
Q2. HTML을 전혀 몰라도 따라 할 수 있나요?
네, 가능합니다. 이 글의 코드를 그대로 복사해서 붙여 넣기만 하면 됩니다. 각 줄이 무슨 뜻인지는 글에서 설명했으니, 복사해서 쓰다 보면 자연스럽게 익숙해집니다.
Q3. 만든 계산기를 블로그나 홈페이지에 올리려면 어떻게 하나요?
워드프레스라면 글 편집기에서 HTML 블록을 추가한 뒤 코드 전체를 붙여 넣으면 됩니다. 티스토리나 네이버 블로그도 HTML 모드에서 같은 방법으로 삽입할 수 있습니다. 파일로 저장해서 친구에게 공유해도 그 자리에서 바로 실행됩니다.
Q4. 고양이 종류에 따라 공식이 다른가요?
RER 공식은 모든 고양이에 공통으로 적용됩니다. 다만 새끼 고양이는 성장기라 2~3배의 칼로리가 필요하고, 노령묘는 활동량 계수를 낮게 잡는 것이 일반적입니다. 이 계산기는 성묘 기준으로 만든 점 참고해 주세요.
HTML 하나로 만드는 간단한 계산기 앱, 생각보다 어렵지 않죠? 오늘 만든 고양이 사료량 계산기는 이 글 맨 위에서 바로 사용해 보실 수 있습니다. 우리 냥이 체중과 사료 칼로리만 넣으면 하루 급여량이 바로 나옵니다. 궁금한 점이나 만들고 싶은 계산기가 있다면 댓글로 남겨 주세요.
#HTML #계산기 #자바스크립트 #고양이사료 #생활코딩