테마색 설정

워크스페이스에서 테마색을 추가 및 설정할 수 있습니다. 앱 아이덴티티 또는 브랜드 색상등을 테마색으로 설정해 시나리오를 디자인하고, 앱 설정에서 해당 테마색을 연결해 앱에 일관된 브랜드 경험을 제공해 앱의 전반적인 가치를 높일 수 있습니다.

기능 설명

스튜디오 최상단 좌측를 눌러 시나리오에서 사용할 테마색을 선택하거나, 을 눌러 테마색을 추가 또는 편집할 수 있습니다.

번호	영역 이름	영역 설명
1	테마색 설정	테마색을 추가하거나 편집할 수 있는 팝업이 열립니다.
2	새 테마색	새로운 테마색을 추가할 수 있습니다.
3	테마색 편집	항목별로 색상을 편집할 수 있습니다.
4	저장	설정한 색상으로 테마색을 저장합니다.

테마색 설정

테마색 설정 기능을 통해 사용자는 각 영역 또는 컴포넌트의 색상을 세부적으로 지정할 수 있습니다. 특히, 메인 컬러, 서브 컬러, 브랜드 컬러 등 다양한 색상을 설정하여, 앱의 전반적인 색상 테마를 아이덴티티에 맞게 조정할 수 있습니다.

각 영역 또는 컴포넌트 색상은 테마색을 상속받지만, 속성창에서 색상을 변경한 경우 변경한 색상이 우선순위를 갖습니다.

스텝

번호	모양	영역 이름	영역 설명
1		스텝 배경	스텝 전체 배경색상을 설정합니다.
2		스텝 텍스트	스텝 전체 텍스트 기본 색상을 설정합니다.

헤더

영역 번호	모양	영역 이름	영역 설명
1		헤더 배경	헤더 배경 색상을 설정합니다.
2		헤더 텍스트	헤더 텍스트 색상을 설정합니다.

컨트롤

영역 번호	모양	영역 이름	영역 설명
1		컨트롤 선택	컨트롤 선택 시 색상을 설정합니다.
2		컨트롤 포커스	입력 컨트롤에 텍스트를 편집할 때 테두리 색상과 폰트 색상을 설정합니다.

스텝 하단 버튼

영역 번호	모양	영역 이름	영역 설명
1		스텝버튼 배경	스텝버튼의 배경 색상을 설정합니다.
2		스텝버튼 텍스트	스텝버튼의 텍스트 색상을 설정합니다.

하단탭

영역 번호	모양	영역 이름	영역 설명
1		하단탭 배경	하단 탭 배경 색상을 설정합니다.
2		하단탭 선택	하단 탭 선택 시 아이콘, 텍스트, 하단 라인의 색상을 설정합니다.
3		하단탭 텍스트	하단 탭 아이콘, 텍스트 색상을 설정합니다.

테마색상

메인, 서브 및 앱 아이덴티티를 표현할 수 있는 컬러를 설정하여 사용할 수 있습니다.

1에서 설정한 색상이 2에 보여지며, 컬러패널에서 테마색상을 선택해 시나리오를 디자인하면 됩니다.

테마색 앱 적용

시나리오에서 적용한 테마색을 실제 고객이 사용하는 앱에 적용하여 서비스 할 수 있습니다. 플렉스튜디오는 하나의 시나리오를 여러 앱에서 사용할 수 있기 때문에 시나리오에서 테마색을 설정해도 앱에서 설정하지 않으면 해당 테마색으로 서비스 할 수 없습니다.

테마색을 적용할 앱을 선택하고, 앱 정보설정에서 테마색 변경을 클릭해 테마색을 설정해 주세요.

1. 앱을 선택합니다.

2. 앱정보설정 버튼을 선택합니다.

3. 테마색 변경 버튼을 선택합니다.

4. 원하는 테마를 선택합니다.

5. 라이브에 적용 버튼을 선택하면 선택한 테마색이 앱에 적용된 것을 확인할 수 있습니다.