코드 없이 회원가입 페이지 만들기 with Bubble
IT 서비스 코드 한 줄 없이 만들기
코드 없이 IT 서비스 만들기 정말 가능할까?
명료하게 대답하자면 '버블(Bubble)'을 활용하여 가능하다. 버블은 자유도가 매우 높은 노코드 툴이다. 버블은 간단한 MVP부터 실제 서비스까지 구현할 수 있는 정도의 스펙트럼이 매우 넓은 서비스다. 효율적으로 프로덕트를 직접 만들 수 있기 때문에 다양한 분야에서 활용될 수 있다. 우선 간단한 기능부터 만들어 버블과 친해져 보도록 하자.
0. 준비단계
코드 없이 로그인 페이지를 만들기 위해선 버블 웹사이트에 로그인하고 앱을 생성해야 한다.
(버블이 아예 처음이라면 아래 글을 읽고 로그인 페이지 만들기에 도전하는 것을 추천한다.)
https://brunch.co.kr/@dcf74e4ee7364c2/4
1. 회원가입 화면 만들기
가장 처음 할 일은 회원가입 기능을 구현하기 전, 회원가입 페이지 UI를 만드는 것이다. 새로운 유저에게 수집해야 하는 정보를 선정해서 UI를 구상한다. 이번에 사용할 예시는 아래 이미지와 같다. (각 서비스에 필요한 정보를 추가하거나 제거해도 문제없다.)
UI는 언제든 수정 가능하므로 부담 없이 만들어보자.구상한 UI를 버블에 가져와 다음과 같이 완성된다.
이름, 닉네임, 이메일, 전화번호는 유저가 직접 입력할 수 있도록 Input을 활용했으며, 성별은 선택지가 적기 때문에 Dropdown을 이용했다. Input과 Dropdown 모두 좌측 UI Builder에서 선택 후 원하는 곳에 드래그해서 사용할 수 있다.
Input과 Dropdown 모두 더블클릭하여 Placeholder를 수정할 수 있다. Placeholder는 유저가 아무 값도 입력하지 않았을 때 보이는 텍스트다. 이 것을 설정하면 고객이 어떤 정보를 입력해야 하는지 예측할 수 있으며, 설정하지 않을 경우 빈칸으로 보인다.
Input은 고객이 직접 입력하는 Element이기 때문에 별다른 설정이 필요 없다. 그러나 Dropdown의 경우 유저가 정해진 옵션을 선택하는 구조이기 때문에 세팅이 필수적이다. 해당 드롭다운을 더블클릭하여 Choices에 옵션들을 작성해주자. 여기까지 UI 세팅을 마칠 수 있다.
2. Bubble DB 구성하기
회원가입을 진행 시 유저는 정보를 입력하고, 서비스에선 이 정보를 저장한다. 이번 단계에선 각 정보들을 저장하기 위해 버블 서비스 내 DB를 구성할 예정이다. 버블은 기본적으로 자체 DB를 가지고 있다. 좌측 메뉴에서 Data를 선택하여 쉽게 접근이 가능하다.
도움말
Data types에서는 Data type과 data type안에 들어가는 field들을 확인할 수 있다. 해당 페이지에선 User라는 Data type과 4개의 Field를 확인할 수 있다. 간단히 설명하자면 Data type은 Table, Field는 column과 유사한 개념이라고 이해하면 쉬울 것이다. (이해를 돕기 위한 설명이기 때문에 이 부분에 대해 모르더라도 문제없으니 걱정하지 않아도 된다.)
버블에서 User라는 Data type은 필수로 생성되어있기 때문에 이를 활용하면 된다. 우리가 저장해야 하는 것은 이름, 닉네임, 성별, 이메일, 전화번호 총 5개의 정보이다. email을 저장하는 field는 이미 존재하므로 나머지 4개의 field를 생성해야 한다. 새로운 필드 생성은 Create a new field 버튼을 눌러 가능하다.
Field의 이름과 각 type을 설정해주자. 아래 체크박스의 경우 Field에 여러 값이 저장되는 경우 필요한 항목이다. (Tip. 전화번호의 경우 type을 number가 아닌 text로 지정해주는 것이 좋다. 한국의 경우 번호가 010으로 시작될 때 number로 저장하면 앞에 0을 저장하지 못하는 경우가 생긴다. 01→1로 인식하기 때문이다.)
3. Workflow 설정하기
다음과 같이 데이터 타입을 설정하면 유저 정보를 저장할 준비가 완료된 것이다. 다시 Design 메뉴로 돌아와 버튼에 대한 Workflow를 설정해주자.
'가입하기' 버튼 UI 더블 클릭하고 Start/Edit workflow를 눌러 workflow 편집을 시작할 수 있다.
'Button 가입하기 is clicked'라는 워크플로우가 생성되며, 이때 필요한 action은 유저를 생성하는 것이다. 유저를 생성하는 경우에는 'Create an account for someone else'를, 그 외 데이터를 생성하는 경우엔 'create a new thing'을 사용하여 새로운 데이터를 저장할 수 있다.
Action을 생성하면 다음과 같은 팝업이 나타난다. 유저를 생성할 때 저장할 값들을 여기서 설정해줄 수 있다. Email 옆 input box를 클릭하여 Email field에 저장할 값을 지정해주어야 한다. UI에서 설정해 주었던 Email이라는 텍스트 옆의 input 값을 지정해주면 된다. (Tip. Input을 여러 개 만드는 경우 input element의 이름을 바꿔 무엇을 입력하는 input인지 쉽게 구분 가능하다.) 현재 회원 가입의 경우 5개의 값을 저장해야 하므로 Change another field를 선택하여 저장할 field를 선택하고 값을 지정해준다.
'Change another field'를 선택하면 이전에 만들어 두었던 field를 선택할 수 있는 옵션이 생성되어있다.
각 필드에 맞는 데이터 값을 지정해주면 회원가입 만들기가 완성된다. 이로써 회원가입 페이지 만들기가 완료되었으니 구현이 제대로 되었는지 확인해보자.
4. 작동 확인하기
우측 상단에 preview를 클릭하여 만든 프로덕트 또는 기능이 제대로 작동하는지 확인할 수 있다.
우선 방금 만든 로그인 페이지가 나타나면 알맞은 정보를 입력한 후 가입하기 버튼을 눌러 계정을 생성할 수 있다.
그 후 편집하던 페이지로 다시 돌아와 Data 메뉴의 App data로 이동하면 방금 입력한 정보에 맞게 User가 생성된 것을 확인할 수 있다. 여기까지 단계를 모두 마치면 코드 한 줄 없이 회원가입 페이지 만들기에 성공한 것이다.
5. Workflow 수정하기(Reset Input)
회원가입이 성공적으로 진행되었지만, preview 페이지로 돌아가면 이미 입력한 정보들이 각 Input에 남아있는 것을 확인할 수 있다. 이는 일반적인 UX가 아닐뿐더러, 다른 유저에게 회원 정보 노출의 위험이 있기 때문에 꼭 Input을 초기화해야 한다. 이를 수정하기 위해 다시 Workflow메뉴로 이동해보자.
버튼을 클릭했을 때 유저를 생성한 후 입력했던 input을 reset 해주는 워크플로우를 추가할 수 있다. 유사한 상황에서 'reset relevant inputs' action을 잊지 말고 추가해야 한다. 해당 action을 추가하고 preview에서 회원가입을 다시 시도하면 가입하기 버튼을 클릭했을 때 입력했던 정보들이 초기화되는 것을 확인할 수 있다. 추가적으로 회원가입 버튼을 눌렀을 때 팝업을 추가하여 '가입이 완료되었습니다.' 등의 팝업을 넣어준다면 한층 더 퀄리티 높은 회원가입 페이지를 만들 수 있을 것이다.
