노코드 툴인 Bubble을 활용하면 누구나 직접 로그인 기능이 포함된 웹앱을 만들 수 있다. 이 글은 개발 지식이 없는 초보자도 따라할 수 있도록 회원가입 및 로그인 기능을 단계별로 만드는 실습 튜토리얼을 제공한다. Bubble은 시각적 구성 방식 덕분에 코드를 직접 작성하지 않고도 사용자 인증 시스템을 구현할 수 있다. 이번 실습을 통해 실질적인 웹서비스의 핵심 기능을 손쉽게 완성해볼 수 있다.
1단계: 새 프로젝트 생성
가장 먼저 Bubble.io에 접속하여 회원가입을 완료한 후, 새 프로젝트를 생성한다. 프로젝트 생성 시, 이름은 예를 들어 "LoginApp"처럼 명확하게 지정하는 것이 좋다.
- Bubble 대시보드 → New App → 앱 이름 입력
- Blank template 선택 → Create 클릭
2단계: 사용자 데이터 타입 확인
Bubble은 기본적으로 User라는 데이터 타입을 제공한다. 이 데이터에는 이메일, 비밀번호 등의 기본 필드가 포함되어 있어 따로 만들 필요는 없다. 설정 화면에서 "Data" 메뉴를 열고, User 데이터 타입이 있는지 확인한다.
3단계: 회원가입 화면 만들기
다음 단계는 사용자가 직접 계정을 생성할 수 있는 회원가입 화면을 만드는 것이다. 다음 요소들을 Bubble의 디자인 화면</strong에서 배치한다:
- Input: 사용자 이메일 입력창
- Input: 비밀번호 입력창
- Button: "회원가입" 버튼
각 요소의 이름을 설정하고, 버튼 클릭 시 이벤트를 설정하기 위해 “Workflow” 메뉴로 이동한다.
✅ 회원가입 워크플로우 설정 방법
- 버튼 선택 → Start/Edit Workflow 클릭
- Add Action → Account → Sign the user up 선택
- 이메일, 비밀번호 입력값을 각각 설정
4단계: 로그인 화면 구성
로그인 화면도 회원가입 화면과 유사한 방식으로 구성한다. 이메일 입력창, 비밀번호 입력창, 로그인 버튼을 배치하고 아래와 같이 워크플로우를 설정한다:
- 버튼 선택 후 Start/Edit Workflow 클릭
- Add Action → Account → Log the user in 선택
- 이메일과 비밀번호 입력값을 매칭
- 로그인 성공 시 이동할 페이지 설정
5단계: 로그인 상태 유지 및 조건 설정
로그인한 사용자가 접근할 수 있는 회원 전용 페이지를 만들기 위해 조건 설정이 필요하다. 페이지나 그룹 요소에 다음과 같은 조건을 설정하면 된다:
- Only When: Current User is logged in
- 비로그인 상태에서는 접근 불가하거나 로그인 페이지로 리다이렉트 설정
6단계: 간단한 로그아웃 기능 추가
로그아웃 기능도 매우 간단하게 구현할 수 있다. 버튼을 하나 추가한 후, 워크플로우에서 다음과 같이 설정하면 된다:
- Add Action → Account → Log the user out
로그아웃 후에는 사용자를 로그인 페이지로 자동 이동시키도록 설정할 수 있다.
7단계: 디자인은 단순하게, 기능은 명확하게
애드센스 승인용 실습 콘텐츠를 만들 때는 복잡한 UI보다 기능 구현 중심</strong의 구성이 더 좋다. 각 화면은 기본적인 스타일만 적용해도 충분하며, Bubble의 템플릿 기능을 통해 향후 꾸미는 것도 가능하다.
마무리
이번 실습에서는 Bubble을 활용하여 회원가입, 로그인, 로그아웃 기능을 갖춘 간단한 웹앱을 만들어봤다. 이 기능은 거의 모든 서비스에서 기본적으로 요구되는 기능이며, 실제 서비스에 적용해볼 수 있는 핵심이다. 노코드를 처음 접하는 사람도 Bubble의 시각적 인터페이스를 통해 복잡한 기능을 쉽게 구현할 수 있다는 것을 확인할 수 있다. 다음 글에서는 사용자 프로필 설정, 이메일 인증 기능 추가 등 실제 서비스에서 필요한 고급 기능 구현을 다룰 예정이다. Bubble을 익히는 과정은 곧 실전 웹 서비스 개발 능력을 키우는 과정과도 같다.