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

이 섹션에서는 앱 전체의 요소에 적용할 수 있는 중앙 집중식 스타일시트인 Style(스타일)에 대해 설명합니다.

Style을 사용하면 앱 내의 요소에 대해 중요한 스타일을 설정하여 디자인 프로세스를 간소화하고 일관성을 높일 수 있습니다.

 

(1) Style의 특징 및 장점

한 곳에서 단일 스타일을 설정하면 관련된 모든 요소의 스타일을 쉽게 다시 지정할 수 있으므로 앱에서 일관된 모양과 느낌을 쉽게 설정하고 관리할 수 있습니다.

 

각 스타일은 특정 요소 유형에 연결되며 다음 정보를 포함합니다. (요소 유형에 따라 다를 수 있음)

• Background Color or image (배경색 또는 배경 이미지)
• Border(경계선)
• Shadow(그림자)
• Font(폰트)
• Transitions(전환)

Styles는 디자인 프로세스를 보다 효율적으로 만드는 것 외에도 스타일 설정을 각각의 개별 요소에 저장하는 대신 중앙 위치에 저장하여 앱의 성능을 향상합니다.

 

스타일은 Color Variables(색상 변수) 및 Font Variables(글꼴 변수)와 결합하여 매우 효율적이고 유연한 디자인 시스템을 설정할 수 있습니다.

 

(2) 스타일 정의하기

1. Style(스타일) 탭은 앱에 있는 다양한 스타일을 편집하는 곳입니다.

• 스타일 편집은 요소 편집과 매우 유사하며 속성 편집기를 사용하여 스타일 속성을 변경합니다.
• 원하는 만큼 스타일을 정의할 수 있습니다.
• 스타일은 버튼과 같은 한 가지 유형의 요소에 적용되지만 버튼에 대해 둘 이상의 다른 스타일을 정의할 수 있습니다.
• 각 버튼에 필요한 스타일을 선택해야 하므로 읽기 쉬운 방식으로 이름을 지정하십시오.
• 페이지에 새 요소를 첨부할 때 기본적으로 사용할 스타일을 지정할 수도 있습니다.

 

2. 스타일 탭에서 '+ Add Style'을 클릭하거나 페이지의 요소 자체에서 만들 수 있습니다.

• 요소에서 이 작업을 수행하면 요소의 현재 속성이 새로 생성된 스타일의 기본 스타일로 사용됩니다. 이것은 몇 개의 요소에 대해 같은 디자인을 사용하고 있지만, 아직 스타일 생성을 하지 않은 경우, 빠르게 스타일 생성을 할 수 있기 때문에 유용합니다.
• 고유한 스타일을 만들 때 이름에 H1과 같은 특수한 html 이름을 사용할 수 없습니다.

스타일 지정하기

 

(3) 스타일 적용 및 제거

스타일에 대한 조건 (Conditions on Style)

여기서는 요소의 기본 상태에 대한 조건만 스타일을 지정할 수 있습니다.

• 즉, 요소에게 기본 제공되는 간단한 상호 작용(호버링, 포커스 등)에 대한 기본조건입니다.
• 예를 들어 데이터를 사용하는 조건이나 사용자는 기본 자격이 없습니다.

기본 조건을 재외 한 조건은 앱을 만들 때 페이지에서 지정이 가능합니다.

 

(4) 스타일 적용 및 분리

요소에 스타일을 적용하면 스타일에 포함된 현재 속성이 삭제됩니다.

• 반면에 요소에서 스타일을 분리하면 스타일의 원래 속성이 요소에 복사됩니다.
• 따라서 버튼에서 스타일을 분리하면 처음에는 버튼의 모양이 변경되지 않으므로 모양을 수정할 수 있습니다. 이러한 변경 사항은 언제든지 취소할 수 있습니다.
• 스타일을 분리해도 스타일이 변경되거나 삭제되지 않고 해당 특정 요소에서만 분리됩니다.

 

버튼의 스타일 지정 또는 제거

(5) 조건 간 충돌

• 요소 편집 시 스타일에 포함된 조건을 덮어쓸 수 있습니다.
• 스타일의 조건과 요소의 조건 중 동일한 속성을 수정하면 요소 자체의 설정 조건이 우선합니다.

 

(6) 테마 사용

Bubble은 앱의 시각적 정체성을 찾는 데 도움이 되는 몇 가지 테마를 제공합니다.

• 새로운 앱에는 미리 정의된 스타일 세트가 제공되므로 앱에 테마를 적용하면 이러한 스타일을 다양한 색상, 각도 등으로 덮어씁니다.
• Bubble에는 이미 Bootstrap 및 Material Design과 같은 다양한 인기 디자인 라이브러리에서 영감을 받은 테마가 있습니다.
• 테마를 적용할 때 앱에 추가한 스타일은 수정되지 않습니다.

 

(7) 스타일 변수 (Style Variables) 사용

• 스타일 변수는 앱 전체의 요소와 스타일에 적용할 수 있는 특정 색상과 글꼴을 저장하는 데 사용됩니다.
• 이렇게 하면 글꼴 및 색상 사용이 일관되고 나중에 필요한 경우 쉽게 전환할 수 있습니다. 예를 들어 색상 변수를 바꾸면 이 변수를 사용하는 모든 스타일이 즉시 업데이트됩니다.

 

아래 문서에서 Color Variables(색상 변수) 및 Font Variables(글꼴 변수)에 대해 자세히 알아볼 수 있습니다.

 

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

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