---
sourceDocument: Yokohama Mobile 구성 및 탐색
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/yokohama/mobile

 Release :

    - yokohama

ft:locale :

    - ko-KR

ft:publication_title :

    - Yokohama Mobile 구성 및 탐색

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - evelopment, Data and Analytics


---

# UI 규칙에 대한 색 변수 지원

# UI 규칙에 대한 색 변수 지원 {#ariaid-title1}

* 릴리스 버전: Yokohama
* 
* 업데이트 날짜 2025년 01월 30일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 4분

색상 변수를 사용하여 모바일 UI 규칙의 테마를 변경하는 방법에 대해 알아봅니다.

|-|-|
| 작업 필드가 UI 스타일 설정으로 설정된 상태에서 UI 규칙의 값 필드에서 다음 색상 변수를 사용합니다. * `BackgroundColorVariable` * `TextDecorator` 외부 또는 내부의 `FontColorVariable` {#color-var-ui-rule__ul_nnz_533_ywb} UX 테마 속성 \[sys_ux_theme_property\] 테이블에서 색상 변수를 정의할 수 있습니다. 사용 가능한 변수 목록은 아래의 색상 디자인 가이드를 참조하십시오. 예: `{"BackgroundColorVariable": "--now-color-secondary-3", "BackgroundColor": "#3f2c11"}` 이러한 UI 규칙 작업 생성에 대한 자세한 내용은 다음 문서를 참조하십시오 [모바일 UI 규칙 작업 생성](https://servicenow-prod.fluidtopics.net/Cx__FWHG3Dm0ZXK~BFy4og "모바일 UI 규칙 조건이 충족될 때 실행되는 작업을 생성합니다."). |   |
[ ]

{#color-var-ui-rule__table_fbp_nfb_yvb}

## 모바일 UI 규칙 색상 가이드 {#color-var-ui-rule__section_vvh_wzp_1xb}

색상 변수는 다음과 같이 나뉩니다. 설계 가이드라인을 사용하여 사용 사례에 적합한 색상 변수를 식별합니다.

경보 색상표
:   경보 색상표 색상은 중요한 상태, 상태 및 작업을 강조 표시합니다. 경보 색상은 장식이나 정리보다는 특정 의미를 전달할 때 사용합니다.

그룹화된 색상표
:   그룹화된 색상표 색상은 산업 라인의 색상 규칙을 따릅니다. 이 색상을 사용하여 색상이 지정된 항목이 특정 산업 또는 사업부와 관련이 있음을 보여줍니다. 각 색상의 의미는 컨텍스트에 따라 다르지만 앱 내에서 일관성을 유지해야 합니다.
{#color-var-ui-rule__table_otd_c1q_1xb__entry__3}

| 색 이름 | 예 | 색상 변수 |
|-|-|-|
| 심각 |   | 모바일 변수 :   `alert--critical-0` 웹 변수 :   `--now-color_alert--critical-0` |
| 높음 |   | 모바일 변수 :   `alert--high-0` 웹 변수 :   `--now-color_alert--높음-0` |
| 경고 |   | 모바일 변수 :   `alert--warning-0` 웹 변수 :   `--now-color_alert--warning-0` |
| 보통 |   | 모바일 변수 :   `alert--moderate-0` 웹 변수 :   `--now-color_alert--moderate-0` |
| 정보 |   | 모바일 변수 :   `alert--info-0` 웹 변수 :   `--now-color_alert--info-0` |
| 긍정적 |   | 모바일 변수 :   `alert--positive-0` 웹 변수 :   `--now-color_alert--긍정적-0` |
| 낮음 |   | 모바일 변수 :   `alert--low-0` 웹 변수 :   `--now-color_alert--low-0` |
| 사용 안 함 | ![비활성화된 경보 색 구성표]() | 모바일 변수 :   `경보-비활성화-백그라운드` 웹 변수 :   `--now-color_background--보조` |
| 중요(대체) | ![중요 경보 색 구성표 대체]() | 모바일 변수 :   `alert--critical-4` 웹 변수 :   `--now-color_alert--critical-4` |
| 높음(대체) | ![높은 경보 색 구성표 대체]() | 모바일 변수 :   `alert--high-4` 웹 변수 :   `--now-color_alert--high-4` |
| 경고(대체) | ![경고 경보 색 구성표 대체]() | 모바일 변수 :   `alert--warning-4` 웹 변수 :   `--now-color_alert--warning-4` |
| 보통(대체) | ![보통 경보 색 구성표 대체]() | 모바일 변수 :   `alert--moderate-4` 웹 변수 :   `--now-color_alert--moderate-4` |
| 정보(대체) | ![정보 경보 색 구성표 대체]() | 모바일 변수 :   `alert--info-4` 웹 변수 :   `--now-color_alert--info-4` |
| 긍정적(대체) | ![양수적 경보 색 구성표 대체]() | 모바일 변수 :   `alert--positive-4` 웹 변수 :   `--now-color_alert--긍정적-4` |
| 낮음(대체) | ![낮음 경보 색 구성표 대체]() | 모바일 변수 :   `alert--low-4` 웹 변수 :   `--now-color_alert--낮음-4` |
| 사용 안 함(대체) | ![비활성화된 경보 색 구성표 대체]() | 모바일 변수 :   `경보-비활성화-텍스트` 웹 변수 :   `--now-color_text--3차` |
[표 1. 경보 색상표]

{#color-var-ui-rule__table_otd_c1q_1xb} {#color-var-ui-rule__table_f5d_c1q_1xb__entry__3}

| 색 이름 | 예 | 색 옵션 |
|-|-|-|
| 파란색 | ![파란색 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--파란색-0` |
| 갈색 | ![갈색 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--갈색-0` |
| 회색 | ![회색 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--회색-0` |
| 녹색 | ![녹색 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--green-0` |
| 녹색-노란색 | ![녹색-노란색 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--녹색-노란색-0` |
| 자홍색 | ![마젠타 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--마젠타-0` |
| 주황색 | ![주황색 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--주황색-0` |
| 분홍색 | ![분홍색으로 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--분홍색-0` |
| 보라색 | ![보라색으로 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--보라색-0` |
| 청록색 | ![청록색 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--청록색-0` |
| 노란색 | ![노란색으로 그룹화된 색 구성표]() | 웹 변수 :   `--now-color_grouped--노란색-0` |
| 파란색(대체) | ![파란색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--파란색-4` |
| 갈색(대체) | ![갈색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--갈색-4` |
| 회색(대체) | ![회색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--회색-4` |
| 녹색(대체) | ![녹색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--green-4` |
| 녹색-노란색(대체) | ![녹색-노란색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--녹색-노란색-4` |
| 마젠타(대체) | ![마젠타 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--마젠타-4` |
| 주황색(대체) | ![주황색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--주황색-4` |
| 분홍색(대체) | ![분홍색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--핑크-4` |
| 보라색(대체) | ![보라색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--보라색-4` |
| 청록색(대체) | ![청록색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--청록색-4` |
| 노란색(대체) | ![노란색 그룹화된 색 구성표 대체]() | 웹 변수 :   `--now-color_grouped--노란색-4` |
[표 2. 그룹화된 색상표]

{#color-var-ui-rule__table_f5d_c1q_1xb}