클로드 코드로 바이브 코딩한다면 깔아야 하는 3개
AI에게 코드를 맡겼는데 화면이 비슷비슷하고 빠진 부분이 생기는 분께 필요한 글입니다. 규칙 파일, 디자인 스킬, 검수 스킬 세 가지를 켜는 순서와 이유를 정리했습니다.
바이브코딩의 품질 차이는 규칙 파일, 프런트엔드 디자인 스킬, 완료 전 검수 스킬 세 가지를 켜 두었느냐에서 갈립니다. 규칙 파일부터 시작해 하나씩 더하는 순서를 권합니다.
클로드 코드로 만드는 이 프로젝트에 바이브코딩용 기본 세팅을 해 줘. 1. 프로젝트 루트에 CLAUDE.md를 만들고, 내가 반복해서 설명한 원칙을 200줄 이내로 정리해 줘 2. 화면 작업이 있다면 프런트엔드 디자인 스킬을 켜는 방법을 알려 줘 3. 마지막으로 결과물을 제출하기 전에 중복·모순·누락을 점검하는 검수 스킬을 만들어 줘 각 단계는 순서대로, 하나 끝나면 확인받고 다음으로 가 줘.
바이브코딩(AI에게 코드를 맡겨 앱이나 웹사이트를 만드는 방식)은 프롬프트만 던지면 되는 것처럼 보이지만, 실제로 해 보면 몇 가지를 미리 켜 두었을 때와 아닐 때의 결과물 품질 차이가 큽니다.
여기서는 저희가 실제로 켜서 쓰는 3가지만 소개합니다.
바이브코딩에서 이게 왜 필요한가요
AI에게 코드를 맡기면 두 가지 문제가 반복됩니다. 첫째, 만들 때마다 화면이 비슷비슷하게 나오는 문제입니다. 둘째, 완성됐다고 나온 결과물에 정작 빠진 부분이 있는 문제입니다.
이 둘을 줄이는 장치가 있고 없고의 차이가 큽니다.
3개 목록
세 개 모두 별도 설치 없이 스킬 폴더에 파일을 두는 방식으로 켤 수 있습니다. 공식 문서는 이 방식에 대해 "파일시스템 기반이라 업로드가 필요 없다"고 설명합니다.
규칙 파일은 프로젝트마다 반복해서 설명해야 하는 원칙을 세션 시작 시 자동으로 읽히게 합니다. 공식 문서는 세션 시작 시 컨텍스트에 로드된다고 명시합니다.
프런트엔드 디자인 스킬은 AI가 만든 화면이 다 비슷해 보이는 문제를 줄이려고 씁니다. 완료 전 검수 스킬(QA 게이트)은 "다 만들었다"는 말과 "다 됐다"는 상태가 다르다는 걸 알려 주는 장치입니다.
규칙 파일부터 씁니다
프로젝트 루트에 CLAUDE.md를 두고, 반복해서 설명하던 원칙을 200줄 이내로 적습니다.
프런트엔드 디자인 스킬을 켭니다
화면 작업이 잦다면 이 스킬을 켭니다.
완료 전 검수 스킬을 켭니다
순서상 마지막에 두는 이유는, 앞의 둘로 만든 결과물을 최종적으로 점검하는 역할이기 때문입니다.
내가 써본 결과
규칙 파일을 쓰기 전과 후를 비교하면 가장 큰 차이는 "매번 설명하던 것"이 줄었다는 점입니다. 디자인 스킬은 화면이 다 비슷하게 나오는 문제를 완전히 없애지는 못했지만, 최소한 "왜 이렇게 나왔는지" 물어볼 기준이 생겼습니다.
정량적인 개선율은 저희도 측정하지 않았습니다.
자주 하는 실수
저는 처음엔 검수 스킬을 제일 먼저 켰습니다. 그런데 규칙 파일이 없으니 검수 기준 자체가 모호해서 큰 도움이 안 됐습니다. 순서를 바꾸고 나서야 제 역할을 했습니다.
자주 묻는 질문
이 3개, 다 유료인가요?
아닙니다. 규칙 파일은 텍스트 파일 하나이고, 스킬 두 가지도 파일을 폴더에 두는 방식이라 별도 비용이 들지 않습니다.
남들이 추천하는 다른 도구는 왜 안 넣었나요?
검증되지 않은 제3자 도구는 이 목록에 넣지 않았습니다. 공식 문서로 존재가 확인되거나 저희가 실제로 쓰는 것만 담았습니다.
세 개를 다 한꺼번에 켜야 하나요?
아닙니다. 규칙 파일부터 시작해서 필요할 때 하나씩 더하는 편을 권합니다.
정리
바이브코딩에서 결과물 품질을 가르는 건 화려한 도구보다 반복을 줄이는 장치입니다. 규칙 파일, 디자인 스킬, 검수 스킬 순서로 하나씩 켜면 됩니다.