본문 바로가기

Vibe Coding

간단한 to do 리스트 관리 웹페이지 만들기

github: https://github.com/wasdq1234/vibe_simple_todo

1. AI를 이용하여 계발 계획서 만들기

IMG-20250701225553406.png

2. 프로젝트에 문서파일 생성

.taskmaster/docs/plan.md파일을 생성해여 계획서 붙여넣기

IMG-20250701225553447.png

3. Prd파일 생성

plan.md파일을 example_prd.txt파일의 포멧을 참고하여 prd.txt파일을 생성해달라고 했다

IMG-20250701225553480.png


그런데 영어로 생성해서 한글로 번역해달라고 하자

IMG-20250701225553507.png


시스템 구성요소에 프론트엔드가 그냥 html과 JavaScript 사용하게 되어있어 NextJS를 사용해 달라고 수정 요청

IMG-20250701225553534.png


시스템 구성요소 뿐만아니라 문서 전체의 내용을 알맞게 수정해줌

4. prd.txt를 이용하여 task생성

IMG-20250701225553559.png


IMG-20250701225553586.png


task의 복잡성을 분석해달라고 한다.

IMG-20250701225553616.png


분석이 끝나면 5점 이상의 테스크는 서브테스크로 분할하는것이 좋다고 하니 그렇게 해달라고 한다.
복잡도 분석 결과와 서브태스크 생성 결과

IMG-20250701225553648.png


IMG-20250701225553675.png

5. 개발 시작

task를 순차적으로 진행해 달라고 하자

IMG-20250701225553703.png


태스크를 진행중이고 에러가 발생해도 수정해서 진행한다.

IMG-20250701225553734.png


태스크를 조회해보면 상태가 'in-progress'로 변경된다.

6. 실행 및 결론

전체를 개발하는데 처음에는 claude code를 사용하다가 api비용이 많이 들어 중간에 cursor로 진행했음
claude code는 구독하지 않았고, cursor는 구독중

claude code가 아무래도 터미널 cli로 진행되다보니 mcp설정 등 비개발자한테는 진입장벽이 있어보임

그리고 최대한 개입을 안하고 개발을 진행하다보니 원하지않은 구조 코드 등 불필요한 내용이 많음
아래 유튜브에서 vibe coding의 한계점과 해결방안으로 Augmented Coding이라는걸 설명해주시는데 공감이 많이 됨
P.E.C with Boaz(Product Engineer Community)
https://www.youtube.com/watch?v=xbPoEtEGcmg&t=10s

IMG-20250704153058460.png