AI와 함께 만드는 캠핑 비용 정산 계산기

프로젝트 개요

여름 캠핑을 가는데 여러 가정이 함께 가면서 누가 얼마를 내야 하는가를 계산해야 하는 상황이 생겼습니다. 복잡한 엑셀보다는 웹에서 간편하게 사용할 수 있는 도구를 만들기로 결정했어요.

최종 결과물: https://brownkim2324.github.io/camping-calculator/

📋 프로젝트 진행 과정

1단계: 문제 정의 및 요구사항 정리

먼저 어떤 방식으로 비용을 분담할지 정했습니다:

• 분담 기준: 어른 1인 = 1점, 아이 1인 = 0.5점

• 계산식: 각 가정의 점수 = (어른 수 + 아이 수×0.5) × 체류일수

• 결과: 총 비용을 각 가정의 점수 비율에 따라 분배

2단계: 기술 선택 (HTML/CSS/JavaScript)

왜 이 기술을 선택했을까?

• 📱 어디서든 웹 브라우저로 접속 가능

• 📦 별도 설치 프로그램 필요 없음

• 🎨 UI 디자인을 예쁘게 꾸밀 수 있음

• 🚀 배포가 간단함 (GitHub Pages 활용)

3단계: 디자인 (앤틱 테마)

사용자가 원한 "엔틱한 분위기"를 구현하기 위해:

배경색: 크림색 → 갈색 그라데이션 (#f5e7d0 → #b59d76)
폰트: 세리프체 (Nanum Myeongjo, Georgia)
강조색: 갈색 계열

→ 마치 오래된 가계부를 보는 느낌으로!

4단계: 기능 구현

핵심 기능들:

// 1. 가정 추가 버튼
→ "가정 추가" 클릭하면 새 행 생성

// 2. 실시간 입력
→ 각 가정의 이름, 어른 수, 아이 수, 날짜, 사용액 입력

// 3. 자동 계산
→ "계산 및 결과 보기" 클릭하면:
   - 각 가정이 내야 할 금액 계산
   - 실제 낸 금액과 비교
   - 과다/부족분 표시 (초록색/빨간색)

5단계: 모바일 최적화

처음엔 데스크톱에서만 잘 보이는 웹사이트였습니다. 하지만 사용자들은 스마트폰에서 자주 접속할 것 같았어요.

추가한 모바일 최적화:

/* 모바일 화면 (768px 이하) 감지 */
@media screen and (max-width: 768px) {
  /* 테이블을 카드 형식으로 변환 */
  tbody {
    display: grid;
    gap: 12px;
  }
  
  tr {
    grid-template-columns: 1fr;  /* 세로 스택으로 정렬 */
  }
  
  /* 각 셀에 라벨 표시 */
  td::before {
    content: attr(data-label);
    font-weight: bold;
  }
}

모바일에서의 변화:

• 💻 데스크톱: 가로 테이블 그대로 표시

• 📱 모바일: 한 행이 한 장의 카드처럼 보임

예를 들어, 입력 화면이:

[데스크톱] 대표자이름 | 어른 | 아이 | 체류일수 | 사용액 | 삭제
         홍길동대표  |  2   |  1   |    2     | 120000 | ✕

[모바일]  대표자이름: 홍길동 대표
         어른: 2
         아이: 1
         체류일수: 2
         사용액(원): 120000
         액션: [삭제]

이렇게 변환됩니다!

6단계: GitHub에 배포

1️⃣ 로컬에서 Git 저장소 초기화
   git init

2️⃣ 코드를 GitHub에 업로드
   git add .
   git commit -m "첫 배포"
   git push origin main

3️⃣ GitHub Pages 활성화
   → Settings → Pages → main 브랜치 선택
   → 자동으로 웹 사이트 생성!

🎯 실제 사용 예시

데이터 입력:

계산 결과:

• 홍길동: 분담 비율 5점 (2 + 1×0.5) × 2박 = 5점 → 분담액: 105,000원 (초과: 15,000원 ✅)

• 김영희: 분담 비율 4점 (2 + 2×0.5) × 1박 = 4점 → 분담액: 84,000원 (부족: 6,000원 ❌)

💡 바이브코딩 배운 점

✨ 좋았던 점들:

1. 조금 수정 → 즉시 배포 💨

   • 로컬에서 파일 수정 → git 명령어 → GitHub Pages 자동 반영

   • 다시 빌드하거나 서버 재시작할 필요 없음

2. 버전 관리의 편리함 📜

   • 변경 내역이 모두 기록됨

   • 나중에 특정 버전으로 돌아갈 수 있음

   • 누가 언제 뭘 수정했는지 알 수 있음

3. 웹 기술의 강력함 🌐

   • HTML/CSS/JavaScript 세 개 파일만으로 완전한 애플리케이션 완성

   • 복잡한 백엔드 없이도 실용적인 기능 구현 가능

🔧 기술적 팁:

# GitHub Pages 캐시 문제 해결
URL에 ?v=1, ?v=2 식으로 파라미터 추가
→ 브라우저가 새 버전을 로드하도록 강제

# 예: https://brownkim2324.github.io/camping-calculator/?v=2

📱 반응형 디자인 (Responsive Design)

모바일 최적화는 단순한 "작게 축소"가 아니라 화면 크기에 맞게 UI를 재구성하는 것입니다:

// CSS @media 쿼리로 화면 크기별 스타일 정의
@media screen and (max-width: 768px) {
  // 모바일 화면에서만 이 스타일 적용
}

@media screen and (min-width: 769px) {
  // 태블릿 이상에서만 이 스타일 적용
}

배운 것:

• 모든 웹사이트는 모바일 우선으로 생각해야 함

• CSS의 display: grid, flex는 반응형 디자인의 핵심

• data-* 속성으로 HTML에 메타데이터 저장 가능

🚀 더 배울 수 있는 부분들

이 프로젝트에서 배운 것들을 확장하면:

📌 핵심 정리

💬 초보자에게 꼭 해주고 싶은 말

"처음엔 복잡해 보이지만, 사실 매우 간단합니다!"

• HTML: 뼈대 (무엇을 표시할 것인가)

• CSS: 피부 (어떻게 예쁘게 꾸밀 것인가)

• JavaScript: 근육 (실제로 어떻게 동작하게 할 것인가)

이 세 가지가 하는 일을 이해하면, 여러분도 충분히 만들 수 있습니다! 🎉

📚 초보자도 따라할 수 있는 핵심 개념

1️⃣ 단순함의 힘

• 복잡한 프레임워크 없어도 완전한 애플리케이션 완성 가능

• HTML/CSS/JavaScript 세 개 파일만으로 수백 줄의 코드 작성 가능

2️⃣ 점진적 확장

Step 1: Python CLI 만들기
  ↓
Step 2: HTML 인터페이스 만들기
  ↓
Step 3: 디자인 꾸미기 (CSS)
  ↓
Step 4: 기능 추가 (JavaScript)
  ↓
Step 5: 모바일 대응 (반응형 CSS)
  ↓
Step 6: 배포 (GitHub Pages)

3️⃣ 버전 관리의 중요성

• 변경 이력 추적: 누가 언제 뭘 했는지 알 수 있음

• 협업 용이: 여러 사람이 함께 작업 가능

• 문제 해결: 버그 발생 시 이전 버전으로 돌아갈 수 있음

4️⃣ 반응형 디자인

• 한 번의 코드로 모든 기기 지원

• CSS의 @media 쿼리로 간단히 구현

• 현대 웹의 필수 요소!