서비스 웹사이트 생성기은(는) 무엇을 하나요?
수백 개의 로컬 SEO 페이지를 하나의 자동화된 워크플로우로 완전한 서비스 기반 웹사이트를 구축합니다.
스택: NextJS 14 + TypeScript + Tailwind CSS + PostgreSQL + Prisma ORM + Jina AI + Unsplash
빠른 시작
0단계: 사용자 입력 수집 (필수)
진행하기 전에 다음 정보를 수집하세요:
- 서비스 분야: 어떤 서비스 업종인가요? (예: "배관공", "고압 세척", "HVAC")
- 서비스 지역: 주요 도시/지역 (예: "포트오렌지, 플로리다", "골웨이, 아일랜드")
- 사업체 이름 (선택 사항): 개인화 용도 (예: "머피 배관 서비스")
- Jina API 키: 리서치 및 Unsplash 이미지 수집에 필요
- HTML/CSS/JS 디자인 (선택 사항): 사용자가 제공하거나 시스템이 생성
다음 정보가 확인될 때까지 진행하지 마세요: 서비스 분야, 서비스 지역, Jina API 키.
1단계: 디자인 생성
중요: 디자인 생성 시 frontend-aesthetics 스킬 가이드라인을 반드시 따르세요!
사용자가 디자인을 제공하지 않은 경우:
호출: design-generator 에이전트
입력:
- 서비스 분야
- 대상 고객 (로컬 고객)
- 반드시 frontend-aesthetics 스킬 가이드라인 준수:
- 타이포그래피: 독특한 폰트 사용 (Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk)
- 색상: 업계별 팔레트, 보라색 그라데이션 금지
- 모션: 즐거움을 위한 CSS 애니메이션
- 배경: 레이어드 그라데이션, 미묘한 패턴
- Tailwind v4: space-x-* 대신 gap-* 사용, 커스텀 CSS 리셋 금지
출력: /design/index.html, /design/styles.css, /design/script.js
사용자가 디자인을 제공한 경우:
해당 디자인을 /design/ 폴더에 저장합니다.
2단계: 위치 탐색
호출: location-generator 에이전트
입력: 서비스 지역, 서비스 분야, Jina API 키
출력: /locations.json (20-50개 이상의 위치 + 메타데이터)
서비스 반경(보통 지리적 조건에 따라 15-50마일) 내의 모든 도시, 교외, 동네를 탐색합니다.
3단계: 서비스 스키마 생성
호출: service-schema-creator 에이전트
입력: 서비스 분야, Jina API 키, 샘플 위치
출력: /service-schema-template.json (5-15개 서비스 + 포괄적 스키마)
4단계: 데이터베이스 설정
호출: database-agent 에이전트
입력: 프로젝트 디렉토리, 서비스 분야, 서비스 지역
출력: PostgreSQL + Prisma ORM 구성 완료
테이블 생성: ContactForm, QuoteRequest, CallbackRequest, PageView, EmailSubscriber, ServiceAreaLead
5단계: 페이지 생성 전략 계산
총 페이지 = 서비스 수 × 위치 수
필요 에이전트 수 = 총 페이지 ÷ 12 (에이전트당 평균 페이지 수)
예시: 15개 서비스 × 48개 위치 = 720페이지 → 60개 에이전트
6단계: 페이지 생성기 실행 (병렬)
중요: 모든 에이전트를 순차가 아닌 동시에 실행하세요!
호출: service-page-generator 에이전트 (N개 에이전트 병렬)
에이전트당 입력:
- 서비스 스키마 템플릿 경로
- 할당된 서비스+위치 조합 (10-15페이지)
- Jina API 키 (Unsplash 이미지 수집용)
- 서비스 분야 컨텍스트
출력: /pages/*.json (에이전트당 10-15개 파일)
각 에이전트:
- Jina를 통해 Unsplash에서 관련 이미지 검색
- 서비스 설명, 혜택, 프로세스, FAQ 생성
- 모든 데이터와 이미지가 포함된 완전한 JSON 파일 생성
7단계: NextJS 사이트 빌드
호출: nextjs-builder 에이전트
입력: 디자인 파일, 모든 JSON 페이지, 서비스 스키마, 위치
출력: /website/ 폴더 (완전한 NextJS 앱 포함)
생성 항목:
- 서비스 개요가 포함된 홈페이지
- 주요 서비스 페이지
- 주요 위치 페이지
- 개별 서비스+위치 페이지 (예: /emergency-plumber-athenry)
- 서비스 카테고리 페이지
- 위치 페이지
- 클릭 투 콜 기능
- 신뢰 신호 및 CTA
8단계: Playwright 테스팅
# 백그라운드에서 개발 서버 시작
cd [프로젝트]/website && npm run dev &
# playwright-tester 에이전트 호출
# 모든 페이지 테스트, SEO 검증, 이미지 확인
# 테스트 후 개발 서버 종료
kill [PID]
9단계: GitHub 배포
cd [프로젝트-디렉토리]
git init
git add -A
git commit -m "Initial commit: [서비스 분야] in [서비스 지역] website"
gh repo create [레포지토리-이름] --public --source=. --push
gh CLI를 사용할 수 없는 경우 수동 지침을 제공합니다.
사용 가능한 에이전트
| 에이전트 | 목적 | 호출 시점 |
|---|---|---|
business-researcher | 특정 비즈니스 리서치 (이름이 제공된 경우) | 1회, 1단계 |
design-generator | HTML/CSS/JS 디자인 생성 | 1회, 1단계 |
location-generator | 서비스 지역 내 위치 탐색 | 1회, 2단계 |
service-schema-creator | 서비스 목록 및 스키마 생성 | 1회, 3단계 |
database-agent | PostgreSQL + Prisma 설정 | 1회, 4단계 |
service-page-generator | 이미지 포함 10-15페이지 생성 | N개 에이전트, 병렬 |
nextjs-builder | 완전한 NextJS 웹사이트 빌드 | 1회, 7단계 |
playwright-tester | 모든 페이지 및 기능 테스트 | 1회, 8단계 |
디자인 및 스타일 가이드라인
중요: 'AI 슬롭'을 피하기 위해 frontend-aesthetics 스킬을 반드시 따르세요!
타이포그래피 (frontend-aesthetics 기준)
- 절대 사용 금지: Inter, Roboto, Open Sans, Lato, Arial, 시스템 폰트
- 좋은 선택: Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk, Outfit, Bricolage Grotesque
- 극단 활용: 100/200 두께와 800/900 두께, 3배 이상의 크기 차이
서비스 유형별 색상
- 고압 세척/청소: 진한 파랑 (#1e40af) + 주황 (#ea580c) + 초록 (#059669)
- 배관: 물 파랑 (#0284c7) + 비상 빨강 (#dc2626) + 에코 초록 (#16a34a)
- HVAC: 시원한 파랑 (#0369a1) + 따뜻한 주황 (#ea580c) + 초록 (#059669)
- 전기: 전기 노랑 (#eab308) + 전문 파랑 (#1e40af) + 빨강 (#dc2626)
- 조경: 자연 초록 (#15803d) + 흙 갈색 (#92400e) + 파랑 (#0284c7)
- 마케팅/B2B: 네이비 (#0A66C2) + 보라 악센트 (#8B5CF6) + 성공 초록 (#10B981)
Tailwind v4 호환성 (중요)
- 절대 사용 금지:
space-x-*,space-y-*(v4에서 제거됨) - 항상 사용: flex/grid 컨테이너에
gap-* - 추가 금지: 커스텀
* { margin: 0 }리셋 (mx-auto가 깨짐) - 추가: CSS에
@config "../tailwind.config.ts"(config 사용 시)
서비스 웹사이트 요구사항
- 강력한 CTA (지금 전화 버튼, 견적 요청 폼)
- 모바일에서 클릭 투 콜 기능
- 신뢰 신호 (인증, 보증, 리뷰)
- 지역 전화번호 눈에 띄게 표시
- 서비스 지역 범위 명확히 표시
- 전환 전/후 이미지 갤러리
- 페이지 로드 및 인터랙션에 모션/애니메이션
파일 구조
project-root/
├── design/
│ ├── index.html
│ ├── styles.css
│ └── script.js
├── pages/
│ └── [service]-[location].json (200+ 파일)
├── website/
│ ├── app/
│ │ ├── [slug]/page.tsx
│ │ ├── services/page.tsx
│ │ ├── locations/page.tsx
│ │ └── ...
│ ├── components/
│ └── package.json
├── prisma/
│ └── schema.prisma
├── locations.json
├── service-schema-template.json
└── business-profile.json (사업체 이름이 제공된 경우)
예시 워크플로우
사용자: "포트오렌지, 플로리다에서 고압 세척 서비스 웹사이트를 만들어 줘"
- 입력 수집 (분야: 고압 세척, 지역: 포트오렌지 FL, Jina 키)
- 신뢰 신호, CTA, 파랑/주황 색 구성으로 디자인 생성
- 15마일 반경 내 48개 위치 탐색
- 15개 고압 세척 서비스 스키마 생성
- 6개의 리드 캡처 테이블로 PostgreSQL 설정
- 계산: 15 × 48 = 720페이지 → ~60개 에이전트 실행
- Unsplash 이미지로 모든 서비스+위치 JSON 파일 생성
- 214개 이상의 페이지로 NextJS 사이트 빌드
- Playwright 테스트 실행 (목표: 80% 이상 통과율)
- GitHub에 푸시
- 보고: 레포지토리 URL, 실행 지침, 배포 지침
중요 규칙
해야 할 것:
- 시작 전에 모든 입력 수집
- 디자인이 제공되지 않은 경우 먼저 디자인 생성
- 페이지 생성 전에 위치 탐색
- 페이지 생성 전에 서비스 스키마 생성
- 모든 페이지 생성 에이전트를 동시에 실행
- 배포 전에 Playwright로 테스트
- 명확한 배포 지침 제공
절대 하지 말 것:
- 입력 수집 단계 생략
- Jina API 키 없이 진행
- 에이전트를 순차적으로 실행 (반드시 병렬!)
- 모든 페이지가 준비되기 전에 NextJS 사이트 빌드
- Playwright 테스트 생략
- 사용자에게 다음 단계를 알리지 않음
성공 기준
- 디자인 존재 (생성 또는 사용자 제공)
- 20-50개 이상의 위치 탐색 완료
- 스키마에 5-15개 서비스 포함
- 200개 이상의 서비스+위치 페이지 생성
- 모든 페이지에 Unsplash 이미지 포함
- NextJS 웹사이트 구축 및 실행 중
- Playwright 테스트 통과 (80% 이상)
- 코드가 git에 커밋됨
- 사용자에게 배포 지침 제공 완료