Bubble.io를 활용한 웹앱 개발 진행 과정
1. 개발 목표 및 진행 방향
Bubble.io를 활용하여 웹앱을 개발하는 작업을 진행하고 있습니다.
👉 특히, ChatGPT와 앱 기획안을 같이 다듬으면서 홈 화면의 구성 요소를 구체화하고, 어떤 정보와 서비스를 제공할지에 대해 깊이 고민하는 시간을 가졌습니다. 이를 통해 앱의 콘텐츠를 어떻게 만들고 구성할지에 대한 생각이 점점 더 뚜렸해졌다는 성과가 있었습니다. (물론 아직 더 많이 다듬고 풍부하게 하면서 더 밟아 나아가야 할 길은 많이 남아 있습니다.)
🤕 그러나 Bubble.io를 두 번째로 사용하는 단계이기에 아직 모든 기능이 익숙하지 않고 모르는 것 투성이라 시행착오를 겪고 있습니다. 특히, My GPT를 직접 Bubble.io에 연결하는 방법을 찾는 과정에서 어려움을 느꼈습니다.
(이번 사례글은 그냥 중간 여정에서의 좌충우돌 시행착오와 고생담인 것 같습니다.)
2. My GPT 연결 방법 모색 및 대안 탐색
처음에는 ChatGPT와 개발한 My GPT를 직접 Bubble.io에 연결하려 했으나, 여러 자료를 검색한 결과 직접적인 연결 방법이 존재하지 않는다는 점을 확인하였습니다. 대신, 가능한 대안들을 정리한 결과 아래와 같은 방법들이 있을 수 있다는 것을 알게 되었습니다.
미국 사람들도 대부분 이런 방식들을 사용하면서 ChatGPT를 가져와서 본인이 만드는 앱에 녹여내려고 한다는 것을 알 수 있었습니다. (아래 예시 영상 참고)
How to Add Custom GPTs to Any Website in Minutes (OpenAI GPTs Tutorial) - YouTube
대안들
OpenAI API를 활용하여 외부 챗봇 개발 서비스를 이용하여 챗봇을 새롭게 개발하고, Bubble.io에서 API를 호출하여 연동
OpenAI Assistant API를 활용하여 더욱 정교한 AI 챗봇을 구성한 후 API call로 연결
n8n을 이용한 AI Agent 구축 후, 이를 Bubble.io에 연동하는 방식
향후 OpenAI의 Assistant API와 n8n을 활용한 AI agent 방식을 비교하여 가장 적합한 방식을 선택해서 개발하려는 앱에 연동시킬 계획입니다.
3. 결제 시스템 구현 시도 (Toss Payment 연동)
챗봇 연동과 별개로, Premium 서비스 결제를 위한 결제 기능을 Bubble.io에서 구현하는 작업을 진행했습니다. 이를 위해 Toss Payment를 연동하는 작업을 수행하였습니다. (Youtube에 toss payment 연동하는 영상 좋은 것 몇 개 있습니다.)
진행 과정
이를 통해 Bubble.io에서 결제 기능을 추가하는 방법을 익혔고, 결제 페이지를 만들면서 UI 구성과 element 배치에 대한 감을 잡기 시작했다는 점이 큰 성과였습니다.
4. Bubble.io UI 구성 및 element, 레이아웃 학습
Bubble.io의 UI 구성 방식은 기존에 익숙했던 PPT 형식의 디자인 방식과 차이점이 크다는 점에서 어려움을 겪었습니다. 특히,
각 컨테이너 유형의 특징과 용도
컨테이너 그룹핑 및 배치 방식
레이아웃 설 정 방식 및 주요 설정값
등을 학습하며 새로운 방식에 적응하는 과정이 필요했습니다. 특히 Repeating Group을 특강을 통해 개념적으로는 이해하고 있었지만, 실제 몸소 해본 적은 없어서 직접 구현하면서 감을 잡는 데 시간이 걸렸습니다.
컨테이너 종류와 레이아웃 등에 대한 간단 정리는 링크 참고하세요
https://www.perplexity.ai/search/bubble-ioeseo-containeryi-jong-2Nj63yEESCSABHLfXi3fqA
5. Bubblle에서 Data 구축 및 활용 방법 학습
Bubble에서 직접 data를 구축하고 workflow에 엮어서 사용하는 것을 처음 해봤습니다. 역시 그냥 특강에서 보는 것과 직접 해 보는 것은 다르더군요. 약간 감을 잡아가는 것 같네요.
이렇게 유료인 서비스의 과금을 위해서 data type을 새로 만들고 field들을 추가해서 결제 workflow에서 do a search for로 가져다가 엮어서 결제를 하게 만들어봤습니다. 이렇게 하는 것인가 싶은 감이 좀 오네요.
6. 배운 점 및 향후 계획
🥰 배운 점
My GPT를 Bubble.io에서 직접 연결하는 것은 어렵지만, OpenAI Assitant API 또는 n8n을 활용한 대안이 가능함을 확인
Toss Payment 연동을 통해 결제 기능을 Bubble.io에서 구현하는 방법 습득
Bubble.io의 레이아웃 설정 방식과 요소 배치 방식에 대한 이해도가 증가
Data 구조 만들기와 workflow와 연결해서 사용하기에 대한 감 획득
향후 계획
기본기가 없다는 생각이 들어서 bubble 기본/기초 영상들 찾아보면서 기본 좀 다지고 진행해 보겠습니다. (특강 듣고 실습은 직접 안해 본 상태에서 기본기가 있다고 착각해서....)
이번 과정에서 시행착오가 있었지만, 이를 통해 Bubble.io의 UI 구성 방식과 기능 활용에 대한 이해도가 높아졌고, 챗봇 연동과 결제 기능 등 실질적인 서비스 구축을 위한 기초가 마련되었다는 점에서 의미 있는 경험이었습니다.
도움 받은 글 (옵션)
비전공자 개발자도 할 수 있는 토스페이먼츠 결제연동, 노코드 버블로 끝내자 (bubble io for tosspayments)