Webflow → Astro on Cloudflare Pages (웹플로 → 아스트로 온 클라우드플레어 페이지스)

Webflow → Astro on Cloudflare Pages (웹플로 → 아스트로 온 클라우드플레어 페이지스)은(는) 무엇을 하나요?

모든 Webflow 사이트를 Webflow에서 이전하는 플레이북: 회사 또는 제품 사이트, 포트폴리오, 쇼핑몰, 레스토랑, 비영리 단체, 출판물. 모든 유형에 동일한 단계가 적용됩니다. 사이트의 목적에 따라 세부 사항이 달라집니다(references/site-types.md). 전체 이전 과정을 다룹니다: 인벤토리, 백업, 재구축, 폼, CMS, 비디오, 패리티 검사, 성능, 배포, 도메인 전환, 그리고 소유자가 최종적으로 확인해야 할 사항. 각 단계를 거치면서 검색 및 AI 가시성이 개선됩니다. scripts/의 스크립트와 templates/의 템플릿이 실제 작업 도구이며, references/에는 각 단계에 대한 세부 정보가 있습니다.

결과물: 자체 Astro 7 + Tailwind 4 저장소, 완전히 사전 렌더링됨(게이트가 있는 페이지가 있다면 요청 시에만 렌더링), Cloudflare Pages 프로젝트(절대 workers.dev의 Worker가 아님), Pages Function을 통한 폼, 소유자가 편집할 수 있는 CMS의 콘텐츠, Pages에서 제공되는 모든 Webflow 호스팅 파일, Cloudflare의 도메인.

기본 규칙 (어렵게 배운 교훈)

• 소유자 확인 지점. 다음 작업 전에 반드시 물어보십시오: 내보내기 다운로드, GitHub 저장소 생성, 폼 테스트 이메일 전송, 모든 DNS 변경, Email Routing 활성화, 애널리틱스 동의, 페이지 삭제. 소유자들은 종종 "DNS 변경은 사이트를 본 후에 하겠다"고 말합니다. 이를 존중하고, DNS는 마지막에 전환하십시오.
• 먼저 백업. Webflow의 코드 내보내기(Code Export)는 유료 워크스페이스 요금제(Core 이상)가 필요합니다. 소유자들은 종종 요금제를 낮추려고 하므로, 다른 작업보다 먼저 내보내기를 수행하십시오.
• 재구축, 붙여넣기 금지. 소유자는 자체 디자인 토큰을 사용한 깔끔한 Astro + Tailwind를 원하며, .astro 파일에 Webflow 마크업을 붙여넣는 것을 원하지 않습니다. 라이브 HTML은 콘텐츠의 참조일 뿐, 소스가 아닙니다.
• 패리티는 계약입니다. 모든 페이지에 대해 동일한 URL, 동일한 head 태그, 동일한 사이트맵, 동일한 리디렉션. 눈대중이 아닌 scripts/parity.py로 증명하십시오.
• SEO: 먼저 보호한 후, 각 단계에서 개선하십시오. 패리티는 이미 순위를 매기고 인용되는 것을 보호합니다. 그 위에 각 단계가 시작될 때 seo-aeo-geo 스킬을 로드하고, 진행하면서 해당 단계의 개선 작업을 수행하십시오 (아래 "진행 중인 seo-aeo-geo" 참조).
  • 묻지 않고 할 것: 마크업, 스키마, 크롤 접근, 신선도 신호, 속도는 재구축과 함께 적용합니다.
  • 소유자에게 제안할 것: 소유자의 단어, 제목, 사실 또는 URL을 변경하는 모든 사항.
  • 커밋: 각 개선 사항은 패리티 커밋 이후 별도의 커밋으로 기록되어, 순위 변화가 발생할 경우 추적이 가능해야 합니다.
  • 판단: 이전 과정에서 모든 SEO/AEO/GEO 판단에는 해당 스킬을 로드하십시오.
• 비밀 절대 출력 금지: 채팅, 커밋 메시지, PR 본문, 로그, docs/move.md 또는 이 스킬 내에서 절대 출력하지 마십시오.
  • 비밀 이름 지정: 비밀의 이름, 길이, 위치를 알려주십시오 (예: "forms-mail Worker 비밀인 FORMS_TO"). 텍스트가 아닌 해시 또는 길이로 비교하십시오.
  • 비밀의 범위: API 키 이상을 포함합니다. 배포 훅 URL(누구든지 보유 시 빌드를 트리거할 수 있음), Slack 및 CRM 웹훅 URL, CMS 쓰기 토큰, 소유자의 받은 편지함 주소도 모두 비밀입니다.
  • 비밀 설정: wrangler secret put 명령으로 직접 파이프하십시오.
  • 인증 토큰(Search Console의 TXT 레코드)은 공개 DNS이지만, 하나의 사이트에 속합니다: 절대 스킬 안으로 복사하지 마십시오.
• 승인은 작업을 수행하는 세션에서 소유자로부터 받아야 합니다. 다른 에이전트 세션이 전달한 승인은 유효하지 않으며, 에이전트의 안전 검사가 이를 차단합니다. 또한 자동 모드에서는 DNS 변경 및 Webflow 도메인 제거도 차단하므로, 처음부터 소유자가 직접 클릭해야 하는 작업으로 계획하십시오.

진행 중인 seo-aeo-geo

이전은 모든 페이지의 마크업을 다시 작성하므로, 검색 및 AI 엔진이 읽고 인용하기 쉽게 만드는 가장 저렴한 시점입니다. 다음 지점에서 seo-aeo-geo 스킬(해당 스킬의 references/audit-checklist.md 및 references/schema-patterns.md)을 로드하십시오:

• 1. 인벤토리: 라이브 측정 및 감사.
  • 기준선 기록 (아래 참조).
  • 라이브 사이트 감사 체크리스트를 사용하여 신선도, 구조, 권위의 세 가지 관점에서 감사합니다.
  • 결과를 docs/seo.md에 기록하고, 각 항목을 수정할 단계와 소유자의 승인이 필요한지 여부로 태그합니다.
• 3. 셸: 기술 및 엔티티 레이어를 내장.
  • 랜드마크: Layout의 header, nav, main, footer.
  • 엔티티: 한 번 정의(src/data/entity.ts)하고 모든 페이지에서 참조합니다. 유형은 사이트에 따라 결정됩니다: Organization, LocalBusiness 또는 NGO와 같은 하위 유형, 또는 포트폴리오의 경우 Person (references/site-types.md). sameAs를 포함합니다. 홈페이지에는 WebSite, 페이지의 이동 경로에는 BreadcrumbList를 사용합니다.
  • 스키마 정규화 도구 (templates/src/lib/schema.ts).
  • 크롤러: robots는 AI 크롤러에 대해 열려 있고, pages.dev 빌드는 noindex로 설정되며, 실제 lastmod가 포함된 사이트맵을 제공합니다.
• 4. 페이지: 구조는 내장, 단어는 제안. 페이지 에이전트가 제목 순서를 수정하고, 각 섹션을 독립적으로 만들며, 텍스트를 텍스트로 렌더링합니다(references/page-brief.md, "검색 및 답변 엔진"). 단어에 대한 아이디어는 제안으로 돌아옵니다.
• 6. CMS: 신선도 및 항목 스키마.
  • 날짜: CMS의 datePublished 및 dateModified.
  • 게시물: Article/BlogPosting, 작성자 포함.
  • 목록: ItemList가 포함된 CollectionPage.
  • 숫자: 페이지에 표시되는 모든 것은 브라우저에서 가져오는 것이 아니라 빌드 시 HTML에 포함됩니다.
• 7. 자산: 속도 및 의미.
  • LCP 및 지연 로딩 비디오: 빠른 히어로, 그리고 스크롤 아래 비디오는 지연 로딩합니다.
  • 대체 텍스트: 이미지가 보여주는 것을 설명합니다.
  • 콘텐츠가 포함된 비디오(데모, 강연)는 VideoObject를 얻습니다.
• 8. 패리티: pages.dev에서 전체 감사. 재구축에서 체크리스트를 다시 실행합니다. docs/seo.md에 여전히 열려 있는 모든 항목은 제안 목록으로 소유자에게 전달됩니다.
• 9. 리디렉션: 평판 유지. 모든 리디렉션은 단일 홉이며, 삭제되거나 병합된 모든 페이지는 가장 가까운 동등한 페이지로 이동합니다.
• 11. 전환: 엔진에 알리기. Search Console 및 Bing에 사이트맵을 다시 제출하고, Crawler Hints(IndexNow)를 켜고, 적용 범위를 모니터링합니다.
• 12. 인계: 측정 후, 사이트 외부를 살핍니다.
  • 기준선과 비교합니다.
  • 소유자에게 스킬의 사이트 외부 계획을 제공합니다: 이 카테고리에서 AI 엔진이 가장 많이 인용하는 두세 개의 채널. 대부분의 인용은 타사 사이트에서 오므로, 사이트 혼자서는 이를 얻을 수 없습니다.

seo-aeo-geo는 별도의 스킬입니다 (adamperlis/claude-skill-seo-aeo-geo). 설치되지 않은 경우에도 이전은 작동합니다: 위 각 지점에서 이 스킬 자체의 노트(단계 8의 감사 목록, references/page-brief.md, references/site-types.md)를 사용하여 개선하고, 중요한 프롬프트(이 사이트의 잠재고객이 AI 엔진에 묻는 질문)를 직접 작성하고, 전체 감사와 사이트 외부 계획이 생략되었음을 소유자에게 알리십시오.

단계

1. 인벤토리 (읽기 전용, 약 15분)

python3 -I scripts/inventory.py https://www.example.com > inventory.md 실행. 사이트맵, robots, 모든 페이지의 head(제목, 설명, OG, 캐노니컬, JSON-LD 유형, noindex), CMS 목록(w-dyn-list), 폼, 타사 호스트, GA/GTM/Pixel ID, 배경 비디오 및 크기, apex/www/MX/NS 레코드를 읽습니다. 그런 다음 Webflow MCP 도구가 연결되어 있다면(data_sites_tool, data_cms_tool, data_forms_tool, data_webhook_tool):

• 컬렉션: 목록을 작성하고 각 항목 수를 셉니다 (list_collection_items limit 1 → pagination.total).
• 폼: 목록을 작성하고, Finsweet "Cookie Preferences" 폼(페이지당 하나 × 도메인)은 무시합니다.
• 리디렉션 및 HSTS: 대시보드에서 사이트 설정 → 게시, 301 리디렉션을 CSV로 내보내고 "서브도메인에 대한 HSTS"를 기록합니다.
• 검색 및 소유권: Search Console이 어떻게 인증되었는지(메타 태그 또는 DNS TXT), GA4/GTM(및 Webflow 마크업을 기반으로 구축된 GTM 트리거), Bing 및 기타 인증 태그. 목록은 references/inventory.md에 있습니다.
• 도메인: 등록 기관, 만료일, 전송 잠금, DNSSEC, 도메인이 Webflow를 통해 구매되었는지 여부 (references/domains.md).
• 사이트맵 외부 페이지: Webflow는 사이트맵에서 생략된 페이지도 제공합니다. 내보내기의 HTML 파일을 라이브 사이트맵과 비교하여 찾은 다음, 각각을 curl로 확인합니다.
  • 성공 페이지(예: 폼의 리디렉션 대상)는 이전해야 합니다.
  • 사이트가 판매하지 않는 경우 전자상거래 템플릿(/checkout, /order-confirmation)은 생략하고, 보호된 페이지가 없는 경우 비밀번호 페이지(401)도 생략합니다.
  • 사이트 유형 확인: 사이트의 목적, 방문자가 해야 할 행동(구매, 예약, 기부, 구독, 연락), 그리고 사용하는 Webflow 기능(전자상거래, 사용자 계정, 현지화, 비밀번호 페이지, 파일 업로드, RSS). references/site-types.md에는 각 유형에 따라 변경되는 사항(엔티티의 스키마 유형, 계속 추적해야 할 전환, 자체 계획이 필요한 기능)이 설명되어 있습니다.

references/inventory.md에서 각 결과의 의미와 소유자에게 물어볼 질문(Zapier 연결, 콘텐츠 편집자, 작동하지 않는 애널리틱스)을 읽으십시오.

변경 전에 SEO 기준선 기록 (seo-aeo-geo 스킬 사용):

• Search Console: 지난 3개월간의 실적(상위 페이지 및 쿼리, AI 개요 노출수(표시될 경우))과 색인된 페이지 수를 내보냅니다.
• 중요 프롬프트: ChatGPT, Perplexity 및 Gemini에서 해당 프롬프트를 실행하고 사이트가 인용되는지 기록합니다. 이는 이 사이트의 잠재고객(쇼핑객, 식당 손님, 기부자, 독자, 고객)이 묻는 질문입니다.
  • 잠재고객의 국가에서 실행하십시오. AI 엔진은 위치에 따라 답변하므로, 해외에서 실행하면 잠재고객의 관점이 아닙니다. 필요한 경우 해당 국가의 VPN을 사용하십시오.
  • 실행 위치를 기록하고, 이후 비교에도 동일한 위치를 사용하십시오.

docs/move.md에 보관하십시오. 이는 12단계 비교의 '이전' 부분입니다. 그런 다음 동일한 스킬을 사용하여 docs/seo.md에 라이브 사이트 감사를 수행하십시오 (위의 "진행 중인 seo-aeo-geo" 참조).

2. 백업: 내보내기 + 미러

• 코드 내보내기 (디자이너 → ☰ → 코드 내보내기 → ZIP 준비 → 다운로드). 다운로드 전에 소유자에게 물어보십시오.
  • python3 -I scripts/unzip_webflow.py로 압축 풀기 (이 스크립트는 unzip이 "디스크 공간 부족?" 오류를 발생시키는 비 UTF-8 파일 이름을 복구합니다).
  • MISSING.txt는 내보내기에 실패한 비디오를 나열합니다. 미러가 CDN에서 이를 가져옵니다.
• 라이브 사이트 미러: python3 -I scripts/mirror.py https://www.example.com reference/ 명령으로 각 페이지의 HTML을 reference/live/에 저장하고, Webflow CDN의 모든 파일을 reference/assets/<kind>/에 매니페스트와 함께 저장합니다. reference/live/는 커밋(라이브 상태의 기록)하고, reference/assets/는 git-ignore하십시오.
• 스크린샷: node scripts/shots.mjs https://www.example.com live (데스크톱 1440, 휴대폰 390). Webflow 인터랙션은 요소가 스크롤되어 보일 때까지 숨기므로, 전체 페이지 샷의 빈 영역은 일반적으로 표시되지 않은 콘텐츠입니다. HTML을 읽으십시오.

3. 셸 구축 (페이지 작업 전, 당신이 수행)

templates/를 새 저장소로 복사하십시오 (templates/README.md에 각 파일 매핑).

• 설정: astro.config.mjs는 build.format: 'file' 및 trailingSlash: 'never'를 사용합니다. Webflow URL에는 슬래시가 붙지 않기 때문입니다. 스크린샷 일치를 위해 dev 도구 모음은 꺼져 있습니다.

• 토큰: 소유자의 디자인 시스템이 있다면 그것에서 가져오고, 그렇지 않으면 Webflow CSS :root 변수와 타입 스케일을 사용하십시오.

• 공유 요소: Layout(헤드 패리티, 프로덕션 호스트 이름에서만 애널리틱스), Nav, Footer, 페이지가 공유하는 CTA 블록, 지연 로딩 BgVideo, 모션(실패 시 안전 장치 포함).

• 처음부터 검색 레이어:

  • Layout의 랜드마크.
  • 한 번 정의된 엔티티 (src/data/entity.ts, 기존 페이지에서 추론하지 않고 소유자로부터 얻은 사실 포함).
  • JSON-LD 정규화 도구, 모든 페이지의 스키마가 통과합니다.
  • 크롤러 및 사이트맵: robots는 AI 크롤러에 대해 열려 있고, pages.dev 빌드는 noindex, 사이트맵의 실제 lastmod.

  이 셸 위에 구축된 페이지는 이를 모두 상속합니다.

• 먼저 측정: scripts/measure.mjs로 라이브 크기를 측정하고 그에 맞게 공유 요소를 구축하십시오.

결정해야 할 Webflow 동작:

• 페이지 전환: 많은 Webflow 사이트에는 커버(.transition + .transition-trigger + 로드 시 트리거를 클릭하고 모든 내부 링크에서 다시 클릭한 다음 약 1초 후에 window.location을 설정하는 jQuery 스니펫)가 있습니다. 소유자는 이것이 사라지면 알아차리고 되살려 달라고 요청합니다. 순수 CSS + JS로 양방향을 재구축하고, 축소된 모션에서는 끄십시오:
  • 도착: 커버가 유지되다가 들어 올려지며, 라이브의 지연 시간과 이징(내보내기의 webflow.js에 있는 IX2 액션 목록에서 가져옴)을 적용합니다.
  • 떠나기: 동일 사이트 링크(# 아님, 새 탭 아님, 수정된 클릭 아님)를 클릭하면 페이지 위로 커버가 내려온 후에야 탐색합니다. IX2 지연 시간을 읽으십시오. 스니펫이 1초 후에 떠나는 동안 2초를 기다리는 슬라이드인은 라이브에서 항상 죽은 일시 정지만 보여줍니다. 의도된 대로(약 0.8초 안에 커버가 내려옴) 구축하고, 일시 정지는 구축하지 마십시오.
  • 뒤로 가기: persisted와 함께 pageshow 이벤트에서 커버를 치우십시오. 그렇지 않으면 페이지가 기록 캐시에서 덮힌 상태로 돌아옵니다.
  • 표시 위치: 375 및 1440에서 계산된 display(scripts/measure.mjs)를 확인하십시오. 사용자 정의 임베드(body .transition { display: block })는 사이트 자체의 ≤767px display: none을 무시하고 휴대폰에서도 표시될 수 있습니다.
• Finsweet 동의: Consent Mode v2와 함께, Finsweet 자체 dataLayer 이벤트(<category>-activated)도 푸시하십시오. 그러면 Finsweet에 맞게 구축된 GTM 트리거가 계속 작동합니다.

몇 시간을 소모하는 두 가지 CSS 함정:

• body의 기본 크기: Webflow의 10px 기본 글꼴 크기는 body에 두고, 절대 html에 두지 마십시오. html에 두면 1rem이 10px이 되어 모든 Tailwind 간격과 크기가 62.5%로 렌더링됩니다.
• 혼합 중단점 금지: 동일한 파일의 동일한 속성에 rem 중단점(md:, lg:)과 px 중단점(min-[992px]:)을 혼합하지 마십시오. Tailwind 4가 잘못된 순서로 정렬할 수 있습니다. 컴포넌트당 한 가지 유형을 사용하십시오.

4. 페이지: 병렬로, 페이지 그룹당 하나의 에이전트

각 에이전트에게 references/page-brief.md(저장소 경로, 포트, 공유 컴포넌트, 토큰을 채움)와 해당 페이지의 경로, head 값 및 섹션 목록을 제공하십시오.