---
title: "Framer에서 Astro로 마이그레이션하는 방법"
description: "Framer에서 Astro로 마이그레이션하는 법. HTML 내보내기가 없는 Framer에서 무엇을 기록하고, CMS·모션·폼을 어떻게 다시 만들며, URL과 SEO를 지키는지."
url: "https://dardo.studio/ko/blog/framer-to-astro/"
language: "ko"
translations: {"en":"https://dardo.studio/en/blog/framer-to-astro/","es":"https://dardo.studio/es/blog/migrar-de-framer-a-astro/","fr":"https://dardo.studio/fr/blog/migrer-framer-vers-astro/","de":"https://dardo.studio/de/blog/framer-zu-astro-migrieren/","it":"https://dardo.studio/it/blog/migrare-da-framer-ad-astro/","pt":"https://dardo.studio/pt/blog/migrar-de-framer-para-astro/","nl":"https://dardo.studio/nl/blog/framer-naar-astro/","sv":"https://dardo.studio/sv/blogg/migrera-framer-till-astro/","pl":"https://dardo.studio/pl/blog/migracja-z-framera-do-astro/","uk":"https://dardo.studio/uk/blog/framer-to-astro/","ru":"https://dardo.studio/ru/blog/framer-to-astro/","ar":"https://dardo.studio/ar/blog/framer-to-astro/","hi":"https://dardo.studio/hi/blog/framer-to-astro/","th":"https://dardo.studio/th/blog/framer-to-astro/","ja":"https://dardo.studio/ja/blog/framer-to-astro/","zh-Hans":"https://dardo.studio/zh-Hans/blog/framer-to-astro/","zh-Hant":"https://dardo.studio/zh-Hant/blog/framer-to-astro/"}
updated: "2026-10-13T01:02:50.968Z"
---

[블로그](https://dardo.studio/ko/blog/)

# Framer에서 Astro로 마이그레이션: 디자인과 검색 순위를 지키며 사이트를 옮기는 방법

Framer에서 Astro로 옮기려면 사이트를 다시 구축해야 합니다. HTML 내보내기가 없기 때문입니다. 먼저 기록할 것, 깨지는 것, 디자인·URL·순위를 지키는 방법.

작성자 [Nicolás Cerón](https://dardo.studio/ko/studio/) ·2026년 10월 12일

![밤의 화가 작업실, 이젤 위에 놓인 텅 빈 금박 액자. 진홍색 실 한 가닥이 액자에서 열린 창문 밖으로 이어져 언덕길을 따라 별빛 아래 불 켜진 천문대까지 올라간다.](https://dardo.studio/_astro/01M4S57PW4TH7D1E7E3RQM4Z4E_Z3SVDC.webp)

## 핵심 요약

- Framer는 자체 호스팅용 HTML 내보내기를 제공하지 않으므로, Astro로 옮기려면 게시된 Framer 페이지를 기준 자료로 삼아 사이트를 다시 구축해야 합니다.
- Framer는 콘텐츠, 이미지, 코드를 자체 CDN과 런타임에서 불러오므로, 다시 구축하기 전에 모든 URL, CMS 컬렉션, 브레이크포인트, 애니메이션을 기록해 두세요.
- Framer의 폼과 CMS 파일은 Framer 런타임에 의존합니다. 모든 폼에 자체 엔드포인트를 연결하고, CMS 콘텐츠는 Astro 컬렉션이나 헤드리스 CMS로 옮기세요.
- 호스팅 환경에서 1:1 서버 측 301 리디렉션을 설정하세요. 어댑터 없는 정적 Astro 빌드는 meta refresh 리디렉션만 만듭니다.
- 런칭 후 canonical, 사이트맵 항목, Open Graph 태그 중 어느 것도 기존 Framer 주소를 가리키지 않는지 확인하세요.

## 짧은 답변

Framer 고객센터는 자체 호스팅용 HTML 내보내기를 제공하지 않는다고 분명히 밝히고 있습니다([Framer 고객센터](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/)). 따라서 Framer에서 Astro로 옮기는 일은 내보내기가 아니라 재구축입니다. 게시된 사이트를 기준 자료로 캡처하고, 각 템플릿을 Astro 컴포넌트로 다시 만들고, CMS 콘텐츠를 컬렉션으로 옮기고, 실제로 필요한 모션을 재현하고, 바뀌는 모든 URL에 영구 리디렉션을 걸어야 합니다.

이 순서대로 진행하면 새 사이트는 똑같은 모습을 유지하면서 JavaScript는 덜 불러오고 검색 순위도 지킬 수 있습니다. 캡처나 리디렉션 맵을 건너뛰면 아무도 원하지 않은 리디자인과 검색 트래픽 하락만 남습니다.

## 팀들이 Framer를 떠나는 이유

Framer는 마케팅 사이트를 빠르게 디자인하고 게시하기에 좋은 도구입니다. 떠나는 이유는 대개 미적인 문제보다 현실적인 문제입니다.

- **호스팅과 소유권.** Framer 사이트는 Framer 서버에서 실행됩니다. 코드를 자체 저장소에 두거나, 직접 고른 호스팅에 올리거나, 자체 백엔드 옆에서 운영하고 싶은 팀은 사이트를 다시 구축해야 합니다.
- **사이트별 요금제 비용.** 2026년 10월 12일에 확인한 Framer [요금제 페이지](https://www.framer.com/pricing/)에 따르면 Basic 요금제는 월 USD 10, 사이트 리디렉션 기능이 추가되는 Pro 요금제는 월 USD 30이며, 둘 다 연간 결제 기준입니다. 현지화(Localization)는 유료 애드온입니다.
- **리디렉션 제한.** Framer 리디렉션은 같은 도메인 안의 경로에서만 작동합니다([Framer 고객센터](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/)).
- **실제 백엔드가 필요한 폼, 데이터, 연동.** CRM, 예약 시스템, 회원 전용 콘텐츠, 또는 자체 인프라에서 실행되어야 하는 모든 것이 여기에 해당합니다.

마케팅팀이 매주 시각적으로 페이지를 만들고 수정하며 사이트가 제 역할을 하고 있다면, Framer에 머무는 것이 옳은 선택일 수 있습니다. 마이그레이션에는 디자인과 개발 시간이 들기 때문에, 그만큼 분명한 무언가를 얻을 수 있어야 합니다.

## Framer 캡처 도구를 만들며 배운 것

Dardo는 게시된 Framer 페이지를(본인이 소유한 사이트에 한해) 캡처해, 단독으로 열리는 기준 파일과 다시 만들어야 할 항목을 한 줄씩 정리한 Astro 마이그레이션 트래커로 바꿔 주는 내부 도구를 만들었습니다. 이 도구를 만들면서 Framer 사이트가 어디에 복잡함을 숨기고 있는지 알게 되었습니다.

- **에셋은 Framer CDN에 있습니다.** 이미지, 폰트, 코드는 framerusercontent.com과 관련 도메인에서 불러옵니다. 반응형 이미지는 같은 파일을 여러 너비(?width=512, ?width=1024)로 요청하므로, 캡처 도구는 이미지마다 가장 큰 파일 하나만 로컬에 보관합니다.
- **JavaScript는 여러 겹으로 도착합니다.** Framer는 실제 번들을 다시 내보내기만 하는 작은 모듈을 불러오므로, 한 번만 훑어서는 코드를 놓칩니다. 도구는 새 모듈이 더 이상 나타나지 않을 때까지 반복해서 스캔합니다.
- **CMS 콘텐츠는 별도의 파일 형식입니다.** Framer CMS 컬렉션은 .framercms 파일로 제공되며, 페이지는 이 파일을 CDN에서 바이트 범위(byte range) 단위로 가져옵니다. 일반적인 정적 호스팅에서는 이런 요청에 파일 전체가 반환되고, 해당 URL을 만드는 모듈은 다시 Framer를 가리킵니다.
- **런타임이 로드 후 페이지를 다시 씁니다.** Framer의 React 런타임은 HTML을 하이드레이션하면서 삭제한 요소를 다시 넣을 수 있습니다. 예를 들어 "Made in Framer" 배지는 별도의 컨테이너로 하이드레이션됩니다.
- **폼은 Framer에 의존합니다.** 캡처한 폼에는 HTML action이 없으며, 제출은 Framer 클라이언트 런타임을 통해서만 작동합니다.
- **SEO 태그는 Framer를 가리킵니다.** 다시 쓰지 않으면 canonical과 Open Graph URL이 계속 원래 Framer 주소를 알립니다.
- **모션은 데이터입니다.** 등장(Appear) 효과는 페이지 안에 JSON 페이로드로 저장되므로, 도구는 이를 실행 중인 모든 애니메이션의 키프레임 및 타이밍과 함께 기록합니다.

저희가 내린 결론은 이렇습니다. 내보낸 결과물은 증거일 뿐 납품물이 아닙니다. 캡처한 HTML이나 Framer 런타임은 절대 배포하지 않습니다. 그것들은 무엇을 다시 만들어야 하는지 정확히 알려 줄 뿐입니다.

## Framer에서 Astro로, 단계별 진행

1. **모든 URL 목록 만들기.** 사이트의 sitemap.xml에서 시작해 모든 CMS 페이지를 추가하고, Google Search Console에서 가능한 가장 긴 기간으로 페이지 보고서를 내보내세요. Framer의 Site Settings > Hosting에 이미 설정된 리디렉션도 기록해 두세요.
2. **Framer가 허용하는 것 내보내기.** Framer에 따르면 CMS 콘텐츠는 플러그인을 이용해 CSV나 JSON 같은 형식으로 내보낼 수 있습니다([Framer 고객센터](https://www.framer.com/help/articles/porting-your-data-from-framer/)). 모든 이미지와 파일을 내려받고, 폰트는 자체 호스팅하기 전에 각각 라이선스를 확인하세요.
3. **게시된 사이트를 기준 자료로 캡처하기.** 각 템플릿을 모든 브레이크포인트에서 기록하고, 유지하려는 모든 애니메이션의 타이밍도 함께 기록하세요. 저희 도구는 페이지를 1440, 810, 390픽셀 너비로 캡처한 다음, 사이트 CSS에서 찾은 모든 브레이크포인트의 1픽셀 아래, 정확히 그 너비, 1픽셀 위에서 다시 캡처합니다.
4. **템플릿을 Astro 컴포넌트로 다시 만들기.** CMS 컬렉션은 [콘텐츠 컬렉션](https://docs.astro.build/en/guides/content-collections/)이나 헤드리스 CMS로, 이미지는 [astro:assets](https://docs.astro.build/en/guides/images/)로, 현지화된 페이지는 [Astro의 i18n 라우팅](https://docs.astro.build/en/guides/internationalization/)으로 옮기고, 언어마다 URL을 하나씩 두세요.
5. **의미를 전달하는 모션 재현하기.** 대부분의 Framer 효과는 CSS 트랜지션, 키프레임 또는 작은 스크립트로 바뀝니다. prefers-reduced-motion 설정을 존중하세요. 고객 프로젝트가 아닌 18개 경로 규모의 자체 Framer-Astro 재구축에서는 스크롤 및 인터랙션 상태 219개 중 217개가 원본과 1% 이내의 픽셀 차이로 일치했습니다.
6. **모든 폼에 실제 엔드포인트 연결하기.** 각 폼을 자체 핸들러(Cloudflare Worker, 폼 서비스 또는 CRM)로 연결하고 스테이징에서 전송이 제대로 되는지 테스트하세요.
7. **검색 메타데이터 옮기기.** 모든 페이지에 제목, 설명, Open Graph 태그, 구조화된 데이터, 자기 참조 canonical을 옮기고 새 XML 사이트맵을 만드세요.
8. **리디렉션은 HTML이 아니라 서버에서 처리하기.** 어댑터 없는 정적 Astro 빌드는 설정된 리디렉션을 HTTP 상태 코드가 없는 meta refresh 페이지로 바꿉니다([Astro 설정 레퍼런스](https://docs.astro.build/en/reference/configuration-reference/)). 사이트를 호스팅하는 곳에서, 예를 들어 Cloudflare의 \_redirects 파일이나 Worker로 1:1 301 리디렉션을 설정하세요.
9. **런칭 후 지켜보기.** DNS를 전환하고, 새 사이트가 검증될 때까지 Framer 프로젝트를 유지하며, 이후 몇 주 동안 Search Console의 색인 생성 보고서와 페이지 보고서를 확인하세요. [웹사이트 이전 SEO 체크리스트](https://dardo.studio/ko/blog/website-migration-seo-checklist/)에서 런칭 당일과 이후 90일 동안 할 일을 다룹니다.

## 이전 후 달라지는 점

| 항목   | Framer에서                  | Astro에서                           |
| ---- | ------------------------- | --------------------------------- |
| 편집   | Framer의 비주얼 캔버스           | 선택에 따라 CMS 필드 또는 코드               |
| 호스팅  | Framer 서버                 | Cloudflare 같은 정적 호스팅이나 엣지 플랫폼 어디든 |
| 리디렉션 | Pro 요금제, 같은 도메인 안의 하위 경로만 | 호스팅에서 설정하는 서버 측 301, 도메인 제한 없음    |
| 모션   | 기본 제공 효과와 인터랙션            | 직접 소유하고 측정할 수 있는 CSS와 JavaScript  |
| CMS  | Framer CMS 컬렉션            | 콘텐츠 컬렉션 또는 헤드리스 CMS               |
| 폼    | Framer의 폼 처리              | 자체 엔드포인트와 데이터 저장소                 |

## SEO 지키기

[URL이 변경되는 사이트 이전](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes)에 관한 Google 가이드가 여기에도 그대로 적용됩니다. 모든 기존 URL을 가장 가까운 새 URL에 매핑하고, 서버 측 영구 리디렉션을 사용하고, 최소 1년 동안 유지하세요. 신중하게 재구축하면 URL을 그대로 유지할 수 있는 경우가 많은데, 그렇다면 새 페이지가 같은 콘텐츠와 메타데이터를 담고 있는지만 확인하면 됩니다.

Framer에서만 생기는 함정은 남아 있는 Framer 주소입니다. canonical, 사이트맵 항목, Open Graph 태그 중 어느 것도 기존 Framer URL을 가리키지 않는지 확인하고, 새 사이트가 공개되면 Framer 프로젝트는 게시를 취소하거나 리디렉션하세요.

## Dardo의 Framer 마이그레이션 진행 방식

Framer 이전은 [웹사이트 마이그레이션](https://dardo.studio/ko/services/website-migration/) 서비스의 일부로 진행합니다. 목록 작성과 캡처를 거쳐 대표 페이지 하나를 먼저 다시 만들어 합의한 화면 너비에서 검토한 뒤, 나머지 템플릿, 폼, 리디렉션을 진행합니다. 구축 자체는 Astro 기반 [웹 개발](https://dardo.studio/ko/services/web-development/)이고, 모션 작업은 [크리에이티브 디벨롭먼트](https://dardo.studio/ko/services/creative-development/)입니다. 이 사이트 dardo.studio도 Cloudflare Workers 위의 Astro로 운영되며 콘텐츠는 헤드리스 CMS에 있습니다. 저희가 가장 자주 사용하는 구성입니다.

이전을 고민하고 있다면 [사이트와 바꾸고 싶은 점을 보내 주세요](https://dardo.studio/ko/contact/?service=website-migration). 견적을 드리기 전에 재구축할 가치가 있는지부터 말씀드리겠습니다.

## 자주 묻는 질문

**Framer 사이트를 HTML로 내보낼 수 있나요?**

공식적으로는 불가능합니다. Framer 고객센터는 자체 호스팅용 HTML 내보내기를 제공하지 않는다고 밝히고 있습니다. 게시된 페이지를 캡처하는 도구는 있지만 결과물은 여전히 Framer의 런타임과 CDN에 의존하므로, 그대로 배포할 것이 아니라 재구축을 위한 기준 자료로 활용하세요.

**Framer에서 Astro로 옮기면 Google 순위가 떨어지나요?**

트래픽을 만드는 모든 URL이 계속 작동한다면 떨어지지 않습니다. 가능한 한 경로를 그대로 유지하고, 바뀌는 경로에는 영구 301 리디렉션을 추가하고, 제목·설명·구조화된 데이터를 그대로 옮긴 뒤, 런칭 후 몇 주 동안 Search Console을 지켜보세요.

**Framer CMS 콘텐츠를 내보낼 수 있나요?**

Framer에 따르면 CMS 콘텐츠는 플러그인을 이용해 CSV나 JSON 같은 형식으로 내보낼 수 있습니다. 컬렉션 필드가 Framer CDN을 가리키는 경우가 많으므로 모든 이미지와 파일도 함께 내려받으세요.

**Astro로 옮긴 뒤에도 팀이 코드 없이 사이트를 수정할 수 있나요?**

새 사이트에 헤드리스 CMS를 사용한다면 가능합니다. 편집자는 웹 인터페이스에서 작업하고, Astro 사이트는 그 콘텐츠로 다시 빌드됩니다. dardo.studio도 이렇게 운영됩니다.

**Framer 애니메이션이 Astro에서도 작동하나요?**

그대로는 작동하지 않습니다. Framer의 효과는 Framer 자체 런타임에서 실행되므로, 유지하고 싶은 애니메이션은 CSS나 작은 스크립트로 하나씩 다시 만들어야 하며, 동작 줄이기(reduced motion) 버전도 함께 두는 것이 좋습니다.

## 출처 및 추가 자료

이 페이지의 출처이며, 원 발행처의 더 자세한 내용도 확인하실 수 있습니다.

- [Framer 고객센터: 웹사이트를 HTML로 내보내 자체 호스팅할 수 있나요?](https://www.framer.com/help/articles/can-i-export-my-website-to-html-and-self-host-it/) · framer.com
- [Framer 고객센터: Framer에서 데이터 옮기기](https://www.framer.com/help/articles/porting-your-data-from-framer/) · framer.com
- [Framer 고객센터: 리디렉션 설정 방법](https://www.framer.com/help/articles/how-to-setup-redirects-to-maintain-seo-ranking/) · framer.com
- [Framer 요금제](https://www.framer.com/pricing/) · framer.com
- [Astro 문서: 콘텐츠 컬렉션](https://docs.astro.build/en/guides/content-collections/) · docs.astro.build
- [Astro 문서: 이미지](https://docs.astro.build/en/guides/images/) · docs.astro.build
- [Astro 문서: 국제화(i18n) 라우팅](https://docs.astro.build/en/guides/internationalization/) · docs.astro.build
- [Astro 문서: 설정 레퍼런스(리디렉션)](https://docs.astro.build/en/reference/configuration-reference/) · docs.astro.build
- [Google Search Central: URL이 변경되는 사이트 이전](https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes) · developers.google.com

[Nicolás Cerón](https://dardo.studio/ko/studio/)

Nicolás Cerón은 콜롬비아 보고타에 있는 브랜드, 웹 디자인 및 개발 스튜디오 Dardo의 창립자입니다.

## 관련 글

- [**웹사이트 이전 SEO 체크리스트: 플랫폼이나 도메인을 바꿔도 순위를 지키는 방법**순위는 새 플랫폼 때문에 떨어지지 않습니다. 트래픽을 만들던 URL이 응답하지 않게 되면서 떨어집니다. URL 목록 작성부터 90일 차까지의 체크리스트.](https://dardo.studio/ko/blog/website-migration-seo-checklist/)
- [**WordPress vs 맞춤형 웹사이트: 선택 기준과 각각 투자 가치가 있는 경우**WordPress가 맞는 경우, 맞춤형 웹사이트가 투자 가치를 하는 경우, 그 중간인 헤드리스 WordPress까지 비용·속도·업데이트·소유권 기준으로 비교했습니다.](https://dardo.studio/ko/blog/wordpress-vs-custom-website/)
- [**Webflow에서 Astro로 마이그레이션: 콘텐츠, 디자인, 검색 순위를 지키며 사이트를 옮기는 방법**Webflow 코드 내보내기에는 CMS, 폼, 검색, 다국어 페이지가 빠집니다. Astro로 마이그레이션할 때 가져올 것, 다시 만들 것, 검색 순위를 지키는 방법.](https://dardo.studio/ko/blog/webflow-to-astro/)
- [**3D 웹사이트: 언제 가치가 있고, 어떻게 빠르게 유지할까**3D 웹사이트가 제 몫을 하는 경우와 영상·이미지가 더 나은 경우, 그리고 Janus Observatory의 3D 월드 10개를 빠르고 접근성 있게 유지한 방법.](https://dardo.studio/ko/blog/3d-websites/)

## 계속 둘러보세요.

- [서비스 · **SEO 손실 없는 웹사이트 이전(마이그레이션)**](https://dardo.studio/ko/services/website-migration/)

- [나의 프로젝트 · **상담 시작하기**](https://dardo.studio/ko/contact/)