💰 개인 가계부 관리 시스템

📋 프로젝트 소개

개인의 수입과 지출을 체계적으로 관리할 수 있는 웹 기반 가계부 애플리케이션 HTML, CSS, JavaScript만을 사용하여 개발된 클라이언트 사이드 애플리케이션으로, 별도의 서버나 데이터베이스 없이 브라우저의 로컬 스토리지를 활용하여 데이터를 저장

개발 목적:

• 개인 재정 관리의 디지털화 및 효율성 향상
• 실시간 재정 현황 파악 및 지출 패턴 분석
• 직관적이고 사용자 친화적인 인터페이스 제공
• 다양한 디바이스에서 접근 가능한 반응형 웹 애플리케이션

⚙️ 주요 기능

1. 거래 입력 및 관리

• 수입/지출 분류: 거래 유형별 명확한 구분
• 카테고리 관리:
  • 수입: 급여, 부업, 거래, 기타수입
  • 지출: 식비, 교통비, 주거비, 의료비, 쇼핑, 교육, 기타지출
• 상세 정보 입력: 금액, 날짜, 설명 등 세부 정보 기록
• 실시간 데이터 저장: 브라우저 로컬 스토리지 활용

2. 거래 내역 조회 및 필터링

• 전체 거래 목록: 날짜순 정렬된 거래 내역 표시
• 월별 필터링: 특정 월의 거래 내역만 선별 조회
• 요약 정보: 총 수입, 총 지출, 잔액 실시간 계산
• 거래 삭제: 개별 거래 데이터 삭제 기능

3. 통계 및 시각화

• 카테고리별 지출 분석: 각 카테고리별 지출 금액과 비율
• 시각적 표현: 막대 그래프를 통한 직관적 데이터 표시
• 비율 계산: 전체 지출 대비 각 카테고리의 비중 분석

4. 사용자 인터페이스

• 탭 기반 네비게이션: 입력, 내역, 통계 페이지 간 쉬운 이동
• 라이트/다크 모드: 사용자 선호에 따른 테마 변경
• 반응형 디자인: 데스크톱, 태블릿, 모바일 지원
• 현대적 UI/UX: 그라데이션, 애니메이션 효과

📦 모듈 설치 방법

순수 HTML, CSS, JavaScript로 개발되어 별도의 패키지 설치가 필요하지 않음

외부 라이브러리

• Chart.js: CDN을 통해 자동 로드

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

필요한 환경

• 모던 웹 브라우저 (Chrome, Firefox, Safari, Edge)
• 로컬 스토리지 지원 브라우저
• JavaScript 활성화 필요

🚀 파일 실행 방법 (VS Code)

1. 프로젝트 다운로드

# 저장소 클론 (GitHub 저장소가 있는 경우)
git clone [저장소 URL]

# 또는 파일 직접 다운로드
# index.html 파일을 로컬에 저장

2. VS Code에서 실행

# VS Code로 폴더 열기
code [프로젝트 폴더명]

# 또는 VS Code에서 File > Open Folder 선택

3. Live Server 확장프로그램 사용 (권장)

1. VS Code Extensions에서 "Live Server" 설치
2. index.html 파일 우클릭
3. "Open with Live Server" 선택
4. 자동으로 브라우저에서 실행

4. 직접 브라우저 실행

# 파일 탐색기에서 index.html 더블클릭
# 또는 브라우저 주소창에 파일 경로 입력
file:///[파일경로]/index.html

💡 사용 예시

1. 수입 입력 예시

1. "📝 수입/지출 입력" 탭 선택
2. 거래 유형: "수입" 선택
3. 금액: 3,000,000 입력
4. 카테고리: "급여" 선택
5. 날짜: 2025-06-01 입력
6. 설명: "6월 월급" 입력
7. "거래 추가" 버튼 클릭

2. 지출 입력 예시

1. 거래 유형: "지출" 선택
2. 금액: 45,000 입력
3. 카테고리: "식비" 선택
4. 날짜: 2025-06-13 입력
5. 설명: "점심 식사" 입력
6. "거래 추가" 버튼 클릭

3. 내역 조회 예시

1. "📋 거래 내역" 탭 선택
2. 월별 필터에서 "2025년 6월" 선택
3. 해당 월의 모든 거래 내역 확인
4. 총 수입, 총 지출, 잔액 요약 정보 확인

4. 통계 확인 예시

1. "📊 통계" 탭 선택
2. 카테고리별 지출 분석 테이블 확인
3. 각 카테고리의 금액과 비율 파악
4. 시각적 막대 그래프로 지출 패턴 분석

📊 입출력 예시

입력 데이터 형태

// 수입 입력 예시
{
  type: "income",
  amount: 3000000,
  category: "급여",
  date: "2025-06-01",
  description: "6월 월급"
}

// 지출 입력 예시
{
  type: "expense",
  amount: 45000,
  category: "식비",
  date: "2025-06-13",
  description: "점심 식사"
}

저장된 데이터 구조

// LocalStorage에 저장되는 형태
[
  {
    id: 1718234567890,
    type: "income",
    amount: 3000000,
    category: "급여",
    date: "2025-06-01",
    description: "6월 월급"
  },
  {
    id: 1718234567891,
    type: "expense",
    amount: 45000,
    category: "식비",
    date: "2025-06-13",
    description: "점심 식사"
  }
]

출력 예시

요약 정보 출력

총 수입: ₩3,000,000
총 지출: ₩345,000
잔액: ₩2,655,000

통계 테이블 출력

카테고리    금액        비율    시각화
식비       ₩150,000    43.5%   ████████████████████
교통비     ₩80,000     23.2%   ███████████
쇼핑       ₩70,000     20.3%   ██████████
기타지출   ₩45,000     13.0%   ██████

총 지출: ₩345,000

거래 내역 테이블 출력

날짜        유형  카테고리  금액        설명      삭제
2025.06.13  지출  식비     ₩45,000    점심 식사  [삭제]
2025.06.01  수입  급여     ₩3,000,000  6월 월급   [삭제]

📝 참고 사항

데이터 저장 및 관리

• 로컬 스토리지 사용: 데이터는 브라우저의 로컬 스토리지에 저장
• 데이터 백업: 브라우저 데이터 삭제 시 모든 거래 내역이 사라질 수 있음
• 용량 제한: 로컬 스토리지는 일반적으로 5-10MB 제한

브라우저 호환성

• 모던 브라우저: Chrome 50+, Firefox 45+, Safari 10+, Edge 14+
• JavaScript 필수: JavaScript가 비활성화된 환경에서는 동작하지 않음
• 로컬 스토리지: 로컬 스토리지를 지원하지 않는 브라우저에서는 데이터 저장이 불가능

보안 고려사항

• 클라이언트 사이드: 모든 데이터는 사용자 기기에만 저장
• 개인정보: 서버로 전송되는 개인정보 없음
• 백업 권장: 중요한 데이터의 경우 별도 백업을 권장

성능 최적화

• 반응형 디자인: 다양한 화면 크기에 최적화
• 가벼운 구조: 외부 의존성이 최소화되어 빠른 로딩 가능
• 메모리 효율성: 로컬 스토리지 사용으로 적은 메모리 사용

향후 개선 가능 사항

• 데이터 내보내기: CSV, Excel 형태로 데이터 내보내기 기능
• 차트 다양화: 원형 차트, 라인 차트 등 다양한 시각화 옵션
• 예산 관리: 월별 예산 설정 및 초과 알림 기능
• 카테고리 커스터마이징: 사용자 정의 카테고리 추가 기능

문제 해결

• 데이터가 사라진 경우: 브라우저 설정에서 로컬 스토리지 확인
• 느린 반응: 브라우저 캐시 삭제 후 재시작
• 레이아웃 깨짐: 브라우저 줌 레벨을 100%로 설정

---

프로젝트 특징:

• 🚀 빠른 실행: 별도 설치 없이 즉시 사용 가능
• 💾 안전한 저장: 로컬 스토리지로 개인정보 보호
• 📱 어디서나 접근: 반응형 디자인으로 모든 기기 지원
• 🎨 사용자 친화적: 직관적인 인터페이스와 다크/라이트 모드