풀스택 앱을 "바이브 코딩"하기 위한 구조화된 워크플로우 요약

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발, 개발 툴, DevOps

대상자

• *프론트엔드/백엔드 개발자, AI 도구 활용 초보자**
• 난이도 관점: 중급 이상 (AI와 프레임워크 연동 경험이 필요)*

핵심 요약

• AI와 프레임워크 연동을 통한 개발 효율성 향상: Wasp, Shadcn-admin 등 풀스택 프레임워크와 UI 라이브러리 활용으로 반복 작업 감소
• LLM 제어를 위한 구조화된 규칙 정의: .cursor/rules/ 디렉토리에 규칙 파일 생성, 프로젝트별 컨벤션 명시
• 수직 분할 방식(Vertical Slice Method): 단계별 기능 구현 (DB → 서버 → UI)으로 복잡도 관리, 계획서(PRD) 기반 개발

섹션별 세부 요약

1. 풀스택 프레임워크와 UI 라이브러리 활용

• Wasp, React, Node.js, Prisma 등 기존 프레임워크 활용으로 기본 기능 자동화
• UI 라이브러리(예: Shadcn-admin) 사용으로 스타일 일관성 유지 및 반복 작업 감소
• main.wasp 설정 파일에서 백엔드 작업 정의, 서버 설정 자동화

2. LLM 제어를 위한 규칙 정의

• .cursor/rules/ 디렉토리에 프로젝트별 규칙 파일 생성 (예: 7-possible-solutions-thinking.mdc)
• 명확한 컨텍스트 제공: 프로젝트 목적, 사용 템플릿, 규칙(관례) 명시
• 규칙 파일에 전략적 접근 방식 정의 (예: "세 가지 해결책 고려 후 선택")

3. 수직 분할 방식과 PRD 기반 개발

• 수직 분할: 기능별 단위로 DB → 서버 → UI 전반 구현 (예: 인증 기능 우선 개발)
• PRD 생성 후 수직 분할 방식으로 단계별 계획 수립 (예: "단계별 실행 계획" 프롬프트 활용)
• 계획서 수정 시 LLM 피드백 활용 (예: "문서 검토 후 개선 제안 요청")

4. 문서화 및 지식 베이스 구축

• 기능 구현 후 AI 문서화 요청: ai/docs/ 디렉토리에 마크다운 파일 생성
• 문서화 내용 포함: 핵심 로직, 계층 간 연결 방식, 주요 결정 사항, 파일 위치
• 지식 베이스 확장: AI와 인간 모두가 참고할 수 있는 내부 문서화

5. 워크플로우 반복 및 개선

• 규칙, 계획, 워크플로우 자체를 "생존 문서"로 관리
• AI 피드백을 통한 지속적 개선: 규칙 수정, 계획 업데이트, 문서화 보완

결론

• "바이브 코딩" 성공 조건: 튼튼한 프레임워크 기반 + 구조화된 규칙 + 수직 분할 방식 + 지속적 문서화
• 실무 팁: PRD 작성 시 "수직 분할" 기반 계획서 생성, AI에게 규칙 파일과 문서화 요청 반복, Wasp 프레임워크 활용
• 결론: AI와 협업을 통해 20~50배 빠른 개발 가능, 단순 프롬프트 초월한 실전 워크플로우 구축 가능