안티그래비티로 헤매던 MVP, 클로드코워크로 하루만에 완성하기

소개

시도하고자 했던 것과 그 이유를 알려주세요.

최초 시도했던 컨셉은 M4 Mac mini를 로컬 코어 서버로 활용하여, 서버 유지 비용이 0원(Zero-OpEx)에 수렴하는 자율형 예측 마켓 플랫폼 'AI SIGNAL (aisignal.kr)' MVP를 구축하고자 했습니다.

단순한 투표 앱이 아닙니다. 금융/투자 시장에 관심이 많은 유저를 타겟으로, DART(공시), BOK ECOS(한국은행), FRED(연준), Yahoo Finance 등의 글로벌 API 데이터를 LangGraph 기반의 '에이전틱 AI(Agentic AI)'가 스스로 분석하여 마켓을 열고 정산하는 시스템을 만들고자 하였으며, 이를 통해 유저에게는 '돈을 잃지 않는(Zero-Risk) 투자 도파민'을 제공하고, 비즈니스적으로는 생성되는 유저들의 실제 예측 데이터를 통한 금융권 과 개별투자운용사들에게 해당 DB 제공을 통해 현금 흐름을 창출하는 BM화가 목표였습니다.

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?

안티그래비티(Vibe Coding)' 방식을 채택했습니다. 시스템의 완성도를 극대화하기 위해 AI에게 실리콘밸리 3대장(애플 UX, 팔란티어 엔지니어, 메타 기획자)과 탑 퀀트 애널리스트의 페르소나를 부여하여 프롬프트를 추출하여 구글 AI 스튜디오 빌더를 통해 기본 뼈대를 잡고,

  • 백엔드 & DB: M4 Mac mini (로컬 호스팅), FastAPI (API 코어), Supabase (PostgreSQL 및 m4맥미니), Cloudflare Tunnel (로컬 서버 외부 개방), render 백앤드 호스팅

  • 프론트엔드: Google Stitch / v0.dev (React/Next.js UI 자동 렌더링), Vercel (배포)

  • AI 코어 엔진: Claude Code (코드 구현 메인), LangGraph + Local LLM (자율 추론 루프)

사용한 프롬프트 (프론트엔드 모바일 UI 추출용 마스터 프롬프트)

폴리마켓(Polymarket)을 벤치마킹하되, 하이엔드 핀테크 감성을 뽑아내기 위해 '애플 수석 디자이너' 페르소나를 씌워 아래 프롬프트를 Google Stitch로 디자인을

"Build a High-End Mobile Web Home Screen for 'AI SIGNAL' using Next.js and Tailwind CSS. Target Device: Mobile Web (max-width: 480px, centered on screen, min-height: 100vh). Theme: 'Obsidian Black' (bg-zinc-950), 'Neon Green' (text-emerald-400), 'Oracle Gold' (text-amber-400). Structure: 1. Sticky Header with Glassmorphism. 2. Featured Hero Card ('Will the BOK cut interest rates in April?'). 3. Market List with mini Yes/No progress bars. 4. Fixed Bottom Navigation with glowing active tabs. Make it look like a premium crypto exchange like Binance or Bloomberg Terminal."

여기까지가 기존 안티그래비티로 진행하고 있던 내용이고

클로드코드 맥스플랜을 만나게 됩니다. 그리고 하루만에 아래와 같이 전면 수정하여 MVP를 완성하게 되었습니다.

**AIsignal**은 일반 사용자가 FOMC 금리 결정, 한국은행 기준금리, WTI 유가 등 거시경제 이벤트의 결과를 예측(베팅)하고, **AI 오라클(Google Gemini 2.5-Flash)**이 실제 경제 데이터를 분석하여 공정하게 정산하는 금융 예측 플랫폼입니다.

**기획 배경:**
금융 시장에 대한 관심이 높아지고 있지만, 일반인이 직접 참여할 수 있는 접근성 높은 서비스가 부족합니다. 토스증권 스타일의 직관적인 UI와 포인트 기반 베팅 시스템으로 진입 장벽을 낮추고자 했습니다.

**핵심 가치:**
AI 오라클이 실제 경제 데이터(FRED, BOK ECOS, Yahoo Finance)를 분석하여 공정하게 정산하고, 파리뮤추얼(parimutuel) 방식으로 보상을 분배하는 투명한 구조입니다.

**기술 스택:**

| 구분 | 기술 | 역할 |
|------|------|------|
| Frontend | Next.js 16 + React 19 + Tailwind 4 | 토스증권 스타일 모바일 퍼스트 UI |
| Backend | FastAPI (Python) | REST API + JWT 인증 + Rate Limiting |
| Database | Supabase (PostgreSQL) | 사용자/마켓/베팅 데이터 관리 |
| AI Oracle | Google Gemini 2.5-Flash | 경제 데이터 분석 + 정산 판정 |
| 배포 | Vercel + Render + Cloudflare | 프론트/백엔드/DNS 인프라 |
| 관제 | Telegram Bot + M4 Worker | 대시보드/공지/서버관리 |

---

## 진행 방법

### 사용한 도구

| 도구 | 활용 방법 |
|------|-----------|
| **Claude Code (Cowork)** | 전체 프로젝트 설계, 코드 생성, 디버깅, 배포 설정까지 전 과정 AI 페어프로그래밍 |
| **Claude in Chrome** | 실제 사이트(aisignal.kr) 스크린샷 캡처 + UI 검수 (필요할 때만 ON/OFF) |
| **Supabase MCP 커넥터** | DB 테이블 조회, 프로젝트 상태 모니터링을 Claude 대화창에서 직접 실행 |
| **Vercel MCP 커넥터** | 배포 상태/로그 확인, 프로젝트 관리를 Claude에서 바로 수행 |
| **Cloudflare MCP 커넥터** | DNS 레코드 관리, 계정 상태 확인 |
| **GitHub Actions** | CI/CD — TypeScript 타입체크 + Python 문법검증 + 자동 배포 |

결과와 배운 점

처음사용해본 클로드코워크였지만 안티그래비티로 개발하던 폴더를 공유해두고 읽게 한뒤에, cto 1주차때 배운 하네스엔지니어링 컨셉을 도입해서 claude.md를 작성하였고 세션이 바뀌어도 프로젝트구조, 기술스택, 컨벤션을 일관되게 유지할 수 있었습니다.

또 구현하고 싶었던 LangGraph 기반의 '에이전틱 AI는 현재의 m4 맥미니 기본사양으로는 턱없이 부족한 하드웨어 사양임을 확인하고 유사한 개념의 순수 Python asyncio + FastAPI 백그라운드 태스크로 에이전트 파이프라인을 구현한 부분으로

  • 스캐너(scanner): 외부 API(FRED, Yahoo Finance, BOK ECOS, DART)에서 경제 이벤트를 수집

  • 크리에이터(creator): Gemini AI가 수집된 데이터를 분석하여 마켓 생성

  • 오라클(oracle): Gemini AI가 실제 결과를 판정 → 파리뮤추얼 정산 실행

  • 애널리틱스(analytics): 유저/마켓 통계 집계

를 구현한 부분이 LangGraph의 노드>엣지>조건분기 복잡하게 연결되는 방식을 대체할 수있게 할 수 있는 부분으로 유사하게 구현할 수 있다는 점도 배울 수 있었습니다

과정중에 확인이 시행착오로 기간이 걸렸던 부분은 한국은행 api의 주기코드가 문서와 달라서 여러차례 시도후에 정확한 코드를 찾을 수 있었고, 공공오픈api를 단순히 연결만 해두고 실제 응답을 확인하지 않으면 활용하지 못할 수도 있는 부분을 알 수 있었습니다.

어드민은 짧은 시간이어서 텔레그램 봇을 통해 관제하는 시스템으로 구현하였고, 텔레그램 대화창을 통해 공시사항을 입력하면 플로팅 팝업으로 공지할 수 있게끔 간단하게 구성 하였습니다

그리고, 저같은 기본 배포에 있어서 DNS설정등과 같은 배포 관련 설정을 클로드코워크의 클로드인크롬 커넥터를 활용하였더니 제가 제일 시간이 많이 걸리던 부분을 해결할 수 있어서 신세계를 경험할 수 있었습니다.

여러 사람이 표시된 한국 앱의 스크린샷
아이시그널 - 스크린샷

앞으로의 계획은 해당 mvp를 좀더 상위 하드웨어로 개발해서 DB 이중화 아키텍처를 구현하고, 실제 최초 기획의도였던 LangGraph 기반의 에이전틱 AI가 운영하는 서비스로 고도화 하고 싶습니다. 특히 엣지 컴퓨팅 환경으로 로컬 LLM을 활용하고 클라우드 LLM의 이용을 최소화 하는 방식의 서비스 구현을 목표로 생성 되는 DB의 주권 강화를 통한 수익화 BM으로 발전시키고 싶습니다.

도움 받은 글 (옵션)

CTO 1주차 강의 하네스엔지니어링

(내용 입력)

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요