Video: 바이브 코딩은 이렇게 하셔야 합니다 (필수 스킬 6개)
Channel: castlestudio
Duration: 36m 6s
Source: subtitle (auto, ko)
Transcript:

안녕하세요. 아는 개발자 캐슬입니다. 8년차 개발자인 제가 바이브 코딩하는 과정을 전부 보여 드릴 겁니다. 그 과정에서 제가 매일 사용하는 스킬 여섯 개가 있는데 이거를 어떻게 사용하는지도 알려 드릴 겁니다. 저는 클로드 코드를 사용할 거지만 코덱스나 안티그래비티를 사용하시는 분들도 따라오실 수 있게 구성을 했으니까요. 끝까지 시청 부탁드리겠습니다. 자, 다음은 제가 바이브 코딩하면서 설명드릴 여섯 개 스킬을 정리한 표고요. 제가 일부러 바이브 코딩하는 순서에 맞게 이렇게 정렬을 해 봤습니다. 첫 번째 그릴미라는 스킬로 대략적인 기획을 잡을 거고요. 그리고 투d라는 스킬로 문서를 만들 거고 구체적인 기획을 잡을 겁니다. 그리고 투 이슈스라는 스킬을 통해서 앞서 만든 그 PRD 문서를 토대로 구체적인 작업 단위로 쪼갤 거고요. 그리고 그 작업 단위를 하나씩 구현한 다음에 케이브맨으로 토큰을 절감하는 방법과 작업 단위가 길어졌을 때 세션을 인수인계할 수 있는 핸드오프. 그리고 마지막으로 구현이 어느 정도 완료됐을 때 코드베이스를 개선할 수 있는 인프루브 코드베이스까지 소개를 해 드릴 겁니다.이 흐름대로 따라오시면 되고요.이 각 스킬들이 뭐고 그리고 어떻게 사용하는지 직접 보여 드릴 거고 그리고 기에서이 스킬 프롬프트를 직접 확인을 하면서 어떤 식으로 프롬프트가 작성되어 있는지 확인을 할 겁니다.

자 그러면 그릴미부터 살펴보겠습니다. 저희가 프롬프트를 일일이 작성하기 귀찮을 때가 있죠. 그럴 때이 스킬을 사용하게 되면 클로드 코드가 알아서 필요한 질문들을 해 줍니다.이 그릴이라는 뜻이 원래 구워삼다라는데 이게 실제로는 꼬찌꼬찌 캐묻다, 취하다라는 뜻이 있습니다. 그래서 나한테 꼬치꼬치 캐물어 줘라고 요청하는 명령인 거죠. 만약에 앱을 만드는 상황을 가정을 해 봅시다. 우리가 어떤 앱을 만들 거고 어떤 기능을 넣을 거고 이런 것들을 클로드 코드에게 잘 설명을 해야겠죠. 그런데 어떤 식으로 프롬프트를 작성해야 될지 되게 막막할 때가 있습니다. 그럴 때이 스킬을 사용하게 되면 클러드 코드가 내가 만들고 싶은 앱이 무엇인지 정확히 파악하기 위해서 거꾸로 우리에게 질문을 인터뷰하듯이 캠물어 주는 거죠. 그리고이 스키를 만든 사람은 매트 포기라는 개발자고요. 버셀이라는 글로벌 테크 기업 출신입니다. 참고만 해 주시고요. 바로 같이 실습을 해 보겠습니다. 자, 실습을 하기 위해서 코드를 열었고요. 터미널 창을 열어서 일단 클로드 코드를 실행을 해 주겠습니다.

네, 클로드 코드를 실행을 했고요. 일단 스키를 설치를 해야겠죠.이 이 명령어를 복사를 해서 VS 코드로 돌아와서 새로운 터미널에서 한번 실행을 해 주도록 하겠습니다. 자, 붙여 놓고 실행을 하면요. 여기 몇 폭콕의 스킬을 다운로드 받을 수 있는 이런 화면이 나옵니다. 여기서 일단 그릴미랑 그릴 위 독스라는 스킬을 선택을 해 줄게요. 방향 키로 위아래로 움직일 수 있고요. 스페이스바를 누르면 이렇게 선택 해제를 할 수 있습니다. 자, 엔터를 해 주시고요. 저희는 클로드 코드를 사용할 거기 때문에 클로드 코드를 선택을 할 거고요. 그리고 여기 기본적으로 안티 그래비티랑 보이진 않지만 코덱스가 포함되어 있습니다. 그래서 클로드 코드 사용자만 이렇게 선택을 해 주시면 되고요. 엔터를 하게 되면이 스킬을 프로젝트에서만 사용을 할 거냐 아니면이 PC에 존재하는 모든 프로젝트에서 사용을 할 거냐 선택을 할 수 있고요. 저는이 프로젝트에서만 사용을 해 볼게요. 그리고이 권장하고 있는 방식의 설치 방법을 선택을 해 주겠습니다.

자, 그럼 설치가 되었고요. 자, 여기 에이전트라는 폴더가 생성이 되었습니다. 원래 점클로드라는 폴더도 같이 생성이 되어야 되는데 제가 기타를 확인해 보니까 점클로드 폴더가 생성이 안 되는 이슈가 있다고 합니다. 그래서 직접 복사를 할 거고요. 여기 점 에이전트 폴더를 클릭을 하고요. 컨트롤 C하고 컨트롤 V를 하면 이렇게 복사가 되고요. 이거를 점클로드로 바꿔 주겠습니다. 자, 이렇게 되면 클로드 코드에서도이 스킬을 사용할 수 있고 코덱스나 안티 그래비티에서도이 스킬을 사용을 할 수 있습니다. 클로드 코드를 실행을 해서 한번 확인을 해 볼게요. 자, 슬래시를 하고 그릴미를 하면 자, 스킬이 잘 인식이 되고 있죠? 한번 스케일을 실행을 해 보겠습니다. 자, 스케일이 로드되는 동안에 코덱스에서 한번 실행을 해 보겠습니다. 자, 코덱스를 실행을 해 주시고요. 어, 일단 나중에 업데이트를 하겠습니다. 자, 그릴미 스킬을 이렇게 쳐보면 네, 잘 인식이 되고 있죠. 한번 저희의 계획을 한번 말해 보겠습니다. 예를 들어서 운동 기록 관리 웹을 만들고 싶어라고 그냥 입력을 해 볼게요.

자, 이런 식으로 입력했을 때 가장 위쪽 분기부터 하나씩 좁혀 가겠다고 하면서 알아서 이렇게 질문을 해 줍니다.이 앱은 누가 쓰나요? 이렇게 물어보고 있죠. 그리고 얘가 알아서 또 추천까지 해 줍니다. 나 혼자 쓴다. 그리고 나와 지인 몇 명이 쓴다. 그리고 불특정 다수에게 공개를 할 거다. 이렇게 물어보고 있죠. 추천한 대로 A라고 해 보겠습니다. 그럼이어서 답변을 생성을 해 주죠. 혼자 쓰는 거니까이 데이터 관련된 질문을 해 주고 있죠. 어디서 기록을 입력하나요? 뭐 헬스장에서 하는지 집에서 PC로 입력을 하는지 이렇게 물어봐 주고 있습니다. 추천하는 거는 A라고 하네요. 자, A안을 또 입력을 해 주겠습니다. 자, 세 번째 질문이 나왔죠? 어떤 종류의 운동을 기록하나요? 물어보고 있고 뭐 웨이트 트레이닝만 뭐 유산소만 이렇게 물어보고 있죠. 일단 클로드 코드의 추천은 웨이트만이라고 하고 있고 가장 구조가 명확하고 추적의 가치가 가장 큰 종목이라고 합니다. 클로드 코드가 추천해 주는 대로 선택을 해 보겠습니다.네 번째 질문이 또 나왔습니다.

운동 종목은 어떻게 관리하는지 물어보고 있죠. 자, 클로드 코드의 추천은 D 방식이라고 하고요. 사람마다 하는 운동이 다르고 뭐 이런 이런 이유 때문에이 방식을 추천했다고 하는데 추천하는 대로 계속 선택을 해 보겠습니다. 자, 이렇게 하게 되면 뭐 자동 완성이 되고 가장 적은 코드로 가장 자연스러운 경험이 나온다고 하니까 믿어 보겠습니다. 자, 여기 보면 세트 하나에 기록할 항목을 또 물어보고 있죠. 자, 이제 빠르게 한번 선택을 해 보겠습니다. 자, 여기 보면 또 여섯 번째 질문이 나오고 있는데 알아서 해 달라고 한번 해 보겠습니다. 앞으로의 의사 결정은 네가 알아서 해 줘라고 하고 엔터를 눌러 보겠습니다. 자, 글자가 좀 깨지고 있는데 이렇게 창의 크기를 조금씩 바꿔 주면 다시 되돌아옵니다. 이렇게 해서 남은 분기는지가 알아서 결정을 해서 최종 스펙으로 이렇게 굳혔다고 하고 있죠.까지는 까지는 제가 의사 결정을 했고 나머지는 얘가 알아서 기술 스택까지 이렇게 선택을 해 줬습니다. 쭉 보면 화면은 일단 세 개만 있고 데이터 모델은 뭐 이런 식으로 했고 MVP에서는 이런 것들을 제거했다.

그리고 성공 기준은 이렇게 잡았다라고 스펙이 바로 나왔습니다. 바로 구현할 수 있을 정도의 스펙이 나왔죠. 자, 이런 식으로 운동 기록 관리 외앱을 만들고 싶어라는 굉장히 추상적인 프롬프트 하나만 입력을 했지만 얘가 알아서이 앱은 누가 쓰고이 데이터는 언제 기록을 하고 그리고 어떤 종류의 운동을 기록하는지 이렇게 굉장히 세세한 질문들로 저희의 요구 사항을 알아서 좁혀 나가 줍니다. 프롬프트를 일일이 작성하기 번거롭거나 좋은 프롬프트를 작성하고 싶은데 어떤 식으로 작성해야 할지 모호하다면이 스킬을 사용하면 굉장히 도움이 많이 될 겁니다. 그리고 스킬 프롬프트가 어떻게 작성되어 있길래 이런 식으로 저희 요구 사항을 잘 좁혀 나갈 수 있는지 한번 기터에서 확인을 해 보겠습니다. 자, 오른쪽에 보이는이 화면이이 맵 폭코이 만든 그릴이라는 스킬의 마크다운 파일이고요. 보기 좋게 한글로 번역을 해 보겠습니다. 자, 한국어로 번역을 하고 확대를 좀 해 볼게요. 자, 여기 설명을 보면 사용자가 계획이나 디자인에 대해 공통된 이외를 얻을 때까지 끈질기게 인터뷰를 하고 그리고 의사 결정 트리에 각 분기점을 해결해라.

그리고 보면이 계획의 모든 측면에 대해 공통된 이해에 도달할 때까지 끊임없이 질문을 하라고 해 주고 있습니다. 그리고 트리의 각 분기를 따라가며 결정간의 의존 관계를 하나씩 해결하라고 하고 있죠. 각 질문에 대한 권장 답변을 제시하라고 하고 있습니다. 그리고 질문을 하나씩만 하고 질문에 대한 답을 코드 베이스를 살펴보는 것으로 얻을 수 있다면 코드베이스도 참고해 보라고 하고 있죠. 보면 열줄밖에 없고 굉장히 단순하죠. 끈질기게 인터뷰를 하고 권장하는 답도 제시를 해라. 그리고 한 번에 하나만 물어보고 코드 베이스가 있다면 직접 살펴봐라.이 세 가지로 요약을 할 수 있겠습니다. 그리고 그릴 위덕스라는 것도 있는데 이거는 용어집까지 자동으로 정리를 해 주는 스킬인데요. 그릴미랑 똑같이 인터뷰를 해 주지만이 인터뷰 과정에서 나오는 새로운 도메인 용어를 컨텍스트.md 파일에 자동으로 정리를 해 줍니다. 뭐 예를 들어서 저희가 운동 관리 앱이었죠. 거기서 운동 종목, 뭐 세트, 기록 같은 용어가 나올 텐데 이러한 용어들을 밀간되게 사용할 수 있도록 정리를 해 줍니다.

코드 베이스가 커지면 이거를 뭐 레코드라고 했나 엔트리라고 했나 헷갈릴 수 있는데 그걸 사전에 방지하는 거죠. 자, 이렇게 해서 그릴미를 알아봤고요. 다음 스킬은 2D라는 스킬입니다. 이거는 클로드 코드가 깃업 이슈 형태로 자동으로 정리를 해 주는 건데요. 바로 실습으로 확인을 해 보겠습니다. 일단 새로운 터미널 창을 열어서 설치를 해 주겠습니다. 아까 실행했던이 명령어를 실행을 해 주시고요. 자, 실행을 하면 이렇게 스킬들을 고를 수 있고 여기서 투d를 선택을 하겠습니다. 그리고 클로드 코드를 선택을 해 주시고요. 마찬가지로 프로젝트 레벨로 선택을 한 다음에 건장하는 방식으로 설치를 하겠습니다. 자, 설치가 됐고요. 클로드 코드를 다시 실행을 해 볼게요. 자, 실행을 했고 여기 좌측에 보면 점클로드 폴더 안에도 2D가 있고 점에이전트 폴더 안에도 2D 폴더가 잘 생성이 되었습니다. 이렇게함으로써 클로드 코드에서도이 스킬을 활용할 수 있고 코덱스나 안티 그리비티에서도 사용을 할 수 있게 된 거죠. 이 스킬을 로드를 해 보겠습니다.

두디를 하고 스킬 한글로 설명. 자, 스킬을 로드하고 있는 모습이고요.이 스킬들을 쭉 설명을 해 주고 있고요. 보면 지금까지의 대화 맥락과 코드베이스의 이해를 바탕으로 PRD를 작성을 하고 이슈 트래크에 등록을 해 주는 스킬입니다. 핵심 특징을 보면 인터뷰를 하지 않고 코드베이스를 파악을 해서 이슈 트래커에 자동으로 등록을 해 주는 거죠. 자, 동작 흐름을 보면 레포를 탐색을 하고 뭐 이런 식으로 동작을 하고 있다고 하고 PRD 템플릿까지 있죠. 유약을 하면 대화로 충분히 논의가 끝난 기능을 인터뷰 없이 곧바로 PRD화 해서 트래커에 올리는 자동화 도구라고 볼 수 있습니다. 저희가 그릴미라는 스킬로 클로드 코드와 대화를 충분히 나누고 논의가 끝난 기능을 바로 해서 이슈로 등록을 해 주는 도구인 거죠. 저희가 그릴미 스킬로 대화를 나눴던 컨텍스트로 돌아가 보겠습니다. 여기서 스킬을 호출을 해서 화해 주고 이슈로 등록해 줘라고 요청을 해 자, PRD를 발행했다고 하고요. 이슈 트래커는 뭐 깃터이나 라이너 같은 트래커가 구성이 되어 있으면 등록을 해 줄 거고 저는 등록을 안 해 놨기 때문에 이렇게 마크다운 파일로 정리를 해 준 모습입니다.이 이 프로젝트를 만약에 깃터에 연동을 한다면 이슈로 자동으로 등록을 해 줄 겁니다.

여기 보면 PR디스라는 폴더가 생성이 되었죠. 이런 식으로 PRD 문서가 마크다운 형식으로 이렇게 작성이 된 모습입니다. 그리고 그 밑에 PRD 이슈 트래커 셋업이라는 마크다운이 생겼고요. 저희가 깃업과 연동을 한 다음에이 마크다운을 태그를 하고 이대로 이슈 트래커에 등록을 해 줘라고 하면 잘 등록을 해 줄 겁니다. 자, 저희가 작업한 레포지토리를 기터브에 업로드를 해서 PRD가 잘 업로드되는지 확인해 보겠습니다. 일단 새로운 레포지토리를 만들어 줄게요. 여기서 레포지토리를 클릭을 한 다음에 여기 뉴 버튼으로 만들 수 있습니다. 자, 뉴를 눌러 주시고요. 레포지토리 이름은 어 짐 앱으로 하겠습니다. 그리고 네, 크리에이트 레포지토리를 눌러 주세요. 그러면 이렇게 레포지토리가 생성이 되었고요. 이미 PC에 프로젝트가 있기 때문에 업로드만 하면 되겠죠. 그래서 여기 있는 명령어를 복사를 하면 됩니다. 자, 복사를 했고요. 저희 프로젝트로 돌아가서 업로드해 달라고 해 보겠습니다. 자,이 명령어를 붙여 넣기를 하고요.

프롬프트를 입력할게요. PRD를 기업에 업로드 해조라고 요청하겠습니다. 어, 푸시에 성공했다고 하고요. PR가 깃터에 잘 올라갔다고 합니다. 한번 확인해 볼게요. 새로 고침을 하니까 저희가 다운로드 받았던이 스킬들이 잘 업로드가 되었고 여기 이슈스를 가서 PRD를 보겠습니다. 아직 PRD가 업로드가 안 된 거 같은데 다시 확인해 볼게요. 여기 PRD가 기터에 올라갔다고 하고이 링크로 업로드가 되었다고 하는데 아 코드상으로 업로드가 되었네요. 이슈에 등록을 해 달라고 해 보겠습니다. 여기 PRD 이슈 트래커 셋업이 있었죠.이 이 파일을 참고해서 기업 이슈에 등록해줘라고 완료되었다고 하고요.이 링크로 들어가서 보겠습니다. 저희의 PRD 문서가 이슈에 잘 등록이 된 것을 확인할 수 있습니다. 자, 이렇게 해서 깃업과 연동을 하면 이슈의 PRD까지 자동으로 업로드를 해 주는 투 스킬까지 실습을 해 봤습니다. 자, 마찬가지로 프롬프트를 한번 확인을 해 보겠습니다. 자, 한글로 번역을 해 줄게요. 여기 보면 현재 대화 컨텍스트를 PRD로 변환을 해서 프로젝트 이슈 트래커에 개시를 해라.

그리고 사용자가 현재 컨텍스트에서 PRD를 생성하려는 경우에 사용한다라고 설명을 해 주고 있죠.이 이 스킬이 실행되는 흐름도 한번 살펴보겠습니다. 첫 번째로 코드베이스의 현재 상태를 파악을 한 다음에 프로젝트 도메인 용어집에 있는 어위를 사용하라고 하고 있습니다. 그리고 구현을 완료하는데 필요한 주요 모듈들을 계략적으로 파악하고 설명을 하라고 하고 있죠. 세 번째는 아래 템플릿을 사용해서 PRD를 작성을 하고 프로젝트 이슈 트래커에 개시를 해라라고 안내를 하고 있습니다. 자, 그리고 템플릿을 볼게요. 어떤 문제가 있고 이거를 뭐 어떻게 해결할 거고 사용자 스토리는 뭔지 이런 식의 템플릿이 있습니다. 이거는 그릴미 스킬에 비하면 프롬프트 양이 좀 있는 편인데 핵심은 세 단계라고 할 수 있습니다. 일단 코드 베이스를 탐색을 하고요. 그리고 주요 모듈들을 스캐치를 한 다음에이 템플릿에 따라 PRD를 작성을 하는 거죠. 그리고 템플릿을 좀 살펴보면 유저 스토리 부분이 좀 인상적인데 역할을 정의하고 그 역할이 원하는 것과 그 이유를 적으라고 이렇게 나와 있습니다.

헬스를 하는 사용자가 지난번 무게를 자동 표시하는 것을 원한다. 왜냐하면 이렇게 했을 때 매번 기억할 필요가 없기 때문이다. 이런 식으로 누가 무엇을 왜 원하는지 다 적게 강제를 합니다. 이게 유저 스토리의 핵심이라고 할 수 있고 만약에 저희가이 스킬을 사용하지 않고 다른 앱의 기획서를 쓴다고 했을 때이 포맷을 그대로 빌렸어도 되겠죠. 유명한 스킬들의 프롬프트가 어떻게 작성되 있는지 이렇게 열어서 확인해 보는 것이 공부가 굉장히 많이 됩니다. 자, 그리고 아웃오브 스코프 섹션이 있는데 이게 뭐냐면 이번에 구현하지 않을 것도 명시를 하는 부분입니다. AI에게 넘겨주는 기획서 작성할 때는 반드시 들어가야 되는 부분입니다. 저희가 운동 관리 앱을 만들 때 이번 범위에서 영양 관리나 뭐 SNS 공유 기능은 넣지 않겠다라고 우사 결정을 했지만 이걸 명시하지 않으면 AI는 그냥 이왕 만드는 거 영향도 넣어 드릴게요 하면서 범위가 계속 늘어나게 됩니다. 그래서 아웃오브 섹션이 존재를 하는 거고요. 여러분 잘 따라오고 계시죠?

저희가 이제 투 이슈스라는 스킬로 저희가 작성한 PRD 문서를 작업 단위로 쪼갤 겁니다. 클러드 코드가이 쪼개진 작업 단위로 작업을 잘할 수 있도록 해 볼 거고요. 앞서서 그릴이라는 스키를 통해서 클로드 코드와 함께 대략적인 기획을 잡았고 PRD를 통해서 세부 스펙을 담은 PRD 문서를 작성했고 기터배 이슈까지 등록을 했습니다. 그럼 이제 투 이슈스 실습을 해 볼게요. 자, 스킬을 설치하기 위해서 vs 코드를 다시 열었고요. 새로운 터미널 창을 열어서 저희가 이전에 사용했던 명령어를 다시 실행을 해 줄게요. 자,이 명령어입니다. 자, 실행이 됐고 같은 방식으로 투 이슈스를 선택을 하고 클로드 코드도 선택을 한 다음에 네, 프로젝트 레벨로 설치를 할게요. 자, 빠르게 설치가 되었고요. 여기 점클로드 폴더와 점에 폴더 안에 투 이슈스 스킬이 잘 생성이 되었죠. 마찬가지로 클로드 코드를 이렇게 자, 투 이슈스를 한번 실행을 해 볼게요. 네, 스킬 잘 인식이 되고 있죠? 일단 스킬을 로드하고 한글로 무슨 스킬인지 설명해 줘라고 해 볼게요.

자, 스킬이 로드가 완료되었고요. 설명을 보겠습니다. 자, 한 줄 예약을 하자면 계획, 명세, PRD를 이슈 트래커에 올릴 수 있는 독립적인 작업 가능한 이슈들로 쪼개 주는 스킬이다. 이게 무슨 말이냐면 기터로 돌아와서 저희가 이런 PRD 문서를 작성을 했잖아요. 근데이 문서는 하나이고이 문서상으로는 어떤 단계로 쪼개서 개발을 해야 할지 알기가 어렵습니다. 그래서이 PRD 문서를 기반으로 여러 이슈들로 쪼갠 다음에 순서대로 클로드 코드가 구현을 할 수 있도록 작업 단위를 나눠 주는 스킬이라고 이해를 하시면 되겠습니다. 자, 돌아와서요. 프롬프트를 작성해 볼게요. D 문서를 작업 가능한 단위로 쪼개 주고기에 이슈로 등록해 줘라고 요청을 할게요. 그리고 스킬도 한 번 더 명시를 해 투 이슈수였죠. 자, 그리고 참고로 자동 완성 기능이 있는데요. 투 이슈스를 하고 키보드 탭을 누르면 이렇게 자동 완성이 됩니다. 자, 알아두시면 편하고요. 요청을 해 자, 일단 일차적으로 답변이 완료된 거 같은데 한번 보겠습니다.이 PRD를 읽었고 PRD를 아홉 개의 수직 슬라이스로 쪼개겠다고 하네요.이 수직 슬라이드에 대한 것은 제가 좀 있다가 설명드리겠습니다.

자, 제한된 슬라이스를 보면 아홉 단계로 이렇게 쪼개져 있고요. 쭉 내려보면 뭔가 막혔고 그리고 기터 이슈 발행은 외부 계정으로 개시되는 행동이라 아홉 개를 한꺼번에 만들기 전에 분할안에 대한 명시적인 확인이 필요하다고 합니다. 그래서 저희가 확인을 할게요. 일단이 안대로 기터 이슈를 발행할까요? 물어보고 있고요. 일단 믿고 그대로 발행을 하겠습니다. 순차적으로 이슈를 발행을 잘 하고 있고요. 완료될 때까지 기다려 주도록 하겠습니다. 작업이 완료되었고요. 보겠습니다. 자, 아홉 개 이슈 모두 발행이 완료되었다고 하고요. 깃업에서 직접 확인해 볼게요. 자, 새로 고침을 하면 이런 식으로 이슈로 쭉 등록을 해 줬습니다. 첫 번째부터 보겠습니다. 슬라이스 1 프로젝트 부트스랩과 빈 세션 시작 종류 보면이 PRD를 기반으로 했다고 하고요. 그리고 구현해야 되는 것들을 이렇게 쭉 정리를 해 줬죠. 그리고 보면 여기 성공 기준까지 잘 정리를 해 줬습니다. 여기 체크 박스로 이렇게 선택을 할 수도 있고요. 그리고이 작업을 막고 있는게 없기 때문에 바로 작업을 시작할 수 있다라고 잘 명시가 되어 있죠.

자, 이런 식으로 2D 스킬로 만든 문서를 기반으로 작업 가능한 아홉 개 단위로 이렇게 잘게 잘 쪼개 준 모습입니다. 아까 수직 슬라이드라는 용어가 나와서 설명을 한번 드리겠습니다. 수평 슬라이스와 수직 슬라이스라는 개념이 있는데요. 자, 수평 슬라이스는 구현을 할 때 DV 관련된 부분을 싹 다 구현을 하고 그다음에 API 관련된 구현을 하고 그다음에 UI 작업을 한 다음에 마지막에 싹 다 조립을 하는 방식이고요. 수직 슬라이스의 경우에는 운동 종목을 추가하는 기능을 만든다고 했을 때 이거에 관련된 DB 작업 그리고이 기능과 관련된 API 그리고이 기능과 관련된 화면 그리고이 기능과 관련된 테스트 이거를 조금씩 조금씩 구현을 해서 기능과 관련된 부분들만 구현을 해서 조립을 하는 방식입니다. 그래서 수평은 이렇게 DB 레이어, API 레이어, 그리고 화면 레이어를 이렇게 수평으로 하나씩 하나씩 구현을 한다고 해서 수평 슬라이스고요. 수직 슬라이스는 DB 레이어 조금 그리고 API 레이어 조금 그리고 화면 레이어 조금 세로 형태로 조금씩 조금씩 구현을 해서 수직 슬라이스라고 합니다.

자, 이렇게만 알아두시면 충분하고요. 투 이슈스 스킬의 프롬프트가 어떻게 작성되어 있는지 확인을 같이 해 보겠습니다. 자, 오른쪽에 보이는 화면이 이투 이슈스킬의 마크다운 파일이고요. 보기 좋게 한글로 번역을 해 보겠습니다. 자, 번역이 완료됐고요. 개요부터 보면 새로 분할 아까 수직 슬라이스 설명드렸죠? 수직 슬라이스를 사용해서 개별적으로 파악할 수 있는 문제로 나눈다.이 스킬이 동작하는 순서를 한번 살펴보겠습니다. 첫 번째로 보면 일단 상황을 파악을 하는 거죠. 대화 맥락에 있는 내용을 바탕으로 작업을 한다. 그리고 이슈를 인수로 전달을 하면 이슈 트래커에서 해당 이슈를 가져와 본문과 댓글 전체를 읽습니다. 쉽게 말하면 아까 생성했던 이슈들이 있죠? 이거를 가져다가 읽는다는 얘기입니다. 그리고 코드베이스 살펴보기입니다. 이거는 선택 사항이고 코드 베이스가 있다면 코드 베이스부터 살펴봐라라는 얘기고요. 그리고 수직 단면 초환 작성입니다. 여기 보면 특정 계층 하나만을 수평으로 자르는 단면이 되어서 안 된다.이 말이 무슨 말이냐면이 서비스를 만드는데 필요한 모든 DB 작업을 싹 다 구현을 하고 그다음에 API를 구현을 하고 이렇게 하지 말라는 거죠.

수직 슬라이스를 이해를 했으니까 이게 정말 그렇게 쪼개졌는지 한번 볼게요. 슬라이스 두 번째를 보면 세트 입력 그리고 슬라이스네 번째를 보면 종목명 자동 완성 이런 식으로 기능 단위로 쪼개졌습니다. 그리고네 번째로 사용자에게 물어보라고 하고 있죠. 뭐 해상도가 적절한지이 슬라이스를 병합하거나 추가로 분할을 해야 할지 이런 식으로 분석 결과를 승인할 때까지 반복하라고 나와 있습니다. 그리고 다섯 번째 문제를 이슈 트래커에 개시하라고 나와 있죠. 승인된 각 슬라이스에 대해 이슈 트래커에 새 이슈를 개시해라. 그리고 이슈를 개시할 때는 아래 템플릿을 따르라고 하고 있고요. 템플릿을 한번 보면 어떤 것을 만드는 건지 그리고 이게 잘 만들어졌는지 확인하기 위한 기준을 세우고 완료돼야 되는 작업이 있는지이 세 가지를 꼭 넣으라고 나와 있습니다.이 템플릿대로 이슈가 잘 만들어졌는지 확인을 해 보겠습니다. 여기 슬라이스 5번을 볼게요. 여기 보면 홈 화면에 어제 뭘 했는지 한 번에 보이는 형태로 완성을 하고 과거 세션을 탭해서 상세를 볼 수 있게 한다 하고 세부 내용이 이렇게 쭉 나와 있습니다.

무엇을 만들지 잘 적어 준 모습이고요. 그리고 두 번째 뭐 세션 세 개 종료 후에는 홈에 세 건이 최근 순으로 보여야 된다. 그리고 여섯 개 이상 만들면 최근 다섯 개만 보여야 된다.이 작업이 성공했을 때의 기준을 체크리스트로 이렇게 잘 보여 준 모습입니다. 그리고 마지막으로이 작업을 구현하기 전에 꼭 완료되려는 작업을 이렇게 적어 줬죠. 그래서 꼭이 슬라이스 2, 그러니까 세트 입력 기능이 완료가 된 다음에이 슬라이스 5를 구현을 해라라고 나와 있습니다.이 스킬에 있는 템플릿대로 이슈가 잘 만들어진 것을 확인할 수 있습니다. 자, 이렇게 해서 투 이슈스 스킬을 설명을 드렸고요. 케이브맨이라는 스킬을 설명드릴게요. 이거는 몇 폭이 만든 스킬은 아니고요. 19살짜리 대학생이 만든 스킬인데 이게 글로벌 트렌딩 1위가 된 스킬입니다. 자, 오른쪽에 보이는게이 케이브맨의 깃터브이고요. 한번 같이 보겠습니다. 자, 보기 좋게 한글로 번역을 할게요. 케이브맨이 뭐냐면 클로드 코드가 답변을 할 때 원래라면 이렇게 길고 장황하게 답변을 합니다.이 케이브맨 스킬을 적용을 하게 되면 19개 토큰 사용하면서 매우 간결하게 답변을 하고 있는 모습이죠.

자, 여기 보면 같은 효과인데 단어수는 75%가 줄었지만 여전히 성능은 좋다라고 얘기를 하고 있고요. 설치를 해 볼게요. 자, 윈도우 사용자분들은 아래 명령어를 복사해서 붙여넣기를 하시면 되고요. 저는 메os 환경이기 때문에 이거를 복사해서 붙여 넣기를 하겠습니다. 자, vs코드로 돌아왔고요. 새로운 터미널 창을 열어서 붙여 넣기를 할게요. 자, 그러면 이렇게 스킬이 쭉 설치가 됐고요. 여기 보면 에이전트 폴더와 클로드 폴더 안에이 케이브맨 관련된 스킬들이 잘 설치가 됐죠. 자, 클러드 코드를 실행을 해서 이게 잘 설치가 되는지 확인을 해 볼게요. 자, 슬래시를 하고 CA만 입력하면 자동 완성이 되고 여기 케이브맨 스킬들이 잘 보이죠? 여기 케이브맨 헬프를 한번 입력을 해서 한글로 설명해 주라고 해 볼게요. 자, 답변을 해 주고 있고 여기 케이브맨 모드가 있고 이거를 어떻게 트리거하는지 명령어를 잘 보여 주고 있습니다. 그리고 케이브맨 관련된 스킬들이 있는데이 각 스킬이 뭔지도 잘 알려 주고 있고요. 자, 이제 케이브맨 스킬이 얼마나 효과가 있는지 같이 실습을 해 보겠습니다.

자, 새로운 터미널 창을 열어서 클로드 코드를 실행을 해 주고요. 일단 케이브맨 스킬을 호출 하겠습니다. 자, 탭을 누르면 이렇게 자동 완성할 수 있고요. 예시 프롬프트를 작성해 볼게요.이 프로젝트에서 개선할 점 모두 설명해 줘. 일부러 좀 장황하게 설명할 수 있는 부분을 요청을 하고 결과를 한번 굉장히 간결하게 답변을 잘 해 주고 있는 모습입니다. 원래 같았으면 탐색을 완료했습니다. PRD는 뭐 두 건입니다. 좀 불필요한 말들이 많이 붙었을 텐데 간결하게 답변을 잘 해 준 모습입니다. 자, 이렇게 해서 토큰을 저을 할 수 있고요. 자, 케이브맨 스킬도 한번 같이 깃업이이 케이브맨의 프롬프트고요. 한글로 번역을 해 보겠습니다. 자, 보면 매우 간단합니다. 자, 똑똑한 원신처럼 말하라고 다 되어 있죠. 모든 응답을 원신처럼 산문으로 압축을 해라. 관사나 뭐 군더덕이 있는 표현이나 경구나 왕곡한 표현 모든 것을 다 제거를 하고 모든 기술적인 세부 사항이나 코드 블록은 정확하게 유지를 해라. 자, 이런 식으로 별게 없고요.

그냥 표현을 할 때 뭐 관사나 인사말 이런 쓸데없는 표현 쓰지 말고 필요한 말만 정확하게 해라라고 나와 끝입니다. 이제 케이브맨까지 살펴봤고 본격적으로 구현을 해 보겠습니다. 자, 새로운 터미널 창을 열고 클로드 코드를 실행해 줄게요. 투 이슈스라는 스킬을 통해서 이렇게 구현할 수 있는 단위로 잘게 쪼겠죠?이 순서대로 구현을 해 달라고 요청을 할게요. 일단 슬라이스 1부터 구현을 하라고 하겠습니다. 깃업에 등록되어 있는 슬라이스 1번부터 구현해 줘라고 요청할게요. 자, 여기 보면 기터에 있는 이슈를 이렇게 읽어오고 있는 모습이죠. 자, 구현을 하는 동안에 다음 스킬을 설명드릴게요. 핸드오프라는 스킬인데요. 작업을 하다가 세션이 너무 길어질 경우에 새로운 세션으로 다시 시작을 할 수 있게끔 인수인계 문서를 작성을 해 주는 스킬이고요. 설치부터 해 볼게요. 자, 새로운 터미널 창을 열었고 아까 저희가 사용했던이 스킬을 설치하는 명령어를 실행을 할게요. 자, 실행이 됐고 이번에는 핸드오프였죠? 핸드오프를 선택을 하고 클로드 코드 선택한 다음에 프로젝트 레벨로 설치를 할게요.

자, 그러면 마찬가지로이 에이전트 폴더와이 클로드 폴더 안에 핸드오프 스킬이 이렇게 잘 만들어졌죠? 자, 클로드 코드를 바로 실행을 해서 스킬을 한번 확인해 볼게요. 자, 핸드오프가 잘 인식이 되고 있죠? 여기서이 스킬에 대해 한글로 설명해 줘. 잘 설명을 해 주고 있죠. 자, 이렇게 해서 스킬이 잘 설치가 되었습니다. 자, 작업이 일차적으로 완료가 된 거 같고요. 일단 앱을 실행을 했을 때 잘 동작을 했다고 하고이 테스트도 잘 통과를 했다고 하네요. 어세턴스 체크가 잘 되었죠.이 이 명령어를 복사해서 터미널 창에 붙여 넣기를 하면 앱을 실행을 할 수 있습니다. 자,이 주소에서 지금 실행이 되고 있고요. 이거를 클릭을 하면 여기서 볼 수 있습니다. 자, 자, 이걸 브라우저에서 확인해 볼게요. 자, 이런 식으로 앱이 잘 실행이 됐고 지금 첫 번째 단계밖에 구현을 안 해서 좀 앱이 단순한데 운동 시작을 눌러 보겠습니다. 지금 세트 입력은 다음 슬라이스에서 구현을 한다고 나와 있죠. 그리고 운동 종료. 자, 이렇게 해서 최근에 운동을 한이 기록이 잘 반영이 되었죠.

이렇게 해서 첫 번째 단계를 구현을 했습니다. 방금 핸드오프 스킬을 설치했죠. 이걸 바로 사용을 해 핸드오프. 핸드오프를 입력하고요. 인수인계 문서 작성해 볼게요. 어,이 문서가 작성이 되면 새로운 세션에서 슬라이스 두 번째부터 구현을 다시 이어나갈 수 있겠죠. 자, 핸드오프 문서가 작성이 됐다고 하고 여기에 작성을 했다고 합니다. 자, 이런 식으로 지금 진행 사항을 쭉 정리를 했죠. 이거를 그대로 복사를 해서 새로운 세션에서 작업을 이어 나가 보겠습니다. 분수인계 문서를 바탕으로 어 기업 이슈에 등록되어 있는 슬라이스 2번을이어서 작업 이렇게 요청해 볼게요. 자, 이렇게 새로운 세션에서도 핸드오프 문서를 통해서 잘 이어나가는 모습이죠. 자, 구현을 하는 동안 핸드오프 스킬 프롬프트가 어떻게 작성되어 있는지 같이 볼게요. 자, 오른쪽이 프롬프트고요. 한글로 번역하겠습니다. 여기 보면 열출밖에 안 되고 굉장히 간단하죠? 인수인계를 해라. 결정 사항을 문서에 기록하고 내용을 명확히 한 다음에 새로운 세션에서 해당 문서를 참고해서 구현을 시작해라.

이게 다 구요. 별게 없습니다. 다시 저희 작업으로 돌아가서 지금 슬라이스 2가 구현이 잘 완료되었고 여기 보면 테스트도 11개 돌렸는데 잘 구현이 됐다라고 하고 있습니다. 실제로 결과물을 볼게요. 자, 새로 고침을 해서 슬라이스 2가 잘 구현이 되는지 확인해 볼게요. 자, 운동 시작을 하고 종목과 무게 그리고 횟수를 입력할 수 있죠? 벤치 프레스 입력하고 100km로 열 번 했다고 하겠습니다. 자, 추가를 하면 자, 벤치프레스 기록이 잘 등록이 되었습니다. 다른 종목도 해보면 스쿼트 뭐 100km, 20번 추가를 하면 자, 스쿼트도 이렇게 잘 등록이 됐죠? 자, 그리고 오늘의 마지막 스킬을 설명드릴 건데요. 임프루브 코드베이스라는 스킬입니다. 스킬 이름 그대로 코드베이스를 개선을 하는 스킬이고요. 빠르게 설치를 해 보겠습니다. 자, 아까 저희가 사용했던 명령어를 실행을 해 주시고요. 여기서 임프루브 코드베이스 아키텍처 이거를 선택을 해 주고 클로드 코드를 선택을 한 다음에 설치를 진행하겠습니다. 자, 그러면이 스킬이 설치가 되었고요.

클로드 코드를 실행을 해서 한번 확인해 볼게요. 자, 클로드 코드를 실행을 했고요. 임프루브 코드 베이스를 선택을 해 보겠습니다.이 스킬에 대해서 설명해 줘.라고 요청해 볼게요. 자, 답변이 완료되었고 보겠습니다. 코드 베이스를 얇은 모듈에서 깊은 모듈로 바꿔라. 이게 무슨 말이냐면 이게 얕은 모듈이고 이게 깊은 모듈를 해 봅시다. 깊은 모듈의 입구는 되게 좁죠? 인터페이스는 되게 단순합니다. 입구가 단순하지만 여기 안에 있는 내용은 되게 풍부하다라고 해서 깊은 모듈이고 얕은 모듈은 이렇게 생겼고 입구가 되게 넓죠. 인터페이스는 되게 다양하고 복잡하지만 실제로이 깊이가 얕고 구현되 있는 기능이 얼마 없는 그런 모듈을 말합니다. 그래서이 코드 베이스를 깊은 모듈로 바꿔 줌으로써 코드베이스를 개선하는 스킬이라고 일단 이렇게 이해를 해 주시면 되겠습니다.이 스킬을 한번 적용을 해 자, 스킬 입력하고 코드 베이스 개선 시작 해 볼게요. 앞서 스킬 프롬프트를 많이 열어서 확인을 해 봤죠. 같은 방식으로 여러분들이 직접 확인해 보시는 것을 숙제로 내 드리겠습니다.

자, 이런 식으로 깊은 모듈로 바꿀 수 있는 후보들을 이렇게 잘 보여 주고 있죠.이 이 디프닝이 깊은 모듈로 바꾸는 것을 말을 합니다. 제가 자주 사용하는 스킬 여섯 개를 다 설명드렸으니까 이제 구현을 마무리해 달라고 요청을 해 디터 이슈에 등록되어 있는 슬라이스들을 모두 구현 완료 해줘라고 해 자, 이렇게 하고 결과물이 어떻게 나오는지 한번 기다려 볼게요. 자, 모든 작업이 완료되었습니다. 일단 기터로가 보면 여기 해야 되는 일들을 모두 완료가 해서 클로즈를 해 준 모습이고요. 클로즈된 이슈를 한번 들어가 보면 여기 댓글에 이런 식으로 어떻게 완료했는지 댓글까지 달아준 모습입니다. 자, 다 만들어진 앱도 한번 확인을 해 볼게요. 자, 운동 시작을 한번 눌러 보고요. 종목명은 뭐 데드리프트라고 해 보겠습니다. 무게는 120에 8회로 해서 추가를 할 거고요. 뭐 다른 운동도 추가해 볼게요. 뭐 사레라고 하고 20km에 20개 해서 추가를 해 보겠습니다. 자, 이렇게 운동이 추가가 됐고요. 종료를 하면 자, 이런 식으로 기록이 잘 되었죠.

자, 클릭해서 들어가면 이렇게 상쇄까지 볼 수 있습니다. 뭐자, 작성일과 운동 시간까지 이렇게 볼 수 있고요. 자, 이렇게 해서 제가 사용하는 스킬 여섯 개를 활용을 해서 간단한 웹서비스를 하나 만들어 봤습니다. 자, 오늘 제가 사용한 스킬 여섯 개를 정리를 하고 마무리하도록 하겠습니다. 자, 그릴미라는 스킬을 통해서 일일이 프롬프트를 작성하지 않고 클로드 코드가 알아서 우리에게 질문을 해 줌으로써 구현 의도를 명확하게 전달했습니다. 그리고 2D를 통해서 기획서로 정리를 하고 그걸 기터브에 업로드를 했죠. 그리고 투 이슈스를 통해서 PRD 문서를 기반으로 클로드 코드가 작업할 수 있는 단위로 잘게 쪼겠습니다. 그리고 케이브맨을 통해서 답변을 간략하게 해 줌으로써 토큰을 절감하는 것까지 해 봤고요. 그리고 핸드오프를 통해서 세션이 길어졌을 때 새로운 세션에서 인수인계 받을 수 있는 문서까지 작성을 해 봤습니다. 그리고 마지막으로 임프루브 코드베이스라는 걸 통해서 코드베이스를 개선할 수 있다고도 말씀을 드렸죠.

제가 오늘 영상에서 말씀드리고 싶은 것은 하나입니다. 바이브 코딩을 잘하는 사람은 직접 작성하는 프롬프트가 얼마 없습니다. 이미 잘 나와 있는 스킬들을 최대한 활용해서 효율적이고도 퀄리티 높은 결과물을 뽑아낸다는 겁니다. 자, 이번 영상이 도움이 되셨다면 구독과 좋아요 부탁드리고요. 멤버십 가입하시면이 슬라이드를 PDF로 제공해 드리니까 많은 관심 부탁드리겠습니다. 그러면 다음 시간에 뵐게