Claude Code와 Cloudflare Pages로 LP 만들기

'페이지가 필요해'에서부터 LP가 운영되고 리드를 받기까지의 로드맵입니다. 호스팅은 Cloudflare Pages: 무료, 빠름, 자동 HTTPS, 서버리스 폼 처리를 위한 Pages Functions 제공.

이 스킬은 비개발자를 대상으로 합니다. Claude(당신)가 터미널에서 모든 작업을 수행하고 각 단계를 쉬운 용어로 설명합니다. 로그인, 패널, DNS 등 사람의 개입이 필요한 단계에서는 복사해서 붙여넣기만 하면 되는 명령어를 한 번에 하나씩 제공하세요.

광고 추적(픽셀, Conversions API, GA4, Google Ads 태그)은 이 스킬의 범위를 벗어납니다. 요청이 있을 경우 LP가 운영된 후 별도로 구성하세요.

사용자와 협업하는 방법

코드 작성 전에 계획을 세우세요. 각 섹션의 LP 구성과 텍스트, 그리고 텍스트 출처를 보여주세요. '확인'을 받은 후에만 구축하세요.
텍스트는 출처에서만 가져오세요. 가격, 날짜, 시간, 강사 이름, 보장 사항, 보너스: 모든 정보는 사용자가 제공한 자료(브리핑, 웹사이트, PDF, 대화)에서 가져와야 합니다. 숫자나 약속을 절대 임의로 만들지 마세요. 데이터가 없으면 질문하세요.
추천하세요, 목록을 나열하지 마세요. 선택 사항(경로, 레이아웃, 도메인)이 있을 경우, 어떤 것을 선택할지와 그 이유를 말하세요.
요청 없이 프로덕션에 반영하지 마세요. 미리보기는 가능합니다. 공식 주소에 게시하거나 DNS를 변경하는 것은 사용자가 '게시해도 됩니다'라고 말한 후에만 가능합니다.
Windows: PowerShell에서 npx 대신 npx.cmd를 사용하고, 모든 명령어 앞에 프로젝트 폴더의 절대 경로로 cd를 붙이세요.

0. 경로 파악하기

질문(또는 요청에서 추론)을 통해 LP에 필요한 것이 무엇인지 파악하세요. 각 경로는 이전 경로를 포함합니다:

경로	제공 항목	참고 문서
1. 간단한 LP	`<projeto>.pages.dev`에 페이지 게시, 체크아웃/WhatsApp/기타 사이트로 연결되는 버튼	이 파일
2. 커스텀 도메인	`lp.suamarca.com.br/<slug>/`	`references/dominio.md`
3. 리드 캡처 폼	리드를 저장(D1)하고 웹훅으로 CRM에 전달하는 폼, 감사 페이지 포함	`references/formulario.md`

또한 다음 정보를 수집하세요:

텍스트 출처: 브리핑, 웹사이트, PDF, 강의 계획서, 기존 LP.
브랜드 아이덴티티: 색상, 폰트, 로고(파일), 사진(파일, 사용 권한 포함).
버튼 목적지: 체크아웃, WhatsApp(https://wa.me/55DDDNUMERO?text=...) 또는 폼.
슬러그: 짧고, 소문자이며, 하이픈 사용(curso-x, masterclass-y). URL 경로가 됩니다.

1. 로컬 환경 준비 (최초 한 번)

references/cloudflare-setup.md를 따르세요: Node 설치, Cloudflare 계정, wrangler login(사용자가 브라우저에서 수행), Pages 프로젝트 생성. 계속하기 전에 npx wrangler whoami로 확인하세요.

2. 프로젝트 구성

하나의 프로젝트 폴더에 브랜드의 모든 LP를 저장하며, 각 LP는 하위 폴더로 구성됩니다. 한 번의 배포로 모든 것을 한 번에 게시합니다.

minhas-lps/
  _redirects        (차단 및 폐기된 LP)
  _headers          (보안 헤더)
  wrangler.toml     (프로젝트 이름 및 데이터베이스)
  schema.sql        (리드 테이블, 경로 3)
  CLAUDE.md         (프로젝트 메모리: 결정 사항, 운영 중인 항목)
  functions/
    lead.js         (폼 수신, 경로 3)
  obrigado/
    index.html      (폼 제출 후 페이지, 경로 3)
  <slug>/
    index.html      (LP)
    img/            (최적화된 사진 및 로고)

이 스킬의 modelo/projeto/ 폴더를 사용자가 원하는 위치에 복사하고 minha-lp/를 슬러그로 이름을 바꾸세요. 모델에는 이미 폼, 미리보기 잠금, 차단 기능이 포함되어 있습니다. 프로젝트가 이미 존재하는 경우 modelo/projeto/minha-lp/를 복사하여 새 하위 폴더만 만드세요. 폼이 없는 LP(경로 1): 폼 블록을 목적지 링크가 있는 버튼으로 바꾸고 functions/, obrigado/, schema.sql을 삭제하세요.

핵심 규칙: 배포는 전체 폴더를 게시합니다. 폴더 안의 모든 파일은 인터넷에서 접근 가능해집니다(.claude/, CLAUDE.md, 스프레드시트, 메모). 따라서:

비밀번호, 토큰 또는 웹훅 URL을 폴더의 파일에 절대 저장하지 마세요(비밀은 wrangler pages secret put에 저장, references/formulario.md 참조).
모델의 _redirects는 이미 CLAUDE.md, .claude/*, wrangler.toml, schema.sql, package*.json을 차단합니다. 루트에 새 파일: 공개되어도 되거나, 배포 전에 차단 라인을 추가해야 합니다.

3. LP 작성하기

각 섹션의 텍스트가 포함된 섹션 계획. 일반적으로 전환율이 높은 순서:
1. 상단: 명확한 약속, 대상, 날짜 및 형식, 버튼.
2. 증명: 가르치는 사람 또는 사용한 사람(실제 사진, 자격 증명, 확인 가능한 숫자).
3. 얻을 수 있는 것: 3~6개의 구체적인 혜택.
4. 대상(및 비대상).
5. 콘텐츠 또는 프로그램: 개요, 클릭 시 열리는 <details>에 세부 정보.
6. 제안: 가격, 조건, 포함 사항, 보장(존재하는 경우에만).
7. 자주 묻는 질문(<details> 사용).
8. 최종 버튼 및 바닥글(브랜드, 연락처, 데이터 수집 시 개인정보 처리방침).
모바일 우선. 트래픽의 대부분은 모바일에서 옵니다. 375px를 기준으로 CSS를 작성하고 더 큰 화면으로 확장하세요. 스캔 가능한 텍스트: 짧은 문장, 블록별 제목, 텍스트 벽 없음.
버튼은 항상 보이게 상단에 배치하고 각 결정 블록 후에 반복.
가벼운 이미지: JPG 또는 WebP, 각각 ~200KB 이하, <img>에 width와 height 속성, 상단이 아닌 모든 이미지는 loading="lazy". 상단 이미지는 fetchpriority="high" 사용.
메타데이터: <title>, description, og:image(1200×630), 파비콘. 링크를 WhatsApp으로 공유할 때 표시됩니다.
무거운 의존성 없음. 순수 HTML, CSS, JS로 LP를 충분히 구현할 수 있습니다. Google Fonts는 최대 display=swap 사용.

모델의 색상과 폰트는 <style> 상단의 변수(:root)에 정의되어 있습니다. 이를 변경하여 브랜드 아이덴티티를 한 번에 적용하세요.

4. 로컬 미리보기

npx wrangler pages dev .

http://localhost:8788/<slug>/에서 열리며 Functions도 작동합니다. 375px와 1280px에서 브라우저로 확인: 텍스트, 이미지, 버튼, 폼, 콘솔 오류 없음. 앱에 내장 브라우저가 있으면 이를 사용하고 사용자에게 스크린샷을 보내세요.

5. 온라인 미리보기 (승인용)

npx wrangler pages deploy . --project-name=<projeto> --branch=previa --commit-dirty=true

previa.<projeto>.pages.dev 주소로 프로덕션과 분리되어 게시됩니다. 사용자가 모바일에서 승인할 수 있도록 링크를 보내세요. 모델은 이 주소에서 폼을 잠급니다(CRM에 가짜 리드가 생성되지 않음).

6. 배포하기

'게시해도 됩니다'라는 확인 후에만:

npx wrangler pages deploy . --project-name=<projeto> --branch=main --commit-dirty=true

그런 다음 확인:

LP가 공식 주소에서 200 응답 (curl -sI https://<endereço>/<slug>/)
차단된 파일이 301 응답 (/CLAUDE.md, /wrangler.toml)
폼이 있는 경우 테스트 리드가 목적지에 도착하는지 확인 (경로 3)

전체 체크리스트는 references/checklist.md에 있습니다.

7. 기록

프로젝트의 CLAUDE.md를 업데이트: 새 LP(슬러그, 제품, 날짜), 버튼 목적지, 등록된 시크릿(값이 아닌 이름만), 배포 ID. 다음 대화에서 이를 읽고 아무것도 깨뜨리지 않도록 합니다. 프로젝트가 git을 사용하는 경우 LP 파일만 커밋하세요.

이후 변경 사항

텍스트 또는 가격: 편집, 미리보기, 배포. 동일한 정보를 모든 곳(상단, 제안, FAQ, 감사 페이지, 메타데이터)에서 변경하세요.
동일 제품의 두 LP(예: 트래픽 소스별): 콘텐츠를 동일하게 유지하고 동일한 배포에서 둘 다 변경하세요. CLAUDE.md에 둘 사이에 다른 점을 기록하세요.
LP 폐기: 급하게 폴더를 삭제하지 마세요. _redirects에 대체 항목으로 301 라인을 추가하세요(/slug-velho /slug-novo/ 301 및 /slug-velho/* /slug-novo/ 301). 기존 광고, 바이오 링크, 이메일은 계속 작동합니다.
새 시크릿 또는 변경된 시크릿: 새 배포 후에만 적용됩니다.

알려진 문제점

폴더에 남은 파일이 공개됩니다. 구성 파일에 액세스 키가 포함된 채로 인터넷에 열려 있는 경우가 있었습니다. wrangler pages deploy는 .assetsignore를 존중하지 않습니다: _redirects에서 차단을 사용하세요.
시크릿을 등록했는데 아무것도 변경되지 않음: secret put 후 배포가 누락되었습니다.
값의 일부만 포함된 시크릿: https:// 없이 또는 키만 있는 웹훅은 Invalid URL을 발생시킵니다. 전체 URL을 등록하세요.
액센트가 있는 이름이 %C3%A9로 들어옴: 감사 페이지에서 매개변수를 디코딩하세요(decodeURIComponent). 모델이 이미 수행합니다.
온라인 미리보기에서 폼이 '아무것도 하지 않음': 미리보기 잠금이 작동 중입니다. localhost 또는 프로덕션에서 테스트하세요.

Cloudflare 랜딩 페이지