Bubble Guide

Bubble은 코드 작성 없이 웹 애플리케이션을 구축할 수 있는 강력한 플랫폼으로, 드래그 앤 드롭 방식으로 다양한 기능을 추가할 수 있습니다. Bubble에서는 HTML 및 JavaScript 코드 삽입이 가능하지만, Tailwind CSS와 같은 외부 라이브러리 통합에 일부 제한이 있을 수 있습니다. 이 가이드는 Bubble에 Tailwind CSS와 Startupful 리소스를 통합하는 방법을 안내합니다.

Step 1: Tailwind CSS 통합

Bubble에서 Tailwind CSS를 사용하려면, HTML 헤더에 Tailwind CSS 스크립트를 추가해야 합니다. Bubble에서는 페이지 설정 또는 앱 전체 설정을 통해 외부 스크립트를 추가할 수 있습니다.

1. 페이지 레벨에서 Tailwind CSS 추가

1. Bubble 에디터에서 Page를 선택하고, 하단의 HTML Header 섹션을 찾습니다.

2. 아래 코드를 HTML 헤더에 추가합니다.

   <script src="https://cdn.tailwindcss.com"></script>
   

3. 페이지를 저장하고, Tailwind CSS 클래스를 이 페이지에서 사용할 수 있는지 확인합니다.

2. 앱 전체에 Tailwind CSS 추가

앱의 모든 페이지에서 Tailwind CSS를 사용하려면 Settings에서 추가할 수 있습니다.

1. Bubble 에디터에서 상단 메뉴의 Settings로 이동합니다.

2. SEO / metatags 탭으로 이동한 후 Script/meta tags in header 섹션에 아래 코드를 추가합니다.

   <script src="https://cdn.tailwindcss.com"></script>
   

3. 앱을 저장한 후, 모든 페이지에서 Tailwind CSS 클래스를 사용할 수 있습니다.

Note: Bubble의 기본적인 CSS 설정과 Tailwind CSS가 충돌할 수 있으므로, 필요한 클래스만 사용하여 스타일을 조정하는 것이 좋습니다.

Step 2: Startupful 리소스 적용

Tailwind CSS 스크립트를 추가한 후, Startupful에서 제공한 HTML 리소스를 Bubble에 적용할 수 있습니다. Bubble에서는 HTML을 직접 삽입할 수 있는 HTML 요소를 제공하므로, 이를 통해 Startupful 리소스를 추가할 수 있습니다.

1. HTML 요소를 통한 리소스 삽입

1. Bubble 에디터에서 원하는 페이지로 이동합니다.
2. 좌측 패널의 Visual Elements에서 HTML 요소를 선택하여 페이지에 드래그합니다.
3. HTML 코드 창이 열리면, Startupful에서 제공된 HTML 코드를 붙여넣습니다.
4. Save를 클릭하여 코드를 적용합니다.

이렇게 하면, Startupful에서 제공한 HTML 리소스가 Bubble 페이지에 추가되어 표시됩니다. 필요에 따라 HTML 요소의 크기와 위치를 조정할 수 있습니다.

2. 실시간 미리보기 및 스타일 조정

• Preview 모드를 활성화하여 페이지가 예상한 대로 표시되는지 확인합니다.
• 필요에 따라 HTML 요소의 크기를 조정하거나, Tailwind CSS 클래스를 수정하여 원하는 디자인을 완성합니다.

Step 3: 전체 넓이 적용 문제 해결

Bubble에서 Startupful 리소스를 사용할 때, Bubble의 레이아웃 설정으로 인해 전체 넓이가 적용되지 않을 수 있습니다. 이 문제를 해결하려면, 다음과 같이 레이아웃 설정을 조정하세요.

1. HTML 요소가 포함된 Group 또는 Container를 선택합니다.
2. 스타일 설정에서 Width를 **100%**로 설정하여 전체 넓이로 확장합니다.
3. 필요에 따라 Max Width 또는 Margins를 조정하여 화면 전체에 맞출 수 있도록 합니다.

Tailwind CSS 클래스 중 w-full이나 max-w-full을 HTML 코드에 추가하여 넓이를 제어할 수도 있습니다.

추가 팁: Bubble에서의 Tailwind CSS 커스터마이징

Bubble에서 Tailwind CSS를 사용할 때 추가적인 스타일링이 필요할 경우, Tailwind CSS의 기본 설정을 맞춤 설정할 수 있습니다. 아래는 기본적인 Tailwind CSS 설정을 수정하는 방법입니다.

1. Tailwind CSS 설정을 변경하고 싶다면, HTML 헤더에 Tailwind 설정 스크립트를 추가합니다.

   <script>
     tailwind.config = {
       theme: {
         extend: {
           colors: {
             primary: '#1a202c',
             secondary: '#2d3748',
           }
         }
       }
     }
   </script>
   <script src="https://cdn.tailwindcss.com"></script>
   

2. 이 설정을 통해 Tailwind의 기본 색상이나 간격 등을 조정하여 Bubble 내에서 원하는 스타일을 적용할 수 있습니다.

주의사항

• Bubble의 기본 스타일과 Tailwind CSS가 충돌할 수 있으므로, Tailwind 클래스 사용 시 주의가 필요합니다.
• Bubble의 특성상 모든 Tailwind 유틸리티가 완벽히 적용되지 않을 수 있으므로, 필요에 따라 Custom CSS를 추가하여 보완할 수 있습니다.

이 가이드를 통해 Bubble에서 Tailwind CSS와 Startupful 리소스를 효과적으로 통합하여, 사용자 정의된 디자인을 Bubble 애플리케이션에 적용할 수 있습니다. Tailwind CSS 설정과 HTML 요소를 활용해 Bubble 내에서 유연하게 스타일을 조정해보세요.