이 섹션에서는 Bubble의 중앙 스타일시트를 관리하는 도구인 스타일에 대해 다룹니다.
• ctrl/command + k 를 누르면, 필요한 정보를 더 쉽게 검색할 수 있습니다.
• 공식 문서를 ChatGPT를 활용해 번역을 진행했으며, 모든 출처는 버블 공식 문서입니다.
• 공식 문서 양이 방대해 시간이 날 때마다 꾸준하게 작업 중입니다.
이를 통해 앱 전체의 요소에 적용할 수 있는 일관된 디자인 프로세스를 단순화할 수 있습니다. 단일 스타일을 수정함으로써 모든 관련 요소를 손쉽게 재스타일링하여 앱에서 일관된 룩앤필을 구축하고 관리하기 쉬워집니다.
각 스타일은 특정 요소 유형에 연결되며 다음 정보를 포함할 수 있습니다 (요소 유형에 따라 다를 수 있음):
•
배경색 또는 이미지
•
테두리
•
그림자
•
글꼴
•
전환
디자인 프로세스를 더 효율적으로 만들 뿐만 아니라 스타일은 스타일링 설정을 각 별도의 요소에 저장하는 대신 한 곳에 저장함으로써 앱의 성능을 향상시킵니다.
스타일은 색상 변수 및 글꼴 변수와 결합하여 매우 효율적이고 유연한 디자인 시스템을 설정할 수 있습니다.
Defining styles
Styles 탭은 앱의 다양한 스타일을 편집하는 곳입니다. 스타일 편집은 요소 편집과 매우 유사하며 스타일링 속성을 변경하기 위해 속성 편집기를 사용합니다.
원하는 만큼 많은 스타일을 정의할 수 있습니다. 스타일은 하나의 요소 유형에 적용되지만 Button과 같은 요소에 대해 하나 이상의 스타일을 가질 수 있습니다. 필요한 스타일을 각 버튼에 대해 선택해야 하므로 읽기 쉬운 방식으로 이름을 지정하는 것이 좋습니다. 또한 새로운 요소를 이 탭에서 삽입할 때 기본적으로 어떤 스타일을 사용할지 지정할 수 있습니다.
Styles 탭에서 'New Style'을 클릭하여 스타일을 생성하거나 요소 자체에서 생성할 수 있습니다. 요소에서 생성하는 경우 현재 요소의 속성이 새롭게 생성된 스타일의 기본으로 사용됩니다. 이것은 몇 가지 요소에 동일한 디자인을 사용하지만 아직 스타일을 만들지 않았을 때 특히 유용합니다. 사용자 정의 스타일을 만들 때는 헤더에 대한 H1과 같은 전문적인 레이블을 사용할 수 없습니다.
Applying & removing styles
Conditions on styles
스타일에 대해 일부 조건을 생성할 수 있지만 기본 상태에 대한 기본 상호 작용에 관한 것입니다. 즉, 요소와의 내장된 간단한 상호 작용에 관한 조건입니다 (호버, 포커스 등). 예를 들어 데이터 또는 사용자의 속성을 사용하는 조건은 기본적이지 않습니다.
Applying and detaching styles
스타일을 요소에 적용하면 해당 스타일에 포함된 현재 속성이 삭제됩니다. 반면에 스타일을 요소에서 분리하면 스타일의 원래 속성이 요소로 복사됩니다. 따라서 스타일을 버튼에서 분리하면 버튼의 모양이 처음에는 변경되지 않으므로 모양을 수정할 수 있습니다. 이러한 변경은 항상 되돌릴 수 있습니다.
스타일 분리는 스타일을 변경하거나 삭제하지 않습니다. 단지 해당 특정 요소에서 스타일을 분리합니다.
스타일을 분리하려면 속성 편집창의 Styles 드롭다운 아래의 'Detach style' 링크를 클릭하십시오.
Conflicts between conditions
스타일에 포함된 조건과 요소 수준의 조건 간에는 요소의 속성이 수정되는 경우 같은 속성이 변경된 경우 요소 수준의 조건이 이길 것입니다.
Using Style Variables
스타일 변수는 앱 전체의 요소 및 스타일에 적용할 수 있는 특정 색상 및 글꼴을 저장하는 데 사용됩니다. 이를 통해 글꼴 및 색상의 사용이 일관되게 유지되며 필요한 경우 나중에 쉽게 전환할 수 있습니다. 예를 들어 색상 변수를 교체하면 이 변수를 사용하는 모든 스타일이 즉시 업데이트됩니다.
