프레이머로(Framer) 제작한 랜딩 페이지를 내 웹사이트에 연결하는 방법

프레이머(Framer)에서 만든 결과물을 내 웹사이트와 연결하는 방법은 여러 가지가 있습니다. 이 글에서는 가장 간단하고 실용적인 두 가지 방법을 소개합니다: iFrame으로 임베드하기와 HTML/CSS/JS로 변환 후 업로드.

---

1. iFrame으로 통합하기

프레이머에서 퍼블리시한 결과물을 웹사이트에 연결하는 가장 쉬운 방법은 iFrame을 사용하는 것입니다. iFrame은 외부 콘텐츠를 내 웹사이트에 삽입할 수 있도록 돕는 HTML 태그입니다.

단계별 방법:

1. 퍼블리시된 프레이머 URL 확인
   프레이머에서 작업을 완료한 후 퍼블리시 버튼을 눌러 생성된 URL(예: https://yourproject.framer.website)을 복사합니다.
2. HTML 코드에 iFrame 삽입
   웹사이트의 HTML 코드에 아래와 같은 iFrame 코드를 추가합니다:
   • width와 height는 웹사이트 레이아웃에 맞게 조정 가능합니다.
3. html
   코드 복사
   <iframe src="https://yourproject.framer.website" width="100%" height="800" frameborder="0" allowfullscreen> </iframe>
4. 결과 확인
   HTML 파일을 저장하고 웹사이트에서 정상적으로 표시되는지 확인합니다.

장점:

• 빠르고 간단하게 통합 가능.
• 프레이머 콘텐츠를 그대로 유지하면서 내 웹사이트에서 활용 가능.

단점:

• 외부 URL 의존성이 있어 인터넷 연결이 필요.
• 프레이머에서 수정된 내용은 자동으로 반영되지만, 커스터마이징이 어렵습니다.

---

2. HTML/CSS/JS 파일로 변환 후 직접 업로드

프레이머의 상위 플랜을 사용하는 경우, 프로젝트를 HTML/CSS/JS 파일로 내보내 로컬에서 호스팅할 수 있습니다. 이렇게 하면 외부 URL 의존 없이 내 서버에서 직접 콘텐츠를 제어할 수 있습니다.

단계별 방법:

(1) 프레이머에서 코드 내보내기

프레이머의 상위 플랜(Team 또는 Enterprise)을 사용하는 경우 Export Code 기능을 통해 프로젝트 파일을 다운로드합니다. 파일에는 HTML, CSS, JavaScript 코드가 포함됩니다.

(2) 브라우저에서 퍼블리시된 파일 다운로드

만약 상위 플랜을 사용하지 않는다면, 퍼블리시된 프레이머 사이트에서 HTML 파일과 리소스를 다운로드할 수 있습니다.

• 브라우저에서 사이트를 열고, Ctrl+S를 눌러 전체 페이지를 저장합니다.
• 또는 개발자 도구(F12)를 사용하여 필요한 CSS/JS 파일을 추출합니다.

(3) 내 웹사이트에 업로드

다운로드한 HTML/CSS/JS 파일을 내 웹사이트의 서버 또는 호스팅 플랫폼에 업로드합니다.

• 웹 호스팅 플랫폼(예: Netlify, Vercel, AWS S3)을 사용하면 간단히 배포할 수 있습니다.
• HTML과 관련 파일의 경로를 정확히 연결해야 합니다.

장점:

• 외부 의존성이 없어 더 빠르고 안정적인 서비스 제공 가능.
• 완전한 커스터마이징이 가능하며, 콘텐츠 수정도 자유로움.

단점:

• 초기 설정이 다소 복잡하고 시간이 걸릴 수 있음.
• 프레이머의 상위 플랜이 필요하거나, 추가적인 개발 작업이 요구됨.

---

3. 도메인 연결(리디렉션 방식)

프레이머에서 이미 커스텀 도메인을 설정한 경우, 내 웹사이트에서 해당 도메인으로 리디렉션을 설정할 수도 있습니다.

단계:

1. 프레이머 프로젝트에서 커스텀 도메인(예: https://myevent.com)을 연결합니다.
2. 내 웹사이트의 설정에서 리디렉션을 적용해, 사용자가 내 웹사이트에서 바로 해당 도메인으로 이동하도록 만듭니다.

---

결론

프레이머로 제작한 랜딩 페이지를 내 웹사이트에 연결하려면 iFrame 방식이 가장 빠르고 간단한 방법입니다. 하지만 더 정교한 제어와 속도를 원한다면 HTML/CSS/JS 파일로 변환 후 업로드하는 방식을 고려해 보세요.

추가적인 설정이 필요하거나 기술적 어려움이 있다면 언제든 댓글로 문의하세요! 😊

---