[시리즈] 바이브코딩 바이브코딩 바이브코딩
· 바이브코더 바이브코딩하게 바이브코딩하기 (1)


ㅎㅇㅎㅇ 바이브코더 꾸준글러임

지난시간에 이어서 딸깍만으로 프론트엔드를 풀 완성하는 에이전트 워크플로우를 만들려 했던 시도를 적어봄


이전에 만든 워크플로우는

클로드코드로 설계도 짜기 -> 컨텍스트 초기화 -> 클로드코드한테 설계도 읽히기 -> 반복 [ 다음 구현할 section 선택 -> 구현할 section에 필요한 메모리 선택 -> section 구현  ]  


이었는데, 이걸 좀 보강하기 위해

반복 [ 다음 구현할 section 선택 -> 구현할 section에 필요한 메모리 선택 -> section 구현  -> 검증 -> 통과 못하면 재작성]  


으로 개선해봤다

말은 간단한데 보강한 부분 워크플로우는 꽤 복잡함


24b0d121e09c28a8699fe8b115ef046c60f32a4c9b


...


그리고 매 코드 작성 시마다 클로드코드를 불러서 파일 한땀한땀 쓰게 하고 있는데

이때 클로드코드 sdk를 써서 매번 초기화 - 생성 하면 파일 하나 만들때마다 5초~심하면 30초씩 딜레이가 걸리기 때문에

미리 초기화해놓고 필요할때 생성하는 방식을 적용함


이것도 말이 간단하지 실제론 버그 잡는데만 이틀 꼬박 걸렸다



24b0d121e09c28a8699fe8b115ef046c60f2294f9a



아무튼, 워크플로우의 성능을 테스트하기 위해 꽤 빡센 프로젝트를 돌림



1ebec223e0dc2bae61ab96b304de297d3884526e5727749b9c8ee2aaf31c3ac5575f39c133abeed77ea756efd115e4b05fb7


딸깍 한번에 50개의 파일로 구성된 프론트엔드 프로젝트를 만들어내야함

이전보다 워크플로우가 복잡해졌기 때문에, 20분이면 만들던걸 40분만에 만들게 되었음

그나마도 속도 개선을 해서 이정도지 이전에는 1시간 넘게 걸림 ㅜ


그래서 이번 시도 결과물은??



1ebec223e0dc2bae61ab96b304de297d3884526e5727749b9c8ee2aaf31c3ac5575c3bc133abeed77ea756efd115eab05a3a



아 ㅅㅂ


문제를 보니 파일들 일부가 뭔가 이상했음

줄바꿈 문자 (\n) 가 그대로 들어가있다던가


1ebec223e0dc2bae61ab96b304de297d3884526e5727749b9c8ee2aaf31c3ac22e0fbdafcb90998935080db96bc152f468fb


원래는 분리되어야 할 코드를 하나의 파일에 쓴다던가



1ebec223e0dc2bae61ab96b304de297d3884526e5727749b9c8ee2aaf31c3ac40a5d0c24507f78dd3949c191fe0275a0fa55


흠...

뭔가 디테일하게 고쳐야할 부분이 있는거같음

그래도 구조 자체를 잘 만들었으면 에러도 금방 고치지 않을까???

라는 기대감에 클로드한테 한번 에러를 고쳐달라고 부탁해봄

에러 고치는데 20분정도 걸렸는데

과연 그 결과물은??

https://di-pe-o-examples-m6or.vercel.app/

Flowchart & Diagram EditorFlowchart & Diagram Editordi-pe-o-examples-m6or.vercel.app





24b0d121e09c28a8699fe8b115ef046c63f12f4a94



이런 씨발