🎾 bubble.io로 만드는 피클볼 코트 예약 시스템 – 스케줄러 UX 도전기 [1주차]

안녕하세요! 😊 이번 글에서는 제가 버블(Bubble)로 만들고 있는

피클볼 코트 예약 및 결제 시스템 개발 사례를 소개하려고 해요.

저처럼 노코드 툴을 활용해 실제 서비스를 기획·제작하고 싶은 분들께

작은 동기부여가 되길 바라는 마음으로 작성합니다!

💭 왜 이 프로젝트를 시작했나요?

사실 CTO 과정도 대놓고 침흘리며 고민했었지만,

지금 저에겐 ‘데이터베이스 개념’을 확실하게 이해하고

구조를 직관적으로 다뤄볼 수 있는 경험이 훨씬 중요했어요.

그래서 선택한 게 버블이었고,

이번 스터디를 통해 데이터 흐름을 체감하며 설계할 수 있는 실전 프로젝트를 하게 되었습니다!

💡 어떤 서비스를 만들고 있나요?

📌 서비스 목표

• 피클볼 코트를 예약하고, 챗봇으로 쉽게 변경·취소할 수 있도록 만들기!

• 나중엔 결제까지 연동하고, 플레이어 매칭 기능도 붙일 예정이에요.

👥 타겟 사용자

• 일반 사용자(예약하는 사람)

• 코트 관리자(예약 현황 확인하는 사람)

🧱 현재까지 구현한 구조는요?

📊 데이터베이스 설계 목표

데이터베이스는 이 프로젝트의 핵심이에요.

이번 스터디의 가장 큰 목표도 “데이터 흐름에 대한 감각을 갖는 것” 이었어요!

📸 버블 데이터베이스 구조 예시

BookingInfo 데이터 구조

ALT

Google Analytics의 데이터 유형 설정 스크린 샷

User 데이터 구조

ALT

웹 페이지의 데이터 유형 설정 스크린 샷

사용자(User)는 여러 예약(BookingInfo)을 연결해서 관리할 수 있도록 구성했어요.

📅 스케줄러 UX 구현 도전기!

버블로 예약 기능을 만들면서 가장 고민됐던 부분이 바로

“날짜와 시간 선택을 어떻게 UX적으로 편하게 구현할까?” 였어요.

찾아보니 버블 플러그인 중, Air Calendar 플러그인이 있었지만… 😥

무려 $90… 유료…! >> 니가 뭔데, GPT 월세보다 더 비싸냐고

👉 대안: V0를 활용한 실험

얼마 전 얼핏 주워들은 V0...

예약페이지 스케줄러 프레임 그림 그리는 것도 살짝... 아니, 많이 귀찮고

V0는 Figma 디자인을 바로 코드로 바꿔주는 서비스인데,

“혹시 V0로 스케줄러 인터페이스도 구현할 수 있지 않을까?” 하는 생각에 도전해봤어요.

👇 아래는 V0에서 React 코드로 만든 스케줄러 예시 화면이에요:

ALT

휴대 전화에서 시간 관리 앱의 스크린 샷

ALT

화면을 보여주는 화면을 보여주는 화면의 스크린 샷.

영문 프롬프트 변환해 넣는게 조금 귀찮았지만, 넌 네이티브니까...;; 아쉬운 내가 그쯤은 해줄게... 😂

다행히 V0 미리보기에선 문제없이 잘 구현되었어요!

V0에 구현되어 있는 예약스케줄러 미리보기 : https://kzmg75x41r572xxqplc1.lite.vusercontent.net/

V0 서비스를 샅샅히 뜯어본 건 아니라서, 이 미리보기가 언제까지 가능할진 모르겠지만...

일단 바로가기 첨부해봅니다. 링크 클릭하니, 구현된 스케줄러UX가 잘 작동하고 있네요.

버블 플러그인을 만들기 위해 리액트 코드 출력도 테스트해봤고,

“직접 버블용 플러그인 만들까?” 라는 생각까지 확장되더라고요 😄

아직 플러그인 제작을 완전히 마친 건 아니지만,

일단 도전 중입니다!

성공하게 된다면 이 여정도 2차 사례 게시글로 정리해서 공유할게요 💪

🤖 AI와 함께 버블을 더 쉽게!

이번 구현에서 AI도 정말 큰 도움이 되었어요.

• 데이터베이스 구조 설계: AI에게 추천받아 설계 결정이 쉬웠어요!

• UI 고민: 반복적인 UI 구조나 에러 메시지 문구도 AI에게 떠넘겼(?)어요 😎

• V0 활용법이나 리액트 코드 이해도 ChatGPT에게 도움받아 진행

🧑‍💻 한 번 떠났다가, 다시 돌아온 이유

예전에도 프론트엔드에 잠깐 찍먹한 적이 있었더랬죠...

그런데 AI 없던 시절, 프런트엔드는 해야 할 게 너무 많고 정말정말 귀찮은 일 투성이여서…

결국 반강제적, 울며겨자먹기로 경력단절이 되었죠.

하지만 이젠 상황이 바뀌었어요.

AI가 번거로운 부분을 거의 모두 도와주는 시대가 왔고,

그 덕분에 저도 이 영역에 또다시 발을 담궈 볼 엄두를 내어보게 되었답니다 😌✨

🧭 앞으로의 방향

• 🧩 예약 UX 프레임워크 구현 완료 (V0로 시간 선택 인터페이스 구성)

• 🔄 Bubble에 실제 예약 기능 연결은 미완 (👉 플러그인 개발 후 연동 예정)

• 🗣️ 챗봇 연동 예약 변경 기능 추가 예정

• 💳 Stripe 결제 API 연동 & 플레이어 매칭 시스템 도입 예정

☘️ 마무리하며

버블을 처음 접한 분들도,

“예약 시스템 같은 건 너무 어려운 거 아냐?”라고 생각하실 수 있어요.

하지만 직접 해보니,

버블로도 예약 시스템 구현, 충분히 가능하답니다! 🙌

혹시 저처럼 고민하셨던 분들께 작은 용기와 힌트가 되었으면 좋겠어요.

플러그인 도전기는 (성공한다면..;;) 다음 편에서 또 공유할게요!