간단한 바이브 코딩(Vibe Coding) 튜토리얼입니다.
개발 도구는 커서(Cursor)와 챗지피티 그리고 v0.dev 를 사용해봅니다.
TL;DR
요구사항 문서와기술 스텍 문서를ChatGPT에서 작성한다.v0.dev에서HTML파일을 생성한다.커서에 생성된 문서와 파일들을 넣는다.바이브 코딩을 시작한다.
1. 요구사항 정리
아이디어가 떠올랐다면, 먼저 PRD(프로젝트 요구사항 문서)를 만듭니다.
프롬프트는
간단한 퀴즈 서비스를 만들려고 해. PRD를 만들어줘.
한번에 하나씩 필요한 만큼 질문을 해줘
처럼 작성하면 된다.
질문에 하나씩 답을 하면 PRD가 만들어진다.
만들어진 PRD를 커서에 복사해 넣는다.
- 메뉴로 추가할 때는
Cursor-Settings-Cursor Settings-Rules-Add Rules - 폴더에 추가할 때는
.cursor/rules폴더에
파일 이름은 적당히 (project-requirements-document.mdc정도로) 정해준다.
2. 기술 스펙 작성
기술 스펙도 마찬가지 방식으로 작성한다.
상기 PRD에 기반하여 Technical Specification 를 작성해줘.
필요한 만큼 질문해줘.
PRD와 마찬가지로 질문에 답을 하면 작성해준다.
PRD나 TechSpec 을 작성할 때는 기술적 배경이 있으면 유리하다. 예를들어
- HTMX를 쓸지. React 를 쓸지.
- 배포에서는 Docker 를 쓸지, nginx+gunicorn 과 systemd 를 쓸지
- 파이썬 패키징은 uv 를 쓸지 pip 를 쓸지.
를 지정해주는 식으로 자기에게 유리하게 문서를 작성할 수 있다. (모르면 시키는 대로 당함)
3. 디자인
작성된 PRD와 TS를 v0.dev 에 업로드 하고 UI를 만들라고 지시한다.
마음에 드는 UI가 만들어질 때까지 이제 v0.dev 에서 채팅을 하면서 조정한다.
생성된 파일들을 다운로드하거나 복사해서 커서에 넣는다.
나의 경우는 design_sample 폴더를 만들어서 거기에 넣는다.
이 부분은 만약 디자인 이미지가 있다면 HTML 파일을 작성하는 시점에 커서에 입력해서 코드를 작성하게 할 수도 있다.
4. 바이브 코딩 시작
이제 커서의 채팅 창에서 Agent 모드를 선택한다.
이제 커서가 코딩을 시작한다.
5. 실행
커서내에서 실행해서 결과를 보면서 코딩을 이어갈 수 있다.
터미널 판넬에서 docker compose up --build 혹은 환경에 따라 uv run manage.py ... 등을 실행하고 우측의 AI 채팅 창에서 기능 추가 명령을 하는 식으로 진행하면 된다.
