노코드 솔루션 버블(Bubble)에서 AI 크롤링 차단 #2

어제 글에서 노코드 솔루션 버블(bubble)에 AI 크롤링을 차단하기 위한 여러 가지 방법을 소개했다.

2024.11.18 - [explore] - 노코드 솔루션 버블(Bubble)에서 AI 크롤링 차단 #1

노코드 솔루션 버블(Bubble)에서 AI 크롤링 차단 #1

 

이번 글은 조금 더 구체적으로 Google reCAPTCHA API를 활용해 Bubble에서 Google reCAPTCHA 체크박스를 설정하는 방법을 소개한다.

 

Google reCAPTCHA는 로그인 절차가 있는 곳에 간단히 같이 넣거나, 리디렉션 되는 별도 보안 페이지를 만들어서 조건부로 리디렉션 되도록 워크플로우를 설정하면 된다. 예를 들어, 로그인이 안되어 있는 상태이거나, 특정 페이지에 접근을 시도할 경우, 사용자가 로그인하지 않은 상태로 글 작성 버튼을 클릭하거나 특정 페이지에 접근하려고 하는 상황들이 포함된다. 보안 페이지 리디렉션은 모든 워크플로우에 다 설정할 필요는 없다. 무엇보다 사용자가 불편해하고 귀찮아할 수 있으니 중요한 길목이 되는 곳에만 배치하도록 한다. 

 

버블로 몇개의 앱을 만든 나로서도 워크플로우나 데이터 설정은 아직 능숙치 않다. 다만 '배우고 한다'가 아니라 '하면서 배운다'라고 생각하면서 일단 기능이 돌아가도록 하는데 초점을 맞추고 있다. 그때그때 필요한 기능들을 찾아보고 해 보면서 배우고, 같은 기능이나 내용도 여러 프로젝트를 만들고 운영하면서 반복하다 보니 조금씩 익숙해지고 있다. 워크 플로우 설정에 대해서도 다른 글에서 한번 다뤄보기로 한다. 

 

자, 이제 다시 돌아와서. 로그인 절차에 간단하게 끼워넣든, 별도 페이지로 리디렉션을 하든 구글 reCAPTCHA를 설정을 하려면 아래와 같은 단계를 거쳐서 구글 reCAPTCHA API를 만들면 된다. 

 

1. Google reCAPTCHA API 키 생성

Google reCAPTCHA 관리자 페이지로 이동

Google reCAPTCHA 관리자로 이동한다. 

 

 

새 사이트 등록

"Label"에 프로젝트 이름을 입력한다.

 

reCAPTCHA 유형 선택

reCAPTCHA v2 > I'm not a robot Checkbox를 선택한다.
(v3도 사용 가능하지만, 기본적으로 체크박스 방식인 v2가 직관적이다.)

 

"Domains" 항목에 Bubble에서 사용하는 도메인을 추가한다.
(예: myapp.bubbleapps.io 또는 사용자 지정 도메인 example.com)

약관에 동의하고 "Submit"을 클릭

 

사이트 키와 비밀 키 복사

생성된 사이트 키(Site Key)와 비밀 키(Secret Key)를 기록해 두자. Bubble에서 설정할 때 필요하다.

 

2. Bubble에서 Google reCAPTCHA 플러그인 설치

플러그인 설치

Bubble 편집기에서 왼쪽 메뉴의 플러그인(Plugins)으로 이동

"Add Plugins"를 클릭하고 Google reCAPTCHA 플러그인을 검색하여 설치한다.

 

플러그인 설정

플러그인 설정 메뉴에서 Site Key와 Secret Key를 입력한다.

두가지 키 모두 구글에서 받았던 것을 입력하면 된다.

노코드 솔루션 버블(bubble)의 플러그인 페이지

3. reCAPTCHA 요소 추가

페이지에 reCAPTCHA 추가하기

Bubble의 페이지 편집기로 이동, 왼쪽 도구 모음에서 reCAPTCHA 요소를 페이지에 드래그하여 배치한다.

 

워크플로우 설정

특정 버튼 클릭 시(예: "로그인" 또는 "글 작성하기"), reCAPTCHA 확인이 완료되었는지 조건을 설정하자.

When reCAPTCHA is valid: 사용자가 reCAPTCHA 인증을 통과했을 때 다음 작업(예: 데이터 저장, 페이지 이동 등)을 실행하도록 워크플로우를 설정한다.

 

4. reCAPTCHA 검증 서버 설정 (선택 사항)

Google reCAPTCHA는 기본적으로 클라이언트 쪽에서 작동하지만, Secret Key를 사용해 서버에서 추가 검증을 수행할 수도 있다. 이를 위해 Google의 검증 엔드포인트(https://www.google.com/recaptcha/api/siteverify)에 요청을 보낼 수 있는데, Bubble의 API Connector 플러그인을 사용하면 이 작업을 수행할 수 있다.

 

5. 테스트

Bubble의 개발 환경에서 페이지를 실행하여 reCAPTCHA가 제대로 표시되는지 확인, 체크박스를 클릭해 인증이 완료되면 다음 단계(예: 버튼 활성화)가 제대로 작동하는지 테스트한다.

 

이제 Google reCAPTCHA를 Bubble 앱에 사용할 수 있다.

 

위에서 언급한 대로 Bubble에서 reCAPTCHA를 사용하는 경우, 봇 감지와 사용자 경험의 균형을 유지하기 위해 필요한 중요한 곳에만 배치하자. v3 reCAPTCHA(사용자 액션에 따른 점수 기반 방식)를 사용하면 사용자가 별도의 클릭 없이도 봇 여부를 판단할 수 있는데, v2는 사용자가 정확하게 인식하고 직접 체크하는 방식, v3는 체크하지 않아도 점수 기반으로 체크하는 방식이니, 더 매끄러운 UX가 필요하다면 고려해 볼 만하다.