Wireframe AI

개요

단순 데모를 넘어 생성 파이프라인·샌드박스 실행·상태 저장·결제 시스템까지 포함한 서비스형 구조로 발전한 프로젝트입니다.

클라이언트 과제

초기 제품 기획 단계에서는 아이디어를 시각 구조로 옮기는 속도가 의사결정 속도를 좌우합니다. 하지만 기존 방식은 기획 문서 작성·화면 러프 스케치·프로토타입 구성·검토 과정을 각각 다른 도구에서 수행해야 해서 전환 비용이 컸습니다. 클라이언트가 원한 것은 자연어 입력만으로 화면 초안을 빠르게 만들고, 여러 모델의 응답을 비교하면서 원하는 결과를 고도화할 수 있는 흐름이었습니다. 동시에 실제 서비스로 운영하려면 생성 실행 환경의 안정성·사용자 상태 관리·과금 처리까지 함께 풀어야 했습니다.

솔루션

자연어 입력을 받아 와이어프레임과 프로토타입 결과물로 이어지는 end to end 생성 흐름을 설계했습니다. Next.js 14 기반 UI 위에 Vercel AI SDK를 연결해 다중 LLM 지원 구조를 만들고, 사용자 요청에 따라 서로 다른 모델을 선택하거나 비교할 수 있게 했습니다. 생성된 산출물은 Excalidraw 기반 렌더링으로 바로 확인할 수 있으며, 더 복잡한 실행은 E2B SDK 기반 샌드박스 환경에서 안전하게 처리합니다. 데이터와 상태는 Supabase·Upstash·Vercel KV를 조합해 관리했고, Stripe를 연결해 유료 사용 시나리오까지 포함했습니다.

아키텍처

리포지토리는 `app/`·`components/`·`lib/`·`sandbox-templates/`·`source/` 중심으로 구성됩니다. `app/`은 채팅 기반 입력 화면·결과 미리보기·결제와 계정 관련 라우트를 포함하고, `components/`는 생성 결과를 시각적으로 제어하는 UI 모듈과 공통 인터랙션 컴포넌트를 담당합니다. `lib/`는 모델 호출·상태 처리·저장 계층·결제 연동 로직을 묶는 서비스 레이어 역할을 하며, `sandbox-templates/`는 샌드박스 안에서 실행될 템플릿 자산을 관리합니다.

핵심 구현 하이라이트

• 자연어 설명을 와이어프레임과 프로토타입 초안으로 연결하는 생성 흐름을 end to end로 구현
• Vercel AI SDK 기반 다중 LLM 지원 구조로 모델 선택 폭과 실험 유연성 확보
• Excalidraw 렌더링을 제품 UI와 직접 연결해 생성 결과 즉시 검토
• E2B SDK 기반 샌드박스 실행 환경으로 생성 결과의 실행 안정성과 격리 확보
• Supabase·Upstash·Vercel KV 조합으로 세션 상태와 캐시를 분리 관리
• Stripe 결제 시스템 통합으로 프로토타입 도구를 실제 과금 가능한 제품으로 확장

성과 지표

개발 기간	2024-07-10 ~ 2026-01-22
개발 기간 기준 커밋	289 commits
핵심 생성 흐름	자연어 → 다중 LLM → 와이어프레임/프로토타입
실행 환경	E2B SDK 샌드박스
상태 관리	Supabase · Upstash · Vercel KV
수익화 요소	Stripe 결제 통합

기술 스택

역량 태그

Next.js · Generative UI · Multi-LLM · Excalidraw · E2B · Supabase · Stripe · AI Prototyping