🚀 Bubble.io에서 못생긴 스크롤 없애는 초간단 방법

안녕하세요! IF-DEV입니다. 😊
오늘은 Bubble.io에서 보기 싫은 스크롤을 간단한 코드만으로 없애는 방법을 소개해 드리겠습니다.

💡 이 문제를 해결하면?
✅ 모바일 UX 개선 (눈에 거슬리는 스크롤 제거)
✅ 반응형 디자인 최적화 (불필요한 스크롤 제거)
✅ 모든 브라우저에서 스크롤 바 숨김 적용 가능

Bubble.io에서 Repeating Group, Group, 페이지 전체에 스크롤이 생기는 문제를 한 방에 해결할 수 있는 방법!
지금 바로 확인해 보세요. 🚀

---

🎯 왜 Bubble.io에서 스크롤 바가 문제일까?

Bubble.io에서 **"Allow vertical scrolling"**을 활성화하거나, 컨텐츠가 Group 크기를 초과하면 자동으로 스크롤이 생깁니다.

💡 이 스크롤이 문제인 이유?
✔ PC에서는 괜찮지만, 모바일에서는 눈에 거슬림
✔ 디자인이 어색해지고, UX 품질 저하
✔ 불필요한 UI 요소가 추가되어 깔끔한 화면 구성이 어려움

📌 해결 방법? → HTML 스타일 코드 한 줄로 스크롤을 감출 수 있다!

---

🛠️ Step 1: 스크롤 숨김 코드 추가하기

Bubble.io의 SEO/Metatags 설정에 아래 코드를 추가하세요.

📌 코드 적용 위치

Bubble.io → Settings → SEO/Metatags → Script/meta tags in header

<style>
  #noscrollbar {
    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
  }
  #noscrollbar::-webkit-scrollbar {
    display: none; /* 크롬, 사파리, 엣지 */
  }
</style>

💡 이 코드가 하는 역할
🔹 -ms-overflow-style: none; → IE에서 스크롤 바 숨김
🔹 scrollbar-width: none; → Firefox에서 스크롤 바 숨김
🔹 ::-webkit-scrollbar { display: none; } → Chrome, Safari, Edge에서 스크롤 바 숨김

📌 결과적으로?
모든 주요 브라우저에서 스크롤 바를 숨길 수 있습니다!

---

🛠️ Step 2: 스크롤 숨길 요소에 Element ID 추가하기

이제 Bubble.io 에디터에서 스크롤을 없애고 싶은 요소(예: Group, Repeating Group)에 Element ID를 추가해야 합니다.

📌 적용 방법

1️⃣ Bubble.io 에디터에서 스크롤을 없애고 싶은 Group 또는 Repeating Group 선택
2️⃣ Property Editor → ID Attribute 활성화
3️⃣ Element ID를 "noscrollbar"로 설정
4️⃣ 미리보기 실행 → 스크롤이 사라진 것 확인! 🎉

---

🎯 추가 팁: 스크롤을 없애면서 UX를 더 개선하는 방법

✅ 1. 스크롤을 감추되, 스크롤이 필요한 경우 오버플로우 조정

#noscrollbar {
    overflow-y: auto; /* 필요할 때만 스크롤 활성화 */
}

✅ 2. 특정 페이지 전체에서 스크롤 제거하기

body {
    overflow: hidden !important;
}

✅ 3. 특정 요소 내부에서만 스크롤 제거하기

.my-scroll-container {
    overflow: hidden;
}

📌 이렇게 하면, UX를 고려하면서도 깔끔한 UI를 유지할 수 있습니다! 🚀

---

🔥 적용 후 기대 효과

✔ 못생긴 스크롤 제거로 UI 깔끔하게 정리
✔ 모바일 화면에서 UX 최적화
✔ 불필요한 UI 요소를 제거해 앱의 디자인 완성도 향상
✔ Bubble.io의 기본 기능만으로 해결하기 어려운 문제를 간단한 CSS 코드로 해결

---

💬 IF-DEV와 함께 Bubble.io 개발을 최적화하세요! 🚀

 

---

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

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

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