Launch HN: VibeFlow (YC S25) – 시각적이고 편집 가능한 워크플로우를 갖춘 웹 앱 생성기
요약
VibeFlow는 자연어 프롬프트를 통해 풀스택 웹 앱을 생성하고, 비즈니스 로직을 시각적 워크플로우 그래프로 편집할 수 있게 해주는 도구입니다. 여러 도구를 개별적으로 연결할 때 발생하는 데이터 사일로와 유지보수의 어려움을 해결하기 위해, 인터페이스와 백엔드 로직을 통합된 환경에서 제공합니다.
핵심 포인트
- 자연어 프롬프트를 사용하여 UI와 백엔드 로직을 동시에 생성 가능
- 비즈니스 로직을 시각적 워크플로우 그래프로 표현하여 직접 편집 및 제어 가능
- Convex를 백엔드로 사용하여 결정론적 코드 생성을 통해 AI 환각 현상 방지
- 준기술적 인력(Semi-technical builders)이 유지보수 가능한 수준의 앱을 구축하도록 설계
- 프론트엔드와 백엔드 로직이 항상 동기화되어 데이터 불일치 문제 해결
안녕하세요 HN! 저희는 VibeFlow(https://vibeflow.ai)의 창업자인 Alessia와 Elia입니다. VibeFlow는 준기술적 인력(즉, 어느 정도의 기술적 기술은 있지만 전문 프로그래머는 아닌 사람들)이 자연어 프롬프트(Natural language prompts)를 통해 풀스택 웹 앱을 구축할 수 있게 해주며, 동시에 기저의 비즈니스 로직(Business logic)을 시각적 워크플로우(Visual workflow)로서 명확하게 확인하고 편집할 수 있도록 합니다. 데모 영상:
저희가 해결하려는 문제: 오늘날 코딩 없이 앱을 만들고 싶어 하는 사람들은 종종 여러 도구를 짜깁기해야 합니다. 예를 들어, 프론트엔드(Frontend)를 위해 Lovable을 사용하고, 워크플로우(Workflows)를 위해 n8n을 사용하며, 데이터베이스(Database)를 위해 Supabase를 사용하는 식입니다. 이는 데이터 사일로(Data silos)를 생성하며, 제작자가 운영 환경에서 깨지기 쉽고, 확장성이 없으며, 안전하지 않은 앱을 만들게 합니다. 저희는 유튜브 튜토리얼에서 사람들이 단순히 작동하는 앱을 실행하기 위해 이러한 도구들을 임시방편으로 이어 붙이는 법을 가르치는 것을 보았습니다. 노코드(No-code) 도구를 만드는 엔지니어로서, 저희는 사람들이 AI가 생성한 UI의 강력함뿐만 아니라, 자신들의 백엔드(Backend) 워크플로우와 데이터를 보고 제어할 수 있는 능력도 원한다는 것을 깨달았습니다.
저희의 솔루션은 앱 전체를 한 번에 생성하고 이를 시각적 워크플로우로 표현하는 것입니다. 사용자가 영어로 원하는 내용을 설명하면(“AI 에이전트가 포함된 채팅 위젯이 필요해”) VibeFlow가 인터페이스(Interface)와 로직(Logic)을 모두 생성합니다. 그 로직은 사용자가 시각적으로 편집하거나 새로운 지침을 제공하여 수정할 수 있는 워크플로우 그래프(Workflow graph)로 나타납니다.
저희는 백엔드로 Convex(https://www.convex.dev/)를 사용합니다. 백엔드 코드 생성은 완전히 결정론적(Deterministic)이며, 워크플로우 그래프를 코드 템플릿(Code templates)에 매핑합니다. 이를 통해 배포(Deployments)를 예측 가능하게 만들고, AI로부터 자주 발생하는 환각(Hallucination) 현상이 있는 블랙박스(Black-box) 코드를 방지합니다.
워크플로우 표현: 로직은 각 노드(Node)를 맞춤 설정할 수 있는 유향 그래프(Directed graph)입니다. 현재 저희는 CRUD 작업과 에이전트(Agent) 컴포넌트를 지원합니다. 그래프에 가해지는 모든 변경 사항은 코드로 직접 컴파일되므로, 사용자는 항상 기저의 로직을 소유하게 됩니다.
프론트엔드: AI를 통해 생성되며 워크플로우 출력값과 직접 연결되므로, 비즈니스 로직과 항상 동기화된 상태를 유지합니다. 프론트엔드에 대한 변경 사항은 채팅 인터페이스를 통해 수행할 수 있습니다.
준전문가급 빌더(Semi-technical builders)는 유지보수가 가능한 앱(불투명한 "마법"이 아닌)을 만들 수 있으며, 기술 인력은 여전히 코드와 아키텍처(Architecture)를 검사할 수 있습니다. Bubble/Webflow와 비교하면 인터페이스가 더 단순하고, Zapier와 비교하면 워크플로우(Workflows)에 출력 코드가 있으며, AI 코딩 어시스턴트(AI coding assistants)와 비교하면 블랙박스(Black-box) 없이 자동으로 연결된 백엔드(Backend)를 얻을 수 있습니다.
여기에서 직접 체험해 보실 수 있습니다: https://app.vibeflow.ai/. 데모 영상은 https://youtu.be/-CwWd3-b1JI 입니다.
도구들을 하나로 엮는 데 어려움을 겪었던 빌더이든, 노코드(No-code) 플랫폼의 페인 포인트(Pain points)를 목격한 개발자이든, 혹은 AI 기반 앱 생성(AI-powered app generation)이 어디로 향하고 있는지 궁금한 분이든, HN 커뮤니티의 의견을 듣고 싶습니다. 여러분의 생각을 간절히 기다리고 있습니다!
AI 자동 생성 콘텐츠
본 콘텐츠는 HN Show HN (AI)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기