목차
Table of Contents
본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.
Mailchimp를 사이트와 연결해야 하는 이유
사이트 방문자의 이메일을 수집해 뉴스레터를 보내거나, 할인 코드·콘텐츠를 제공하고 싶을 때 Mailchimp 연동은 아주 유용합니다. Framer에서는 전용 컴포넌트를 제공하기 때문에, 복잡한 코드를 다루지 않고도 빠르게 연동할 수 있어요.
Mailchimp 연동 방법
1. Mailchimp에서 Form URL 가져오기
Mailchimp 계정에 로그인한 뒤 Embedded Form Code 섹션으로 이동하세요. 섹션 속 <form action=""> 태그 안에 Mailchimp 구독 처리용 URL이 들어 있습니다. 해당 URL을 복사해주세요.
예시 URL: https://framer.us18.list-manage.com/subscribe/post u=01218bcf94e5b95825414d926&id=7899444161&f_id=004555e7f0
2. Framer에서 Mailchimp 컴포넌트 추가
Framer 프로젝트를 열고 왼쪽의
Insert패널로 이동해주세요.Forms섹션에서 Mailchimp 컴포넌트를 찾아 페이지에 드래그해 올려놓아주세요.
Note: 기본 구성은 이메일 입력창과 가입 버튼으로 이루어져 있습니다.
3. 폼 URL 붙여넣기 및 스타일 커스터마이징
캔버스에서 Mailchimp 컴포넌트를 선택하고, 오른쪽 속성 패널에서 Form URL 입력란에 복사한 URL을 붙여넣어주세요.
Note: 동일한 패널에서 입력 필드, 버튼 텍스트, 레이아웃, 색상, 폰트, 모서리 곡률 등 다양한 스타일을 원하는 대로 조정할 수 있어요.
4. 미리보기 또는 게시 후 테스트
설정이 끝났다면 Preview로 먼저 확인하거나 바로 Publish를 눌러 사이트를 게시해주세요. 게시된 사이트에서 폼을 테스트하면, 입력한 데이터가 즉시 Mailchimp로 전달되는 것을 확인할 수 있습니다.
Framer의 기본 폼 기능
Mailchimp를 사용하지 않아도 Framer에서는 자체 폼 시스템을 제공하는데요. framer의 자체 폼은 다음과 같은 기능을 제공합니다.
10개 이상의 다양한 커스텀 입력 양식 제공
다양한 인터렉션을 위한 폼 디자인 가능
이메일, Google Sheets, Webhook 등으로 데이터 제출 가능
보안을 강화하기 위해 스팸 방지와 rate limiting 기능 기본 포함
자세한 설정 방법은 관련 도움말 문서를 참고하시면 됩니다.
Mailchimp 연동이 유용한 대표적인 활용 예
할인 제공: 제품이나 서비스에 대한 할인 코드를 제공하여 사용자의 구독을 유도하세요. 일회성 구매자를 재구매 고객으로 전환시킬 수 있습니다.
리드 확보: 화이트 페이퍼나 PDF와 같은 프리미엄 콘텐츠를 제공하고 이메일을 유도해보세요. 이를 통해 리드를 확보할 수 있습니다.
구독자에게만 제공하는 팁 전달: 다른 곳에서는 제공되지 않는 정보를 제공하여 이메일 목록을 늘리고 방문자의 참여를 늘려보세요.
추가적인 문제가 발생하는 경우, 추가 지원을 받으려면 연락처 페이지를 통해 문의해 주세요.
자주 묻는 질문(FAQ)
Q. Mailchimp 폼을 미리보기에서도 테스트할 수 있나요?
아닙니다. Mailchimp 서버로 실제 요청을 보내는 방식이기 때문에 Publish된 페이지에서만 정상 제출 테스트가 가능합니다.
Q. 폼이 제출되었을 때 사용자에게 보내는 성공/실패 메시지를 커스터마이징할 수 있나요?
아닙니다. Mailchimp 폼의 성공/실패 메시지는 Mailchimp 서버에서 반환하는 HTML을 기반으로 처리되기 때문에 Framer 내부에서 UI를 세밀하게 제어할 수는 없습니다.
Q. Framer에서 폼 스타일(버튼, 폰트, 색상)도 커스터마이징할 수 있나요?
네. Mailchimp 전용 컴포넌트는 스타일 패널에서 텍스트, 색상, 버튼 디자인, 레이아웃 등을 자유롭게 수정할 수 있도록 제공됩니다.
본 글은 Framer 공식 블로그의 ‘Disabling user select on a layer’를 번역·각색한 콘텐츠입니다.
