소개
이번 Claude Code 스터디에서 Vibe Coding이 어렵다는 이야기를 듣고, 제가 평소 하던 방식과는 좀 다르구나 하는 생각이 들어 테스트해보고 싶었습니다. 아마도 복잡한 요구 사항으로 힘드신 것 같았습니다. 그래서, 목표는 gpters.org와 같은 학습 내용 공유 블로그 사이트를 만들어 보면 충분히 복잡하지 않을까 생각했습니다.
제가 평소 하는 방식은 "어떤 동작이 중요할까? 그걸 하면 일이 더 쉬워질까?"를 먼저 고민하는 것입니다. 이번에는 LLM과 대화식으로 글의 초안을 잡아주는 기능이 핵심이라고 생각했고, 이를 힌트로 전체 프로젝트를 설계해서 진행합니다.
사용한 프롬프트:
https://www.gpters.org/ 와 같이 여러 사람이 study하는 블로그 사이트를 만들려고 해. 무엇보 다도 자신의 경험을 LLM과 채팅하듯이 정리해서, 글 초안을 잡아 주는 기능이 중요하다고 생각해. 이 부분 부터 먼저 만들어 보고 싶어. 계획을 세워보자.이렇게 코딩하는 것은 다음 번에 해보고, 이번에는 다르게 접근했습니다.
1단계: Feature 정리
복잡한 요구 사항을 정리하기 위해, 필요한 모든 기능을 빠짐없이 정리해 달라고 요청했습니다. 이건 Claude가지고 진행했습니다. 아마도 연구를 위해서 여러 단계를 더 거칠 수도 있겠습니다.
사용한 프롬프트:
https://www.gpters.org/ 와 같이 여러 사람이 study하는 블로그 사이트를 만들려고 해. 필요하다고 생각하는 모든 기능을 빠짐 없이 모두 정리해줘. 답은 여기에 올려 두겠습니다.
https://github.com/blcktgr73/StudyBlog/blob/main/documents/FEATURES.md
2단계: PRD(Product Requirements Document) 작성
이를 기반으로 PRD를 만들어 달라고 했습니다.
사용한 프롬프트:
지금까지 확인된 내용을 바탕으로 PRD를 작성해줘. 구현 내용을 Vercel과 같은 서비스를 이용해서 쉽고 빠르게 배포해서 동작을 확인하려고 해.답은 https://github.com/blcktgr73/StudyBlog/blob/main/documents/PRD.md 여기에 올려 두었습니다.
3단계: TRD(Technical Requirements Document) 작성
사용한 프롬프트:
위의 내용을 바탕으로 TRD를 작성해줘.
- 구현 내용을 Vercel과 같은 서비스를 이용해서 쉽고 빠르게 배포해서 동작을 확인하려고 해.
- 상위 설계만 진행해서 알려주고, 상세 설계는 여기서 진행하지 않도록 해.
- 사용될 기술 스택들을 선정하고, 결정 필요한 내용은 네가 적절히 결정해.
- 코딩은 Claude Code를 사용해서 진행할 거야.4단계: TASK 정의 및 Iteration 계획
사용한 프롬프트:
```
위의 내용을 바탕으로 TASK를 작성해줘.
- 구현 내용을 Vercel과 같은 서비스를 이용해서 쉽고 빠르게 배포할거야.
- 작은 단계를 통해서 동작을 확인하고 테스트 하면서 진행할 거야.
- 코딩은 Claude Code를 사용할 거야.
- 단계 별로 진행하기 위해 Iteration 별로 나눠서 진행해줘.
- 제공한 가이드의 Iteration 1을 Claude Code를 이용해서 진행할 거야.5단계: Claude Code로 실제 구현
Claude Code를 사용해 Iteration 1~5를 진행했습니다:
주요 구현 내용:
프로젝트 생성
필수 패키지 설치
shadcn/ui 초기화
데이터베이스(Supabase) 및 인증 시스템
게시글 CRUD 기능, 이미지 업로드
구현한 컴포넌트들:
ThemeProvider: 다크/라이트 모드 지원
Header: 로고, 네비게이션, 테마 토글
Footer: 링크 및 저작권 정보
MainLayout: 전체 레이아웃 구조
홈페이지: Hero, Features, Latest Posts 섹션
https://study-blog-gamma.vercel.app/
결과와 배운 점
성과
2.5일 만에 완전히 동작하는 MVP를 배포했습니다!
완료 태그: v1.5.0-iteration5
📚 배운 점과 꿀팁
1. 문서화의 중요성
PRD, TRD, TASK를 먼저 작성하니 개발 방향이 명확해졌습니다.
Claude Code를 먼저 적용해서, 구현에 가이드가 되도록 했습니다.
2. Iteration 방식의 효과
작은 단위로 나누어 진행하니 문제 해결이 쉬웠습니다.
각 단계마다 배포해서 동작을 확인할 수 있었습니다.
3. Claude Code 활용 팁: CLAUDE.md 파일에 개발 가이드라인 정의
코드 스타일, 컴포넌트 구조 등을 명시
Claude가 일관된 방식으로 개발하도록 도움
4. Vercel 배포 시 주의사항
Git 서브모듈 문제: 일반 디렉토리로 변경 필요
package.json 충돌: 루트와 프로젝트 폴더의 충돌 해결
의존성 관리: next-themes 등 누락된 패키지 확인
🔧 겪었던 시행착오
Vercel cli로 연동 시, github와 연결이 안되어서 제가 수동으로 연결하는 작업이 해야 했습니다. Claude Code가 가이드 해줘서 크게 어렵지 않았습니다.
Vercel Deploy할 때, 내부 모듈을 deploy해야 하는 데, 설정을 잘 못하기도 해서 3번 정도 다시 했습니다.
🚀 앞으로의 계획
최종 목표: LLM 채팅 기반 글 작성 도우미
사용자와 대화하며 글 초안 생성
경험을 구조화된 글로 변환
AI 피드백 및 개선 제안
CLAUDE.md 파일에, context7 mcp 활용하도록 업데이트하여 추후 적용.
나만의 꿀팁
문서 먼저, 코드 나중: PRD → TRD → TASK 순으로 계획 수립
작은 단위로 배포: 매 단계마다 실제 동작 확인
Claude Code 활용: 자연어로 요구사항 전달하면 구현까지 완료
태그로 버전 관리: 각 Iteration 완료시 Git 태그 생성
도움 받은 글
Claude Desktop과 Claude Code가 다했네요.