바이브코딩 라이브 | 커서맛피아가 대신 만들어드림 #2
- 이번 라이브는 사용자 요청에 따라 ADHD 진단 서비스인 'Focus OS'의 MVP를 바이브 코딩으로 제작하는 과정을 시연합니다. 🛠️
- 'Focus OS'는 ADHD 개선 및 집중력 향상을 위한 종합 플랫폼으로, 진단 테스트, 미니 게임, 결과 대시보드, 커뮤니티 기능 등을 포함합니다. 🧠
- 콘텐츠를 무료로 제공하는 이유는 비개발자에게 바이브 코딩 시작법을 전달하고, 코드베이스 세팅 노하우 공유, 개인적인 즐거움, 그리고 부스터 서비스 홍보 목적입니다. 🎁
- AI 도구 활용법은 ChatGPT를 아이디어 발산 및 자료 조사에, Gemini를 기존 문서 검토 및 최적화 등 수렴적 사고에 활용하여 효율을 높입니다. 💡
- MVP 핵심 기능은 랜딩 페이지, 온보딩 및 전자 동의, 간단한 초진 스크리닝, 집중 실행 미니 테스트, 그리고 결과 대시보드로 구성됩니다. 📋
- 기술 스택은 Next.js 15, TypeScript, Tailwind CSS, Supabase(인증 및 DB), EasyNext(프로젝트 템플릿), 그리고 Claude Code, Gemini, ChatGPT 같은 AI 도구를 사용합니다. 💻
- 바이브 코딩 워크플로우는 부스터를 통해 PRD, TRD, 코드 가이드라인을 생성하고, Claude Code의
init 명령어로 프로젝트 구조를 분석한 후 실제 코딩을 진행합니다. 🚀
- 호스트는 개인적으로 Cursor를 선호하지만, 사용량 제한 때문에 이번 라이브에서는 Claude Code를 사용하며, Claude Code의 풍부한 사용량을 장점으로 언급합니다. ⚖️
- EasyNext는 AI 코딩에 최적화된 프로젝트 템플릿으로, 필수 유틸리티 라이브러리와 Supabase 통합을 간편하게 제공하여 개발 시작을 용이하게 합니다. ✨
- Supabase 연동은 EasyNext를 통해 빠르고 간편하게 이루어지며, Supabase MCP 대신 직접 연동 방식을 사용하여 보안을 강화하는 방법을 시연합니다. 🔒
- VS Code 확장 프로그램 개발 시 AI는 초기 코드베이스 세팅에 취약하므로, 템플릿을 활용하여 시작하는 것을 권장합니다. 🧩
- 개발 환경으로 Mac을 추천하며, 윈도우보다 정신적 스트레스가 적고 효율적인 개발 경험을 제공한다고 언급합니다. 🍎