Speaker A
바이브 코딩 시작하고 싶은데 어디서부터 시작해야 될지 모르시겠죠? 폴더를 먼저 만들어야 하나? 화면부터 그려야 되나? 거기서 며칠 그냥 날아가잖아요. 그거 제가 다 해 놨어요. 이름이 바이브 코딩 스타터킷이에요. 지금 보시는 이 프로젝트 세팅하는 데 3초 걸렸어요.
바이브 코딩 스타터킷을 통해 AI 클로드와 함께 효율적인 프로젝트 세팅과 규칙 기반 개발 방법을 배워보세요.
Ask about this video. Answers come from its transcript only — with the timestamp, so you can check them.
Generated from the transcript and can be wrong — check the timestamp.
Key Takeaways
- 효율적인 바이브 코딩을 위해서는 코드보다 규칙이 먼저 필요하다.
- 스타터킷은 AI 클로드가 규칙을 자동으로 적용해 일관된 코드를 생성하도록 돕는다.
- 프로젝트 구조가 명확히 나누어져 있어 확장성과 유지보수가 쉽다.
- 에이전트 시스템으로 계획과 자료 조사를 분담해 개발 효율을 높인다.
- 코드 뼈대 제공 후 사용자가 직접 개발을 이어가는 방식임을 이해해야 한다.
What the video covers
- 바이브 코딩 스타터킷은 138개의 폴더와 파일, 20개의 규칙 문서, 백엔드와 프론트 구조, 에이전트 2명을 포함한 완성된 프로젝트 세팅이다.
- 코드보다 규칙이 먼저 필요하며, 규칙이 잡힌 코드 베이스에서 AI 클로드가 효율적으로 코드를 작성한다.
- 닷클로드 폴더에 프론트와 백엔드 가이드라인 문서가 포함되어 있어 AI가 규칙을 자동으로 적용한다.
- 백엔드는 파이썬 기반으로 도메인, 서비스, API, DB 등 역할별로 폴더가 나누어져 있어 확장성과 유지보수가 용이하다.
- 프론트는 넥스트와 타입스크립트 기반이며, 디자인.md 파일로 UI 디자인 규칙을 명확히 해 일관성을 유지한다.
- 에이전트 2명은 계획·검토 담당과 자료 조사 담당으로, 프로젝트 진행 전반을 지원한다.
- 클로드.md 파일은 AI가 프로젝트에 처음 들어올 때 읽는 안내문으로, 프로젝트 구조와 규칙을 설명한다.
- 프로젝트 시작은 설치, 클로드에게 세팅 전달, 원하는 기능 요청의 3단계로 간단하다.
- 클로드는 코드를 대신 짜주지 않고 뼈대를 제공하며, 사용자가 직접 개발을 이어가야 한다.
- 이 스타터킷은 메이커 에반의 스킬샵 서비스 기반 코드이며, 현재 할인 이벤트 중이다.
Full Transcript — Download SRT & Markdown
Speaker A
폴더랑 파일 138개, 백엔드 뼈대, 프론트 하면 클로드가 읽을 코딩 규칙 20개 전부 자리 잡힌 상태로 한 번에 깔린 겁니다. 앞 풀면요.
Speaker A
여러분은 만들려던 것만 만들면 돼요. 메이커 에반입니다. 오늘은 이 바이브 코딩 스타터킷 안에 정확히 뭐가 들어 있는지, 왜 이게 코드보다 먼저 필요한지 전부 열어서 보여 드릴게요.
Speaker A
크게 다섯 덩어리예요. 첫째, 클로드가 짜증 나는 코드를 왜 자꾸 갈아붙게 되는지. 둘째, 그걸 막아주는 규칙 파일이 뭔지. 셋째, 백엔드랑 프론트가 어떤 모양으로 미리 잡혀 있는지. 넷째, 같이 들어 있는 에이전트 두 명이 무슨 일을 하는지.
Speaker A
다섯째, 이걸 실제로 어떻게 시작하는지 딱 세 단계로 보여 드려요. 그리고 마지막에는 이 스타터킷을 어디서 받을 수 있는지 말씀드릴게요. 먼저 이 얘기부터 하고 가야 돼요. 솔직한 얘기 하나 할게요. 저도 처음 바이브 코딩 시작했을 때 이상한 경험을 했어요. 분명히 잘 되고 있었거든요.
Speaker A
클로드한테 로그인 만들어 줘 하면 파일이 쭉 나와요. 결제 붙여줘 하면 또 나와요. 일주일 동안 신나게 붙였어요. 근데 2주쯤 지나니까 이상해지는 거예요. 같은 기능이 세 군데에 흩어져 있고요. 어제 만든 파일이 어디에 있는지 제가 모르겠는 거예요. 클로드한테 물어봐도 얘도 헷갈려해요. 왜 그럴까요? 코드는
Speaker A
나왔는데 구조가 안 남았거든요. 비유하자면 이래요. 이사 갈 집에 집을 드리는데 수납장에 하나도 없는 거예요. 첫날은 괜찮아요. 박스 몇 개니까요. 거실에 그냥 둬요. 일주일 뒤엔요, 주방 용품이 침실에 있고 옷이 베란다에 있어요. 이때 선택지가 딱 두 개예요. 그냥 참고 살거나 짐을 다 빼고 처음부터 다시 넣거나.
Speaker A
코드도 똑같아요. 그래서 갈아엎어요. 그리고 갈아엎으면서 이렇게 생각하죠. 내가 실력이 부족해서 그런가 보다. 근데요, 저는 이게 실력 문제가 아니라고 봐요. 규칙 문제예요. 요즘 AI는 파일까지 알아서 만들어 줍니다. 진짜 잘 만들어요. 근데 어떤 규칙으로 짤지 그건 사람이 정해 줘야 되거든요. 규칙을 안 주면
Speaker A
클로드는 매번 자기가 판단해요. 오늘은 이 방식이 좋아 보여서 이렇게 짜고, 내일은 저 방식이 좋아 보여서 이렇게 짜요. 각각 놓고 보면 다 괜찮은 코드예요. 근데 합쳐 놓으면 누더기가 됩니다. 잘하는 사람들은요,
Speaker A
코드보다 규칙을 먼저 줘요. 규칙이 잡힌 코드 베이스에서 AI가 훨씬 잘 짜거든요. 여기서 제가 한 게 뭐냐면요, 제가 실제로 쓰는 그 규칙이랑 구조를 통째로 압축해서 정리해 뒀어요. 압축 한번 풀면 규칙까지 잡힌 프로젝트가 그대로 세팅되는 거예요. 지금부터 그 안을 하나씩 열어 볼게요. 먼저
Speaker A
닷클로드라는 폴더부터 볼게요. 여기가 이 스타터킷의 심장이에요. 뭐가 들었냐면요, 프론트핸드 가이드라인 열 개, 백핸드 가이드라인 열 개, 합쳐서 20개짜리 규칙 문서 응치예요. 이게 뭔지 감이 잘 안 오시죠? 비유하자면요, 인테리어 업체한테 도면 주는 거랑 똑같아요.
Speaker A
도면 없이 예쁘게 해 주세요 하면 업자가 계속 물어봐요. 벽 무슨 색이에요? 콘센트 어디에 달아요?
Speaker A
물어볼 때마다 여러분이 판단해야 하고 판단이 매번 달라지니까 집이 짝짝이가 돼요. 근데 도면을 주면요, 아무도 도면 보고 그냥 해요. 클로드도 똑같습니다. 이 20개 문서 안에 뭐가 적혀 있냐면요, API 주소는 어떻게 만들어라, 데이터베이스는 어떤 방식으로 다뤄라, 에러났을 때는 어디서 잡아라, 화면 부품은 어디
Speaker A
모양으로 쪼개라, 로딩 중일 때랑 실패했을 때 화면은 어떻게 처리해라 이런 것들이 예시 코드까지 붙어서 정리돼 있어요. 여기서 진짜 좋은 게 하나 있어요. 이걸 여러분이 클로드한테 읽으라고 시키지 않아도 돼요. 같이 들어 있는 설정 파일이 하나 알아서 물려줘요. 클로드가 백엔드를 건드리려고 하면 백엔드
Speaker A
규칙을 먼저 펴보고요, 화면 쪽을 건드리면 화면 규칙을 펴봅니다. 전에는 제가 매번 설명했어요. 이거 이렇게 짜 줘, 저 파일은 저기 더 줘, 매 대화마다 매번요. 규칙 넣은 뒤에는요, 그냥 화면 기능 만들어 줘, 한 마디면 끝나요. 어디에 뭘 둘지는 클로드가 이미 알고
Speaker A
있으니까요. 이 문서 20개 제가 처음부터 쓰려고 하면 며칠 걸립니다. 그게 이미 들어 있는 거예요. 두 번째는 백엔드예요. 여기가 제일 자주 무너지는 곳이거든요. 스타터킷 백엔드는 파이썬으로 되어 있고요,
Speaker A
서랍이 미리 다 나눠져 있어요. 폴더 이름을 그대로 읽어 드릴게요. 도메인, 서비스, API, DB, 미들웨어, 에러, 유틸, 나선다라는 들죠. 근데 주방으로 비유하면 별거 아니에요. 도메인 레시피예요. 우리 서비스가 실제로 하는 일이 여기 있어요. API는 주문 받는 창고요, DB는 냉장고예요. 에러는 뭐가 잘못됐을 때
Speaker A
처리하는 곳이고요. 이게 왜 중요하냐면요, 어디에 뭘 둘지가 이미 정해져 있으면 기능을 100개 붙여도 안 무너져요. 새 기능이 들어와도 들어갈 자리가 있으니까요. 반대로 서랍이 없으면요, 기능 하나 붙일 때마다 이건 어디 두지 하면서 몇 번 새로 고민해요. 그 고민을 클로드가
Speaker A
대신하면 아까 말씀드린 그 누더기가 됩니다. 그리고 여기 얹혀 있는 게 또 있어요. 데이터베이스 구조 바꾸는 도구, 테스트 돌린 세팅, 도커 설정, 로그 찍는 도구, 에러 처리도 한 군데서 다 밖에 미리 연결돼 있고요.
Speaker A
이거 하나하나 직접 붙여 보신 분들은 아실 거예요. 이거만 세팅하는 데 하루 이틀 그냥 갑니다. 그게 압축 푸는 순간순간 다 끝나 있어요.
Speaker A
여기까지 오셨으면 이런 생각 드실 수 있어요. 이거 결국 세팅 모음집 아니야? 반은 맞고 반은 틀려요.
Speaker A
세팅은 뭐 한 둔 거였으면 저도 이렇게 오래 안 썼어요. 핵심은요, 세팅이랑 규칙 문서가 같은 프로젝트 안에 붙어 있다는 거예요. 클로드가 코드를 짜기 전에 그 규칙을 먼저 읽는다는 것. 이 조합이 되는 순간 여러분이 클로드한테 잔소리를 안 하게 돼요. 실제로 써 보신 분이 이렇게 남겨 주셨습니다. 이
Speaker A
스타터킷을 이용하고 바이브 코딩이 훨씬 쉬워졌습니다. 저는 이 한 줄이 제일 정확한 설명이라고 생각해요. 계속 볼게요. 세 번째는 프론트.
Speaker A
그러니까 눈에 보이는 화면 쪽이에요. 여기는 이미 돌아가는 상태로 들어가 있어요. 넥스트에 올라가 있고 타입스크립트 세팅돼 있고 샤드 CN UI라는 컴포넌트 도구까지 붙어 있어요. 버튼, 카드, 입력창 기본 부품은 이미 만들어져 있고요. 폴더도 미리 나눠져 있고요. 화면 틀 넣는 곳, 부품 놓는 곳, 공용 설정
Speaker A
놓는 곳 각각 자리가 있어요. 근데 제가 여기서 제일 좋아하는 파일은 따로 있어요. 디자인.md라는 파일이에요. 디자인 규칙을 적어두는 종이 한 장이거든요. 색깔은 뭐지, 글자 크기는 어떻게 갈지, 간격은 얼마나 둘지 이걸 왜 파일에 적어 두냐면요, 안 적어 두면 클로드가
Speaker A
매번 다른 파란색을 씁니다. 진짜예요? 오늘 만든 버튼이랑 내일 만든 버튼 색이 미묘하게 달라요. 하나씩 볼 땐 몰라요. 화면 열 개 만들고 나면 그때 보여요. 그때 고치려면 열 개를 다 손봐야 되고요.
Speaker A
규칙을 먼저 주면 그 일이 아예 안 생겨요. 이게 아까부터 계속 나오는 얘기죠. 코드보다 규칙이 먼저다. 네 번째는 좀 다른 얘기예요. 이 스타터킷 안에는 에이전트가 두 명 들어 있어요. 에이전트라는 단어가 좀 어렵게 들리실 텐데요, 쉽게 말하면 특정 일만 전담하는 클로드예요. 한 명은 계획, 검토 담당이에요.
Speaker A
여러분이 이런 기능 만들 건데 이렇게 갈게 하고 계획을 짜면요, 이 친구가 그걸 먼저 읽고 따져 봐요. 빠진 거 없나? 이 방식으로 가면 나중에 문제 생기지 않나? 공사 시작 전에 도면 한번 검토해 주는 선배 같은 거예요.
Speaker A
벽 다 세우고 나서 여기 문 있어야 하는데 하면 늦잖아요. 다른 한 명은 자료 조사 담당이에요. 모르는 게 나오면 인터넷을 뒤져서 정리해 오는 친구예요. 이 라이브러리 사용법이 바뀌었다든지, 이 얘를 남들이 어떻게 풀었다든가 클로드가 아는 것도 결국 어느 시점까지의 지식이거든요. 최신 상황은 찾아봐야 알아요. 이 두 명이
Speaker A
왜 스타터킷에 같이 들어 있냐면요, 제가 실제로 이 흐름으로 일하기 때문이에요. 계획하고 검토 받고 모르는 건 찾아보고 그다음에 코드를 짜요. 바로 코드부터 안 짜요. 이 순서 하나만 바꿔도 갈아엎는 횟수가 확 줄어듭니다. 솔직히 말씀드리면요,
Speaker A
여기까지가 좋은 폴더 모음이에요. 진짜 차이는 지금부터 말씀드린 파일 하나에서 나요. 이 스타터킷에서 제일 중요한 파일이 뭐냐고 모르지만 저는 클로드.md라고 MD라고 답할 거예요. 이게 뭐냐면요, 클로드가 이 프로젝트 처음 들어올 때 읽는 안내문이에요. 신입 직원 첫 출근을 생각해 보세요. 책상에 안내문 한 장
Speaker A
놓여 있는 거예요. 우리 회사는 이걸 만들고 자료는 여기 있고 이건 하면 안 되고 이거 있는 회사랑 없는 회사 신입 적응 속도가 완전히 다르잖아요.
Speaker A
클로드도 똑같아요. 여기 뭐가 적혀 있냐면요, 이 프로젝트가 뭘 만드는 건지, 프론트가 백엔드가 어디 있는지, 어떤 규칙 문서를 언제 펴봐야 하는지, 색을 어떤 순서로 만들어야 하는지 그리고 하나 더 있어요.
Speaker A
skills.ru.j이라는 제이슨이라는 파일인데요, 언제 어떤 규칙을 꺼내 가지고 할지 다 적혀 있습니다. 이제 실제로 시작하는 법 볼게요.
Speaker A
세 단계밖에 없어요. 1단계, 설치 한 줄을 받아요. 2단계, 클로드한테 그 한 줄을 건네 주세요. 그다음으로 3단계는 아, 만들고 싶었던 걸 바로 말하세요.
Speaker A
여기가 제일 중요해요. 세팅이 끝났으니까 이제 기능만 얘기하시면 됩니다. 이때 클로드가 뭘 하냐면요, 먼저 안내문을 읽습니다. 그다음 백엔드 규칙을 펴 봐요. 정해진 자리에 파일을 만들어요. 뭐 이런 식으로 쭉쭉쭉 진행이 됩니다. 칭찬만 하면 이상하니까 솔직한 얘기도 할게요. 두 가지는 꼭 알고 계셔야
Speaker A
됩니다. 첫째, 클로드 코드 환경이 필요합니다. 둘째, 코드를 대신 짜주지는 않습니다. 이 친구는 어, 전반적인 어떤 뼈대를 제공을 해 주는 거지 실제로 코드를 짜 주지는 않아요. 그렇기 때문에 이 코드를 기반으로 해 가지고 여러분만의 코드를 개발을 하셔야 됩니다. 정리하자면 이 안에 뭐가 들어 있냐면 폴더랑 파일
Speaker A
138개, 클로드가 읽는 규칙 문서 20개, 계획 검토하고 자료 찾아주는 에이전트 두 명, 뭐 이런 식으로 쭉쭉쭉 나와 있다고 보시면 될 것 같습니다. 그리고 이 스타터킷은 결정적으로 제 스킬샵이라는 이 서비스를 만드는 베이스 코드예요. 그래서 사실 이 소스 코드 기반으로 해 가지고 스킬샵이 지금까지 다 만들어 줬고요,
Speaker A
거의 모든 기능이 다 이 코드 기반으로 해 가지고 만들어졌다고 보시면 될 것 같습니다. 그리고 이 스킬샵에서 이 스타터킷은 49,900원에 지금 팔고 있고요. 원가는 99만 9,000원인데 지금 구독자 이벤트로 절반 할인하고 있습니다.
Speaker A
벌써 446명이나 받아 가셨어요. 더 깊은 얘기는 이 스킬샵 오픈톡방에서 지금 나누고 있으니까 한번 참여해 주시면 감사하겠습니다. 많은 구매 부탁드립니다. 감사합니다. 오늘 영상 여기까지 할게요.
Topics:바이브코딩AI코딩클로드스타터킷메이커에반백엔드구조프론트엔드코딩규칙프로젝트세팅스킬샵
![[Poe 3.29] 엘리 화염구빌드 제작가이드 / 매물이 없다면 만들어보세요 — Transcript](https://i.ytimg.com/vi/l2P7-4gCCs8/maxresdefault.jpg)
