Astro K Joseph

Cursor + Momen — 풀스택 AI 앱을 통째로 짓는 가장 미친 워크플로우

2026-05-15 · AI 비주얼 리포트
CursorMomen노코드풀스택AI에이전트TestSprite
▶ YouTube 원본 보기

📌 핵심 요약

🗂 핵심 개요

예시 앱로그인 가능한 AI 이미지 편집 SaaS (이미지 업로드 + 프롬프트 → 편집 결과)
백엔드Momen — DB / 인증 / Action Flow / AI 에이전트
프론트Cursor — Momen 연결 후 단일 프롬프트로 UI 자동 생성
테스트TestSprite MCP — AI 에이전트가 직접 화면을 클릭·검증
배포Vercel 등 원하는 플랫폼

🧱 Momen 백엔드 만들기

  • 새 프로젝트 → 'image editor' 빈 프로젝트로 시작▶3:24
  • AI Agent 추가: 입력=이미지+편집 지시, Role/Goal 템플릿 작성▶4:48
  • 모델 선택: Gemini 3.1 Flash Image Preview (Nano Banana)▶6:34
  • Sync Changes로 백엔드 데이터모델 자동 반영

🗃 데이터베이스 — AI Copilot

  • Data Model 탭에서 AI Copilot 호출 → 자연어로 테이블 생성▶9:12
  • image_project / editing_history 테이블 자동 설계
  • 스키마 변경 계획을 확인 후 Confirm & Execute 한 번으로 적용
  • 대안: 직접 컬럼 추가도 가능 — 비숙련자는 Copilot 추천

🔄 Action Flow — 비주얼 로직 빌더

  1. 입력 노드: image_project_id, edit_instruction 두 변수 정의▶11:37
  2. Query Data: image_project 테이블에서 ID로 조회 (AI Smart Suggestion으로 자동 매핑)
  3. 실행 모드를 Async로 전환 — 실패 시 해당 노드의 DB 수정만 롤백
  4. Run AI: 앞서 만든 image_editor_agent 호출, 원본 이미지 + 지시문 전달
  5. Insert Data: editing_history에 prompt / result_image / project_id 저장▶15:23
  6. Formula → Get Item으로 AI 응답에서 이미지 추출 (index 0)

🎨 Cursor로 프론트엔드 자동 생성

  • Momen ↔ Cursor 연결 후 단일 프롬프트로 UI 생성
  • 로그인 + 이미지 업로드 + 프롬프트 입력 + 결과 영역 자동 구성
  • 다크모드·테마 변경은 follow-up 프롬프트로 즉시 리디자인▶25:56
  • 외부 API 연동: Momen의 API 섹션에서 OpenAI 등 추가 가능

🧪 TestSprite — AI QA 자동화

  • TestSprite MCP를 Cursor에 추가, API Key 등록▶26:45
  • "5개 핵심 테스트만 돌려줘" 한 줄 명령으로 시작
  • AI 에이전트가 실제 UI를 클릭·입력하며 녹화까지 제공
  • 실패 케이스의 원인·수정안을 자동 제시
  • GitHub 연동 시 PR마다 자동 테스트 게이트로 머지 차단 가능▶29:06

🎯 활용 시나리오

  • AI 이미지/영상 편집 SaaS의 빠른 MVP 구축
  • 사내 자동화 도구: 폼 입력 → AI 에이전트 호출 → DB 기록
  • 1인 개발자가 풀스택 앱 + 자동 QA까지 단일 워크플로우로 완성

♟ 워크플로우의 의미

  • '노코드 백엔드' + '바이브 코딩' 결합으로 풀스택 진입 장벽 급락
  • 코드 작성 없이 비즈니스 로직 90% 처리 가능
  • AI Copilot이 스키마·매핑·테스트까지 보조 → 1인 SaaS 시대
  • 주의: 모델 비용·벤더 락인·복잡한 로직 한계는 별도 검토 필요

🔭 따라 해보기 체크리스트