GrowOS — AI 노코드 랜딩페이지 빌더

📋 프로젝트 개요

서비스 카테고리: AI SaaS / 마케팅 테크 / 노코드 빌더
메인 타깃: 소규모 사업자, 1인 마케터, 스타트업, 에이전시
비즈니스 모델: Freemium 구독 (FREE / PRO / ENTERPRISE) + 마켓플레이스 수수료
타깃 시장: 한국 (Toss 결제, 카카오 로그인, 네이버 플레이스 연동)
개발 범위: 풀스택 개발 (기획 ~ 배포 전 과정)
지원 환경: 반응형 웹 (Desktop / Tablet / Mobile), PWA 지원

🔧 작업 범위

화면 설계

대시보드, 빌더 에디터, 마켓플레이스, 어드민 등 18개 주요 섹션 설계

UI/UX 디자인

Tailwind CSS + Radix UI(shadcn/ui) 기반 디자인 시스템 구축, Framer Motion 인터랙션

Front-end 개발

Next.js 14 App Router, TypeScript, Zustand 상태관리, 131개+ React 컴포넌트

Back-end 개발

Next.js API Routes 45개 엔드포인트, Prisma ORM 40개 DB 모델

AI 엔진 개발

Claude(Anthropic) + Gemini(Google) 듀얼 AI 엔진, 8개 AI 모듈

결제 시스템

Stripe(해외) + Toss Payments(국내) 이중 결제 연동

인증 시스템

Supabase Auth 기반 OAuth(Google, Kakao) + RBAC 권한 관리

서버/DB 구축

PostgreSQL 15 + Docker Compose 환경 구성

모니터링

Sentry 3중 계층(Client/Server/Edge) 에러 추적

관리자 페이지

Super Admin 패널 — 사용자 관리, 정산, 매출 통계, 기능 토글

테스트

Vitest 단위 테스트 + Playwright E2E 테스트

⚡ 주요 업무

A AI 랜딩페이지 빌더

프롬프트 기반 페이지 자동 생성 (AIDA 마케팅 심리학 적용)
21종 블록(Hero, Features, Pricing, FAQ, CTA, Testimonials 등) 드래그앤드롭 비주얼 에디터
블록별 시각 효과 (Parallax, Glassmorphism, Mesh Gradient, Glow 등)
Undo/Redo 히스토리 (최대 50단계)
글로벌 헤더/푸터 레이아웃 시스템
커스텀 도메인 연결 및 SSL 검증

B AI 마케팅 도구 모음 (8개 모듈)

AI 카피라이터 — 마케팅 카피 자동 생성 및 리파인
AI 광고 크리에이티브 생성 — Instagram/Facebook/LinkedIn용 광고 소재 자동 생성
AI SEO 분석 — 키워드 밀도, 의미론적 관련성 분석 및 개선 제안
AI 리드 스코어링 — 리드 전환 확률(0~1) 및 LTV(생애가치) 예측
AI 다국어 번역, AI 이미지 생성, AI 캔버스 어시스턴트, AI 리포트 생성

C 애널리틱스 & 리드 관리

실시간 페이지뷰 추적 (디바이스, User-Agent, 리퍼러 자동 수집)
일별 통계 자동 집계 (조회수, 유니크 방문자, 전환 수)
클릭 히트맵 시각화 및 체류 시간 추적
A/B 테스트 — Variant 생성, 방문자 자동 분배, 전환율 비교
리드 캡처 & 타임라인, 웹훅 연동 (Slack, Discord 등)

D 전문가 마켓플레이스

전문가 프로필 시스템 (레벨, 뱃지, 평점)
서비스 요청/제안 워크플로우 (요청 → 제안 → 초안 → 검수 → 완료)
에셋 마켓 (템플릿, 섹션, Gig 단위 디지털 에셋 판매/구매)
리뷰 & 평가 시스템, 정산 시스템 (수익 정산 요청 및 어드민 승인)

E 멀티테넌트 & 팀 협업

조직(Organization) 기반 멀티테넌트 (조직별 독립 프로젝트, 브랜딩, 플랜 관리)
팀 멤버 초대/관리, 프로젝트별 역할 기반 접근 권한 (VIEWER, EDITOR)
동적 메뉴 시스템 (SystemMenu + MenuPermission으로 역할별 메뉴 노출)

F 결제 & 구독

Stripe Checkout Session (해외 구독 및 마켓플레이스 결제)
Toss Payments (국내 PG 결제)
구독 플랜 관리 (FREE → PRO → ENTERPRISE), 플랜별 기능 차등 적용

🎯 주안점

AI 듀얼 엔진 아키텍처

Claude — 카피라이팅, 콘텐츠 리파인 등 언어적 창의성이 필요한 작업에 활용. Gemini Flash — JSON 구조 생성, 예측/분석 등 속도와 정확성이 필요한 작업에 활용. Vercel AI SDK로 두 모델의 스트리밍 응답을 통합 처리하여 사용자 체감 속도 향상.

성능 최적화

optimizePackageImports로 12개 대형 패키지 트리쉐이킹 적용. Suspense Streaming으로 대시보드 비동기 로딩. 정적 에셋 1년 immutable 캐시, 이미지 AVIF/WebP 자동 변환. unstable_cache로 대시보드 통계 30초 캐싱.

보안

Supabase Auth + 미들웨어 레벨 라우트 보호. RBAC 권한 시스템 (READ < WRITE < ADMIN) + 리소스 레벨 퍼미션. HTML Sanitizer(XSS 방지), API Rate Limiter(과부하 방지). 에스크로 결제로 거래 안전성 확보.

확장 가능한 블록 아키텍처

중앙 Block Registry 패턴으로 21종 블록 타입 일원화 관리. 블록 추가 시 Registry 등록만으로 빌더/런타임/마켓플레이스에 자동 반영. 블록별 독립적인 content, styles, visibility 구조로 관심사 분리.

데이터 기반 의사결정 지원

페이지뷰 → 리드 전환 → 주문까지 전체 퍼널을 단일 시스템에서 추적. AI 예측 엔진으로 리드 전환 확률 및 LTV 자동 산출. A/B 테스트 기반 데이터 드리븐 페이지 최적화.

🛠 기술 스택

Front-end

Next.js 14 TypeScript React Zustand Tailwind CSS shadcn/ui Framer Motion Radix UI

Back-end

Next.js API Routes Prisma ORM PostgreSQL 15 Supabase Auth Docker Compose

AI

Claude (Anthropic) Gemini (Google) Vercel AI SDK

결제

Stripe Toss Payments

인프라 & 모니터링

Vercel Sentry Vitest Playwright

GrowOS AI 노코드 랜딩페이지 빌더