소프트웨어를 외주로 만들려면 견적을 받고, 요구사항 미팅을 하고, 설계와 개발을 거쳐 배포(deploy, 만든 서비스를 실제 인터넷에 올리는 일)까지 사람이 단계마다 붙어야 한다. AI Agency는 그 단계를 사람 대신 AI가 맡게 하려고 만든 소프트웨어 에이전시(agency, 외주 개발사) 플랫폼이다. 클라이언트가 아이디어를 설명하면 AI가 견적 산출, 요구사항 미팅, 설계, 개발, 배포까지 전 과정을 파이프라인(pipeline, 앞 단계의 결과가 다음 단계로 자동으로 넘어가는 작업 흐름)으로 처리한다. 지금까지 견적 화면과 로그인·대시보드(진행 상황을 한눈에 보는 화면)가 완성됐고, AI 미팅 챗봇은 만드는 중이다.
Next.js 16 + React 19화면은 App Router(주소와 페이지를 폴더 구조로 잇는 방식)로 구성한다. Server Components(서버에서 먼저 그려서 보내는 화면 조각)를 쓴다. 코드는 TypeScript strict mode(타입 검사를 가장 엄격하게 켠 설정)로 작성한다. 글꼴은 Geist, 스타일은 Tailwind CSS 4(미리 정한 짧은 클래스 이름으로 꾸미는 도구)다.
claude-sonnet-4 모델을 쓴다. Anthropic이 만든 Claude 모델 계열 중 하나다. 답변을 한 글자씩 실시간으로 흘려보내는 스트리밍(streaming) 채팅으로 대화한다. API 키(Anthropic 서비스를 부를 때 내는 열쇠)가 없으면 미리 준비한 가짜 응답으로 대체한다.
RLS (Row Level Security, 행 단위 접근 제어)로 각 사용자가 자기 행(row)만 읽고 쓰게 막는다. 이메일과 구글 계정으로 로그인하는 인증, 그리고 데이터가 바뀌면 화면에 바로 반영되는 실시간 DB도 Supabase가 맡는다. 테이블은 고객·프로젝트·견적 세 개(clients/projects/quotes)다.
Vercel(웹 서비스를 올려 주는 호스팅 회사)이 쓰는 디자인 규칙을 따른다. 상자의 경계를 보더(border, 테두리 선) 대신 그림자로 표현한다. 자간(글자 사이 간격)을 좁게 잡고, 그림자를 여러 겹 겹친다. 이 규칙을 적은 문서가 20KB 분량이다.
클라이언트가 프로젝트 종류(랜딩/웹앱/모바일/풀스택)와 난이도(단순/보통/복잡)를 고르면 시간당 $50 기준으로 비용을 자동 계산한다. 입력값은 Zod(값의 형식이 맞는지 검사하는 라이브러리)로 검증한 뒤 Supabase의 quotes 테이블(견적 요청을 쌓아 두는 표)에 저장한다. DB 저장이 실패해도 화면에서 계산한 값을 그대로 보여 주므로 서비스가 멈추지 않는다.
Claude가 프로젝트 컨설턴트 역할을 맡아 한국어로 상담한다. 답변은 한 글자씩 실시간으로 보낸다. 상담은 아이디어 수집 → 명확화 질문 → 요구사항 정리 → 견적 제안 순서로 흘러간다. API 키가 없으면 미리 준비한 가짜 응답으로 동작한다.
Next.js 미들웨어(middleware, 페이지를 열기 전에 먼저 거치는 중간 검문 코드)가 로그인하지 않은 사람을 막는다. 로그인은 이메일과 구글 계정으로 한다(Supabase 인증). 이 미들웨어가 지키는 페이지는 /dashboard 이다. 클라이언트는 자기 프로젝트와 견적이 어느 단계인지 실시간으로 본다. 로그인 상태는 쿠키(cookie, 브라우저가 기억해 두는 작은 값)로 관리한다.
shadow-as-border 라는 기법이 이 디자인의 핵심이다. 상자의 테두리를 선(border) 대신 얇은 그림자로 그린다는 뜻이다. 그 밖에 흰 배경, Geist 폰트(Vercel이 만든 글꼴), 자간(글자 사이 간격)을 음수로 좁힌 글자를 쓴다. 이 규칙을 적은 디자인 문서가 20KB 분량이다. 다크 모드는 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와 실시간 스트리밍 채팅으로 상담한다. 대화에서 요구사항을 뽑아낸다. API 키가 없으면 가짜 응답으로 대체한다. 미팅이 끝나면 요약을 만든다.
자동 개발 파이프라인 — AI 에이전트(agent, 사람 대신 판단하고 실행하는 AI 프로그램)가 설계→코딩→테스트→배포를 자동으로 처리한다. 클라이언트는 대시보드에서 진행 상황만 확인한다.
우아한 대체(graceful fallback)란 바깥 서비스가 없어도 기능이 죽지 않고 다른 길로 빠지는 설계다. 이 플랫폼은 모든 기능이 API 키 없이도 작동한다. Anthropic 키가 없으면 가짜 응답으로 답하고, Supabase가 실패하면 화면에서 직접 계산한 값으로 대체한다. 외부 서비스가 멈춰도 사용자 경험(UX)이 깨지지 않는다.
사람 개입 없음(zero human intervention)이 이 플랫폼의 목표다. 클라이언트가 아이디어를 설명하면 AI가 나머지를 전부 처리한다. 견적, 상담, 개발, 배포까지 이어진다. 사람은 최종 확인만 한다.