본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

이 글에서는 멀티 도메인 방식 또는 단일 도메인 방식을 통해 Framer를 기존 웹사이트와 통합하는 방법을 설명합니다.

멀티 도메인

Framer를 기존 사이트에 통합하는 가장 간단한 방법은 여러 서브도메인을 사용하는 것인데요, 예시는 아래와 같습니다.
메인 사이트: example.com
Framer 사이트: subdomain.example.com

설정 방법

1. Framer 프로젝트에서 서브도메인을 설정합니다.

2. DNS 서버를 업데이트하여 해당 서브도메인이 Framer 사이트를 가리키도록 하세요.

Note: 커스텀 도메인 설정 방법에서 더 자세히 알아보실 수 있습니다.

단일 도메인(고급 설정)

복잡한 웹사이트의 경우, “마이크로 프론트엔드(micro frontends)”라 불리는 고급 설정을 통해 하나의 도메인 아래에 여러가지 독립된 사이트를 호스팅할 수 있습니다. 예시는 아래와 같습니다.
메인 사이트: example.com
Framer 섹션: example.com/framer-page

마이크로 프론트엔드(micro frontends)란? 하나의 큰 웹사이트를 여러 개의 작은 독립 애플리케이션으로 나누어 관리하는 방식입니다. 각 부분은 독립적으로 개발·배포할 수 있어 유연성이 높으며, Framer 사이트를 기존 도메인의 특정 경로에 통합할 때 유용합니다.

요구사항: 단일 도메인 설정 시에는 Enterprise 플랜과 Rewrite 규칙을 지원하는 proxy 호스팅 제공업체(예: Vercel, Netlify, Cloudflare)를 사용해야 합니다.

설정 방법

reverse proxy 기능을 제공하는 호스팅 제공업체를 선택한 후, 경로(/framer-page)를 해당 Origin(Framer 사이트)으로 매핑하는 Rewrite 규칙을 정의합니다.

Rewrite 규칙 예시

[
  {
    "source": "/framer-page",
    "destination": "<https://your-framer-site.com>"
  }
]

각 호스팅 제공업체는 Rewrite 규칙에 대한 구체적인 설명 방식이 있으니, 본 규칙을 구현하기 위한 세부사항은 해당 호스팅 업체의 설명 문서를 참고해보세요.
reverse proxy를 사용한 셀프 호스팅 방식에 대해 더 알아보려면 이 글에서 확인해보시길 추천드리며, 문제가 발생하거나 추가 도움이 필요하면 연락처 페이지를 통해 Framer 지원팀에 문의하세요.

본 글은 Framer 공식 블로그의 ‘How to integrate with your current site’를 번역·각색한 콘텐츠입니다.