[🔨활용] 바이브코딩으로 바이브코딩 시키기 (5)

[약팔이아님(vital7966)]

ㅎㅇㅎㅇ 다이어그램으로 바이브코딩을 할 수 있는 UI 툴을 개발하고 있는 꾸준글러임

이번에 해본건 다이어그램을 AI가 말 그대로 생성할 수 있게 하는거임

배경을 말하자면 '다이어그램' 이란건 AI 프롬프트나 db, code, jinja template같이 여러 부분에 걸친 코드들을 노드와 엣지로 만들고

이걸 프론트엔드에서 react를 이용해서 렌더링하고 시각화하는건데

말 그대로 그냥 전반적인 코딩 작업을 다이어그램으로 하고 그 반대로 코드가 실행되는걸 다이어그램으로 나타내고 실시간으로 보고 싶었음

근데 진짜 코드를 다이어그램으로 만드는데 성공했으면, 그냥 LLM한테 '이 코드 짜줘' 하는걸 다이어그램으로 만들수도 있지 않을까? 해서 시도해봄

* 왜 굳이 코드가 아니라 다이어그램을 짜달라고 하는거냐면, 만들때마다 라이브러리 제각각이거나

코드 어디에서 뭐가 실행중인지 보고 싶어서 그랬음

내가 만든 포맷은 이런 느낌임

맨 처음엔 클로드 코드한테 예시들을 보고 '짜줘' 라고 해봤다

그랬더니 

아니 자꾸 애가 내가 정한 포맷을 어김 (각 node type을 대문자로 만들어버리고 code node에 인라인 함수를 만들려그럼)

가이드를 주고 생성시켜도 자꾸 '내 다이어그램 포맷에 맞는 형식'을 지키지 않아서 컴파일 오류를 낸다

그러면 아예 gpt에 달려있는 structured output 기능을 쓰면 어떨까 싶었다

이게 뭐냐면, 내가 처음부터 다이어그램 포맷에 대한 구체적인 데이터 형태를 알려주면

'무조건' 해당 형식에 들어맞는 방식으로만 출력을 해줌.

ㅇㅋ 이런 식으로 내가 만든 다이어그램 포맷을 정의하고 (typescript에서 pydantic으로 code generation 하고, structured output 표준에 맞게 약간 변경)

대략 이런식으로 다이어그램을 짜서, gpt 5한테 다이어그램 포맷 파일 (text_format_file)을 주면?

생각보다는 토큰도 많이 먹고 시간도 오래 걸림

그래서 바로 실행 가능하느냐?

ㅇㅇ 뭔가 난잡해보이기는 하는데 일단 내가 정의한 포맷대로 잘 생성해서인지 컴파일 오류 없이 바로 실행되는 모습

다음에는 한번 다양한 프롬프트를 줬을 때도 알아서 적당한 다이어그램을 만드는지 확인해볼게

참고로 프로젝트는 mit 라이센스니 자유롭게 클론하든 포크하든 상관없음

https://github.com/sorryhyun/DiPeO

GitHub - sorryhyun/DiPeO: Agent building tools via block diagram UI