※이 글의 순서와 화면은 2021년 10월 시점의 것입니다. (2026년 추가: Webflow와 Google reCAPTCHA의 현행 UI에서는 명칭·배치가 달라진 경우가 있습니다)
먼저 결론 | reCAPTCHA 설정의 요점
- Webflow 폼에 reCAPTCHA 요소를 놓고, Google reCAPTCHA(무료)에서 사이트 키를 받아 Project Settings의 “Forms”에 등록합니다(3단계·예상 15분)
- reCAPTCHA 타입은 “v2”를 고릅니다(Webflow의 폼은 v2의 Key만 지원)
- 크기는 직접 변경할 수 없으므로, 부모 Div 블록을 만들고 Scale을 가로세로 0.7로 설정해 축소합니다
10일 차는 보안 면의 강화를 목적으로 한 Google “reCAPTCHA”의 도입 방법을 해설합니다. 먼저 reCAPTCHA에 대해 조금 소개하겠습니다.
이 글의 요점
- reCAPTCHA란?
- reCAPTCHA란 “저는 로봇이 아닙니다” 체크 등으로 문의 폼에 대한 무단 접근을 막는, Google이 무료로 제공하는 기능입니다.
목차
reCAPTCHA란?
“□ 저는 로봇이 아닙니다”
이 문장을 한 번쯤 보신 적 없나요? 경우에 따라서는 사진을 고르거나 질문에 답하거나… 어딘가 번거로운 “그것”을 reCAPTCHA라고 부릅니다.
reCAPTCHA를 도입하는 이유
무단 접근을 막기 위해 필요합니다. 문의 폼에 구현하면 이상한 메일을 보내는 바이러스로부터 웹사이트를 지킬 수 있습니다.
비용이 드는가
Google이 제공하는 기능으로 무료로 도입 가능합니다.
도입은 간단한가
이 글에서 처음부터 순서를 소개하고 있으므로 간단히 도입할 수 있습니다.
도입 예상 시간은 15분입니다.
그럼 바로 도입해 봅시다!
Webflow에 reCAPTCHA를 도입한다
다음 순서로 reCAPTCHA를 도입해 갑니다.
- 【순서 1】문의 폼에 설치
- 【순서 2】Google에서 등록하자
- 【순서 3】Webflow와 Google 연동
단 3단계입니다. 후딱 끝내 버립시다.
【순서 1】문의 폼에 설치
Webflow에는 처음부터 “reCAPTCHA” 템플릿이 준비되어 있습니다. 먼저 이것을 문의 폼에 넣어 봅시다.
- 문의 폼을 선택
- 전송 버튼 위에 넣읍시다.
이것으로 OK. 정말 빠르네요.
【순서 2】Google에서 등록하자
(2026년 추가: Google reCAPTCHA의 등록 화면은 현행 UI에서는 달라진 경우가 있습니다)
실제로 사용하려면 Google과 연동해야 하므로 “Project Settings”를 열어 설정 화면으로 갑니다.
“Forms” 항목에서 reCAPTCHA까지 스크롤합니다. 사진의 빨간 원 부분을 클릭해 Google의 reCAPTCHA 등록 페이지를 엽시다.
✓Google 페이지에서 신규 등록을 한다
각 항목을 채워 초기 설정을 완료합시다.
위에서부터 순서대로 해설해 가겠습니다.
- ①라벨 나중에 봤을 때 어느 사이트의 reCAPTCHA인지 바로 알 수 있도록 이름을 붙입시다.
- ②reCAPTCHA 타입 v3과 v2 두 가지를 고를 수 있지만 이번에는 “v2”를 선택합니다. 이유는 Webflow의 폼에는 v2의 Key밖에 없기 때문입니다. v3도 도입할 수 있다고 생각합니다만, 우선은 일단 v2로 괜찮겠지요.
- ③도메인 설정 reCAPTCHA를 도입하고 싶은 사이트의 도메인을 입력합니다.
입력해서 전송하면 작성 완료입니다.
【순서 3】Webflow와 Google 연동
등록이 정상적으로 완료되면 화면이 바뀌며 사이트 키가 표시됩니다. 표시된 사이트 키를 Webflow의 설정 화면에서 등록하면 reCAPTCHA 설정은 종료입니다.
저장 전에는 “reCAPTCHA를 유효화한다”를 “Yes”로 합시다.
저장을 하면…
“모든 문의 폼에 reCAPTCHA가 있나요? 필요합니다” 같은 경고가 나옵니다. 처음에 문의 폼의 심벌에 reCAPTCHA를 넣었으므로 문제없습니다.
Webflow의 reCAPTCHA 크기를 변경한다
reCAPTCHA 도입이 끝났으므로, 문의 페이지의 반응형 디자인을 만들어 가겠습니다.
포트레이트 크기를 확인하자
포트레이트 크기에서는 reCAPTCHA가 가로폭을 벗어나므로 조정이 필요합니다. 그러나 reCAPTCHA는 직접 변경할 수 없습니다.
새로 Div 블록을 만들어 그 Div를 부모로 삼고, 그 안에 reCAPTCHA를 넣어 대응합니다.
- Div 블록을 작성 · 클래스명 “reCAPTCHA wrap”
- reCAPTCHA를 안에 넣는다
- reCAPTCHA wrap을 선택 · 2D＆3D transforms “…”를 클릭. 아래 이미지 ①이 표시됩니다. · 이미지의 ①을 참고해 콘텐츠를 “왼쪽 위”에 배치 · “＋”를 클릭. · Scale에서 세로와 가로를 0.7로 설정
reCAPTCHA를 작게 표시할 수 있었습니다. 가장 작은 크기에서는 살짝 삐져나오지만, 닌텐도 기기로 사이트를 보는 사람은 없다고 판단해 이대로 두겠습니다.
또 설령 있다고 해도 어떻게든 이용은 할 수 있을 것 같네요.
정리
10일 차에는 reCAPTCHA의 도입 방법을 배울 수 있었습니다. 이번에는 Webflow 설정을 만지는 시간이 더 길었을지도 모르겠네요.
Webflow에 준비된 “reCAPTCHA”는 영어 표현밖에 없는 것이 조금 아쉽습니다. 그러나 실제로 공개하면 사용자의 언어 설정에 따라 표시 언어가 바뀌므로 특별히 문제는 없습니다.
다음 회에는 【SEO】에 대해 Webflow에서 어떻게 설정하는지 해설합니다. Twitter나 인스타그램 등에서 공유할 때의 이미지 등도 설정할 수 있습니다!
그럼 다음 회에도 힘내 봅시다. 수고하셨습니다.
제작 실적
자주 묻는 질문
Webflow에 reCAPTCHA를 도입하는 데 비용이 드나요?
들지 않습니다. reCAPTCHA는 Google이 제공하는 기능으로 무료로 도입 가능합니다. 무단 접근 대책으로 문의 폼에 구현하는 것을 추천합니다.
Webflow의 reCAPTCHA는 v2와 v3 중 무엇을 골라야 하나요?
v2를 선택합니다. 이유는 Webflow의 폼에는 v2의 Key밖에 없기 때문입니다. v3도 도입할 수 있다고 보이지만, 우선은 일단 v2로 괜찮겠지요.
Webflow에 reCAPTCHA를 도입하는 순서는 어떻게 되나요?
3단계입니다. ①문의 폼의 전송 버튼 위에 Webflow의 reCAPTCHA 템플릿을 설치, ②Google의 reCAPTCHA 등록 페이지에서 라벨·타입·도메인을 설정, ③표시된 사이트 키를 Webflow 설정 화면에 등록해 연동합니다. 도입 예상 시간은 15분입니다.
reCAPTCHA의 크기를 바꿀 수 있나요?
reCAPTCHA는 직접 변경할 수 없습니다. 새로 Div 블록을 만들어 부모로 삼고 그 안에 reCAPTCHA를 넣은 뒤, Scale에서 세로와 가로를 0.7로 설정하면 작게 표시할 수 있습니다.
Webflow의 reCAPTCHA는 영어 표시 그대로인가요?
Webflow 상에서는 영어 표현밖에 없지만, 실제로 공개하면 사용자의 언어 설정에 따라 표시 언어가 바뀌므로 특별히 문제는 없습니다.
