목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
HubSpot이 무엇인가요?
HubSpot은 마케팅, 영업 및 서비스 도구를 통합 CRM 데이터베이스에 연결하는 플랫폼인데요. 해당 플랫폼이 제공하는 리드 폼을 Framer 사이트에 바로 임베드하면, 사용자 입력이 HubSpot 계정으로 직접 전송되어 편리하게 리드를 관리할 수 있습니다.
HubSpot 폼 ID 찾기
우선 HubSpot 폼을 Framer와 연결하려면 portal Id와 form Id라는 두 가지 고유 식별자가 필요합니다.
HubSpot에서 기존의 폼을 열거나 새 폼을 제작해주세요.
폼 편집기의 우측 상단에서
Embed버튼을 클릭해주세요.나타나는 모달에 Embed 코드가 표시되며, 그 안에서
portal Id와form Id값을 복사할 수 있습니다.
Framer에서 HubSpot 컴포넌트 추가하기
폼 ID가 준비되면 Framer 프로젝트로 전환하여 HubSpot 컴포넌트를 추가해주세요. Framer에서는 HubSpot 폼 전용 컴포넌트를 제공하므로 시각적으로 어울리도록 배치 후 관리가 가능합니다.
Framer 프로젝트를 열어주세요.
왼쪽 Insert 패널에서 아래로 스크롤해 Forms 섹션을 찾아주세요.
HubSpot컴포넌트를 선택해 캔버스에 드래그 앤 드롭해주세요.
HubSpot 폼 연결하기
이제 캔버스에 옮겨놓은 컴포넌트를 선택하여 앞서 복사한 ID를 HubSpot 양식과 연결해야 합니다.
페이지에서 HubSpot 컴포넌트를 선택해주세요.
오른쪽의 패널에서
portal Id및form Id필드를 찾아주세요.해당 필드에 값을 붙여넣어 폼을 연결하면 됩니다.
HubSpot에서 폼 디자인 관리하기
Framer에 양식을 배치할 수는 있지만, 폼의 디자인이나 기능 설정은 HubSpot에서 수정해야 합니다. HubSpot의 폼 편집기를 사용하여 필드, 스타일 및 동작을 조정할 수 있는데요. 이를 적절히 조정하여 폼의 디자인과 느낌을 브랜드 무드와 일치시켜주면 좋습니다.
퍼블리시 전 확인하기
폼을 추가하고 ID를 연결했다면 실제로 잘 작동하는지 테스트해보세요. 이를 게시하기 전, 아래의 항목들이 제대로 표시되고 있는지 확인하시길 추천드립니다. 모든 사항을 확인한 후, 준비가 끝났다면 Publish를 눌러 사이트를 게시해주세요. 그러면 방문자가 제출한 정보가 HubSpot으로 바로 전달되어 수집됩니다.
Preview 모드로 연 다음, 레이아웃과 기능 작동 확인하기
입력 후 제출이 정상적으로 처리 되는지 확인하기
Framer에서 제공하는 네이티브 폼
HubSpot 대신 Framer에 내장되어 있는 폼 시스템을 사용해도 좋은데요. Framer 폼은 아래와 같은 기능을 기본적으로 제공합니다.
다양한 사용 사례에 맞춘 10개 이상의 다양한 입력 유형
UX 개선을 위한 대화형 폼(예: 성공, 오류, 로딩 등) 형태의 UI 설정 가능
이메일, Google Sheets, Webhook 등 다양한 제출 방식 선택 가능
보안 강화를 위해 기본 제공되는 스팸 방지 및 Rate Limiting 기능
Note: Framer에서 제공하는 네이티브 폼을 설정하는 방법에 대한 단계는 해당 가이드를 확인해보시길 바랍니다.
HubSpot 폼이 유용한 상황
HubSpot 폼을 Framer 사이트에 통합하면 소통을 간소화하고, 인사이트를 수집하고, 데이터를 더욱 효과적으로 정리하는 데 도움이 됩니다. 가장 많이 활용되는 몇 가지 사례는 다음과 같습니다.
문의 폼: "문의하기" 양식을 삽입하여 사용자가 팀에 연락할 수 있도록 해보세요. Placeholder text를 사용하면 방문자가 관련 정보를 입력하는 데 도움이 될 수 있습니다.
지원 요청 폼: 구조화된 HubSpot 양식을 통해 들어오는 지원 문제를 라우팅하여 중앙에서 관리합니다.
피드백 수집 폼: 제품에 대한 생각과 아이디어를 수집하여 사용자를 더 잘 이해한 다음, 이러한 데이터를 사용하여 새로운 기능이나 변경 사항의 우선 순위를 정할 때 도움이 될 수 있습니다.
문제가 발생하거나 연결이 되지 않는 경우 Framer Contact 페이지에서 지원팀에 문의하실 수 있습니다.
자주 묻는 질문(FAQ)
Q. Framer에서 HubSpot 폼의 모든 디자인을 직접 수정할 수 있나요?
아닙니다. HubSpot 폼은 HubSpot 내부에서만 디자인을 변경할 수 있으며, Framer에서는 위치/크기/레이아웃 정도만 조절할 수 있습니다.
Q. 하나의 Framer 페이지에 HubSpot 폼을 여러 개 넣을 수 있나요?
네.
portal Id/form Id가 각각 다른 폼이라면 여러 개 추가해도 문제 없습니다.
Q. HubSpot에서 폼 내용을 변경하면 Framer에서 다시 연결해야 하나요?
아닙니다. HubSpot에서 필드나 텍스트를 변경해도 같은
portal Id/form Id를 가지고 있다면 Framer에서 자동으로 최신 구조를 로드합니다.
본 글은 Framer 공식 블로그의 ‘Adding HubSpot forms to your site’를 번역·각색한 콘텐츠입니다.
