소개
노코드 도구인 Bubble을 활용하여 웹앱을 제작하는 프로젝트를 진행했습니다.
Bubble은 웹 애플리케이션을 중심으로 다양한 유형의 앱을 만들 수 있습니다. Bubble 자체로는 네이티브 모바일 앱(iOS, Android)을 직접 개발할 수는 없지만, 웹앱을 모바일 친화적으로 설계한 후 PWA(Progressive Web App) 또는 Wrapping을 통해 모바일 앱처럼 배포할 수 있습니다.
이번에는 로그인(Login)과 회원가입(Sign Up) 단계를 직접 설계하며, 이메일 인증과 Google 로그인을 포함한 사용자 인증 기능을 구현했습니다. 노코드 도구를 처음 사용하는 과정에서 많은 시행착오와 학습이 있었지만, 이를 통해 배운 점이 많았습니다.
진행 방법
우선적으로 구현하고자 하는 앱 서비스에 대한 아이디어가 있어서 ChatGPT와 의논하면서 구체화, 상세화 과정을 거치면서 기획안을 풍부하게 다듬고 있습니다. 미처 생각지 못한 부분도 제안해주고 해서 도움 많이 받고 있고, 아이디어가 보다 더 구체화되고 실행 가능해 지는 상황입니다.
기획에 많은 시간과 노력을 들이고 있습니다. 사례글은 앱 개발 위주로 작성합니다.
사용한 도구
Bubble: 노코드 플랫폼으로, Workflow와 UI를 활용하여 웹앱의 로그인 및 회원가입 단계를 구성.
🥰 구현한 주요 기능
이메일 인증
사용자가 회원가입 시 이메일 인증 링크를 수신하고, 해당 링크를 통해 계정을 활성화하도록 설계.
Workflow에서 이메일 전송 및 인증 과정을 설정.
Google 로그인
Google API 키를 Bubble에 설정하여 소셜 로그인을 구현.
API 개념에 대해 더 이해하고 싶으신 분들은 아래 링크 내용을 참고하세요!
https://chatgpt.com/share/679e11a2-d524-8004-a346-e30346097c68Google에 입력된 사용자 정보를 가져와 Profile 페이지에 자동으로 기본 정보를 연동.
API 키 설정 과정에서 오류가 발생했으나, YouTube 동영상을 참고하며 테스트를 반복하여 문제를 해결.
회원가입 시 데이터베이스 업데이트
사용자가 회원가입을 완료하면 데이터베이스에 새로운 사용자 정보가 자동으로 추가되도록 구현.
Go to Page 기능
회원가입 또는 로그인이 완료되면 Dashboard(Home) 페이지로 연결되도록 Go to Page 기능을 활용하여 Workflow를 구성.
💪 주요 학습 포인트
Workflow 구성: 사용자 액션(예: 버튼 클릭)에 따라 발생하는 이벤트를 설계. 어떤 변수와 값을 찾아 넣어야 하는지 점차 감을 잡아감.
Set State 및 Toggle 기능 학습: Set State 기능을 연구하면서 동시에 Toggle 기능에 대해 공부하며 UI의 동적 변화를 이해.
학습 자료
공식 문서 및 튜토리얼: Bubble에서 제공하는 자료를 기본으로 학습.
YouTube 동영상: API 설정 및 Workflow 구성의 구체적인 가이드를 제공.
노코드 버블 스터디 그룹: 채팅을 통해 실시간으로 질문하고 답변을 얻음. 스터디장님의 조언
결과와 배운 점
✍️ 배운 점
Google API와의 연동
API 키를 설정할 때 발생한 오류를 반복 테스트로 해결하면서 API 연동에 대한 이해도가 높아졌습니다.
Google 로그인 시 사용자 정보를 Profile 페이지에 자동으로 연동하는 과정을 익혔습니다.
Google Cloud에서 사용법과 프로젝트 설정법을 배움
Bubble’s Workflow와 UI
Bubble의 UI 및 Workflow 설정 방식은 초보자에게는 복잡할 수 있지만, 공식 문서와 커뮤니티 자료를 적극 활용하면 효율적으로 익힐 수 있음을 깨달았습니다.
Workflow에서 변수와 값을 설정하며 점차 감을 잡아가는 과정을 경험.
Debugging 화면과 debugging 뺀 화면의 차이를 인식함
시행착오
Set State 기능의 실패
상태 관리 기능을 처음 시도했지만, 제대로 작동하지 않아 많은 시간을 소모. 이는 Bubble에 대한 이해 부족이 원인이었으며, 이후 공식 튜토리얼과 유튜브 자료를 통해 더 많은 학습이 필요함을 인식했습니다.
Toggle 기능을 학습하며 UI의 동적 변화를 좀 더 이해하게 됨.
👉 앞으로의 계획
Set State 기능을 완벽히 익히기 위해 추가 학습을 진행할 예정.
Bubble의 고급 기능(예: 데이터베이스와의 연동, 복잡한 Workflow 구성)을 활용하여 더 나은 사용자 경험을 제공하는 웹앱을 제작하고 싶습니다.
앱 개발을 더 진행해서 프로젝트 진도 뽑기!
도움 받은 글
Bubble 공식 문서: Bubble Documentation
참고한 유튜브 영상: 노코드 버블 웹사이트 따라 만들기 (1~14강 통합본), How to Use Custom States in Bubble.io, How to Setup Google Login in Bubble.io
노코드 스터디 그룹 채팅에서 받은 실시간 도움
😅 결과물