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

요즘 Saas 서비스들의 사이트를 들어가보면 아래 이미지처럼, 수상한 트래픽을 막기위해 사람인지 체크하는 체크 박스들이 종종 보인다. 민감한 정보를 다루거나, 무분별한 크롤링으로 인해 피해가 생길 수 있는 경우 AI bot의 크롤링을 차단하기 위한 장치다. 

 

소셜 미디어 콘텐츠 발행 예약을 도와주는 Buffer의 화면

 

 

위 이미지처럼 reCAPTCHA(인증을 통한 접근 차단) 페이지를 사용하면 봇이나 AI가 사이트를 크롤링하지 못하게 효과적으로 막을 수 있다. 이것은 사용자가 사람인지 확인하는 추가적인 보안 절차로, 크롤러와 자동화된 스크립트의 접근을 방지한다. 

 

보안 페이지, 이럴때 필요하다.

로그인하기 전: 사용자가 로그인 페이지에 접근할 때 보안 페이지를 거치게 설정하여, 봇이 로그인 시도를 반복하는 것을 방지할 수 있습니다.

게시물 작성이나 댓글 작성 전: 글을 게시하거나 댓글을 작성하기 전에 인증을 요구하여 스팸 봇의 무분별한 게시를 막을 수 있습니다.

결제나 민감한 정보 입력 전: 결제 페이지나 개인정보를 입력하는 페이지에 접근하기 전에 보안 페이지를 거쳐, 악의적인 접근을 방지할 수 있습니다.

중요 정보가 포함된 페이지 접근 전: 특정 회원 전용 콘텐츠나 중요한 자료가 있는 페이지를 보호하기 위해 보안 페이지를 설정할 수 있습니다.

 

버블(Bubble)에서 보안 페이지 추가하기

아래 4가지 방법을 사용하면 AI 크롤러나 자동화된 트래픽으로부터 사이트를 보호하기위해 버블(Bubble)에 보안 페이지를 추가할 수 있다. Bubble의 플러그인과 설정을 활용해서 필요한 보안 단계를 추가해보자.

 

1. Bubble에서 reCAPTCHA 설정

- Google reCAPTCHA 서비스를 활용하면 인증 기능을 쉽게 추가할 수 있다.

- Bubble의 Plugin Marketplace에서 "Google reCAPTCHA" 플러그인을 찾아 설치

- Google reCAPTCHA 사이트(https://www.google.com/recaptcha/)에 가서 사이트 키와 비밀 키를 만들고, Bubble 플러그인 설정에 입력

- 페이지나 특정 사용자 작업(예: 로그인, 페이지 이동 등)에 reCAPTCHA 요소를 추가하고 사용자가 인증을 완료해야만 다음 단계로 진행할 수 있게 설정

 

2. Cloudflare와 같은 보안 서비스 사용

- Cloudflare 같은 보안 서비스를 활용하면 DDoS 공격 및 의심스러운 봇 트래픽을 차단할 수 있다.

- Cloudflare의 "Bot Fight Mode"나 "Challenge" 기능을 사용하면, 페이지에 접근하려는 방문자에게 reCAPTCHA와 같은 확인 페이지가 나타난다.

- 이를 통해 Bubble 페이지를 보호할 수 있으며, 설정은 Cloudflare 사이트에서 할 수 있다.

 

3. Bubble에서 비밀번호 보호 페이지 설정

- Bubble의 "Privacy Rules"나 "Workflow" 기능을 통해 특정 페이지에 비밀번호를 설정한다.

- 예를 들어, 페이지 방문 시 비밀번호나 다른 인증 단계를 거쳐야만 콘텐츠를 볼 수 있게 한다.

 

4. 재사용 가능한 보안 페이지 만들기

- 위의 Buffer 예시처럼 "One more step..."과 같은 보안 페이지를 Bubble에서 새 페이지로 만들고, reCAPTCHA를 포함한 인증 요소를 배치

- 이 보안 페이지로 리디렉션을 설정하여 인증이 완료된 사용자만 원래 페이지로 이동하게 만든다.

 

나는 이 4가지 방법 중 1번과 4번의 방법을 주로 사용한다. 각각의 방법은 장단점이 있는데, 상황에 맞게 이 두가지 방법을 결합하거나 두개중에 한가지를 선택할 수 있다. 

 

Bubble에서 reCAPTCHA 사용 vs. 보안 페이지 만들고 리디렉션하기 비교

1) reCAPTCHA 설정

페이지나 특정 사용자 작업에 Google reCAPTCHA 플러그인을 추가하여 사용자가 사람인지 확인하는 방식이다.

 

장점

즉각적인 봇 차단

reCAPTCHA는 사용자가 페이지에 접근할 때 즉시 사람이 아닌 트래픽을 감지하고 차단한다.

 

높은 보안성

Google reCAPTCHA는 자동화된 스크립트와 봇을 정확하게 탐지하는 알고리즘을 사용해 높은 보안을 제공한다.

 

사용자 친화적

사용자가 reCAPTCHA 체크박스를 한 번 클릭하는 것으로 인증이 완료되는 경우가 많아 비교적 간단하게 진행된다. 덜 귀찮다. 

 

단점

UX 저하 가능성

아무리 체크 박스 한번 표시하는게 간단하다고 해도 일부 사용자는 인증 과정에서 불편함을 느낄 수도 있다. 

 

추가 설정 필요

Google reCAPTCHA API 키를 생성하고 Bubble에서 설정해야 하는 약간의 초기 설정이 필요하다. 하지만 간단하게 할 수 있다. (2편의 글에서 자세히 소개한다)

구글의 reCAPTCHA 설정하기 화면

 

2) 보안 페이지로 리디렉션

인증이 필요한 경우, 사용자를 중간 보안 페이지(예: "One more step" 페이지)로 이동시켜 직접 확인하는 방식이다. 이 페이지에서 reCAPTCHA 또는 기타 확인 절차를 넣을 수 있다.

 

장점

다양한 보안 절차 가능

이 보안 페이지에 reCAPTCHA뿐만 아니라 비밀번호, 기타 사용자 확인 단계(예: 이메일 인증) 등을 추가할 수 있어 다층 보안 설정이 가능하다.

 

커스터마이징 가능

보안 페이지의 디자인이나 설명을 입맛에 맞게 쉽게 커스터마이징할 수 있어 보안의 이유와 목적을 명확하게 전달할 수 있다. 

 

광범위한 제어

특정 페이지로 리디렉션하므로 특정 상황이나 조건에 맞춰 보안을 적용할 수 있다.

 

단점

페이지 이동으로 UX 저하 가능성

사용자 입장에서 추가로 한 페이지를 거쳐야 한다. 불편함이 생길 수 있다.

 

복잡한 워크플로우 필요

사용자를 중간에 보안 페이지로 리디렉션하고, 보안 확인 후 원래 페이지로 돌려보내는 워크플로우 설정이 필요하다.

 

요약 비교

	reCAPTCHA 설정	보안 페이지로 리디렉션
보안 수준	높은 편 (Google 알고리즘 사용)	높은 편 (reCAPTCHA 외 다양한 보안 절차 가능)
UX (사용자 경험)	비교적 간편 (체크박스 클릭 등)	사용자 입장에서 한 단계 더 거쳐야 함
설정 난이도	쉬운 편 (플러그인 설정 필요)	중간 (리디렉션 및 보안 페이지 설정 필요)
커스터마이징 가능성	제한적 (Google에서 제공하는 기본 UI)	높음 (페이지의 디자인, 설명, 추가 확인 절차 설정 가능)
적용 범위	특정 버튼 클릭, 폼 제출 등 특정 이벤트에만 적용 가능	페이지 전체에 보안을 적용하거나 특정 상황에만 설정 가능

 

추천 사용 시나리오

reCAPTCHA

사이트 전반에서 기본적인 봇 차단이 필요한 경우나, 특정 작업(예: 로그인, 폼 제출)에만 간단히 적용하고 싶은 경우

 

보안 페이지 리디렉션

중요한 페이지에 접근할 때 반드시 확인 절차를 거치게 하고 싶은 경우나, 사용자가 보안 절차를 거쳐야 하는 이유를 설명하는 것이 필요한 경우

 

두 방법을 동시에 사용할 수도 있다. 예를 들어, 보안 페이지에 reCAPTCHA를 추가하여 다층 보안 방식으로 설정하는 것도 가능. 보안 페이지로 리디렉션을 사용할 때는, 모든 워크플로우에 설정할 필요는 없고, 특정 중요한 상황에만 설정한다. 사용자들이 불편하고 귀찮아할테니까 꼭 필요한 지점에만 놓는다. 

 

내일 2편에서는 버블에서 reCAPTCHA와 보안 페이지를 설정하는 구체적인 방법을 소개해보겠다.