[Claude Code + Lovable] 비개발자가 자기 ETF 시뮬레이터를 만든 후기

## 📝 한줄 요약

ETF 리밸런싱 하기 전, 경제 흐름이 반복된다는 관점에서 시뮬레이션 해보면 도움이 될 것이라 생각했다. Claude Code로 PRD를 설계하고 Lovable로 실제 웹앱을 만들었더니, 이제 "지금 경제가 정점기라 QQQM 비중 줄여야 한다"고 수치로 확인하게 됐다.

**바쁘시면 이것만 읽어도 돼요:**
- Claude Code + /kkirikkiri + Lovable 조합으로 기획부터 구현까지 코딩 없이 완성
- 사이클 판별 알고리즘 설계는 AI가 PRD로 잡아줌, 구현은 Lovable이 해줌
- 막혔던 건 "Lovable에 뭐라고 써야 하지" --- Claude가 PRD를 Lovable 프롬프트로 변환해줘서 해결
- "정점기 70% 신뢰도"라고 실데이터로 뜨는 걸 처음 봤을 때 진짜 됐다는 걸 알았음
- Phase 1(사이클 판별 + ETF 추천)만 완성했는데 이걸로 리밸런싱 판단에 충분히 씀
- Phase 2(포트폴리오 연동), Phase 3(백테스트)도 계속 구현해나갈 예정

---

## 🎯 이런 분들께 도움돼요

- 코딩 못 하는데 자기만의 투자 도구를 직접 만들어보고 싶은 사람
- ETF 장기투자 중인데 리밸런싱 기준이 늘 애매한 사람
- AI 코딩 도구가 뭔지 알겠는데 뭘 만들어야 할지 모르겠는 사람

---

## 😫 문제 상황 (Before)

ETF를 가치 보존형 투자자라는 건 알고 있었고 장기투자 원칙도 지켜왔는데 리밸런싱만큼은 항상 감이었다.

금리가 오른다는 뉴스가 나오면 "지금 수축기인가?" 싶고, 실업률 지표가 나쁘면 "방어적으로 가야 하나?" 싶은데 막상 결론을 내리는 기준이 없었다. 결국 아무것도 안 하거나, 주변 분위기에 흔들려서 움직이거나.

"경제 사이클에 따라 ETF 비중을 자동으로 판단해주는 도구가 있으면 얼마나 좋을까"라는 생각은 늘 있었는데 당연히 코딩을 못 하니까 그냥 생각으로 끝났었다.

---

## 🛠️ 사용한 도구

- **Claude Code**: 기획(PRD 설계) + /kkirikkiri 팀 구성 + Lovable 프롬프트 변환
- **Lovable**: 실제 웹앱 구현 (React + Recharts 기반)
- **FRED API**: 미국 기준금리(FEDFUNDS) + 실업률(UNRATE) 실시간 데이터
- **모델**: Claude Sonnet 4.6

---

## 🔧 작업 과정

### 아이디어를 PRD로 바꾸기 --- /show-me-the-prd

오래 가지고 있던 아이디어를 한 문장으로 정리했다.

```
나는 과거의 큰 흐름이 사이클로 반복된다는 점에 착안해서
가치투자 & 장기투자를 선호해. 이런 투자 성향은 과거 경제 흐름에
기반한 ETF 시뮬레이션 결과가 접목되면 좀 더 믿을만한
나의 투자 agent가 만들어질 수 있을 것 같아.
/show-me-the-prd 로 같이 구조를 잡아보자
```

Claude가 몇 가지 질문을 했다. 어떤 플랫폼으로 만들고 싶은지, 핵심 기능 중 MVP에 뭘 담을지, 기술 스택은 어떻게 할지. 선택지를 제시해줘서 그냥 고르면 됐다.

이 대화가 끝나니까 `PRD/etf-cycle-simulator/` 폴더에 문서 4개가 생겼다.

- `01_PRD.md`: 제품 요구사항 (어떤 문제를 왜 푸는가)
- `02_DATA_MODEL.md`: 데이터 구조 설계
- `03_PHASES.md`: Phase별 개발 순서와 완료 기준
- `04_PROJECT_SPEC.md`: 기술 스펙 상세

혼자 이걸 정리하려면 며칠 걸렸을 것 같은데 한 시간도 안 걸렸다.

---

### PRD를 AI 팀이 보완하기 --- /kkirikkiri

PRD가 생겼는데 "이게 실제로 구현 가능한 수준인가?" 의문이 들었다. API가 에러나면 어떻게 처리할지, 사용자가 이상한 날짜를 입력하면 어떻게 될지 같은 부분이 빠져 있는 것 같았다.

```
/kkirikkiri
ETF 사이클 시뮬레이터 PRD 보완 --- PRD/etf-cycle-simulator/ 폴더의
4종 문서를 검토하고 누락된 엣지케이스, API 에러 처리,
UX 플로우, 테스트 시나리오를 보완하라
```

Claude가 자동으로 4명짜리 팀을 구성했다.

- **팀장**: PRD 전체 분석 + 역할 배분 + 결과 통합
- **API 전문가**: FRED/Yahoo Finance API 에러 처리 시나리오
- **UX 분석가**: 사용자 플로우 + 엣지케이스 6종
- **QA 엔지니어**: 단위테스트 케이스 + E2E 시나리오

팀이 돌아가는 동안 기다리기만 했다. 끝나니까 PRD 3개 파일이 업데이트돼 있었다. API가 죽었을 때 LocalStorage 캐시로 폴백하는 3단계 전략, 극단적 날짜 범위 처리 방법, cycleDetector 알고리즘 16가지 테스트 케이스 같은 내용이 추가돼 있었다.

혼자였으면 생각도 못 했을 부분들이었다.

---

### Lovable로 실제 앱 만들기

PRD가 탄탄해지니까 이제 만들면 된다는 자신감이 생겼는데, Lovable를 써본 적이 없었다.

```
lovable을 사용해본적이 없어서 처음부터 방법을 알려줘
```

Claude가 가입부터 프로젝트 생성, PRD를 Lovable 프롬프트로 변환하는 방법까지 단계별로 설명해줬다. "PRD를 그대로 붙여넣으면 되나요?"라고 물었더니 Lovable이 이해하기 좋은 형태로 다시 정리해줬다.

붙여넣고 기다리니까 웹앱이 생겼다.

그런데 처음에는 실제 API 데이터가 아닌 목업(가짜 데이터)으로 동작하고 있었다. FRED API 키를 발급받아서 연결하고 나서야 진짜 데이터로 바뀌었다.

화면에 "정점기 (Peak) --- 신뢰도 70%"라고 뜨는 걸 처음 봤을 때 이게 진짜로 돌아간다는 게 실감이 났다. ETF 추천 카드도 함께 나왔다. SCHD, GLD, VNQ, XLP --- 정점기에는 방어적 자산 비중을 높이라는 내용.

---

## ✅ 결과 (After)

### Before vs After

| 항목 | Before | After |
|------|--------|-------|
| 리밸런싱 기준 | 뉴스/감 | 4국면 사이클 + 신뢰도 % |
| 판단 도구 | 없음 | 실데이터 기반 웹앱 |
| 구현 방법 | 코딩 몰라서 불가 | PRD 설계 → AI 팀 보완 → Lovable 구현 |
| 소요 시간 | 구현 불가 | 하루 |

### 결과물

https://etf-cycle-compass.lovable.app 에 접속하면 현재 경제 국면(확장기/정점기/수축기/저점기)과 신뢰도, 해당 국면에서 추천하는 ETF 카드를 볼 수 있다.

---

## 💬 이 과정에서 배운 AI 활용 팁

### 효과적이었던 것

1. **아이디어를 한 문장으로 먼저 정리하기**: /show-me-the-prd가 알아서 구조를 잡아주지만 "뭘 만들고 싶은지"는 내가 명확히 해야 했다. 한 문장으로 정리하는 연습이 도움됐다.
2. **PRD를 Lovable 프롬프트로 변환 요청하기**: PRD를 그대로 붙여넣으면 Lovable이 혼란스러워한다. Claude한테 "Lovable용으로 변환해줘"라고 하면 훨씬 잘 작동한다.
3. **/kkirikkiri로 내가 모르는 부분 채우기**: API 에러 처리나 엣지케이스처럼 내가 미처 생각 못 한 부분을 AI 팀이 대신 찾아준다. 혼자 기획할 때 생기는 맹점을 보완해주는 역할.

### 이렇게 하면 안 돼요

1. **PRD 없이 바로 Lovable에서 시작하기**: 뭘 만들지 명확하지 않은 상태로 Lovable에 막연하게 요청하면 결과물이 내가 원하는 것과 달라진다. 기획 먼저, 구현은 나중.
2. **API 키 없이 완성됐다고 착각하기**: Lovable이 목업 데이터로 돌아가는 것처럼 보여도 실제 API 연결 전까지는 가짜 데이터다. FRED API 무료 발급 후 연결해야 실제로 쓸 수 있다.

---

## 🌍 다른 업무에 적용한다면?

이번에 배운 흐름(아이디어 → PRD → AI 팀 보완 → Lovable 구현)은 투자 도구 외에도 쓸 수 있다.

- 가계부 자동 분류 도구
- 부동산 임장 체크리스트 앱
- 독서 기록 및 인사이트 정리 도구

핵심은 "내가 반복적으로 불편하게 하고 있는 게 뭔지"를 찾는 것. 그게 있으면 이 방법으로 도구로 만들 수 있다.

---

## 🚀 앞으로의 계획

Phase 1(사이클 판별 + ETF 추천)은 완성됐다. PRD 계획대로 계속 구현할 예정이다.

- **Phase 2**: 내 실제 포트폴리오(SCHD, QQQM 보유 비중)를 입력하면 현재 국면 추천과 비교해서 괴리율을 보여주는 기능
- **Phase 3**: 2008년 금융위기, 2020년 코로나 같은 과거 시점에 이 포트폴리오가 어떻게 됐는지 백테스트

각 Phase도 Lovable로 구현할 것이고, 막히는 부분은 Claude Code에 물어보면 된다는 걸 이제 알고 있다.

---

## 📋 재사용 가능한 프롬프트

### 프롬프트 1: 아이디어를 PRD로 변환

> 나는 [나의 투자/업무 성향]를 가지고 있어.
> [불편한 상황 설명]. 이걸 해결해주는 도구를 만들고 싶어.
> /show-me-the-prd 로 같이 구조를 잡아보자

### 프롬프트 2: Lovable 프롬프트 변환 요청

> 아래 PRD를 Lovable에서 바로 붙여넣을 수 있는 프롬프트로 변환해줘.
> Phase 1 구현 범위만 포함하고, React + Tailwind + Recharts 스택 기준으로.
> [PRD 내용 붙여넣기]

### 프롬프트 3: AI 팀으로 PRD 보완 요청

> /kkirikkiri
> [프로젝트명] PRD 보완 --- [폴더 경로]의 문서를 검토하고
> 누락된 엣지케이스, API 에러 처리, UX 플로우, 테스트 시나리오를 보완하라
3
1개의 답글
밀어주고 끌어주는

온·오프라인 AI 스터디

AI로 어디까지 할 수 있는지
직접 확인하실 분만 신청하세요.