ai-native로 살아가는 법
작은 실험을 도구로, 도구를 상품으로, 상품을 자산으로 쌓아가는 곳.

Fable 5 후기: AI로 주식 스윙 전략 학습 앱 만들기, 기대와 달랐던 결과

Fable 5로 React+Vite+TypeScript 기반 주식 스윙 전략 학습 앱을 만들어본 후기입니다. 챗GPT 개발지시서 작성부터 Fable의 구현 계획, 실제 automode 결과까지 정리했습니다.

Fable 5로 주식 스윙 전략 5개를 체계적으로 훈련하는 학습 앱을 만들어 보려고 했다. 그 유명한 모델이니까 한번 믿고 맡겨보자는 마음이었다. 유튜브나 인스타그램에서는 고작 몇 줄 프롬프트로 게임을 만들고 서비스를 만든다고 하는데, 정작 내 결과물은 형편이 없었다.

목표: React + Vite + TypeScript 기반 트레이딩 교육 앱

내가 원했던 결과물은 React + Vite + TypeScript 기반의 교육 앱이었다. 트레이딩 봇도 아니고 종목 추천 앱도 아닌, 다섯 가지 유명 스윙 트레이딩 전략을 학습하고 Finviz 스크리닝, 트레이드 플랜 작성까지 연결하는 훈련용 프로그램을 만드는 것이 목표였다.

작업 방식은 평소와 같았다. 먼저 챗GPT와 어느 정도 대화를 나눈 뒤 개발지시서를 써달라고 요청한다. 그 다음 클로드 코드를 plan mode 상태로 두고 개발지시서를 전달하면, 그걸 바탕으로 계획을 세운다. 보통은 그 계획을 다시 챗GPT에게 주고 수정 프롬프트를 받는 과정을 거치는데, 이번에는 이 단계를 건너뛰고 Fable에게 바로 automode를 돌려봤다.

챗GPT가 작성한 개발지시서

챗GPT에게 요청하면 아래와 같은 형식으로 개발지시서를 써준다. 원문은 270줄 정도 되지만, 글에서는 핵심 부분만 간추렸다.

# Project: Swing Strategy Academy MVP 0.1
Build a local-first React + Vite + TypeScript educational app for
learning five famous swing trading strategies.

## Product Goal
This is not a trading bot.
This is not a stock recommendation app.
This is an educational training program that helps the user master
five swing trading strategies and connect each strategy to Finviz
screening and trade plan analysis.
The user is a full-time worker who can study about 1 hour after
market close.
The app should teach strategies, provide checklists, show Finviz
screener recipes, quiz the user, and generate structured trade plan
templates.

## Strategies
Include these five strategies in this order:
1. Weinstein Stage Analysis
2. Pullback / Breakout Retest
3. Darvas Box Breakout
4. Minervini SEPA / VCP
5. CAN SLIM Swing
Also include a Foundation module before the five strategies.

## App Screens
1. Home Dashboard
2. Foundation Module
3. Strategy Module Detail
4. Finviz Screener Builder
5. Practice Lab
6. Trade Plan Template
7. Glossary
8. Progress Tracker

## Module Structure
Each strategy module must have the same sections:
- Overview
- Why It Works
- Best Market Environment
- Setup Anatomy
- Entry Rules
- Stop Loss Rules
- Target / Exit Rules
- Common Mistakes
- Finviz Screener Recipe
- Practice Quiz
- Trade Plan Template

Fable가 세운 구현 계획

이 지시서를 Fable에게 던져주니 몇 가지 질문을 던진 뒤 아래와 같은 구현 계획을 세웠다.

Swing Strategy Academy MVP 0.1 — 구현 계획

Context

스윙 트레이딩 5대 전략(Weinstein, Pullback/Retest, Darvas Box, Minervini VCP, CAN SLIM)을 학습하는 로컬 우선 교육 앱. 트레이딩 봇이나 종목 추천 앱이 아닌, 전략 학습 → Finviz 스크리닝 연결 → 트레이드 플랜 작성 훈련용 교육 프로그램이다. 장 마감 후 1시간 학습하는 직장인 사용자를 위한 "진지한 학습 터미널" UX를 지향했다. 추후 "주식 전략 분석실" 기능이 추가될 수 있으므로 feature 기반 확장 가능 구조로 설계하기로 했다.

확정된 결정사항

  • 콘텐츠 언어: 한국어 설명 + 영어 용어 병기 (Finviz 필터명은 영어 유지)
  • 스타일링: Vanilla CSS + CSS 변수 디자인 토큰 (의존성 없음, 다크 터미널 테마)
  • 경로: 현재 폴더 D:\AI\0. Claude\2. 주식에 직접 생성 (스캐폴딩 직후 빌드 검증으로 유니코드 경로 리스크 확인)

기술 스택

항목 선택 근거
프레임워크 React 18 + Vite + TypeScript strict 스펙 지정
라우팅 react-router-dom v7 8개 화면 필요
상태 관리 Zustand + persist 미들웨어 진행률/퀴즈결과/플랜이 8개 화면에 공유됨. persist가 localStorage 저장 로직 단순화
테스트 Vitest (컴포넌트 테스트 라이브러리 없음) 요구 테스트 4종이 모두 순수 로직 — 최소 의존성
스타일 Vanilla CSS + 토큰 결정사항

의존성: react, react-dom, react-router-dom, zustand
dev 의존성: typescript, vite, @vitejs/plugin-react, vitest, @types/react, @types/react-dom

챗GPT도 이 계획은 꽤 잘 짜여졌다고 평가했다. 이때만 해도 GPT 5.5 High보다 당연히 Fable 5 High가 성능이 좋을 거라 생각해서 살짝 무시하고 넘어갔다.

실제 결과: 기대와 달랐던 automode

결국 Fable을 믿고 계획 수정 없이 그대로 밀어붙였다. 결과물은 솔직히 예전에 사이드 프로젝트로 Sonnet을 처음 돌렸을 때와 별반 차이가 없었다.

너무 믿고 맡긴 것이 결국 내 잘못이기도 하지만, 그래도 아쉬움이 남는 결과였다.

정리하며

이번 시도에서 얻은 교훈은 명확하다. 모델의 명성과 무관하게, 계획 단계에서 챗GPT의 2차 검토를 건너뛴 것이 결과물의 완성도에 영향을 준 것 같다. 다음에는 automode로 바로 넘어가기 전에 검증 단계를 다시 넣어서 비교해볼 예정이다.