---
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) 소요 시간: 2분

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

|-|-|
| 아이콘 UI 섹션에는 요소의 전경색과 배경색을 제어하는 두 개의 필드가 있는 색상 섹션이 있습니다. * 배경색 변수 * 전경색 변수 {#color-var-ui-section__ul_ovp_tkb_yvb} 이 두 필드는 다음 테이블에서 찾을 수 있습니다. * 아이콘 섹션 대상 시작 관리자 \[sys_sg_navigation_section_destination_applet_launcher\] * 아이콘 섹션 대상 기능 \[sys_sg_navigation_section_destination_button\] * 아이콘 섹션 대상 화면 \[sys_sg_navigation_section_destination_screen\] {#color-var-ui-section__ul_acr_flx_1xb} 이러한 작업 생성에 대한 자세한 내용은 다음 문서를 참조하십시오 [아이콘 UI 섹션 구성](https://servicenow-prod.fluidtopics.net/GSx77D3ALfhCYkSE17JnaA "아이콘 UI 섹션 유형을 사용하여 화면, 시작 관리자 화면 및 기능으로 이동합니다."). UX 테마 속성 \[sys_ux_theme_property\] 테이블에서 색상 변수를 정의할 수 있습니다. 사용 가능한 변수 목록은 아래의 색상 디자인 가이드를 참조하십시오. |   |
[ ]

{#color-var-ui-section__table_nvp_tkb_yvb}

## 모바일 아이콘 UI 섹션 색상 가이드 {#color-var-ui-section__section_ffp_xkg_cxb}

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

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

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

## 경보 색상표 {#color-var-ui-section__section_d55_nbh_cxb}

{#color-var-ui-section__table_otd_c1q_1xb__entry__4}

| 색 이름 | 색상 | 예 | 색 옵션 |
|-|-|-|-|
| 기본 | ![기본 아이콘 색상]() | ![기본 아이콘 예]() | 모바일 변수 :   `기본` 웹 변수 :   `--now-color--primary-1 ` |
| 심각 | ![중요 아이콘 색상]() | ![중요 아이콘 예]() | 모바일 변수 :   `alert--critical-2` 웹 변수 :   `--now-color_alert--critical-2` |
| 높음 | ![높음 아이콘 색상]() | ![높음 아이콘 예]() | 모바일 변수 :   `alert--high-2` 웹 변수 :   `--now-color_alert--high-2` |
| 경고 | ![경고 아이콘 색상]() | ![경고 아이콘 예]() | 모바일 변수 :   `alert--warning-2` 웹 변수 :   `--now-color_alert--warning-2` |
| 보통 | ![보통 아이콘 색상]() | ![보통 아이콘 예]() | 모바일 변수 :   `alert--moderate-2` 웹 변수 :   `--now-color_alert--moderate-2` |
| 정보 | ![정보 아이콘 색상]() | ![정보 아이콘 예]() | 모바일 변수 :   `alert--info-2` 웹 변수 :   `--now-color_alert--info-2` |
| 긍정적 | ![긍정적 아이콘 색상]() | ![긍정적 아이콘 예]() | 모바일 변수 :   `alert--positive-2` 웹 변수 :   `--now-color_alert--긍정적-2` |
| 낮음 | ![낮은 아이콘 색상]() | ![낮음 아이콘 예]() | 모바일 변수 :   `alert--low-2` 웹 변수 :   `--now-color_alert--낮음-2` |
[ ]

{#color-var-ui-section__table_otd_c1q_1xb}

## 그룹화된 색상표 {#color-var-ui-section__section_dff_pbh_cxb}

{#color-var-ui-section__table_eff_pbh_cxb__entry__4}

| 색 이름 | 색상 | 예 | 색 옵션 |
|-|-|-|-|
| 파란색 | ![파란색 아이콘 색상]() | ![파란색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--파란색-2` |
| 갈색 | ![갈색 아이콘 색상]() | ![]() | 웹 변수 :   `--now-color_grouped--갈색-2` |
| 회색 | ![회색 아이콘 색상]() | ![회색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--회색-2` |
| 녹색 | ![녹색 아이콘 색상]() | ![녹색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--green-2` |
| 녹색-노란색 | ![녹색-노란색 아이콘 색상]() | ![녹색-노란색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--녹색-노란색-2` |
| 자홍색 | ![마젠타 아이콘 색상]() | ![마젠타 아이콘 예]() | 웹 변수 :   `--now-color_grouped--마젠타-2` |
| 주황색 | ![주황색 아이콘 색상]() | ![주황색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--주황색-2` |
| 분홍색 | ![분홍색 아이콘 색상]() | ![분홍색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--분홍색-2` |
| 보라색 | ![보라색 아이콘 색상]() | ![보라색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--보라색-2` |
| 청록색 | ![청록색 아이콘 색상]() | ![청록색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--청록색-2` |
| 노란색 | ![노란색 아이콘 색상]() | ![노란색 아이콘 예]() | 웹 변수 :   `--now-color_grouped--노란색-2` |
[ ]

{#color-var-ui-section__table_eff_pbh_cxb}