본문 바로가기
study/TIP

바이브코딩, 감으로 하지 말고 점수로 보자 — VibeGraph 만든 이야기

by 휘루걸음 2026. 6. 7.
728x90
반응형

AI랑 같이 코딩한 대화를 매번 스스로 채점하고, 내 프롬프트 습관이 좋아지는지 그래프로 추적하는 CLI를 만들었습니다. API 키도, 추가 결제도 필요 없습니다.

시작은 왜 자꾸 같은 실수를 하지라는 의문이었습니다

 

728x90

요즘 Claude Code 같은 도구로 AI랑 같이 코딩합니다. 흔히 바이브코딩이라고 하죠. 참 편한데, 돌아보면 매번 비슷한 데서 시간을 흘리곤 했습니다.

  • 요구사항을 한 번에 안 주고 여러 번 고치게 만들거나
  • 모호하게 지시해서 엉뚱한 결과를 받아 다시 설명하거나
  • AI가 던진 땜질이나 우회 제안에 그냥 끌려가거나
  • 환경(버전, 파일 구조)을 안 알려줘서 안 맞는 코드를 받기도 했습니다

문제는 그때뿐이고 기록이 안 남는다는 점이었습니다. 다음 작업에서 똑같은 실수를 반복하더군요. 매 작업이 끝날 때마다 객관적으로 점수를 매겨주면 습관이 고쳐지지 않을까 하는 생각에 이 도구를 만들게 되었습니다.

 

반응형

VibeGraph가 하는 일

작업이 끝나면 그 대화를 4개 항목(각 25점)으로 채점합니다.

  • 원샷 달성률: 요구사항과 제약을 한 번에 줘서 불필요한 수정 턴을 줄였나
  • 컨텍스트 유지력: 초기 목표를 유지하고 무의미한 왕복이 없었나
  • 주도권 제어력: 땜질 제안에 휩쓸리지 않고 사람이 방향을 잘 잡았나
  • 프롬프트 선명도: 모호함 없이 에러 로그나 소스 같은 명확한 컨텍스트를 줬나

그리고 단순히 점수만 주는 것에 그치지 않고 몇 가지를 더 챙겼습니다.

  • 무엇이 문제였는지(Prompt Smell)와 이렇게 썼으면 더 좋았을 Good/Bad 예시
  • 이 작업에는 다른 스킬이나 도구가 나았을 것이라는 추천
  • 작업이 쌓이면 나타나는 성장 추세, 가장 약한 항목, 반복되는 실수 통계

핵심은 API 키가 필요 없다는 점입니다

여기가 이 도구의 포인트입니다. 보통 이런 채점을 하려면 별도 API 키를 발급받고 종량제로 돈을 내야 합니다. 하지만 저는 이미 Claude Pro를 구독 중인데 추가 결제를 하기는 싫었습니다.

그래서 발상을 바꿨습니다. 채점을 작업하던 바로 그 Claude 창에서 진행하는 것입니다. 그 창은 이미 우리 대화 전체의 맥락을 갖고 있으니까요.

[터미널]                         [Claude Code 창]
vibe start   ───────────────▶  평소처럼 코딩
vibe prompt ─(채점 프롬프트 복사)─▶ 붙여넣기 → Claude가 스스로 채점 JSON 출력
result.json 에 저장 ◀────────────┘
vibe end    ──▶ 리포트 HTML 생성

대화를 따로 복사해 붙일 필요도 없습니다. 프롬프트 한 줄만 붙여넣으면 끝납니다. CLI는 폴더 정리, HTML 생성, 통계만 담당하고 외부 API는 일절 호출하지 않습니다.

쌓이면 보이는 것들

작업 하나하나의 리포트도 좋지만, 진짜 가치는 데이터가 누적되면서 나옵니다.

전체 조회 페이지에서는 모든 작업을 한 표에서 볼 수 있습니다. 검색, 프로젝트, 기간 필터를 지원하며 클릭하면 개별 리포트로 연결됩니다.

성장 리포트에서는 점수 추세 그래프, 항목별 평균과 가장 약한 항목, 반복되는 Prompt Smell, 프로젝트별 평균을 보여줍니다. 이는 AI의 해석이 아니라 순수 계산 결과라 환각 현상이 없습니다.

마지막으로 코칭 기능이 있습니다. 위에서 계산으로 뽑아낸 신호를 Claude에 넘겨 '반복되는 약점과 다음 작업에서 당장 할 행동'을 받아냅니다. 맨 숫자를 던져서 통찰을 달라고 하면 공허한 일반론이 나오기 쉽기 때문에, 신호를 먼저 추출하고 AI는 문장으로만 풀게 한 것이 포인트입니다.

 

만들면서 신경 쓴 설계 결정 몇 가지

개인 도구지만 몇 가지는 일부러 고민해서 구현했습니다.

첫째, 채점은 보수적으로 잡았습니다. 처음엔 점수가 너무 후하게 나와서, 보통의 무난한 대화는 60~75점이 정상이고 A는 정말 잘한 경우에만 주도록 기준을 빡세게 다시 잡았습니다.

둘째, 데이터와 코드를 분리했습니다. 채점 데이터는 사용자의 홈 디렉터리 내 별도 폴더에 저장되고 코드는 저장소에 남습니다. 덕분에 GitHub에 코드를 올려도 개인 기록이 섞이지 않고, git clean 같은 명령에도 데이터가 안전합니다.

셋째, 성장 리포트의 기본 범위를 최근 2주로 제한했습니다. 전체 기간을 기본으로 하면 작업이 쌓일수록 느려지고 차트도 복잡해집니다. 전체를 보고 싶다면 옵션을 붙여서 확인할 수 있게 했습니다.

넷째, 명령어는 페이지에서 복사하도록 했습니다. 필터 조건을 외워서 타이핑하는 대신, 리포트 하단에서 필요한 명령어를 복사 버튼으로 바로 가져다 쓰도록 UI를 짰습니다.

 

 

설치 및 사용 방법 (Windows)

  1. 저장소를 클론한 뒤 install.bat 파일을 더블클릭합니다. (Python 확인 및 PATH 등록이 진행됩니다.)
Bash
 
git clone https://github.com/seamoon23/vibegraph.git
  1. 새 터미널을 열어 아래 흐름대로 사용합니다.
Bash
 
vibe start myproject 로그인_세션수정
# … Claude Code로 평소처럼 작업 …
vibe prompt       # 채점 프롬프트가 복사됩니다. Claude 창에 붙여넣은 후 출력된 JSON을 result.json에 저장합니다.
vibe end          # 리포트를 생성합니다.
vibe growth       # 성장 추세를 확인합니다.

동작을 위해서는 Python 3.8 이상 버전이 필요합니다. 설치 후 vibe 명령어가 잡히지 않으면 에디터나 터미널을 완전히 재시작하시면 됩니다.

마치며

거창한 도구는 아닙니다. 하지만 AI랑 코딩을 잘하고 있나라는 막연한 질문을 매번 점수로 마주하고 추세로 확인하게 되면서, 제 습관도 조금씩 바뀌는 것을 느낍니다. 비슷한 고민을 하셨던 분들이라면 가볍게 한번 써보셔도 좋겠습니다. 피드백이나 이슈 제보는 언제나 환영합니다.

저장소 주소: https://github.com/seamoon23/vibegraph

 

GitHub - seamoon23/vibegraph: guide vibecoding feel

guide vibecoding feel. Contribute to seamoon23/vibegraph development by creating an account on GitHub.

github.com

 

 

728x90
반응형