Bubble을 활용한 웹앱 개발 과정 및 학습 기록
웹앱 개발을 위해 No-code 플랫폼인 Bubble을 활용하여 RAG 기반 AI 챗봇을 포함한 서비스를 구축하고자 함. 그러나 데이터 설계, 구축 및 관리, 워크플로우 구성 등에서 어려움을 겪고 있어 기초 개념을 정리하고 차근차근 학습해나가는 과정 중.
2. 진행 과정
2.1. 기본 개념 학습 및 실습
Bubble 사용 경험이 부족하여 기초 개념을 정리하고 학습을 진행함.
기본 개념 학습: Bubble 기초 강의 및 튜토리얼을 정주행하며 실습
레이아웃 및 디자인 익히기: UI 요소 배치 및 구성
데이터 설정 방법 이해: 데이터베이스 구조 및 데이터 타입 생성
Workflow의 기초 개념 파악: 이벤트 트리거 및 동적 데이터 활용법 익히기
이번에 배운 주요 기능들은
group들을 반복적으로 설정하면서 관계 맺기, 레이아웃 배치
elements 배치, formatting 등
data 설계하고 가져다 쓰는 법
Option sets 설계하고 가져다 쓰는 법
elements: text, shape, button, image, icon
containers: group, repeating group, group focus
데이터의 동적 연결 기본
홈 화면 구성법
Components 가져다 쓰기
Rich text editor 사용법
2.2. 주요 기능 구현
Bubble을 활용하여 웹앱의 핵심적인 사용자 플로우를 기초적인 수준에서 설계 및 구현함.
회원가입 및 로그인: 사용자 계정 생성 및 프로필 입력 기능 구현
홈 화면 구성: 콘텐츠 선택 및 페이지 이동 기능 적용
데이터 다루기:
Data 만들고 가져와서 활용하기
Option Sets를 활용하여 정적인 데이터 구조 설계
Repeating Group을 활용한 리스트 형식 데이터 표시
결제 기능: 기본적인 결제 프로세스 설계 및 toss 연동 준비
RAG 기반 AI 챗봇 개발 준비:
OpenAI API 연동을 위한 API Connector 설정
데이터 검색 및 Retrieval 적용 방안 고민
3. 주요 학습 내용
3.1. Bubble에서 데이터 다루기
Bubble의 데이터 불러오기 및 활용이 익숙하지 않아 집중적으로 학습함.
데이터베이스 구조 및 데이터 불러오기 (
Do a Search for활용)Dynamic Data를 활용한 화면 구성 (텍스트, 버튼 등 UI 요소와 데이터 연결)
데이터 필터링 및 정렬 (조건 설정을 통한 맞춤형 데이터 검색)
Repeating Group 사용법 (데이터 목록을 동적으로 표시)
3.2. Workflow 구성
데이터를 가져와 동적으로 표시하는 과정이 어렵게 느껴졌으며, Workflow의 개념을 구체적으로 익히는 것이 필요함.
데이터 기반 이벤트 트리거 설정
사용자 입력을 기반으로 동적 데이터 처리
4. 향후 개선 및 학습 계획
아직 Bubble의 주요 기능을 완벽하게 이해하지 못한 상태이므로, 지속적인 학습이 필요함.
향후 목표는 다음과 같음.
앱 콘텐츠의 풍부화 및 고도화
Bubble의 데이터 흐름 및 활용법 숙달
Workflow 고도화 및 최적화
외부 API와의 연동 강화 (GPT-4, LangChain 등)
결제 시스템 완성 및 서비스 상용화 준비
RAG 기반 AI 챗봇의 완성도 향상
5. 배운 점 및 느낀 점
배운 점
Bubble의 UI 구성과 기본적인 데이터 다루기 방식에 익숙해짐.
데이터를 다루는 방식과 Workflow 설계가 Bubble에서 가장 중요한 요소임을 깨달음.
No-code 개발이라도 논리적인 데이터 흐름을 이해하는 것이 필수적임.
느낀 점
처음에는 Bubble의 데이터 연결 방식과 Workflow 구조 가 이해하기 어려웠지만,
반복 학습을 통해 점점 익숙해지고 있음.Bubble을 활용한 웹앱 개발이 재미있다는 느낌을 받기 시작했으나,
아직 배워야 할 개념이 많아 압박감을 느끼기도 함.꾸준히 학습하고 작은 기능부터 차근차근 구현하는 것이 중요함.
