연봉닥터
연봉은 올랐는데, 왜 더 빠듯할까요?
서울대학교 빅데이터 핀테크 전문가과정 13기 · 웹 개발 및 시각화 팀 프로젝트
명목 연봉이 올라도 물가가 더 오르면 실질 소득은 줄어듭니다. 이 웹앱은 내 연봉의 진짜 가치를 진단하고, 실제 10년 시장 데이터로 부족분을 메울 자산배분을 설계합니다.
라이브 → https://fintech-team-final.vercel.app/
1. 무엇을 푸는 프로젝트인가
"내 연봉 인상률은 물가상승률을 이기고 있을까? 부족하다면 무엇으로 채워야 할까?"
체감은 되는데 숫자로는 잘 안 보이는 문제입니다. 뉴스는 물가상승률을 알려주고 회사는 인상률을 알려주지만, 그 둘을 내 연봉에 붙여서 얼마가 부족한지 계산해 주는 곳은 없습니다. 그 계산을 하고, 부족분을 메울 현실적인 선택지를 실제 수익률 데이터로 보여줍니다.
2. 요구사항 매핑
팀 요구사항 정의서의 3가지를 탭으로 나눠 담고, 여기에 우리 팀의 차별화 기능인 "내 물가" 를 앞에 붙였습니다.
탭 0 — 내 물가 (차별화 기능)
뉴스의 "물가 2.8%"는 전국 평균 지출 비중으로 가중한 값입니다. 같은 달에도 교통 +7.7%, 주류·담배 +0.2%로 7.5%p 벌어져 있어서, 사람마다 체감이 다를 수밖에 없습니다.
| 기능 | 구현 위치 |
|---|
| 1·2·4인 가구 통계 기반 생활 유형 시작값 | assets/js/personas.js, #personaSeg |
| 월 생활비 숫자 하나로 전체 지출액 조정 | #monthlySpend |
| 필요할 때만 품목별 실제 지출액 수정 (COICOP 12분류) | #spendFields |
| 개인 물가 = Σ(내 지출 비중 × 품목별 물가) | engine.js personalInflation() |
| 공식 물가 vs 내 물가 대비 | #vsRow |
| 어떤 품목이 내 물가를 밀어올렸는지 분해 | #contribChart (Charts.contributionChart) |
| 지출 비중 고정 후 10년 누적 궤적 비교 | engine.js personalIndexPath() |
| 내 물가를 연봉 진단에 그대로 적용 | #applyToSalary |
| 계산 결과만 쉬운 말로 바꾸는 Gemini 해설 | #aiExplainBtn, api/insight.mjs |
생활 유형 시작값은 국가데이터처의 2025년 4분기 가계동향조사에서 가져옵니다. 통계 평균끼리는 현재 약 2.9~3.0%로 큰 차이가 나지 않습니다. 대신 1인 가구 시작값에서 교통비를 월 20만원에서 60만원으로 바꾸면 내 물가는 **2.9% → 3.8%**로 바뀝니다. 평균 페르소나는 정답이 아니라 입력을 쉽게 시작하기 위한 기준선입니다.
최근 물가와 장기 누적의 순위는 다를 수 있습니다. 식료품은 현재 +0.9%로 비교적 잠잠하지만 10년간 +43% 올랐습니다. 화면은 최신 한 달의 기여도와 10년 누적 궤적을 나란히 보여 줘 짧은 시점만 보고 판단하지 않게 합니다.
카드 소비내역이 있으면 이 입력은 필요 없어집니다. 카테고리별 지출액만 넣으면 자동으로 계산되는 구조라, 금융앱의 소비 분석 데이터와 그대로 결합됩니다.
AI는 계산기가 아니라 번역기 역할만 합니다. 내 물가와 기여도는 engine.js가 실제 데이터로 먼저 계산하고, 사용자가 버튼을 누른 경우에만 결과 일부를 Gemini에 전달해 초보자용 두 문장으로 바꿉니다. 연봉·월 지출액 같은 개인정보는 전송하지 않으며, AI가 새 숫자를 만들면 응답을 버리고 검증된 기본 해설로 돌아갑니다. 서버 함수는 Google AI Studio API 키를 서버에서만 읽으므로 브라우저와 저장소에 키가 노출되지 않습니다.
탭 1 — 실질임금 진단
| 요구사항 | 구현 위치 |
|---|
| 현재/내년 연봉, 물가상승률 입력 | index.html #panel-gap |
| 명목 인상액 / 물가 유지선 / 실질 인상률 / 부족분 계산 | assets/js/engine.js diagnose() |
| 연봉 비교 막대그래프 | #salaryChart (Charts.barChart) |
| 부족 금액(연간/월간) 숫자 카드 | #gapStats |
| 물가 기반 적정 인상률 (연봉 협상 가이드) | #negoStats (engine.js negotiate()) |
탭 2 — 목표 자산 모으기
| 요구사항 | 구현 위치 |
|---|
| 목표 금액/기간, 현재 자산, 월 저축액, 투자성향 입력 | #panel-goal |
| 필요 월 저축액 역산 | engine.js requiredMonthly() |
| 목표를 위해 어디에 얼마나 투자해야 하는지 | #goalScenarioTable + 포트폴리오 비중 |
| 시간에 따른 자산 성장 곡선 + 목표선 | #growthChart (Charts.lineChart) |
| 투자성향별 필요 월 저축액 비교 | #goalScenarioChart |
탭 3 — 자산 타임머신
| 요구사항 | 구현 위치 |
|---|
| "그때 샀다면 지금 얼마?" 과거 성과 비교 | #panel-time (engine.js backtest()) |
| 자산 선택 필터 | #assetPicks |
| 물가 대비 성과 비교선 | engine.js inflationPath() |
| 수익률과 위험(변동성·최대낙폭) 병기 | #timeTable |
| 선택일 앞뒤 6개월의 최종금액 범위·중앙값 | engine.js backtestWindow(), #timingTable |
3. 데이터
모든 수치는 실제 데이터입니다. 임의로 생성한 값은 하나도 없습니다.
| 출처 | 사용 | 조회 방식 |
|---|
| Yahoo Finance chart API | KODEX 200, S&P 500, 금, KODEX 국고채10년, 비트코인, 원/달러 — 월말 종가 10년 | CORS 미허용 → GitHub Actions가 매일 06:00(KST) 수집해 커밋 |
| OECD SDMX | 한국 소비자물가 — 전체 + COICOP 12품목별 (월별, 지수 + 전년동월비) | 브라우저에서 실시간 조회 |
| Frankfurter (ECB) | 원/달러 환율 | 브라우저에서 실시간 조회 |
| CoinGecko | 비트코인 원화 시세 · 24h 변동 | 브라우저에서 실시간 조회 |
| 국가데이터처 가계동향조사 | 1·2·4인 가구의 월평균 소비지출 | 2025년 4분기 공식 통계표를 시작값으로 사용 |
왜 전부 실시간이 아닌가
브라우저에서 API를 직접 부르려면 그 API가 CORS를 열어 줘야 합니다. 실제로 확인한 결과:
OECD SDMX → Access-Control-Allow-Origin 있음 ✅ 실시간 가능
Frankfurter → Access-Control-Allow-Origin: * ✅ 실시간 가능
CoinGecko → Access-Control-Allow-Origin: * ✅ 실시간 가능
Yahoo Finance → CORS 헤더 없음 ❌ 브라우저에서 불가
그래서 지금 이 순간의 값이 의미 있는 지표(물가·환율·비트코인)는 페이지가 직접 실시간으로 부르고, 10년 시계열은 Actions가 매일 받아 스냅샷으로 커밋합니다. 애초에 10년 히스토리는 실시간일 필요가 없기도 합니다.
부수 효과로 발표 당일 안정성도 확보됩니다. 여러 평가자가 동시에 접속했을 때 외부 API 한 곳이 느려도 스냅샷이 바닥에 깔려 있어 화면은 항상 그려집니다.
정제 과정
pipeline/fetch_data.py → pipeline/transform.py
- 월봉 타임스탬프 시간대 보정 — Yahoo의 월봉은 거래소 현지시간 기준입니다. UTC로 그대로 변환하면 KST 10월 1일이 UTC 9월 30일로 밀려 매년 10월 데이터가 9월을 덮어쓰며 소실됩니다. 응답의
gmtoffset을 적용해 해결했습니다.
- 단일 오류 틱 제거 — 원/달러 2017-09에
0.1154라는 잘못된 값이 섞여 있었습니다. 이 하나 때문에 최대낙폭이 -100%, 변동성이 316,029%로 계산됐습니다. "한 달 만에 튀었다가 바로 되돌아오는" 모양만 골라 제거합니다(중앙값 대비 크기로 거르면 비트코인의 실제 100배 상승 구간이 잘려 나갑니다).
- 원화 환산 — USD 표시 자산(S&P 500·금·비트코인)은 같은 달 환율로 환산해 한국인 투자자 기준 수익률로 맞춥니다.
- 지표 산출 — CAGR, 연환산 변동성, 최대낙폭(MDD)을 계산하고, 포트폴리오 기대수익률은 구성 자산의 실제 CAGR 가중평균으로 역산합니다.
수집 실패 시 값을 지어내지 않고 예외를 던지고 멈춥니다. 제외된 값은 화면의 "계산 근거" 섹션에 그대로 노출됩니다.
한계 (실제 상품과 다를 수 있는 부분)
- 예금 — 예금 상품에는 시세가 없어 OECD 한국 3개월 은행간금리(IR3TIB)를 월 복리로 굴려 대용합니다. 실제 예금 상품 금리와는 다를 수 있습니다.
- 세금·거래비용·배당 재투자·환전 수수료는 반영하지 않았습니다.
4. 이 리포에서 작업하기 전에
🚨 코드를 고치기 전에 CLAUDE.md를 먼저 읽어 주세요
AI(Claude Code, Cursor, Codex 등)로 작업하는 경우 그 도구가 자동으로 읽습니다.
사람이 직접 고칠 때도 한 번은 읽어 주세요. 절대 규칙 3가지와
이미 밟은 지뢰 5가지가 정리되어 있습니다.
요약: ① 데이터를 지어내지 말 것 ② 빌드 도구를 추가하지 말 것 ③ 수치를 하드코딩하지 말 것
5. 함께 작업하기
main은 보호되어 있습니다. push하면 그 즉시 실서비스가 배포되기 때문에, 브랜치를 만들어 PR로 합칩니다.
git checkout main && git pull
git checkout -b feat/이름-작업내용
# ... 작업 ...
git add -A && git commit -m "무엇을 왜 고쳤는지"
git push -u origin feat/이름-작업내용
터미널에 뜨는 링크로 PR을 만들면 자동검사가 돌아갑니다. 승인자는 0명이라 검사만 통과하면 혼자 Merge할 수 있습니다.
PR에서 자동으로 검사하는 것:
| 검사 | 막는 것 |
|---|
| 가짜 데이터 | np.random, Math.random, Math.sin/cos |
| 빌드 도구 | package.json, vite, webpack, tsconfig |
| 외부 CDN | <script src="https://..."> |
| JS 문법 | node --check |
| 데이터 무결성 | 관측치·CAGR·변동성·MDD 범위, 품목 12개 |
| 하드코딩 수익률 | RISK_RETURNS = {...} 패턴 |
6. 실행
빌드 도구가 필요 없습니다.
python3 -m http.server 5173
http://localhost:5173 접속.
데이터를 직접 갱신하려면 (외부 라이브러리 불필요, 표준 라이브러리만 사용):
python3 pipeline/fetch_data.py && python3 pipeline/transform.py
7. 구조
├── CLAUDE.md ⚠️ 작업 전 필독 — 절대 규칙·지뢰 목록
├── AGENTS.md 다른 AI 도구용 요약본
├── index.html 마크업 (4개 탭)
├── assets/
│ ├── css/styles.css 디자인 시스템 (라이트/다크)
│ └── js/
│ ├── charts.js SVG 차트 (라이브러리 의존성 0)
│ ├── engine.js 계산 로직
│ ├── live.js 실시간 API 레이어
│ ├── personas.js 공식 가계동향조사 기반 생활 유형 시작값
│ └── app.js 화면 조립
├── api/
│ └── insight.mjs Gemini 해설 서버 함수 (입력·출력 검증)
├── data/ ← Actions가 주 1회 갱신
│ ├── market.json 자산별 시계열·지표·포트폴리오
│ ├── cpi.json 한국 소비자물가 (전체 + COICOP 12품목)
│ └── meta.json 출처·가정·정제 내역
├── pipeline/
│ ├── fetch_data.py 수집
│ └── transform.py 정제·지표 산출
├── docs/
│ ├── team-briefing.md 팀원용 해설서 (발표 전 필독)
│ ├── talking-points.md 발표 대사집 (채점 8문항별)
│ ├── fork-guide.md ⚠️ 개인 계정으로 복제할 때 주의사항
│ ├── pr-protocol.md PR 올리기 전 자체 점검
│ ├── ai-usage.md AI 활용 과정과 검증 내역
│ └── presentation.md 발표 구성
└── .github/workflows/
├── deploy-pages.yml 배포
└── update-data.yml 데이터 갱신 (매일)
8. 통합 내역
팀원 각자가 만든 프로토타입을 하나로 합쳤습니다. 살린 것과 버린 것:
| 출처 | 살린 것 | 버린 것 |
|---|
| SOMIN (샐러리갭) | 전체 뼈대, 2탭 구조, 요구사항 매핑, 계산 로직, 라이트/다크 변수 체계, 무라이브러리 SVG | 하드코딩 가정 수익률(3/6/9%) → 실데이터로 교체 |
| bumyong (실질임금 부족분 보완) | 단계별 진행 구조(① 정보 입력 → ② 명목 vs 실질 → ③ 포트폴리오 → ④ 시나리오 비교), 연도별 명목 vs 실질 추이, 투자 성향별 시나리오 비교, "프로그램 소개 & 한계" 절 | Chart.js CDN 의존 → 자체 SVG로 재구현 |
| nalyang (RealWage 닥터) | 데이터 파이프라인 계보, 포트폴리오·백테스트 개념, 자산 티커 목록 | Streamlit 런타임(정적 배포 불가), np.random.normal 합성 가격 폴백 |
| sangmi (REAL BALANCE) | 히어로 카피, 3단계 스텝 UI, conic-gradient 도넛, 팔레트, Pages 워크플로 | vinext/Cloudflare/D1/drizzle/worker 등 미사용 템플릿 잔해 |
| yeju (월급 결산소) | 월급→목표→배분→협상 서사, "계산 근거" 공개 섹션 | 중복 연봉 계산기 |
| kihoon (자산 타임머신) | "그때 샀다면" 컨셉, 자산 선택 UX | Math.sin 파형으로 만든 가짜 과거 성과 곡선 → 실제 종가로 재구축 |
bumyong 프로토타입이 지금 결과물에 남긴 것
통합 초기에 업로드가 늦어 첫 표에서 빠졌던 적이 있는데, 실제로는 지금 구조의 뼈대에 해당하는 부분이 여기서 왔습니다.
- 홈의 5단계 설문 흐름 — "한 번에 다 입력받지 말고 단계로 나눠 묻자"는 방향을 처음 코드로 구현한 것이 이 프로토타입입니다.
<span class="step">1</span> 정보 입력 부터 4단계까지 화면을 끊어 놓은 구조가 지금 온보딩의 원형입니다.
- 진단 탭의 "격차는 해마다 벌어집니다" — 명목 연봉과 물가 유지선을 여러 해에 걸쳐 두 곡선으로 그리는 관점이 여기서 왔습니다. 단년도 비교만으로는 복리로 벌어지는 격차가 안 보인다는 점을 짚어 준 화면입니다.
- 투자 성향별 시나리오 비교 — 하나의 답을 주는 대신 안정형·균형형·적극형을 나란히 놓고 고르게 하는 방식.
- "프로그램 소개 & 한계" 절 — 가정과 한계를 화면에 드러내는 태도. 지금 "계산에 들어간 근거" 섹션이 같은 생각의 연장입니다.
버린 것은 Chart.js CDN 하나입니다. 외부 라이브러리 없이 가자는 원칙 때문이고, 차트 자체는 assets/js/charts.js에 다시 구현했습니다.
자세한 내용은 docs/ai-usage.md.
9. 만든 사람
구범용 · 김상미 · 신기훈 · 안나량 · 안소민 · 왕예주 (가나다순)
서울대학교 빅데이터 핀테크 전문가과정 13기 3조 · 웹 개발 및 시각화
각자 만든 프로토타입을 하나로 합친 결과물입니다. 누구 것에서 무엇을 살리고 무엇을 뺐는지는 위 통합 내역 표에 정리돼 있고, 개인 리포는 SNU-Project 조직에 원본 그대로 남아 있습니다.
각자 포트폴리오로 쓰려고 개인 계정에 복제하실 때는
docs/fork-guide.md를 보세요.
Vercel 프로젝트와 Gemini 키는 따라오지 않아 각자 새로 설정해야 합니다.
© 2026 샐러리갭 팀. 모든 권리 보유.
10. 면책
이 페이지의 모든 값은 입력한 가정에 따른 추정치입니다. 과거 수익률은 미래 수익을 보장하지 않습니다. 투자 손실 가능성이 있으며, 이 결과는 투자 권유나 재무·법률 자문이 아닙니다. 중요한 결정 전에는 자격을 갖춘 전문가와 상의하세요.
