10. Bubble Styling (중급) : 버블 스타일링, 노코드 앱 버블 빠른 사용자 스타일 저장

Styling 스타일링

이 섹션에서는 색상, 테두리, 그림자 및 글꼴과 같은 요소에 적용할 수 있는 다양한 스타일 속성을 다룹니다.

 

(1) 스타일링이란

페이지에 추가하는 각 element(요소)에는 기본 스타일이 적용됩니다. 즉, 스타일 지정은 element(요소)의 모습을 나타내며, 스타일 설정을 변경하여 적용할 수 있습니다.

 

• Background color or image (배경색 또는 이미지)
• Border (테두리)
• Shadow (그림자)
• Font (폰트)
• Transitions (전환)

위의 설정들은 정확히 동일한 작업을 수행하는 요소가 전혀 다르게 보일 수 있는 다양한 모습으로 설정 가능합니다.

 

속성 편집기(element Editor)를 열고 Appearance(모습) 탭에서 설정을 변경하여 각 요소의 스타일을 개별적으로 지정할 수 있습니다.

버블 input element

각 개별 element(요소)의 스타일 설정을 조정할 수 있지만 Bubble은 한 곳에서 관리할 수 있는 스타일시트를 설정하는 도구도 제공합니다.

 

버블 button - element editor 요소 편집기

(2) 스타일 관리

Bubble에는 앱 요소의 스타일을 효율적으로 관리하고 업데이트하기 위한 여러 가지 도구도 있습니다. 세 가지 섹션으로 나뉩니다.

 

1. 색상 변수 : Color variables

• 스타일 탭의 색상 변수 기능을 사용하면 앱 전체에 적용할 수 있는 색상 팔레트를 설정할 수 있습니다.
• 색상 변수를 변경하면 해당 변경 사항이 해당 변수에 연결된 모든 스타일 및 요소에 자동으로 적용됩니다.

Color Variables (초급) : 색상변수 사용하기, 변수 설정으로 전체 색상을 쉽게 변경, Hex코드 정의 > 바로가기

 

2. 글꼴 변수  : Font variables

• 스타일 탭의 글꼴 변수 기능을 사용하면 앱 전체에 적용할 수 있는 글꼴 컬렉션을 설정할 수 있습니다.
• 글꼴 변수를 변경하면 변경 사항이 해당 변수에 연결된 모든 스타일 및 요소에 자동으로 적용됩니다.

Font Variables (초급) : 버블의 폰트 변수 설정, 앱 전체의 글꼴을 중앙에서 관리 > 바로가기

 

3. 스타일 : Styles

• Bubble의 스타일 탭은 앱의 모든 스타일 설정을 정의하고 관리할 수 있는 중앙 위치를 제공합니다.
• 스타일은 앱의 일관되고 시각적으로 매력적인 디자인을 만드는 동시에 향후 해당 디자인을 더 쉽게 업데이트할 수 있도록 합니다. 스타일을 변경하면 해당 변경 사항이 연결된 모든 요소에 자동으로 적용됩니다.

Styles (초급) : 버블의 스타일 설정하기, 중앙에서 통합 관리, 스타일 적용, 테마 설정하기 > 바로가기

 

4. Custom Font 사용하기

• 기본 지정 방법: settings > general > custom fonts
• 안전하게 지정하기: 아래의 페이지에 설명

Custom Fonts (중급) : 버블에서 사용자 글꼴 사용하기, 안전한 글꼴 사용법, custom font 설정 > 바로가기