[버블 튜토리얼] 회원가입/로그인 만들기

모든 플랫폼에서는 유저들을 저장할 수 있는 수단으로 회원가입/로그인 시스템이 필수입니다.

신규 방문자들 중에서 몇 명이 회원가입을 했는지,

회원 중에 실제 몇 명이 얼마 정도의 구매를 했는지,

회원마다 어떤 정보를 가지고 있는지,

등을 알려면 우선적으로 회원가입을 받아야 사용자들의 정보를 저장 또는 분류할 수 있기 때문이죠.

 

버블에서도 당연히 회원가입, 로그인, 로그아웃을 구현할 수 있습니다.

한 번 배워놓으면 앞으로 만들 모든 웹사이트 혹은 플랫폼에 도움이 되니 꼭! 익혀놓읍시다 :)

 

1. 회원가입/로그인 입력창 만들기

Input을 끌어와 이메일, 비밀번호를 입력받을 창을 만들어 주세요.

 

 

 

 

 

 

 

 

 

 

이메일을 입력받을 Input창의 Placeholder에는

'이메일'이라고 안내문구를 넣어줍니다.

 

이메일 형식만 받도록 Content format를

Email로 설정해주세요.

 

추가로 반드시 입력값이 있어야 제출될 수 있게

'This input should not be empty'도 체크해주겠습니다.

 

 

 

 

 

 

 

 

비밀번호를 입력받을 Input창의 Placeholder에는

'비밀번호'라는 안내문구를 적어줍니다.

 

입력받는 암호가 보이지 않으면서 입력받아지는

'Password'를 Content format으로 설정할게요.

 

'This input should not be empty'도 체크해주어

비밀번호 또한 필수 입력값으로 설정합니다.

 

 

 

 

 

 

 

 

 

 

2. 로그인/회원가입 버튼 만들기

Button을 활용해 입력창 아래에 회원가입과 로그인 버튼을 만들어봅시다.

 

 

 

 

 

 

 

 

 

 

 

버튼은 눌렀을 때 어떻게 작동하느냐를 정해주는 게

제일 중요하기 때문에 로직을 넣어주는

'Start/Edit workflow'가 핵심이에요.

 

회원가입 버튼의 'Start/Edit workflow'를 클릭하여

회원가입을 눌렀을 때의 워크플로우를 짜 봅시다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'Start/Edit workflow'를 누르게 되면 좌측의 Workflow탭으로 넘어오게 됩니다.

그리고 '회원가입을 클릭했을 때'라는 이벤트가 생겨있죠.

액션 추가를 눌러 Account의 'Sign the user up'을 추가합니다.

옆에 나오는 창에 어떤 값을 Email과 Password로 회원가입시킬 건지를 정해줄게요.

 

Email은 Input Email의 값('s value)을,

Password는 Input Password의 값('s Password)을

각각 지정해줍니다.

 

이때, 커서를 올려놓으면 어떤 요소를 가리키는지 볼 수 있으니 참고해서 더블체크해도 좋을 것 같네요!

 

로그인 기능은 방금과는 조금 다르게 만들어 봅시다.

'Click here to add an event...'로 이벤트 추가를 해줍니다.

우리는 로그인 버튼을 클릭했을 때의 이벤트를 만들 것이기 때문에

'Elements' > 'An element is clicked'를 누르고 'Element'로 로그인 버튼을 선택해줍시다.

 

회원가입과 마찬가지로 어떤 입력 값들로 로그인시킬지 정해줍니다.

 

3. 로그인된 사용자 정보 띄우기

로그인 된 이후, 사용자의 정보를 볼 수 있는 곳을 만들어 볼게요.

'Design'탭으로 돌아와서 입력 폼 밑에 'Group'을 하나 놓아주세요.

이 그룹 안에 'Text'를 하나 끌어옵니다.

그룹 안에 요소를 넣으면 그룹의 테두리가 빨갛게 변하니

확인을 꼭 해주세요!

 

 

 

여기서 잠깐!

특정 상황마다 바뀌는 데이터를 'dynamic data' 즉, 동적 데이터라고 부릅니다.

로그인이 되었을 경우 현재 유저의 이메일을 보여줄 것이기 때문에

'Insert dynamic data'를 선택해 'Current User's email'을 넣어주세요.

 

4. 로그아웃 버튼 만들기

마지막으로 로그아웃 버튼을 만들고 마무리해보겠습니다.

방금 만들었던 그룹 안에 로그아웃 버튼을 만들고 이벤트를 추가합시다.

이번에는 'Account' > 'Log the user out'을 지정하여 로그아웃 버튼 클릭 시,

로그인된 유저를 로그아웃 시키도록 만들었습니다.

 

5. 로그인 되었을 경우만 로그아웃 버튼 보이기

유저가 로그인 되어있을 때 그룹이 보이도록,

유저가 로그아웃 되었을 때는 그룹이 안 보이도록 설정하면 완료입니다.

 

그럼 회원가입 기능이 잘 작동되는지 확인해봅시다.

우측 상단의 'Preview'를 누르게 되면 지금까지 만든 화면이 뜹니다.

회원가입을 누르면 로그인이 되면서 로그인된 이메일과 로그아웃 버튼이 만들어집니다.

로그아웃을 누르면 로그인된 유저가 없으니 이메일과 로그아웃 버튼이 사라지게 됩니다.

추가로 이미 회원가입된 이메일이 있다면 경고창을 띄워주게 되지요.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

여기까지 해서 버블로 회원가입, 로그인, 로그아웃까지 배워 보았습니다! :)

 

추가 학습으로 회원가입이나 로그인을 했을 경우 입력했던 값들이 다시 없어지는 기능도 넣어보시고

해결을 못 하셨다면 댓글로 질문 남겨주세요^^