--- 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) 소요 시간: 6분 색상 변수를 사용하여 모바일 맵 화면에서 테마를 변경하는 방법 알아보기 |-|-| | 모바일 아이콘에는 아이콘의 모양을 정의하는 데 사용되는 모양 설정 섹션이 있습니다. FontColorVariable 스타일 옵션을 사용하여 색 변수 a 색을 사용합니다. 이 스타일을 사용하여 UX 테마 속성 \[sys_ux_theme_property\] 테이블에서 색상 변수를 정의할 수 있습니다. 사용 가능한 변수 목록은 아래의 색상 디자인 가이드를 참조하십시오. 맵 화면 생성에 대한 자세한 내용은 다음 문서를 참조하십시오 [아이콘 UI 섹션 구성](https://servicenow-prod.fluidtopics.net/GSx77D3ALfhCYkSE17JnaA "아이콘 UI 섹션 유형을 사용하여 화면, 시작 관리자 화면 및 기능으로 이동합니다."). 모바일에서 아이콘을 생성하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 [모바일 아이콘](https://servicenow-prod.fluidtopics.net/irTZV3v0WewJ9EPY265vCA "아이콘을 사용하여 모바일 애플리케이션의 탐색 및 작업에 대한 고유 식별자를 제공합니다."). | | [ ] {#color-var-mobile-icons__table_st2_mtb_yvb} ## 모바일 아이콘 색상 가이드 {#color-var-mobile-icons__section_ffp_xkg_cxb} 색상 변수는 다음과 같이 나뉩니다. 설계 가이드라인을 사용하여 사용 사례에 적합한 색상 변수를 식별합니다. 경보 색상표 : 경보 색상표 색상은 중요한 상태, 상태 및 작업을 강조 표시합니다. 경보 색상은 장식이나 정리보다는 특정 의미를 전달할 때 사용합니다. 그룹화된 색상표 : 그룹화된 색상표 색상은 산업 라인의 색상 규칙을 따릅니다. 이 색상을 사용하여 색상이 지정된 항목이 특정 산업 또는 사업부와 관련이 있음을 보여줍니다. 각 색상의 의미는 컨텍스트에 따라 다르지만 앱 내에서 일관성을 유지해야 합니다. 각 지원 색상에는 평가 가능한 옵션을 포함하여 세 가지 옵션이 있습니다. 텍스트가 포함되지 않은 아이콘에는 접근 가능한 색상 옵션을 사용하여 사용자의 탐색 용이성을 개선하는 것이 좋습니다. {#color-var-mobile-icons__table_otd_c1q_1xb__entry__3} | 색 이름 | 예 | 색상 변수 | |-|-|-| | 심각 | ![중요 모바일 아이콘]() | 모바일 변수 : * 옵션 1: `alert--critical-2` * 옵션 2: `alert--critical-3` * 옵션 3(액세스 가능): `alert--critical-4` {#color-var-mobile-icons__ul_hqj_lzh_cxb} 웹 변수 : * 옵션 1:`--now-color_alert--critical-2` * 옵션 2:`--now-color_alert--critical-3` * 옵션 3(접근 가능):`--now-color_alert--critical-4` {#color-var-mobile-icons__ul_wvy_lzh_cxb} | | 높음 | ![높음 모바일 아이콘]() | 모바일 변수 : * 옵션 1: `alert--high-2` * 옵션 2: `alert--high-3` * 옵션 3(접근 가능): `alert--high-4` {#color-var-mobile-icons__ul_lsh_rxm_cxb} 웹 변수 : * 옵션 1:`--now-color_alert--high-2` * 옵션 2:`--now-color_alert--high-3` * 옵션 3(접근 가능):`--now-color_alert--high-4` {#color-var-mobile-icons__ul_msh_rxm_cxb} | | 경고 | ![경고 모바일 아이콘]() | 모바일 변수 : * 옵션 1: `alert--warning-2` * 옵션 2: `alert--warning-3` * 옵션 3(접근 가능): `alert--warning-4` {#color-var-mobile-icons__ul_hxg_5xm_cxb} 웹 변수 : * 옵션 1:`--now-color_alert--warning-2` * 옵션 2:`--now-color_alert--warning-3` * 옵션 3(액세스 가능):`--now-color_alert--warning-4` {#color-var-mobile-icons__ul_ixg_5xm_cxb} | | 보통 | ![보통 모바일 아이콘]() | 모바일 변수 : * 옵션 1: `alert--moderate-2` * 옵션 2: `alert--moderate-3` * 옵션 3(접근 가능): `alert--moderate-4` {#color-var-mobile-icons__ul_upy_vxm_cxb} 웹 변수 : * 옵션 1:`--now-color_alert--moderate-2` * 옵션 2:`--now-color_alert--moderate-3` * 옵션 3(접근 가능):`--now-color_alert--moderate-4` {#color-var-mobile-icons__ul_vpy_vxm_cxb} | | 정보 | ![정보 모바일 아이콘]() | 모바일 변수 : * 옵션 1: `alert--info-2` * 옵션 2: `alert--info-3` * 옵션 3(접근 가능): `alert--info-4` {#color-var-mobile-icons__ul_bhs_xxm_cxb} 웹 변수 : * 옵션: 1`--now-color_alert--info-2` * 옵션 2:`--now-color_alert--info-3` * 옵션 3(접근 가능):`--now-color_alert--info-4` {#color-var-mobile-icons__ul_chs_xxm_cxb} | | 긍정적 | ![양상의 모바일 아이콘]() | 모바일 변수 : * 옵션 1: `alert--positive-2` * 옵션 2: `alert--positive-3` * 옵션 3(접근 가능): `alert--positive-4` {#color-var-mobile-icons__ul_hy3_1ym_cxb} 웹 변수 : * 옵션 1:`--now-color_alert--positive-2` * 옵션 2:`--now-color_alert--positive-3` * 옵션 3(접근 가능):`--now-color_alert--positive-4` {#color-var-mobile-icons__ul_iy3_1ym_cxb} | | 낮음 | ![낮음 모바일 아이콘]() | 모바일 변수 : * 옵션 1: `alert--low-2` * 옵션 2: `경보--낮음-3` * 옵션 3(접근 가능): `alert--low-4` {#color-var-mobile-icons__ul_avy_bym_cxb} 웹 변수 : * 옵션 1:`--now-color_alert--low-2` * 옵션 2:`--now-color_alert--low-3` * 옵션 3(접근 가능):`--now-color_alert--low-4` {#color-var-mobile-icons__ul_bvy_bym_cxb} | [표 1. 경보 색상표] {#color-var-mobile-icons__table_otd_c1q_1xb} {#color-var-mobile-icons__table_f5d_c1q_1xb__entry__3} | 색 이름 | 예 | 색 옵션 | |-|-|-| | 파란색 | ![파란색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--blue-2` * 옵션 2:`--now-color_grouped--blue-3` * 옵션 3(접근 가능):`--now-color_grouped--blue-4` {#color-var-mobile-icons__ul_lqy_gym_cxb} | | 갈색 | ![갈색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--brown-2` * 옵션 2:`--now-color_grouped--brown-3` * 옵션 3(접근 가능):`--now-color_grouped--brown-4` {#color-var-mobile-icons__ul_kcy_kym_cxb} | | 회색 | ![회색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--gray-2` * 옵션 2:`--now-color_grouped--gray-3` * 옵션 3(접근 가능):`--now-color_grouped--gray-4` {#color-var-mobile-icons__ul_ols_lym_cxb} | | 녹색 | ![녹색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--green-2` * 옵션 2:`--now-color_grouped--green-3` * 옵션 3(접근 가능):`--now-color_grouped--green-4` {#color-var-mobile-icons__ul_fy1_nym_cxb} | | 녹색-노란색 | ![녹색-노란색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--green-yelow-2` * 옵션 2:`--now-color_grouped--green-yelow-3` * 옵션 3(접근 가능):`--now-color_grouped--green-yelow-4` {#color-var-mobile-icons__ul_l5v_nym_cxb} | | 자홍색 | ![마젠타 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--magenta-2` * 옵션 2:`--now-color_grouped--magenta-3` * 옵션 3(액세스 가능):`--now-color_grouped--magenta-4` {#color-var-mobile-icons__ul_vlk_pym_cxb} | | 주황색 | ![주황색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--orange-2` * 옵션 2"`--now-color_grouped--orange-3` * 옵션 3(접근 가능):`--now-color_grouped--orange-4` {#color-var-mobile-icons__ul_xyn_qym_cxb} | | 분홍색 | ![분홍색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--pink-2` * 옵션 2:`--now-color_grouped--pink-3` * 옵션 3(접근 가능):`--now-color_grouped--pink-4` {#color-var-mobile-icons__ul_xsm_rym_cxb} | | 보라색 | ![보라색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--purple-2` * 옵션 2:`--now-color_grouped--purple-3` * 옵션 3(접근 가능):`--now-color_grouped--purple-4` {#color-var-mobile-icons__ul_dbl_sym_cxb} | | 청록색 | ![청록색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--teal-2` * 옵션 2:`--now-color_grouped--teal-3` * 옵션 3(접근 가능):`--now-color_grouped--teal-4` {#color-var-mobile-icons__ul_egx_tym_cxb} | | 노란색 | ![노란색 모바일 아이콘]() | 웹 변수 : * 옵션 1:`--now-color_grouped--yellow-2` * 옵션 2:`--now-color_grouped--yellow-3` * 옵션 3(접근 가능):`--now-color_grouped--yellow-4` {#color-var-mobile-icons__ul_w3p_vym_cxb} | [표 2. 그룹화된 색상표] {#color-var-mobile-icons__table_f5d_c1q_1xb}