- reCAPTCHA
- reCAPTCHA란 “로봇이 아닙니다” 체크 등으로 문의 폼에의 무단 접근을 막는, Google이 무료로 제공하는 기능입니다.
10일 차는 보안 강화를 목적으로 한 Google 『reCAPTCHA』 도입 방법을 해설합니다. 먼저 reCAPTCHA를 간단히 소개합니다.
reCAPTCHA란?
“□ 로봇이 아닙니다”
이 문장을 한 번쯤 본 적 있지 않나요? 경우에 따라 사진을 고르거나 질문에 답하거나… 다소 번거로운 “그것”을 reCAPTCHA라고 부릅니다.
reCAPTCHA를 도입하는 이유
무단 접근을 막기 위해 필요합니다. 문의 폼에 구현하면 이상한 메일을 보내는 봇으로부터 웹사이트를 지킬 수 있습니다.
비용이 드는가
Google이 제공하는 기능으로 무료로 도입 가능합니다.
도입은 간단한가
이 글에서 처음부터 순서를 소개하므로 간단히 도입할 수 있습니다. 도입 예상 시간은 15분입니다.
Webflow에 reCAPTCHA를 도입한다
- 【순서 1】문의에 설치
- 【순서 2】Google에서 등록
- 【순서 3】Webflow와 Google 연동
단 3스텝입니다. 후딱 끝내 버립시다.
【순서 1】문의에 설치
Webflow에는 처음부터 『reCAPTCHA』 템플릿이 준비되어 있습니다. 먼저 이것을 문의 폼에 넣어 봅시다.
- 문의 폼 선택
- 전송 버튼 위에 넣읍시다
이것으로 OK. 정말 빠르네요.
【순서 2】Google에서 등록
실제로 사용하려면 Google과 연동해야 하므로 “Project Settings”를 열어 설정 화면으로 갑니다.
『Forms』 항목에서 reCAPTCHA까지 스크롤합니다. 사진의 빨간 원 부분을 클릭해 Google의 reCAPTCHA 등록 페이지를 엽시다.
✓Google 페이지에서 신규 등록
각 항목을 채워 초기 설정을 완료합시다.
- ①라벨
나중에 봤을 때 어느 사이트의 reCAPTCHA인지 바로 알 수 있게 이름을 붙입시다. - ②reCAPTCHA 타입
v3과 v2 중 고를 수 있지만 이번엔 “v2”를 선택합니다. 이유는 Webflow의 폼에는 v2의 Key밖에 없기 때문입니다. - ③도메인 설정
reCAPTCHA를 도입할 사이트의 도메인을 입력합니다.
입력하고 전송하면 작성 완료입니다.
【순서 3】Webflow와 Google 연동
등록이 정상적으로 끝나면 화면이 바뀌며 사이트 키가 표시됩니다. 표시된 사이트 키를 Webflow 설정 화면에 등록하면 reCAPTCHA 설정은 종료입니다.
저장 전에는 “reCAPTCHA 활성화”를 “Yes”로 합시다.
저장을 하면···
“모든 문의 폼에 reCAPTCHA가 있나요? 필요합니다” 같은 경고가 나옵니다. 처음에 문의 폼의 심벌에 reCAPTCHA를 넣었으므로 문제없습니다.
Webflow의 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에서 어떻게 설정하는지 해설합니다. SNS에서 공유할 때의 이미지 등도 설정할 수 있습니다!
자주 묻는 질문
Webflow에 reCAPTCHA를 도입하는 데 비용이 드나요?
들지 않습니다. reCAPTCHA는 Google이 제공하는 기능으로 무료로 도입 가능합니다. 무단 접근 대책으로 문의 폼에의 구현을 추천합니다.
Webflow의 reCAPTCHA는 v2와 v3 중 무엇을 골라야 하나요?
v2를 선택합니다. 이유는 Webflow의 폼에는 v2의 Key밖에 없기 때문입니다.
Webflow에 reCAPTCHA를 도입하는 순서는?
3단계입니다. ①문의 폼의 전송 버튼 위에 Webflow의 reCAPTCHA 템플릿을 설치, ②Google의 reCAPTCHA 등록 페이지에서 라벨·타입·도메인을 설정, ③표시된 사이트 키를 Webflow 설정 화면에 등록해 연동합니다. 예상 시간은 15분입니다.
reCAPTCHA의 크기를 바꿀 수 있나요?
reCAPTCHA는 직접 변경할 수 없습니다. 새로 Div 블록을 만들어 부모로 삼고 그 안에 reCAPTCHA를 넣은 뒤 Scale에서 세로와 가로를 0.7로 설정하면 작게 표시할 수 있습니다.
Webflow의 reCAPTCHA는 영어 표시 그대로인가요?
Webflow 상에서는 영어 표현밖에 없지만, 실제로 공개하면 사용자의 언어 설정에 따라 표시 언어가 바뀌므로 특별히 문제는 없습니다.
