I vibe-coded a $20M YC app in a weekend, here's how🧙‍♂️ 🪄

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

아키텍처 패턴과 설계 원칙

대상자

소프트웨어 개발자, 제품 기획자, AI/ML 엔지니어
난이도: 중급 이상 (노코드 플랫폼의 한계와 그래프 기반 에이전트 설계 이해 필요)

핵심 요약

LangGraph를 사용해 그래프 기반 에이전트 아키텍처 설계 (예: LLM Node, Tool Node, Agent Node 등)
Composio SDK로 100+ 툴의 자동 인증 처리 및 JSON 그래프 기반 워크플로우 실행
GPT-4.1과 Gemini 2.0 Flash의 협업으로 정밀한 코드 수정 및 대규모 리팩토링 가능

섹션별 세부 요약

1. 노코드 플랫폼의 한계

에이전트 중심 설계 필요성 강조: 워크플로우 자동화에 초점이 맞춰져 있음
에이전트 요구사항: 동적 라우팅, 복잡한 툴 오케스트레이션, 커스터마이징 가능
LangGraph 선택 이유: 노드-엣지 기반 그래프 모델로 에이전트 시각화 및 실행 용이

2. 기술 스택 및 아키텍처

프론트엔드: React Flow + 21st Dev의 이동 그리드로 드래그 앤 드롭 노드 캔버스 구현 (30분 소요)
백엔드: Next.js 기반 API 라우트 설계 (JSON 그래프 기반 실행)
핵심 노드 구현:

- Input Node

- Output Node

- LLM Node

- Tool Node

- Agent Node (LLM + Tools 통합)

3. 인증 및 툴 관리

Composio SDK로 OAuth2, API Key 등 다양한 인증 방식 지원
UI/UX 개선:

- 모달 기반 툴 관리 (툴킷별 연결 상태 표시)

- 동적 폼 생성 (OAuth2, API Key 등에 맞춘 인터페이스)

4. 워크플로우 실행 로직

4단계 실행 프로세스:

그래프 검증 (입력 노드 검증, 사이클 확인)
위상 정렬 (LangGraph 기반 실행 순서 결정)
노드 실행 (노드 타입별 실행 로직)
상태 관리 (데이터 전달 및 컨텍스트 유지)

샘플 코드:

switch (node.type) {
  case 'llm':
    const model = getModelFromApiKey(node.data.apiKey);
    result = await model.invoke(previousOutput);
    break;
  case 'tool':
    const tool = await composio.getTool(node.data.action);
    result = await tool.execute(previousOutput);
    break;
}

5. 에이전트 패턴 구현

순차 실행 패턴: customInput → agent_1 → agent_2 → customOutput
병렬 실행 패턴:

```plaintext

customInput → agent_1 (병렬)

customInput → agent_2 (병렬)

both → aggregator → customOutput

```

라우터 패턴: customInput → router_agent → agent_1 | agent_2 → customOutput
생성자-평가자 패턴: generator_agent → solution_output + evaluator_agent 반복 검증

결론

에이전트 개발의 핵심: 그래프 기반 아키텍처 + 재사용 가능한 툴 통합 (Composio 활용)
실무 팁:

- 사용자 인증 UX 개선이 기술적 문제보다 중요

- GitHub 링크를 통해 코드 fork 및 커스터마이징 가능

- vibe-coding을 통해 20인 팀 6개월 작업 대신 1주일 내 실행 가능