클라이언트가 아이디어를 설명하면 AI가 견적 산출, 요구사항 미팅, 설계, 개발, 배포까지 전 과정을 자동으로 처리하는 소프트웨어 에이전시 플랫폼.
App Router, Server Components, TypeScript strict mode. Geist 폰트 + Tailwind CSS 4.
claude-sonnet-4 모델. 답변을 한 글자씩 실시간으로 흘려보내는 스트리밍 채팅. API 키가 없으면 미리 준비한 가짜 응답으로 대체.
이메일·구글 로그인 인증, 행 단위 접근 제어(RLS), 실시간 DB. clients/projects/quotes 테이블.
보더 대신 그림자로 경계를 표현, 좁은 자간, 여러 겹 그림자. 20KB 분량의 디자인 규칙 문서.
프로젝트 종류(랜딩/웹앱/모바일/풀스택)와 난이도(단순/보통/복잡)를 고르면 시간당 $50 기준으로 비용 자동 계산. 입력값 검증(Zod) 후 Supabase의 quotes 테이블에 저장. DB 저장이 실패해도 화면 계산으로 대체해 서비스가 멈추지 않음.
Claude가 프로젝트 컨설턴트로서 한국어 상담 진행. 답변을 한 글자씩 실시간으로 전송. 아이디어 수집 → 명확화 질문 → 요구사항 정리 → 견적 제안. API 키가 없으면 미리 준비한 가짜 응답으로 동작.
이메일·구글 로그인(Supabase 인증). Next.js 미들웨어(중간 검문 코드)로 /dashboard 페이지 보호. 클라이언트의 프로젝트·견적 현황 실시간 표시. 로그인 상태는 쿠키로 관리.
20KB 분량의 디자인 규칙 문서. 흰 배경, Geist 폰트, 보더 대신 그림자로 경계 표현(shadow-as-border), 자간을 음수로 좁힌 글자. 다크 모드는 CSS 변수로 전환. 화면 크기에 맞춰 375px부터 반응.
| 테이블 | 주요 컬럼 | 역할 |
|---|---|---|
clients |
user_id, company_name, contact_name, email, phone | 인증된 사용자와 고객 정보 연결 |
projects |
client_id, title, description, status, estimated_cost, deadline | 프로젝트 진행 단계 추적: 대기(pending)→진행중(in_progress)→검토(review)→완료(completed) |
quotes |
client_id, project_type, complexity, base_hours, multiplier, total_amount, status | 견적 요청 저장: 대기(pending)→검토됨(reviewed)→수락(accepted)→거절(rejected) |
히어로·기능 소개·이용 방법·가격 섹션. 견적 폼 + 실시간 계산. 입력값 검증(Zod). 모바일 화면 대응.
Supabase 인증(이메일·구글 로그인). 미들웨어로 페이지 보호. 클라이언트 테이블. 로그인 상태를 쿠키로 관리.
Anthropic Claude 실시간 스트리밍 채팅. 요구사항 추출. 키가 없으면 가짜 응답으로 대체. 미팅 요약 생성.
자동 개발 파이프라인 — AI 에이전트가 설계→코딩→테스트→배포를 자동 처리. 클라이언트는 대시보드에서 진행 상황만 확인.
모든 기능이 API 키 없이도 작동. Anthropic 키가 없으면 가짜 응답, Supabase가 실패하면 화면에서 직접 계산으로 대체. 외부 서비스가 멈춰도 사용자 경험(UX)이 깨지지 않음.
클라이언트가 아이디어를 설명하면 AI가 나머지를 전부 처리. 견적, 상담, 개발, 배포까지. 사람은 최종 확인만.