통계청 2022년 생명표를 기반으로 예상수명을 계산하고, 현재 생활패턴대로 살았을 때 각 활동에 얼마나 시간을 쓰게 되는지 보여줍니다.
4단계 흐름
1단계: 건강 설문
성별, 나이, 키/체중, 흡연, 운동, 음주, 수면, 스트레스, 사회관계, 만성질환
입력하는 즉시 예상수명이 실시간으로 변합니다
"담배를 피우면 10년이 줄어든다"가 숫자로 보입니다
2단계: 시간 패턴
하루 수면, 주간 근무, 통근, 가사, 돌봄, 가족, 연인, 친구, 운동, 취미, 자기계발, 휴식, 스마트폰 사용 시간을 입력합니다
13개 카테고리로 일주일의 시간을 나눕니다
3단계: 결과
"가족과 남은 시간: 5년", "스마트폰에 쓸 시간: 7년"
남은 벚꽃, 생일, 크리스마스 횟수
파이차트로 전체 시간 구성 확인
4단계: 리디자인
"만약 스마트폰을 1시간 줄이고 운동을 1시간 늘리면?"
Before/After를 실시간으로 비교합니다
대시보드
앱의 메인 화면에는 빨간 아날로그 시계가 있습니다.
실시간 시계 + 남은 수명 비율이 빨간 아크로 표시
선택한 항목(가족, 연인, 운동 등)이 미니 시계로 "삶의 몇 %"인지 보여줍니다
뽀모도로 타이머 내장 (집중 시간 자유 설정, 아날로그 시계 모드 지원)
이 앱은 어떻게 만들었는가? — 바이브 코딩 이야기
바이브 코딩(Vibe Coding)이란?
2025년부터 확산된 새로운 개발 방식입니다. AI에게 자연어로 원하는 것을 설명하면, AI가 코드를 작성합니다.
이 앱은 Claude Code(Anthropic의 AI 코딩 도구)와 대화하면서 만들었습니다. 전통적인 코딩과 비교하면:
전통적 코딩
바이브 코딩
시작
문법 공부부터
"이런 앱 만들어줘"부터
도구
VS Code + 키보드
AI + 대화
디버깅
에러 메시지 읽고 구글링
"이거 왜 안 돼?" 질문
설계
아키텍처 먼저
만들면서 구조 잡기
속도
기능당 수시간~수일
기능당 수분~수십분
실제 대화 흐름
이 앱은 이런 대화로 만들어졌습니다:
나: "남은 시간 알리미 앱 만들어줘. 뽀모도로처럼 빨간 아날로그 시계로"
AI: (아날로그 시계 컴포넌트 + 뽀모도로 타이머 + PWA 설정 생성)
나: "왜 꼭 25분만 집중해? 시간 자유 설정되게 해줘"
AI: (커스텀 시간 설정 기능 추가)
나: "연인과의 시간, 사랑할 시간도 필요해"
AI: (연인·사랑 카테고리 추가 — 색상, 계산 로직, UI 전부)
나: "UI/UX 전문가 의견 줘"
AI: (접근성, 터치 영역, 반응형 등 30개 이상 개선점 도출 및 수정)
나: "배포해줘"
AI: (Vercel 배포 + OG 태그 + PWA 설정 완료)
기술 스택
AI가 선택하고 구성한 기술들입니다:
React 19 — 사용자 인터페이스
Vite 8 — 빌드 도구 (빠른 개발 서버)
Tailwind CSS 4 — 스타일링 (유틸리티 클래스)
Recharts — 파이차트 시각화
PWA (Progressive Web App) — 바탕화면 설치, 오프라인 지원
Vercel — 배포 (무료)
localStorage — 사용자 데이터 저장 (서버 없이)
코드 구조
757줄짜리 단일 파일로 시작해서, AI와 대화하며 17개 파일로 분리했습니다:
src/
├── constants.js # 색상, 설정, 생명표, 명언
├── utils.js # 계산 로직
├── hooks/ # 커스텀 훅
│ ├── usePersist.js # 자동 저장
│ └── usePomodoro.js # 뽀모도로 타이머
├── components/ # 재사용 UI 부품 (9개)
│ ├── AnalogClock.jsx # 메인 아날로그 시계
│ ├── MiniClock.jsx # 미니 요약 시계
│ ├── PomoClock.jsx # 뽀모도로 시계
│ └── ...
├── steps/ # 화면별 컴포넌트 (5개)
│ ├── Dashboard.jsx # 메인 대시보드
│ ├── HealthSurvey.jsx # 건강 설문
│ └── ...
└── App.jsx # 60줄 오케스트레이터
마치며
Life Budget은 단순한 시간 계산기가 아닙니다.
"남은 벚꽃 46번"이라는 숫자를 보면, 올봄 벚꽃을 다르게 보게 됩니다. "가족과 남은 시간 5년"이라는 숫자를 보면, 오늘 저녁 식탁이 다르게 느껴집니다. "연인과 보낼 시간"을 시계로 보면, 지금 이 순간이 다르게 다가옵니다.
