누가 바이브코딩 딸깍이면 된다고 했어? (1)

클로드 코드와 함께 바이브코딩을 처음 시작할 때만해도 완전 신세계였습니다.

그런데 화면을 많이 만들면 만들수록 오탈자, 컴포넌트 규칙, 디자인 토큰, 시스템을 바이브코딩이 따르지 않아 수정을 해야할 일이 계속 발생했습니다.

이 버튼을 조금 더 크게 해줘. 이 레이어를 이 레이어 위에 올려줘.

스크린샷으로 캡처해서 AI에게 전달해줘도 그대로 안 만들어줍니다.

스크린샷에 동그라미를 쳐서 줘도 엉뚱한 곳을 고치거나 아예 다른 해석을 해오는 일이 다반사였습니다.

benji의 agentation을 발견했다

그러던 중 benji의 agentation을 발견했습니다.

UI 요소를 직접 클릭하면 피드백을 남길 수 있고, 그걸 마크다운으로 출력해서 AI 에이전트에 바로 전달하는 도구였습니다.

"이거다!" 싶었습니다. 바로 써봤습니다.

근데 내 워크플로우와 맞지 않았다

열심히 사용해봤지만 두 가지가 문제였습니다.

첫째, React 프로젝트에서만 돌아갔습니다. 저는 React 외에도 HTML/CSS/JS 기반의 프로젝트를 진행하고 있습니다. 그래서 React가 아닌 프로젝트에서는 Benji의 도구를 아예 쓸 수가 없었습니다.

둘째, 출력 양식이 내 워크플로우와 맞지 않았습니다. 저는 클로드 코드에 넘길 때 DEV-REQUEST라는 양식을 씁니다. agentation의 출력은 그 형식과 달랐고, 매번 수동으로 변환해야 했습니다.

좋은 도구였지만, 내 상황에는 맞지 않았습니다.

그래서 직접 만들기로 했다

클로드 코드한테 지시해서 만든 거지만, 기획과 검수는 제가 했습니다. 직접 만들면서 중요하게 생각한 건 세 가지였습니다.

1. React보다 더 넓은 확장

자바스크립트 기반의 프로젝트로 만들어서 React뿐만 아니라 더 넓은 영역에서 커버할 수 있게 했습니다.

2. 내 업무 방식에 맞추기

제가 클로드 코드와 코워크에서 설정한 워크플로우와의 연결을 가장 중요하게 생각했습니다. API로 연결하면 별도의 비용이 발생하니 마크다운을 출력하게 했고, 어떤 피드백을 요청했는지 까먹었을 경우를 대비하여 마크다운 삽입 기능도 추가했습니다.

3. 나의 편의성 증진

다양한 단축키 기능을 통해 업무를 더 빠르게 처리할 수 있게 구현했습니다. Alt+Q를 누르면 검수 모드가 켜지고, 화면에서 요소를 클릭하면 피드백을 남길 수 있습니다. 텍스트를 드래그해서 선택할 수도 있고, 영역을 잡을 수도 있습니다.

benji의 agentation에서 영감을 받았습니다. 좋은 도구를 만들어줘서 고맙습니다.