간단한 예산 계산기 (Budget Calculator) 웹 서비스 만들기

1. 사전 작업: ChatGPT에게 지출 항목 물어보기

오늘은 ChatGPT와 간단한 예산 계산기 웹 서비스 만들기를 해보려고 합니다. 먼저 예산 계산기에 필요한 입력 값중 지출 항목 들을 물어보기 위해 아래와 같은 프롬프트를 요청합니다.

ChatGPT프롬프트

suggest expense category list family budget as example order by big amount (답변은 한글로)

아래와 같이 지출 분류를 잘 알려줍니다. ChatGPT프롬프트 응답값 - 지출 분류 항목

그럼 이번에는 지출 분류 항목들을 입력 값으로 받는 예산 계산기를 만들어봅니다.

2. 지출 항목을 입력으로 받는 예산 계산기 만들기를 위한 프롬프트 요청

오늘 부터는 코드 및 가이드 작성은 ChatGPT대신 동일한 GPT4를 사용하는 Playground 를 통해 진행 합니다. 이유는 system 과 assistant 를 쉽게 지정 할수 있고 길이도 더 길게 설정 할수 있기 때문입니다. gpt4 버전의 OpenAI Playgound에서 아래와 같이 프롬프트를 요청합니다.

Playgound에서는 OpenAI API 와 동일하게 User외에도 System과 Assistant 프롬프트를 지원합니다. System 프롬프트는 상황을 설정해주고 Assistant 프롬프트는 원하는 프롬프트에 필요한 정보를 제공 해주고 학습시키는 보조자 역할을 합니다.

System 프롬프트

System

act as a experienced frontend developer

Assistant 프롬프트

Assistant
지출 카테고리 목록
- 주거비 (전세, 월세, 관리비 등)
- 식비 (식료품, 외식비, 간식 등)
- 교통비 (자동차유지비, 주유비, 교통카드 등)
- 통신비 (인터넷, 휴대폰 요금 등)
- 생활용품 (세제, 화장지, 칫솔 등)
- 의료비 (약값, 병원비, 보험료 등)
- 교육비 (학원비, 교재비, 학비 등)
- 문화생활 (영화, 책, 공연 등)
- 기타 (패션, 뷰티, 취미 등)

User 프롬프트

User
I’m trying to build a simple budget calculator web service, give me step by step instruction with code example with the following requirements. 
- using html, css, basic javascript
- design & css: modern style design, responsive
- using codepen
- running on Netlify
- Features: input categorized expenses (label and input field, explanation on placeholder) with categories above, show total expenses, display formatted amount
- 답변은 한글로

프롬프트를 요청 하면 아래와 같이 코드 작성 하는 방법을 알려줍니다. ChatGPT프롬프트 응답값 - 예산 계산기 코드 작성 하기

3. 예산 계산기 코드 작성 하기

3.1. HTML 구조 작성

먼저, HTML 구조를 작성합니다. 다음 코드를 사용하여 기본적인 HTML 구조를 만듭니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>간단한 예산 계산기</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>간단한 예산 계산기</h1>
    <form id="expense-form">
      <!-- 지출 카테고리 입력 필드 추가 -->
    </form>
    <div class="total">
      <h2>총 지출</h2>
      <span id="total-expenses">0</span> 원
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

3.2. CSS 스타일 작성

styles.css 파일을 생성하고 아래의 코드를 추가해서 웹페이지 디자인을 완성합니다.

body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  font-weight: bold;
  margin: 1rem 0 0.5rem;
}

input {
  padding: 0.5rem;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}

.total {
  margin-top: 2rem;
  font-weight: bold;
  font-size: 1.5rem;
}

3.3. 지출 카테고리 입력 필드 추가

HTML 파일의 <form> 태그 안에 지출 카테고리에 해당하는 label과 input 필드를 추가합니다.

<label for="주거비">주거비</label>
<input type="number" id="주거비" placeholder="주거비를 입력해주세요. (전세, 월세, 관리비 등)">

<!-- 나머지 카테고리도 동일한 형식으로 추가 -->

3.4. JavaScript 코드 작성

script.js 파일을 생성하고 아래의 코드를 추가하여 지출 항목의 합계를 계산하고 출력하는 기능을 구현합니다.

const form = document.getElementById('expense-form');
const totalExpenses = document.getElementById('total-expenses');

form.addEventListener('input', () => {
  let sum = 0;
  
  for (const input of form.elements) {
    if (input.type === 'number') {
      sum += parseInt(input.value) || 0;
    }
  }

  totalExpenses.textContent = sum.toLocaleString();
});

4. 코드 개선하기

위의 코드로도 동작을 하지만 아직 부족한 부분이 있어 아래와 같이 코드를 개선해보겠습니다.

먼저 '나머지 카테고리도 동일한 형식으로 추가'로 되어 있는 부분의 코드를 채워 달라고 해보았습니다.

User

fill out <!-- 나머지 카테고리도 동일한 형식으로 추가 --> in script.js

프롬프트를 요청 하면 아래와 같이 코드를 작성 해줍니다. ChatGPT프롬프트 응답값 - 나머지 카테고리도 동일한 형식으로 추가

보이는 코드 처럼 중복이 되는 부분이 많아 중복을 개선해달라고 요청

User

many duplicate codes like many label and input, can you improve this?

그럼 아래와 같이 깔큼하게 코드를 개선하는 방법을 알려줍니다.

ChatGPT프롬프트 응답값 - 중복 코드 개선

네, 중복되는 코드를 줄이기 위해 JavaScript를 사용하여 지출 카테고리 입력 필드를 동적으로 생성할 수 있습니다. index.html 파일의 <form> 태그 안의 내용을 삭제하고, script.js 파일에 아래 코드를 추가하세요.

script.js:

const expenseCategories = [
  { id: "주거비", placeholder: "주거비를 입력해주세요. (전세, 월세, 관리비 등)" },
  { id: "식비", placeholder: "식비를 입력해주세요. (식료품, 외식비, 간식 등)" },
  { id: "교통비", placeholder: "교통비를 입력해주세요. (자동차유지비, 주유비, 교통카드 등)" },
  { id: "통신비", placeholder: "통신비를 입력해주세요. (인터넷, 휴대폰 요금 등)" },
  { id: "생활용품", placeholder: "생활용품비를 입력해주세요. (세제, 화장지, 칫솔 등)" },
  { id: "의료비", placeholder: "의료비를 입력해주세요. (약값, 병원비, 보험료 등)" },
  { id: "교육비", placeholder: "교육비를 입력해주세요. (학원비, 교재비, 학비 등)" },
  { id: "문화생활", placeholder: "문화생활비를 입력해주세요. (영화, 책, 공연 등)" },
  { id: "기타", placeholder: "기타비를 입력해주세요. (패션, 뷰티, 취미 등)" },
];

const form = document.getElementById("expense-form");

expenseCategories.forEach((category) => {
  const label = document.createElement("label");
  label.setAttribute("for", category.id);
  label.textContent = category.id;
  form.appendChild(label);

  const input = document.createElement("input");
  input.setAttribute("type", "number");
  input.setAttribute("id", category.id);
  input.setAttribute("placeholder", category.placeholder);
  form.appendChild(input);
});

const totalExpenses = document.getElementById("total-expenses");

form.addEventListener("input", () => {
  let sum = 0;

  for (const input of form.elements) {
    if (input.type === "number") {
      sum += parseInt(input.value) || 0;
    }
  }

  totalExpenses.textContent = sum.toLocaleString();
});

이렇게 수정하면, 중복되는 코드를 줄이고 더 깔끔한 코드를 얻을 수 있습니다.

5. 코드 Codepen에 업로드 및 Netlify를 이용한 배포

완성된 코드를 Codepen에 작성하고 Netlify를 이용하여 배포해보겠습니다. HTML, CSS 및 JavaScript 섹션을 작성 하셨다면 CodePen 저장 및 내보내기와 Netlify에 배포를 참고 하셔서 배포 하실수 있습니다.

위의 순서로 따라서 만들어보니 정말 간단하게 아래와 같은 TodoApp 페이지가 만들어졌습니다. ChatGPT와 함께 만든 간단한 예산계산기

7. 마치며

지금까지 간단한 예산 계산기 웹사이트를 만들어보면서 출시 까지 해보았는데 도움이 되셨나요? 간단한 TodoApp 보다는 조금더 기능이 있는 간편 예산 계산기를 만들어본 경험을 통해 코딩에 더 흥미를 가지는 계기가 되었으면 좋겠습니다.

참고로 완성된 소스 코드는 GitHub 링크에서 확인 하실수 있습니다.

https://github.com/DeveloperFastlane/study-examples/tree/main/basic/budget-calculator

1. 사전 작업: ChatGPT에게 지출 항목 물어보기​

2. 지출 항목을 입력으로 받는 예산 계산기 만들기를 위한 프롬프트 요청​

3. 예산 계산기 코드 작성 하기​

3.1. HTML 구조 작성​

3.2. CSS 스타일 작성​

3.3. 지출 카테고리 입력 필드 추가​

3.4. JavaScript 코드 작성​

4. 코드 개선하기​

5. 코드 Codepen에 업로드 및 Netlify를 이용한 배포​

7. 마치며​