목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Framer에서 외부 콘텐츠 불러오기
Framer에서 외부 콘텐츠를 불러오고 싶을 때는 Embed 컴포넌트를 이용하면 됩니다. iFrame / 위젯 / 스크립트 기반 서비스 대부분이 이 방식을 통해 연결되며, 사용 방법도 비교적 간단하니 쉽게 따라해보시길 바랍니다.
URL 임베드하기
다른 사이트나 서비스 페이지를 그대로 iFrame 형태로 삽입하고 싶다면 다음 단계를 따라 하세요.
Insert메뉴로 이동해주세요.검색창에 “Embed”를 입력해주세요.
Embed 컴포넌트를 캔버스로 드래그해주세요.
원하는 URL을 컴포넌트에 입력하면 됩니다.
Note: 일부 웹사이트는 HTTP 헤더 설정을 통한 iFrame 삽입을 차단하기도 합니다.
스크립트 임베드하기
스크립트에 iframe을 포함해야 하는 서비스의 경우는 다음과 같은 방법을 사용해주세요.
Embed 컴포넌트를 캔버스에 추가해주세요.
오른쪽 패널의
HTML버튼을 선택해주세요.HTML 섹션에
<script>...</script>코드를 붙여넣으면 됩니다.
자주 묻는 질문(FAQ)
Q. 스크립트를 임베드 했는데도 정상적으로 표시되지 않는 경우가 있나요?
네. 일부 서비스는 스크립트 외에 추가 코드를 수동으로 입력해야 정상적으로 표시되는 경우가 있습니다. 필요한 코드가 더 있는지 확인해본 후에 스크립트를 임베드 해보시길 바랍니다.
Q. Embed 컴포넌트를 반응형으로 만들 수 있나요?
네. Embed 컴포넌트도 결국 하나의 Frame 레이어이기에, Fill이나 Relative 등의 속성을 사용하여 반응형 구현이 가능합니다.
Q. 같은 페이지에 여러 개의 외부 위젯을 동시에 넣어도 성능이 유지되나요?
아닙니다. 기능적으로는 여러 개의 외부 위젯을 넣는 것은 가능합니다. 하지만 한 페이지에 위젯을 너무 많이 배치하면 페이지가 무거워지며, 성능이 떨어질 수 있기에 권장하지는 않습니다.
마무리
모든 설정을 했는데도 정상적으로 표시되지 않는다면, Framer의 Contact 페이지를 통해 지원팀에 문의하시면 도움을 받으실 수 있습니다.
본 글은 Framer 공식 블로그의 ‘How to add an iframe or embed script’를 번역·각색한 콘텐츠입니다.
