4️⃣ DEV TIP/Bubble.io

Bubble.io 드롭다운 검색 & 다중 필드 검색 성능 최적화 가이드

IFINITY 2025. 1. 24. 06:58

안녕하세요! IF-DEV입니다. 😊
오늘은 Bubble.io에서 드롭다운 검색 기능을 최적화하고, 다중 필드 검색 성능을 향상하는 방법을 소개해 드리겠습니다.

검색 기능은 앱의 UX와 성능에 큰 영향을 미치는 요소이므로, 올바른 설정이 필수입니다.
✅ 빠른 검색 속도 확보
✅ 데이터 로딩 최적화
✅ 사용자 경험(UX) 개선

이 글을 끝까지 읽으면 Bubble.io 검색 기능을 최적화하는 실전 팁을 얻어가실 수 있습니다. 🚀

🎯 1️⃣ 드롭다운 검색 기능 최적화

✅ MultiSelect Dropdown Plugin 활용하기

Bubble 기본 드롭다운은 검색 기능이 포함되어 있지 않아 UX가 불편할 수 있습니다.
하지만 **MultiSelect Dropdown Plugin(Select2 기반)**을 활용하면, 사용자가 직접 검색할 수 있는 드롭다운을 구현할 수 있습니다.

🔹 적용 방법

  1. MultiSelect Dropdown Plugin 설치
    • Bubble의 플러그인 마켓에서 "MultiSelect Dropdown" 검색 후 설치
  2. 검색 가능한 드롭다운 설정
    • Placeholder 설정: "검색어 입력..."
    • Searchable 활성화: 사용자가 직접 검색할 수 있도록 설정
  3. 단일 선택 모드 설정
    • 기본적으로 MultiSelect 기능이지만, 단일 선택 모드도 가능

🔗 플러그인 문서: Select2 공식 문서

✅ 이 방법을 사용하면 드롭다운 + 검색 기능이 결합되어 UX가 크게 향상됩니다!

🚀 2️⃣ 다중 필드 검색 최적화

Bubble에서는 기본적으로 **"Merge With"**를 사용하여 여러 필드를 검색할 수 있습니다.
그러나, 이 방식은 불필요한 워크플로우를 유발하여 속도가 느려질 가능성이 높습니다.

✅ 최적화 방법

📌 2-1. ‘검색용 키워드’ 필드 추가하기

기존 방식:
🔻 Do a search for: Title contains [검색어] Merge With Do a search for: Content contains [검색어]
이 방식은 Bubble에서 여러 번 검색 요청을 처리해야 하므로 비효율적입니다.

추천하는 최적화 방법:
"검색용 키워드" 필드를 새롭게 생성하고, 데이터를 저장할 때 제목과 내용을 결합하여 한 번에 검색하는 방식입니다.

✅ 구현 방법

  1. 데이터 필드 추가
    • Title (제목)
    • Content (내용)
    • Search Keywords (검색용 키워드 - Title + Content)
  2. 데이터 저장할 때 "검색 키워드"에 제목 + 내용을 저장
  3. Search Keywords = Title + " " + Content
  4. 검색할 때 contains 조건으로 Search Keywords 필드 검색
  5. Do a search for: Data Type where Search Keywords contains [검색어]

✅ 이렇게 하면 검색 속도를 획기적으로 향상할 수 있습니다!

📌 2-2. 데이터 구조 최적화 (Heavy 필드 분리)

Bubble에서 Do a Search가 페이지 속도를 느리게 만드는 원인이라면,
데이터 구조를 가볍게 만들어야 합니다.

✅ 해결 방법
💡 리피팅 그룹(Repeating Group)에 불필요한 필드가 포함되어 있는지 점검하세요.
💡 무거운 데이터는 상세 페이지에서 불러오도록 설계하세요.

🔹 예시: 리뷰 데이터를 두 개의 데이터 타입으로 분리하기

데이터 타입 설명 필드 예시

리뷰[검색용] 검색 시 빠르게 로딩할 데이터 제목, 작성자, 날짜
리뷰[상세용] 상세 페이지에서 불러올 데이터 제목, 내용, 댓글, 이미지

🔹 적용 방식

  1. 리뷰 목록 페이지 → 리뷰[검색용] 데이터를 불러와 빠르게 검색
  2. 상세 페이지 이동 시 → 리뷰[상세용] 데이터를 불러와 추가 정보 제공

✅ 이 방법을 활용하면 Bubble.io 앱의 검색 속도를 최적화할 수 있습니다!

 

🔥 최적화 적용 후 기대 효과

✔ 검색 속도 최대 2~5배 향상
✔ 드롭다운 검색 UX 개선
✔ 다중 필드 검색 시 불필요한 데이터 요청 감소
✔ 반응 속도 향상으로 사용자 만족도 증가

 

이피니티 - if to infinite
프로젝트의 시작부터 유지, 확장까지 함께하는 외주 개발 파트너

노코드 Bubble.io 전문 에이전시
📱 앱 · 🌐 웹 · 🛠️ 소프트웨어 · 🔌 플러그인 개발

편하게 문의 주세요!
이메일 문의: support@if-inity.io
사이트: if-inity.io 
카카오톡 문의: 톡으로 문의하기