바이브 코딩, 3초 만에 시작! 초보도 완벽 정복하는 스타터킷 (폴더 138개 한방에)

바이브 코딩, 막막하다면? '바이브 코딩 스타터킷'으로 시작하자!

바이브 코딩, 어디서부터 시작해야 할지 막막했지? 폴더부터 만들어야 하나, 화면부터 그려야 하나 고민하다 시간만 날렸다면 주목! '바이브 코딩 스타터킷'이 네 고민을 한 번에 해결해 줄 거야.

이 스타터킷, 프로젝트 세팅하는데 딱 3초 걸렸어. 폴더, 파일 138개, 백엔드 뼈대, 프론트엔드, 클로드가 읽을 코딩 규칙 20개까지 전부 세팅된 상태로 말이지. 이제 너는 네가 만들고 싶었던 것만 만들면 돼!

이 영상에서는 스타터킷 안에 뭐가 들어 있고, 왜 이게 코드보다 먼저 필요한지, 그리고 어떻게 시작하는지 전부 알려줄게.

스타터킷, 뭐가 들어있을까?

크게 다섯 가지로 나눠서 볼 수 있어.

1. 왜 코드를 자꾸 갈아엎게 될까? (규칙의 중요성)

   • 처음엔 잘 되는 것 같아도, 시간이 지나면 코드가 뒤죽박죽 되는 경험 다들 있을 거야. 같은 기능이 여러 곳에 흩어져 있거나, 내가 만든 파일이 어디 있는지 모르는 상황 말이지.
   • 이건 코드가 문제라기보다 구조와 규칙이 없어서 생기는 문제야. 마치 수납장 없는 집에 짐을 넣으면 나중에 다 엉망이 되는 것처럼 말이야.
   • AI는 코드를 잘 만들어주지만, 어떤 규칙으로 짤지는 우리가 정해줘야 해. 규칙이 없으면 AI는 매번 자기 판단대로 코드를 짜고, 결국 누더기가 되는 거지.
   • 잘하는 사람들은 코드보다 규칙을 먼저 줘. 규칙이 잡힌 상태에서 AI가 코드를 짜면 훨씬 잘 나온다는 거야.

2. 코드를 갈아엎는 걸 막아주는 규칙 파일!

   • 스타터킷의 심장인 .cloud 폴더에는 프론트엔드 가이드라인 10개, 백엔드 가이드라인 10개, 총 20개의 규칙 문서가 들어있어.
   • 이건 마치 인테리어 업체에 주는 도면과 같아. 도면이 있으면 업자가 알아서 척척 일을 진행하듯, 클로드도 이 규칙을 보고 알아서 코드를 짜.
   • API 주소 만드는 법, 데이터베이스 다루는 법, 에러 처리 방법, 화면 부품 나누는 법 등 구체적인 내용이 예시 코드와 함께 담겨 있지.
   • 더 좋은 건, 이 규칙 문서를 클로드에게 직접 읽으라고 시키지 않아도 된다는 거야. 설정 파일이 알아서 규칙을 적용해줘. 이제 "이거 이렇게 짜 줘"라고 매번 설명할 필요 없이 "기능 만들어 줘" 한마디면 끝!

3. 미리 잡혀있는 백엔드와 프론트엔드 뼈대

   • 백엔드: 파이썬으로 되어 있고, domain, service, api, db, middleware, error, util 등 서랍이 미리 나눠져 있어. 마치 주방에 레시피, 주문 받는 곳, 냉장고가 나눠져 있는 것처럼 말이야. 어디에 뭘 둘지 정해져 있으면 기능을 100개 붙여도 무너지지 않아.
   • 데이터베이스 구조 바꾸는 도구, 테스트 설정, 도커 설정, 로그 찍는 도구 등 하루 이틀 걸리는 세팅들이 이미 다 끝내져 있어.
   • 프론트엔드: 넥스트(Next.js) 기반에 타입스크립트, 샤드 cn UI 컴포넌트까지 세팅되어 있어. 버튼, 카드, 입력창 같은 기본 부품도 이미 만들어져 있고, 폴더 구조도 미리 나눠져 있지.
   • 특히 design.md 파일에는 디자인 규칙이 적혀 있어. 색깔, 글자 크기, 간격 등을 정해두면 클로드가 매번 다른 색을 쓰거나 하는 일을 막을 수 있어.

4. 함께 들어있는 두 명의 에이전트

   • 스타터킷에는 특정 일만 전담하는 AI, 즉 에이전트 두 명이 들어있어.
   • 첫 번째 에이전트: 계획, 검토 담당이야. 네가 기능을 만들겠다고 하면, 먼저 빠진 건 없는지, 나중에 문제 생기지 않을지 검토해주는 공사 시작 전 도면 검토해주는 선배 같은 역할이지.
   • 두 번째 에이전트: 자료 조사 담당이야. 모르는 게 나오면 인터넷을 뒤져서 최신 정보를 정리해주는 친구야. 클로드의 지식은 어느 시점까지의 정보이기 때문에, 최신 상황을 찾아봐야 할 때 유용해.
   • 이 두 에이전트 덕분에 계획하고 검토하고 모르는 건 찾아보고 나서 코드를 짜는 흐름이 만들어져. 바로 코드부터 짜는 것보다 훨씬 효율적이고, 갈아엎는 횟수도 줄어들지.

5. 실제로 시작하는 법 (딱 세 단계!)

   • 1단계: 설치. 딱 한 줄의 명령어를 받으면 돼.
   • 2단계: 클로드에게 건네주기. 받은 한 줄을 클로드에게 주면 알아서 설치가 진행돼.
   • 3단계: 만들고 싶었던 걸 바로 말하기. 세팅이 끝났으니 이제 네가 만들고 싶었던 기능을 바로 클로드에게 말하면 돼! 클로드는 안내문을 읽고, 규칙을 보고, 정해진 자리에 파일을 만들면서 코드를 짜기 시작할 거야.

꼭 알아야 할 두 가지!

• 클로드 코드 환경이 필요해. 이건 당연하겠지?
• 코드를 대신 짜주지는 않아. 스타터킷은 뼈대를 제공하는 거지, 네가 이 코드를 기반으로 직접 개발해야 해.

그래서 스타터킷에 뭐가 들어있다고?

• 폴더와 파일 138개
• 클로드가 읽는 규칙 문서 20개
• 계획, 검토, 자료 조사를 해주는 에이전트 두 명

이 모든 게 들어있어!

이 스타터킷은 내가 실제로 쓰고 있는 '스킬샵'이라는 서비스를 만드는 베이스 코드야. 거의 모든 기능이 이 코드 기반으로 만들어졌지.

이 스타터킷은 스킬샵에서 49,900원에 구매할 수 있어. 원래는 999,000원이지만, 지금 구독자 이벤트로 반값 할인 중이야! 벌써 46명이 받아갔다고 하니 서둘러!

더 궁금한 점은 스킬샵 오픈톡방에서 나누고 있으니 참여해봐!

많은 구매 부탁해!