이 섹션에서는 앱 전체에 공통으로 적용할 수 있는 색상 팔레트를 설정하는 데 사용되는 색상 변수(Color Variable)에 대해 설명합니다.
Style(스타일) 탭의 색상 변수(Color Variable) 기능을 사용하면 Bubble 앱 전체에 적용할 수 있는 색상 팔레트를 설정할 수 있습니다.
각 색상 변수(Color Variable)에는 다음이 포함됩니다.
- 색상 값을 결정하는 *Hex Code
- 투명도를 제어하는 알파 값
색상 및 글꼴 변수를 모두 통합하여 앱에 일관된 디자인 시스템을 구축할 수 있습니다.
요소 스타일에 색상 변수를 사용하면 스타일 탭에 지정된 색상 값에 대한 연결이 생성됩니다.
*참고: Hex Code
Hex Code는 특정 색상을 나타내는 데 사용되는 6자리 숫자입니다.
RGB 값을 단일 코드로 나타냅니다.
Hex Code의 처음 두 자리는 빨간색 구성 요소를 나타내고 가운데 두 자리는 녹색 구성 요소를 나타내고 마지막 두 자리는 파란색 구성 요소를 나타냅니다.
위의 그림처럼 Styles(스타일) 탭에서 Style Variables(스타일 변수) 탭으로 이동하여 아래의 Color를 편집합니다.
결과적으로 색상을 수정해야 하는 경우 한 곳만 변경하면 해당 색상 변수가 사용되는 모든 곳에 자동으로 반영되므로 각 요소나 스타일을 개별적으로 조정해야 하는 번거로움을 줄일 수 있습니다.
FAQ
Color Variable(색상 변수)가 스타일에 적용됩니까?
예, Color Variable(색상 변수)는 모든 스타일에 적용됩니다.
- 즉, Color Variable(색상 변수)를 업데이트하면 해당 변수를 사용하는 모든 스타일에서 자동으로 업데이트됩니다.
- 두 가지를 결합하면 한 곳에서 요소의 색상 모양을 제어할 수 있는 매우 유연한 색상 시스템을 설정할 수 있습니다.
