노코드 툴인 Bubble을 사용하면 웹앱에 필요한 핵심 기능들을 손쉽게 구현할 수 있다. 이번 글에서는 실제 서비스 운영에 필수적인 사용자 프로필 설정 기능과 이메일 인증 기능을 추가하는 방법을 소개한다. 사용자 정보 수정과 이메일 검증은 보안성과 신뢰성을 높이기 위한 필수 요소로, 모든 웹앱에서 기본적으로 갖춰야 할 기능이다. 이 글에서는 누구나 쉽게 따라할 수 있도록 단계별로 실습 방식으로 설명한다.
1단계: 사용자 프로필 필드 추가하기
먼저 사용자의 정보를 저장할 수 있도록 사용자(User) 데이터 타입에 필드를 추가해야 한다. 아래는 자주 사용하는 필드 예시이다:
- name (텍스트) – 사용자 이름
- bio (텍스트) – 간단한 자기소개
- profile_image (이미지) – 프로필 사진
Bubble의 Data 탭에서 "User" 타입을 선택한 후, 위 항목을 하나씩 추가한다. 이 필드들은 이후 프로필 수정 페이지에서 사용된다.
2단계: 프로필 페이지 UI 구성
사용자 정보 입력 및 수정을 위한 화면을 만든다. Design 탭에서 새로운 페이지 또는 그룹을 만든 뒤 아래 요소를 배치한다:
- Input – 사용자 이름 입력창
- Multiline Input – 자기소개 입력창
- Image Uploader – 프로필 이미지 업로드
- Button – "프로필 저장" 버튼
프로필 정보 저장 워크플로우 설정
- 버튼 선택 → Start/Edit Workflow
- Add Action → Data → Make changes to current user
- 각 입력값을 현재 사용자(User)의 필드와 매칭
예: Current User's name = Input A's value 저장이 완료되면 알림 메시지를 띄우거나 페이지를 이동시켜 사용자 경험을 향상시킬 수 있다.
3단계: 사용자 프로필 불러오기
저장된 사용자 정보를 화면에 보여주기 위해서는 각 Input 요소의 초기값을 설정해야 한다. 예를 들어 이름 입력창에는 다음과 같이 설정한다:
Initial content: Current User's name
이렇게 하면 사용자가 이전에 저장한 이름이 자동으로 입력창에 표시된다. 이미지 업로더에는 'Default image'로 Current User's profile_image를 설정하면 된다.
4단계: 이메일 인증 기능 활성화
Bubble은 사용자가 입력한 이메일 주소를 실제로 사용하는지 확인할 수 있는 이메일 인증 기능을 기본적으로 제공한다. 이 기능을 활성화하려면 다음과 같은 설정이 필요하다:
- Settings → General → "Require email to be confirmed" 체크
- Workflow에서 회원가입 직후 다음 액션 추가:
Add Action → Account → Send email confirmation
이렇게 설정하면 회원가입 후 사용자의 이메일로 인증 링크가 자동으로 발송된다. 사용자가 링크를 클릭하면 이메일이 인증되며, "Current User's email confirmed is yes" 조건으로 인증 여부를 확인할 수 있다.
5단계: 인증되지 않은 사용자의 접근 제한
인증되지 않은 사용자가 민감한 페이지에 접근하지 못하도록 제한을 걸 수 있다. 다음과 같은 조건을 페이지나 그룹에 설정한다:
Only When: Current User's email confirmed is "yes"
인증되지 않은 경우에는 로그인 페이지나 알림 메시지를 띄우도록 설정하면 보안 수준을 높일 수 있다.
마무리 및 요약
이번 실습에서는 Bubble을 통해 사용자 프로필 정보 수정과 이메일 인증 기능을 구현하는 방법을 단계별로 살펴봤다. 이 두 가지 기능은 실전 웹앱 운영에서 필수적인 요소이며, 사용자의 신뢰도와 서비스 보안을 동시에 강화할 수 있다. Bubble은 시각적 인터페이스 덕분에 코딩 없이도 이러한 복잡한 기능을 쉽게 구현할 수 있다는 장점이 있다. 다음 글에서는 사용자 간 메시지 전송 기능(채팅 시스템 기초)을 다룰 예정이다. 커뮤니티, 서비스 플랫폼, 예약 시스템 등에서 꼭 필요한 기능이므로 꼭 따라해보길 바란다.