목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Clay는 어떤 플랫폼인가요?
Clay는 복잡한 데이터 수집과 정리를 한 번에 해결해 주는 데이터 자동화/확장 플랫폼입니다. Clay 안에서 목록만 넣으면 완전한 리드 정보, 검증된 이메일, 심지어 개인화된 첫 문장까지 자동으로 생성해주는 방식인데요. 쉽게 말해, 일반 스프레드시트에 자동화 엔진과 100개 이상의 외부 데이터 소스를 연결해놓은 형태라고 보면 됩니다.
시작 전 준비물
시작하기 전 Framer와 Clay를 연결하기 위해, 아래 두 가지가 준비되어 있어야 합니다.
폼 컴포넌트가 있는 Framer 프로젝트
데이터를 저장할 Clay 테이블
Clay에서 Webhook 생성하기
먼저, Framer에서 넘어오는 데이터를 받을 Webhook URL을 만들어야 합니다. Webhook은 Framer에서 데이터가 전송되는 주소의 역할을 한다고 생각하시면 됩니다.
Clay 사이트를 열고 데이터를 저장할 테이블을 선택해주세요.
Import Data→From Webhook를 선택해주세요.Clay에서 생성된 고유 Webhook URL을 복사해주세요. Framer는 해당 URL로 양식을 제출합니다.
Framer 폼을 Webhook과 연결하기
이제 Clay에서 만든 URL을 Framer 폼에 연결해, 폼 제출 시 Clay 테이블로 데이터가 자동적으로 전달되도록 설정됩니다.
Framer 프로젝트에서 폼 컴포넌트를 선택해주세요.
오른쪽 패널에서
Properties→Send To섹션에서 대상으로Webhook을 선택해주세요.아까 Clay에서 복사한 Webhook URL을 입력란에 붙여넣으면 연결이 완료됩니다.
이제 사이트를 발행하면, 실제 제출 시 데이터가 바로 Clay로 전달됩니다.
Clay에서 제출 데이터 확인하기
연결이 잘 되었는지 확인하려면 한 번 테스트해보면 됩니다.
Publish된 사이트에서 직접 임의의 데이터를 넣어 제출해보세요.
몇 초 기다리면 Clay 테이블에 새로운 행(row)이 추가됩니다.
그 이후 모든 제출은 새로운 행으로 자동 추가됩니다
연결이 된 이후, Clay에서 확인되는 데이터를 정리하거나 확장, 자동화 등의 추가작업을 자유롭게 이어갈 수 있어요.
자주 묻는 질문(FAQ)
Q. Framer Preview 모드에서도 Clay로 데이터가 전송되는 걸 볼 수 있나요?
아닙니다. Preview 모드에서는 Webhook 요청이 보내지지 않을 수 있습니다. Publish된 페이지에서 테스트해야 정상적으로 Clay로 전달됩니다.
Q. Clay Webhook URL을 바꾸면 기존 폼은 자동으로 업데이트되나요?
아닙니다. URL을 변경하면 Framer 속성 패널에서도 직접 URL을 변경해야 합니다.
Q. 제출 실패 시 Framer에서 오류 메시지를 커스터마이징할 수 있나요?
네. 오류 시 표시되는 메시지는 Framer 내부에서 원하는 문구로 변경할 수 있습니다.
본 글은 Framer 공식 블로그의 ‘Connect Framer forms to Clay’를 번역·각색한 콘텐츠입니다.
