나는 랜딩 페이지용 Vercel을 만들었다 — CLI와 MCP 서버와 함께

Source: Dev.to

제가 Page4U를 만든 방법 — 터미널에서 또는 Claude와 Cursor 같은 AI 어시스턴트를 통해 랜딩 페이지를 배포할 수 있는 플랫폼

제가 아는 모든 프리랜서와 소규모 사업자는 같은 문제를 겪습니다: 랜딩 페이지가 필요하지만 “HTML 파일이 있다”는 단계에서 “연락처 폼이 포함된 실시간 웹 페이지가 된다”는 단계까지 가는 과정이 너무 길다는 것이죠.

그래서 저는 Page4U를 만들었습니다 — 랜딩 페이지 배포가 한 줄 명령으로 가능한 플랫폼입니다:

page4u deploy ./my-page.html --name my-bakery

그게 전부입니다. 실시간 URL을 받게 되고, 연락처 폼이 자동으로 삽입되며, 리드 트래킹이 내장되고, 바로 사용할 수 있는 WhatsApp 버튼까지 제공됩니다.

그 다음에 생각했습니다 — 개발자는 터미널에서 배포할 수 있는데, AI 어시스턴트도 배포할 수 있다면 어떨까? 그래서 MCP 서버를 구축했습니다. 이제 Claude와 Cursor가 대화 중에도 페이지를 배포해 줄 수 있습니다.

스택

플랫폼은 Next.js와 Firebase 위에서 실행되지만, 흥미로운 부분은 두 개의 오픈소스 패키지입니다:

• page4u-cli – CLI 도구 (3개의 의존성: commander, picocolors, adm-zip)
• page4u-mcp – AI 어시스턴트를 위한 MCP 서버

두 패키지는 인증, 배포, 리드, 그리고 분석을 처리하는 REST API(v1)와 통신합니다.

CLI

npm install -g page4u-cli

8개의 명령어, 설정 파일은 전혀 필요 없습니다:

page4u login                          # 인증
page4u deploy ./site --name my-biz    # 배포
page4u list                           # 페이지 확인
page4u leads my-biz                    # 리드 보기
page4u analytics my-biz               # 통계 보기
page4u delete old-page                 # 정리

배포 흐름

HTML 파일 또는 디렉터리를 제공합니다. 디렉터리인 경우 자동으로 압축하고 (.git, node_modules, .DS_Store는 제외) 합니다. API는 HTML을 처리하고, 연락처 양식을 삽입한 뒤 게시합니다.

$ page4u deploy ./bakery-site --name best-bakery --whatsapp 972501234567

✓ Page deployed!
  URL:  https://page4u.ai/pages/best-bakery
  Slug: best-bakery
  Name: Best Bakery

CI/CD 지원

파이프라인용 환경 변수 — 대화형 프롬프트 없음:

export PAGE4U_API_KEY=p4u_your_key_here
page4u deploy ./dist --name my-site

JSON 출력

모든 리스트 명령은 스크립팅을 위해 --json을 지원합니다:

page4u leads my-biz --json | jq '.data[].email'

MCP 서버

이 부분이 가장 기대되는 부분입니다. MCP (Model Context Protocol) 은 AI 어시스턴트가 외부 도구를 사용할 수 있게 해주는 표준입니다. 저는 총 일곱 가지 도구를 제공하는 서버를 구축했습니다:

Claude에서 설정

One command:

claude mcp add page4u --env PAGE4U_API_KEY=p4u_your_key page4u-mcp

Cursor 설정

.cursor/mcp.json에 추가:

{
  "mcpServers": {
    "page4u": {
      "command": "page4u-mcp",
      "env": {
        "PAGE4U_API_KEY": "p4u_your_key_here"
      }
    }
  }
}

이것이 가능하게 하는 것

연결이 완료되면 다음과 같은 대화를 할 수 있습니다:

“마리오 피자라는 피자 레스토랑을 위한 랜딩 페이지를 만들고, 메뉴 섹션과 WhatsApp 주문 버튼을 포함한 뒤 배포해 주세요.”

AI가 HTML을 생성하고 같은 대화 안에서 배포합니다. 복사‑붙여넣기, 탭 전환, 수동 업로드가 필요 없습니다.

“지난 주의 mario-pizza 리드(잠재고객)를 보여 주세요.”
“내 전화번호가 변경되었습니다 — 모든 페이지에서 업데이트해 주세요.”

AI가 전체 페이지 관리 도우미가 됩니다.

API 설계

모든 응답은 일관된 래퍼(envelope)를 따릅니다:

// Success
{ "success": true, "data": { ... } }

// Error
{ "success": false,
  "error": { "code": "SLUG_TAKEN", "message": "..." } }

각 응답에는 레이트‑리밋 헤더가 포함됩니다:

X-RateLimit-Limit: 60
X-RateLimit-Remaining: 57
X-RateLimit-Reset: 1707400000

인증은 API 키(p4u_ 접두사 + 48개의 16진수 문자)를 사용하며, 저장하기 전에 SHA‑256으로 해시합니다. 키는 생성 시 한 번만 표시되고, 이후에는 다시 표시되지 않습니다.

내가 배운 점

1. CLI를 최소화하세요.
   런타임 의존성은 세 개뿐. 설정 프레임워크도, 화려한 프롬프트 라이브러리도, ORM도 없습니다. 명령어는 commander, 색상은 picocolors, 디렉터리 압축은 adm-zip. 그게 전부입니다.

2. MCP는 놀라울 정도로 단순합니다.
   전체 MCP 서버는 단일 파일—~280줄. SDK가 모든 JSON‑RPC 파이프라인을 처리합니다. 여러분은 Zod 스키마와 비동기 핸들러로 도구만 정의하면 됩니다.

3. AI‑우선 도구는 좋은 설명이 필요합니다.
   MCP 서버의 도구 설명은 사람을 위한 것이 아니라 AI 모델이 언제, 어떻게 사용할지 이해하도록 하는 것입니다. 명확하고 간결하며 기계가 읽을 수 있는 문구가 신뢰성에 큰 차이를 만듭니다.

FormData가 Node 18+에서 기본 지원됩니다

node-fetch 또는 form-data 패키지가 필요 없습니다. 기본 제공 fetch, FormData, 및 Blob이 잘 작동합니다.

Try It

# CLI
npm install -g page4u-cli
page4u login

# MCP (Claude Code)
npm install -g page4u-mcp
claude mcp add page4u -- env PAGE4U_API_KEY=p4u_your_key page4u-mcp

Enter fullscreen mode
Exit fullscreen mode

API 키는 여기에서 받으세요 .

GitHub

• page4u-cli
• page4u-mcp

---

여러분의 의견을 듣고 싶습니다. MCP 서버나 개발자 도구를 구축하고 계시다면, 아키텍처 결정에 대해 자유롭게 이야기 나눠요.