Webflow에서 Astro로 마이그레이션: 콘텐츠, 디자인, 검색 순위를 지키며 사이트를 옮기는 방법

짧은 답변

Webflow는 HTML 내보내기 기능이 아예 없는 Framer보다는 떠나기 쉽지만, 어디까지나 일부만 그렇습니다. 유료 Workspace 요금제에서는 사이트의 HTML, CSS, JavaScript, 이미지를 내보내 원하는 곳에 호스팅할 수 있습니다. 한편 Webflow 고객센터는 내보내기에서 빠지는 것에 대해서도 똑같이 분명하게 설명합니다. CMS 콘텐츠, 폼 제출 처리, 사이트 검색, 비밀번호 보호, 현지화된 페이지, 코드 컴포넌트는 내보내기에 포함되지 않으며, 컬렉션 리스트(Collection list)는 빈 상태로 표시됩니다(Webflow 고객센터).

따라서 Webflow에서 Astro로의 마이그레이션은 절반은 내보내기, 절반은 재구축입니다. Webflow가 내보내 주는 것은 내보내고, CMS는 CSV나 API로 꺼내고, 각 템플릿을 Astro 컴포넌트로 다시 만들고, 폼과 검색을 대체하고, 유지할 인터랙션을 재현하고, 바뀌는 모든 URL에 영구 리디렉션을 걸어야 합니다. 이 순서대로 진행하면 새 사이트는 디자인, 콘텐츠, 검색 순위를 모두 지킬 수 있습니다.

팀들이 Webflow에서 Astro로 옮기는 이유

Webflow는 훌륭한 비주얼 빌더이고, 그대로 머무는 편이 나은 마케팅팀도 많습니다. 떠나는 이유는 대개 디자인보다 소유권과 비용에 관한 것입니다.

• 사이트를 엔지니어링팀이 맡게 됩니다. 대부분의 변경을 개발자가 한다면 비주얼 캔버스보다 자체 저장소의 코드베이스에서 작업하는 편이 빠르고, 제품, 백엔드, 테스트와 나란히 둘 수 있습니다.
• 사이트별 요금제 비용. 2026년 10월 13일에 확인한 Webflow 요금제 페이지에 따르면 Basic 사이트 요금제는 월 USD 15, Webflow CMS가 포함된 Premium 요금제는 월 USD 25이며, 둘 다 연간 결제 기준입니다. 현지화(Localization)는 월 USD 9부터 시작하는 애드온입니다.
• 실제 백엔드가 필요한 기능. CRM에 기록되는 폼, 회원 전용 콘텐츠, 여러 사이트를 아우르는 검색, 또는 자체 인프라에서 실행되어야 하는 모든 것이 여기에 해당합니다.
• 내보내기만으로는 떠날 수 없습니다. 코드 내보내기에는 사이트 요금제만이 아니라 유료 Workspace 요금제가 필요하고, CMS는 빠집니다. 어느 쪽이든 깔끔하게 떠나려면 계획이 필요합니다.

마케팅팀이 매주 시각적으로 페이지를 게시하고 사이트가 제 역할을 하고 있다면, Webflow에 머무는 것도 합리적인 선택입니다. 마이그레이션을 한다면 그만큼 분명한 무언가를 얻을 수 있어야 합니다.

Webflow 코드 내보내기에 포함되는 것과 빠지는 것

출처: 사이트 코드 내보내기에 관한 Webflow 고객센터 문서.

게시된 Webflow 사이트를 살펴보며 확인한 것

2026년 10월 13일, 저희는 webflow.com을 포함해 Webflow로 만든 사이트 7곳의 홈페이지를 내려받아, 마이그레이션 때 무엇을 옮겨야 하는지 살펴보았습니다.

• 7곳 모두 jQuery와 이미지를 Webflow 서버에서 불러옵니다. 이미지는 cdn.prod.website-files.com에서 제공되며, Webflow 고객센터도 CSV로 내보낸 이미지 필드와 파일 필드는 원래 프로젝트의 호스팅을 가리키는 링크라서 그 프로젝트를 삭제하면 깨진다고 안내합니다(Webflow 고객센터). 모든 에셋을 내려받아 다시 호스팅해야 합니다.
• 7곳 모두 소셜 공유 이미지도 Webflow에서 제공합니다. Open Graph 이미지는 놓치기 쉬운데, 기존 프로젝트를 닫으면 LinkedIn이나 WhatsApp의 링크 미리보기에서 이미지가 사라집니다.
• 7곳 모두 CMS 리스트를 게시된 HTML에 직접 렌더링합니다. 홈페이지 하나당 컬렉션 리스트가 3~19개였습니다. 이는 좋은 소식입니다. 저희 Framer에서 Astro로 마이그레이션 가이드에서 설명했듯 Framer 사이트는 로드 후 런타임이 페이지를 다시 조립하지만, 게시된 Webflow 페이지는 어떤 콘텐츠가 어디에 들어가는지 보여 주는 완전한 참고 자료입니다. 코드 내보내기에서는 그 리스트가 비어 있더라도 말입니다.
• 7곳 중 5곳이 Webflow Interactions를 사용합니다. data-w-id 속성으로 표시되며, 한 홈페이지에서는 최대 109개 요소에 붙어 있었습니다. 하나하나가 재현해야 할 작은 동작이거나, 없애기로 결정해야 할 대상입니다.

Webflow에서 Astro로, 단계별 진행

1. 모든 URL 목록 만들기. Webflow는 해당 옵션이 켜져 있으면 /sitemap.xml을 자동으로 생성합니다(Webflow 고객센터). 여기에 모든 컬렉션 페이지를 추가하고, Google Search Console에서 가능한 가장 긴 기간으로 페이지 보고서를 내보내고, Site settings > Publishing에서 기존 301 리디렉션을 CSV로 내보내세요(Webflow 고객센터).
2. 콘텐츠 내보내기. CMS 패널에서 각 CMS 컬렉션을 CSV로 내보내되, Localize를 사용한다면 로캘마다 한 번씩 내보내고 Item ID 열은 남겨 두세요. CSV는 구조를 평평하게 만듭니다. 참조 필드는 일반 텍스트로, 다중 참조는 쉼표로 구분된 텍스트로, 리치 텍스트는 HTML로 나옵니다. 참조가 있는 콘텐츠라면 아이템을 필드, 로캘과 함께 가져오는 Webflow Data API를 쓰는 편이 여러 CSV 파일을 다시 이어 붙이는 것보다 대개 깔끔합니다.
3. 모든 에셋 내려받기. 이미지, PDF, 자체 호스팅 라이선스가 있는 폰트, Open Graph 이미지, 파비콘까지 모두 받으세요. 새 사이트가 더 이상 website-files.com을 가리키지 않을 때까지 Webflow 프로젝트를 닫지 마세요.
4. 코드는 참고용으로 내보내기. 유료 Workspace 요금제를 쓰고 있다면 HTML과 CSS를 내보내세요. 다만 이것을 새 사이트로 배포하지는 마세요. webflow.js, jQuery, 빈 CMS 리스트가 그대로 따라옵니다. 정확한 간격, 브레이크포인트, 클래스 구조를 읽어 내는 용도로 쓰세요.
5. Astro에서 콘텐츠 모델링하기. 각 컬렉션을 Astro 콘텐츠 컬렉션이나 헤드리스 CMS 모델로 바꾸고 참조는 참조로 유지한 다음, 각 템플릿을 Astro 컴포넌트로 다시 만들고 이미지를 astro:assets로 옮기세요.
6. 의미를 전달하는 인터랙션 재현하기. 대부분의 Webflow Interactions는 CSS 트랜지션, 키프레임 또는 몇 줄의 JavaScript로 바뀝니다. 더 무거운 모션에는 GSAP를 쓸 수 있습니다. 2025년 4월 Webflow가 무료로 전환한 이후 상업적 용도로도 무료입니다(Webflow). 어느 경우든 prefers-reduced-motion 설정을 존중하세요.
7. 폼, 검색, 보호된 페이지 대체하기. 각 폼에 실제 엔드포인트(Cloudflare Worker, 폼 서비스 또는 CRM)를 연결하고, 사이트에 검색이 필요하다면 Pagefind 같은 정적 검색 인덱스를 추가하고, 비밀번호 보호는 호스팅이나 앱으로 옮기세요.
8. 다국어 페이지 제대로 다시 만들기. 코드 내보내기에는 기본 언어만 포함되므로, Astro의 i18n 라우팅으로 각 언어를 구축하세요. 언어마다 URL을 하나씩 두고 hreflang으로 서로 연결합니다.
9. URL 형식 맞추기. Webflow는 페이지를 끝에 슬래시 없이 제공하며 /pricing/을 /pricing으로 리디렉션합니다. 새 사이트가 같은 주소를 만들도록 Astro의 trailingSlash와 build.format을 설정하세요(Astro 설정 레퍼런스). 형식이 하나 어긋날 때마다 필요 없던 리디렉션이 하나씩 생깁니다.
10. 서버에서 리디렉션한 다음 런칭하고 지켜보기. 어댑터 없는 정적 Astro 빌드는 설정된 리디렉션을 meta refresh 페이지로 바꾸므로, 사이트를 호스팅하는 곳에서, 예를 들어 Cloudflare의 _redirects 파일로 1:1 301 리디렉션을 설정하세요. DNS를 전환하고, 새 사이트가 검증될 때까지 Webflow 프로젝트를 유지하며, 이후 몇 주 동안 Search Console의 색인 생성 보고서를 확인하세요. 웹사이트 이전 SEO 체크리스트에서 런칭 당일과 이후 90일 동안 할 일을 다룹니다.

이전 후 달라지는 점

SEO 지키기

URL이 변경되는 사이트 이전에 관한 Google 가이드가 여기에도 그대로 적용됩니다. 모든 기존 URL을 가장 가까운 새 URL에 매핑하고, 서버 측 영구 리디렉션을 사용하고, 최소 1년 동안 유지하세요. Webflow라면 신중하게 재구축해 URL을 그대로 유지할 수 있는 경우가 많은데, 그렇다면 제목, 설명, canonical 태그, 구조화된 데이터, Open Graph 이미지가 제대로 옮겨졌는지 확인하는 것이 대부분입니다.

Webflow에서만 생기는 함정은 남은 흔적입니다. 여전히 website-files.com에서 제공되는 Open Graph 이미지나 PDF, 아직 색인에 남아 있는 webflow.io 스테이징 주소, 이전 과정에서 슬러그가 바뀐 CMS 페이지가 그렇습니다. Webflow 프로젝트를 닫기 전에 이 세 가지를 모두 확인하세요.

Dardo의 Webflow 마이그레이션 진행 방식

Webflow 이전은 웹사이트 마이그레이션 서비스의 일부로 진행합니다. URL과 콘텐츠 목록 작성, CMS 내보내기를 거쳐 대표 페이지 하나를 먼저 다시 만들어 합의한 화면 너비에서 검토한 뒤, 나머지 템플릿, 폼, 리디렉션을 진행합니다. 구축 자체는 Astro 기반 웹 개발이고, 모션 작업은 크리에이티브 디벨롭먼트입니다. 이 사이트 dardo.studio도 Cloudflare Workers 위의 Astro로 운영되며, 콘텐츠는 헤드리스 CMS에 있고, 이 블로그도 그 CMS를 통해 작성하고 게시합니다.

이전을 고민하고 있다면 사이트와 바꾸고 싶은 점을 보내 주세요. 견적을 드리기 전에 Webflow를 떠날 가치가 있는지부터 말씀드리겠습니다.