바쁜 프론트엔드 개발자 필독: Framer 페이지 임베드부터 이벤트 추적, Hotjar 세팅까지
바쁘다 바빠 프론트엔드 개발자인데 🤯
바쁜 프론트엔드 개발자 필독: Framer 페이지 임베드부터 이벤트 추적, Hotjar 세팅까지
바쁘다 바빠 프론트엔드 개발자인데 🤯
안녕하세요. 스터닝 개발팀 차수지입니다. 🙂
오늘은 Framer로 만든 페이지를 서비스 내에서 자연스럽게 활용할 수 있는 방법을 소개해보려 합니다.
프론트엔드 개발자는 하는 일이 정말 많습니다.
디자이너가 만든 디자인을 웹 페이지로 구현해야 하는 것은 기본이고, 사용자에게 조금이라도 더 좋은 경험을 제공하기 위해 성능도 개선해야 합니다. 만약 API 구조가 바뀌었다면 이에 대한 대응도 해줘야 하고, 매일매일 예상치 못하게 발생하는 버그에도 빠르게 대응해야 하죠.
이제 주변을 둘러볼까요?
해야 할 일은 산더미인데, 우리 옆에 앉아있는 팀원들의 수는 한정되어 있습니다.
이를 위해 스터닝에서는 Framer를 통해 단순 퍼블리싱 위주의 페이지들을 구현하는 방식을 통해 개발자의 리소스를 아끼면서도 신규 기능을 빠르게 테스트해 볼 수 있는 구조를 사용하고 있습니다.
Framer는 뭐죠?
Framer는 디자이너와 개발자를 위한 종합 UI/UX 도구로, 디자인, 프로토타이핑을 제공하는 플랫폼입니다. 현재는 웹사이트 빌더로까지 확장되어 디자인된 페이지를 실제 웹에서 바로 볼 수 있는 기능을 갖추고 있습니다.
Framer로 만든 페이지를 배포하면 랜덤 문자열로 구성된 url을 통해 접속할 수 있는데요, 이 페이지를 우리 도메인 내에서 표시하고 싶을 땐 어떻게 할까요?
Framer로 만든 페이지, 우리 사이트에 감쪽같이 띄우기
[<iframe>](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe)을 이용하면 Framer로 만든 페이지를 그대로 내 서비스 안에 띄울 수 있습니다.
<iframe>은 중첩된 브라우징 컨텍스트를 만들어, 현재 페이지 안에 다른 HTML 페이지를 표시할 수 있는 요소인데요. src 속성에 Framer에서 만든 페이지 URL을 넣으면, 별도의 이동 없이 서비스 내에서 바로 보여줄 수 있습니다.
<Iframe src={Framer Url} />노트폴리오의 포폴챗 페이지가 바로 Framer로 제작된 페이지를 이렇게 <iframe>으로 보여주고 있는데, 어떤가요? 감쪽같지 않나요? 🤭
Framer에서 발생한 이벤트를 받을 수 있을까요?
[window.postMessage()](https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage) 메서드를 사용하면 부모 페이지와 Framer로 만들어진 페이지 간의 통신도 가능합니다.
window.postMessage() 메서드는 Window 오브젝트 사이에서 안전하게 cross-origin 통신을 할 수 있게 합니다. 일반적으로, 다른 페이지 간의 스크립트는 각 페이지가 같은 프로토콜, 포트 번호와 호스트를 공유하고 있을 때에(동일 출처 정책) 서로 접근할 수 있습니다. window.postMessage() 는 이 제약 조건을 안전하게 우회하는 기능을 제공합니다.
Framer에서 발생한 이벤트를 부모 페이지에 전송하는 방법은 간단합니다.
Framer의 Site Settings > General > Custom Code의 End of <body> tag 에 어떤 이벤트가 발생했을 때, 어떤 메시지를 보낼지에 대한 로직을 작성한 후 저장하고, 배포하면 됩니다.
프론트엔드 개발자들에게 친숙한 자바스크립트를 통해 작성할 수 있어 더욱 편리하죠 👍
// 예시 코드
<script>
window.addEventListener("DOMContentLoaded", () => {
// 부모 페이지에 메시지를 전송하는 함수
function sendMessageToParent(value) {
window.parent.postMessage({ type: "사용자_정의_타입명", value }, "*");
}
// 특정 이벤트 발생 시, 부모 페이지에 메시지를 전송하게 함
window.addEventListener("특정_이벤트", () => {
// ...
sendMessageToParent(value);
});
});
</script>Hotjar로 추적도 가능할까요?
Framer로 만든 페이지도 Hotjar를 통해 유저의 행동을 추적할 수 있습니다.
- Parent Page 설정
먼저, iframe 태그에 data-hj-allow-iframe=”true” 추가합니다.
<iframe src="https://example.com/page.html" data-hj-allow-iframe=""></iframe> 그 다음으로는, Hotjar 사이트로 이동하여 Organization Settings > Session targeting & tracking 메뉴에 접속합니다. 해당 페이지의 하단에 있는 ALLOWED IFRAME DOMAINS에 추적 대상인 프레이머 url 입력하고, 저장하기 버튼을 클릭합니다.
- Source Page 설정
Hotjar에서 사이트 추적 코드를 복사합니다.
Framer 사이트의 General Site Settings 페이지 하단에 있는 Custom Code <head> 부분에 붙여넣습니다.
코드 변경 사항을 저장하고 Framer 사이트를 재배포합니다.
마무리하며
빠르게 변화하는 세상에 발맞추기 위해, 개발 리소스를 절약할 수 있는 다양한 서비스들이 등장하고 있습니다.
이러한 도구들을 능숙하게 활용함으로써 개발 시간은 줄이고, 다른 중요한 업무에 더 많은 시간을 투자할 수 있다는 점에서, 이는 개발자에게 필요한 역량 중 하나라고 생각합니다.
만약 여러분의 팀이 아직 Framer를 사용해 보지 않았다면, 이번 기회에 한 번 시도해 보시기를 추천드립니다. 👍
메타데이터
- post_id
- 4e82f882fb1f
- slug
- 바쁜-프론트엔드-개발자-필독-framer-페이지-임베드부터-이벤트-추적-hotjar-연동까지-4e82f882fb1f
- url
- https://medium.com/@team_stunning/%EB%B0%94%EC%81%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%ED%95%84%EB%8F%85-framer-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9E%84%EB%B2%A0%EB%93%9C%EB%B6%80%ED%84%B0-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B6%94%EC%A0%81-hotjar-%EC%97%B0%EB%8F%99%EA%B9%8C%EC%A7%80-4e82f882fb1f
- canonical_url
- https://medium.com/@team_stunning/%EB%B0%94%EC%81%9C-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90-%ED%95%84%EB%8F%85-framer-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9E%84%EB%B2%A0%EB%93%9C%EB%B6%80%ED%84%B0-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%B6%94%EC%A0%81-hotjar-%EC%97%B0%EB%8F%99%EA%B9%8C%EC%A7%80-4e82f882fb1f
- author_url
- https://medium.com/@team_stunning
- status
- ok
- fetched_at
- 2026-07-19 15:29:31
