안녕하세요. 로앤하이입니다. 저희 팀원들이나 제 주변 지인분들도 바이브 코딩에 관심이 많아서 하나하나 설명하기도 힘들거니와 제 주변 지인분들처럼 아주 기초적인것부터 뭘 해야할지 어려워 하시는분 저처럼 개발을 전혀 못하지만 바이브 코딩을 하고 싶은 분들을 위해서 이 글을 남깁니다.

일단 최근 Ai 바이브코딩 툴이 범람하고 커서, 윈드서프, 제미나이, 그리고 MCP는 또 뭐고 기타등등 수많은 툴들이 쏟아지고 정보에 홍수죠? 그런것들을 모두 알면 더 제대로 바이브코딩을 할 수 있겠지만 그걸 모두 알려면 질려서 시작도 못할 수 있습니다. 그렇다고 지금 제가 알려드리는 방법보다 결과물이 드라마틱하게 좋지도 않습니다. ㅎㅎ

제가 가장 중요하게 생각하는 just do it을 하기 위해 우리는 뭐가 좋은지 어떻게 하면 더 좋을지 생각을 내려놓기로 하죠.

이 글을 쓰는 시점에서 실제로 빌드하는 분들이 모두 인정하는 바이브 코딩 툴의 원탑은 클로드 코드 프레임웍 Rails 입니다.

개발 모르시는분들은 프레임웍도 잘 모르실 수 있는데 그냥 클로드 코드한테 레일즈로 코딩 해줘 라고 한다. 이해하시면 됩니다.
다른 걸로는 C언어로 코딩 해줘, 파이썬으로 코딩 해줘랑 비슷하다고 이해하시면 됩니다. 너무 깊게 이해하지 않으셔도 되요. 우린 결과물이 중요하니까요.

서론이 길었으니 그냥 깔끔하게 순서대로만 하시면 되도록 안내하겠습니다.
모든 설명은 맥의 터미널을 기준으로 합니다.

이 영상은 클로드 코드 설치와 환경설정, 그리고 레일즈 설치의 바이블입니다. 꼭 보세요. 두번 보세요.
https://youtu.be/x2DxwT94yfA

초보자이지만 좋은 결과물을 뽑는 방법. #

일단 위 영상을 보시고 레일즈까지 설치하셨다는 가정하에 이야기를 시작합니다.

1.가장 중요한건 PRD(제품 요구사항 정의서)문서를 만드는것입니다. #

아래는 제가 공유오피스 예약 관리 시스템에 대한 PRD 문서 만들어달라는 프롬프트 예시입니다.
이 프롬프트로 작성된 prd.md 파일은 이 글 첨부파일에 첨부했습니다.

"우리는 공유오피스인데, 입주사들이 회의실을 웹에서 편하게 예약할 수 있는 웹앱을 만들고 싶어, 기본 첫번째 화면은 시간이 먼저 나왔으면 좋겠고, 입주사 로그인은 별도로 필요없지만 예약할때 입주사 호실을 입력해서 몇호가 예약중인지 알 수 있도록 해줘, 그리고 관리자는 로그인을 통해서 어느 호실이 예약을 많이 하는지 총 이용율은 얼마인지 대시보드가 나오게 해주고 입주사 등록/삭제 기능이 있으면 좋겠어. 미팅룸1은 4~6인이고, 미팅룸 2는 8~10인이야. 그리고 첫번째 페이지에 공유오피스 공지사항을 적는 란이 있었으면 좋겠고, 공지 사항은 관리자페이지에서 작성할 수 있도록 해줘. 위 웹앱은 레일즈로 만들 계획이고 DB는 sqlite3로 만들꺼야.

위 내용으로 prd 문서를 만들어줘."

여기서 중요한 포인트는 마지막에 위 웹앱은 레일즈로 만들 계획이고 DB는 sqlite3로 만들꺼야. 입니다. 이걸 넣으시면 스펙을 레일즈와 sqlite3로 만들 계획을 세워줍니다. sqlite3가 뭐냐구요? 그건 그냥 데이터베이스중 하나다. 정도로만 알고 넘어가고 하시면서 궁금하면 하나씩 찾아보시는게 좋습니다. 지금은 머리 아파니까요.

그리고 위 내용처럼 최대한 내가 뭐가 필요한지를 디테일하게 잘 정리해서 애기해줘야 합니다. 꼭이요~

2. claude.md 파일에 ## Rules 잘 넣기. #

더 좋은 Rules를 넣으면 더 잘나오겠지만 지금 제가 만드는건 다 이정도 Rules만 넣고 만든것들이니 저와 같은 퀄리티까지는 만드실 수 있습니다. Rules는 행동 양식을 정해주는거라고 이해하시면 될것 같아요. 아래의 것들을 지켜가면서 코딩해줘. 같은거죠.

Rules는 제가 ## Rules.md 파일로 첨부해뒀으니 그 내용을 claude.md 끝에 붙여넣으시면 됩니다.

이제 준비는 끝났습니다. 별거 없죠?

이제 시작 #

이제 클로드를 켜고 prd.md 문서를 드래그앤드랍으로 던져놓고 이렇게 얘기하면 알아서 시작하고 짜잔~ 하고 만들어냅니다.

지금 첨부한 prd 문서를 보고 레일즈로 제작해줘

그리고 1시간~3시간정도 계속 뭔가를 클로드 코드가 일을 할거예요.
pro 버전을 쓰시면 앱의 사이즈에 따라 2~3번 멈출 수 있습니다. 5시간 후에 풀리니 걱정마시고 다른일 하시다가 하셔도 됩니다.
처음에 만들고 나면 그다음부터는 그래도 토큰소모가 많이 줄어드니까요.

./bin/dev로 웹서버를 띄우면 크롬/사파리 같은 브라우저에서 localhost:3000 이라고 치면 완성된 사이트가 짜잔~ 나옵니다.

고치기 #

근데 처음 접속 하자마자 화면이 안나오고 빨간색으로 에러가 와라라라 나올수도 있어요.
쫄지 마시고, 그냥 전체 드래그해서 복사하고 클로드에 붙여넣기 하면서 이렇게 애기해주세요.

서버 접속하자 마자 에러나네 ctrl-v, 고쳐줘

그럼 화면이 잘 보일거예요.

또 고치기 #

그럼 결과물이 항상 같진 않지만 꽤 그럴듯하게 웹사이트가 나올거예요.
심지어 이 결과물은 겉보기만 있는게 아니라 DB까지 모두 완성된 버전입니다. 어메이징하죠!

근데 버튼을 눌러보면 아까 그 빨간색 에러가 무수히 나올겁니다. 뭐 되는게 없을정도로 많을수도 있어요.
근데 그냥 에러 복붙하고 고쳐줘라고만 하시면 다 해결됩니다.

신규기능 추가하기 #

이제 어느정도 됐으면 신규기능을 추가합니다. 예를들어서 공유오피스 예약 프로그램이라면,
날짜를 선택할때 캘린더로도 선택할 수 있게 해줘
예약을 할때 비밀번호를 설정하고, 취소하려면 비밀번호를 물어보게 해줘
에약한걸 드래그앤드랍으로 다른곳으로 이동할 수 있도록 해줘
관리자 대시보드 만들어줘

이제부터 계속 해줘로 뭘 시킬지만 잘 선택하시면 계속 좋은 기능들이 추가되는 멋진 웹프로젝트를 보실 수 있을겁니다.

위 내용으로 디버깅까지 8시간 정도 걸려서 만든 공유오피스 회의실 예약 프로그램 영상 공유드립니다.
https://youtu.be/Kndb2ineALM

다들 바이브코딩 화이팅 하셔요~