이번 포스트에서는 Claude Code와 MCP(Model Context Protocol)를 활용해 투자 행동 분석 연구소 웹사이트를 구축한 과정을 공유하려고 합니다. 처음부터 끝까지 AI 도구의 힘을 빌려 개발했는데, 생각보다 많은 시행착오가 있기 보다는 VS 코드에서 클로드가 일사천리로 만들어주는 웹사이트의 프로젝트 구조도와 엄청난 속도의 프로토타입 메이킹 진전에 고속 자율주행 차를 운전하는 기분이었어요. 와.와... 하면서 감탄만 했습니다.
#프로젝트 개요 ( 문서화가 생명!)
모카님의 강의는 1주차 오프라인도 들었고, 매주 모각에서 연습도 하고, 4페이지 종이에 넘 구식으로 필기도 열심히 했는데 ( 모카님이 쯧쯧하면서 보셨어요 ^^)..
사실 가장 많은 시간은 모카님의 제안대로, 6페이지 사업기획서를 작성하고, 그 중에서 특히 자기주도적 투자교정 서비스의 해외 사례와 방법론을 개발하는 거였어요. 제미니, 챗GPT가 가장 괜찮은 사업기획서의 그림을 그려줬는데, 클로드는 제가 맥락을 잘 못 줬는지 중견기업수준의 엄청난 규모의 사업을 그려줘서..바보야. 막 욕해주면서 수정하는 과정을 거치고 적절한 규모의 6가지 서비스 모듈 개발의 이론적 근 거와 실행논리를 개발시켰어요. 젤 뿌듯했어요.
모카님이 그 다음 강조하신 점이 투자연구소 폴더 관리로 이전 대화내용을 잊어버리지 않게 하고, 미리 PRD와 plan md의 상세한 계획서를 작성하라고 했던 거였어요. 프로젝트용 지침, 디자인 지침들을 주신 게 있어서, 제 내용으로 일부 수정해서 프로젝트 폴더와 구조도부터 만들게 했어요.
#MCP 도구별 역할 분담과 단계적 접근
- Sequential-THINKING: 사용자 여정 설계
- Desktop-Commander: 빌드 및 배포 자동화
- Playwright: E2E 테스트
- Context7: 디자인 시스템 일관성
- KIS Code, Trading Assistant: 투자 로직 검증
MCP 도구들이 서로 상호작용하는 방식을 이해하는 게 중요했습니다. 예를 들어, Sequential-THINKING으로 사용자 플로우를 설계한 후:
사용자 여정:
1. 랜딩 → 가치 인식 → 신뢰 구축
2. 온보딩 → 개인화 → 첫 경험
3. 분석 → 통찰 제공 → 행동 유도
4. 교육 → 학습 → 역량 강화
이를 바탕으로 Context7에서 일관된 디자인 시스템을 구축했습니다:
6가지 모듈이 아니라 웹페이지엔 아직 부족하게 4가지 밖에 구현이 안되었지만 ㅜㅜ (어디 첫술에 배부르겠어 요)
투자교정 AI 애플리케이션
├── 대시보드 (포트폴리오 현황, 투자 성과)
├── 행동분석 (패턴 분석, 개선 제안)
├── 투자교육 (모듈식 학습 시스템)
└── AI 어드바이저 (실시간 상담)Claude Code와 MCP는 분명 강력한 도구지만, 결국 개발자의 판단과 경험이 프로젝트 성공을 좌우한다는 걸 다시 한번 깨달았습니다. AI는 도구일 뿐, 설계와 의사결정은 여전히 사람의 몫이에요.
