---
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


---

# 입력 설명에 대한 색상 변수 지원

# 입력 설명에 대한 색상 변수 지원 {#ariaid-title1}

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

색상 변수를 사용하여 모바일 입력 설명의 테마를 변경하는 방법을 알아봅니다.

|-|-|
| 입력의 설명 필드에서 색상 변수를 사용하여 텍스트 색상을 제어합니다. 설명 필드가 <kbd class="ph userinput">HTML</kbd>로 구성된 경우 입력의 설명 필드에서 색상 변수를 사용하여 텍스트 색상을 제어합니다. 예를 들어 `#FF0000`와 같은 색상 16진수 값 외에도 `--now-color-primary-0`과 같은 색상 변수를 사용할 수 있습니다. 사용 가능한 변수 목록은 다음 문서를 참조하십시오 [모바일에 대한 색상 테마 고려 사항](https://servicenow-prod.fluidtopics.net/bdmKJQOgQP751VFVfWb_BA "모바일 애플리케이션에서 색상을 사용하여 사용자 경험을 개선하는 방법을 알아봅니다. 환경에 적합한 색을 사용하면 사용자에게 앱을 안내하고 중요한 정보를 빠르게 식별할 수 있습니다."). 입력에 대한 자세한 내용은 다음 문서를 참조하십시오 [입력 양식 화면 구성](https://servicenow-prod.fluidtopics.net/Less~RvlY2eArv5AXjp1hQ "사용자가 모바일 앱에서 기록 목록을 볼 수 있도록 입력 매개변수를 구성합니다. 목록에서 기록에 액세스하려면 사용자는 기록 이름을 탭하기만 하면 됩니다."). |   |
[ ]

{#color-var-input-description__table_vwc_wg2_zvb}

## 입력 설명 색상 가이드 {#color-var-input-description__section_vvh_wzp_1xb}

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

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

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