아이콘에 대한 색상 변수 지원

Washington DC Mobile 구성 및 탐색

Release

washingtondc

ft:locale

ko-KR

ft:publication_title

Washington DC Mobile 구성 및 탐색

ft:clusterId

mobile

bundleId

mobile

workflow

Platform

아이콘에 대한 색상 변수 지원

릴리스 버전: Washingtondc

업데이트 날짜 2024년 02월 01일

읽기6분

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


모바일 아이콘에는 아이콘의 모양을 정의하는 데 사용되는 모양 설정 섹션이 있습니다. FontColorVariable 스타일 옵션을 사용하면 색상 변수를 색상으로 사용할 수 있습니다. 이 스타일을 사용하여 UX 테마 속성 [sys_ux_theme_property] 테이블에서 색상 변수를 정의할 수 있습니다. 사용 가능한 변수 목록은 아래의 색상 디자인 가이드를 참조하십시오. 맵 화면 생성에 대한 자세한 내용은 을 참조하십시오 아이콘 UI 섹션 구성. 모바일에서 아이콘을 만드는 방법에 대한 자세한 내용은 을 참조하십시오 모바일 아이콘.

모바일 아이콘 색상 안내선

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

경보 색상표: 경보 색상표 색상은 중요한 상태, 상태 및 작업을 강조 표시합니다. 장식이나 정리를 위한 것이 아니라 특정 의미를 전달하기 위해 경고 색상을 사용합니다.
그룹화된 색상표: 그룹화된 색상표 색상은 산업 계열의 색상 규칙을 따릅니다. 색상이 지정된 항목이 특정 산업 또는 사업부와 연관되어 있음을 나타내려면 이러한 색상을 사용합니다. 각 색의 의미는 컨텍스트에 따라 다르지만 앱 내에서 일관되게 유지되어야 합니다.

각 지지 색상에는 평가 가능한 옵션을 포함하여 세 가지 옵션이 있습니다. 텍스트가 포함되지 않은 아이콘에 접근 가능한 색상 옵션을 사용하여 사용자의 탐색 기능을 개선하는 것이 좋습니다.

표 1. 경보 색상표
색 이름	예	색 변수
중요		모바일 변수 옵션 1: `alert--critical-2` 옵션 2: `alert--critical-3` 옵션 3(액세스 가능): `alert--critical-4` 웹 변수 옵션 1:`--now-color_alert--critical-2` 옵션 2:`--now-color_alert--critical-3` 옵션 3(액세스 가능):`--now-color_alert--critical-4`
높음		모바일 변수 옵션 1: `alert--high-2` 옵션 2: `alert--high-3` 옵션 3(접근 가능): `alert--high-4` 웹 변수 옵션 1:`--now-color_alert--high-2` 옵션 2:`--now-color_alert--high-3` 옵션 3(접근 가능):`--now-color_alert--high-4`
경고		모바일 변수 옵션 1: `alert--warning-2` 옵션 2: `alert--warning-3` 옵션 3(액세스 가능): `alert--warning-4` 웹 변수 옵션 1:`--now-color_alert--warning-2` 옵션 2:`--now-color_alert--warning-3` 옵션 3(액세스 가능):`--now-color_alert--warning-4`
보통		모바일 변수 옵션 1 `: alert--moderate-2` 옵션 2 `: alert--moderate-3` 옵션 3(액세스 가능): `alert--moderate-4` 웹 변수 옵션 1:`--now-color_alert--moderate-2` 옵션 2:`--now-color_alert--moderate-3` 옵션 3(접근 가능):`--now-color_alert--moderate-4`
정보		모바일 변수 옵션 1: `alert--info-2` 옵션 2: `alert--info-3` 옵션 3(액세스 가능): `alert--info-4` 웹 변수 옵션: 1`--now-color_alert--info-2` 옵션 2:`--now-color_alert--info-3` 옵션 3(접근 가능):`--now-color_alert--info-4`
긍정적		모바일 변수 옵션 1: `alert--positive-2` 옵션 2: `alert--positive-3` 옵션 3(액세스 가능): `alert--positive-4` 웹 변수 옵션 1:`--now-color_alert--positive-2` 옵션 2:`--now-color_alert--positive-3` 옵션 3(접근 가능):`--now-color_alert--positive-4`
낮음		모바일 변수 옵션 1: `alert--low-2` 옵션 2: `alert--low-3` 옵션 3(액세스 가능): `alert--low-4` 웹 변수 옵션 1:`--now-color_alert--low-2` 옵션 2:`--now-color_alert--low-3` 옵션 3(접근 가능):`--now-color_alert--low-4`

표 2. 그룹화된 색상표
색 이름	예	색상 옵션
파란색		웹 변수 옵션 1:`--now-color_grouped--blue-2` 옵션 2:`--now-color_grouped--blue-3` 옵션 3(액세스 가능):`--now-color_grouped--blue-4`
갈색		웹 변수 옵션 1:`--now-color_grouped--brown-2` 옵션 2:`--now-color_grouped--brown-3` 옵션 3(접근 가능):`--now-color_grouped--brown-4`
회색		웹 변수 옵션 1:`--now-color_grouped--gray-2` 옵션 2:`--now-color_grouped--gray-3` 옵션 3(접근 가능):`--now-color_grouped--gray-4`
녹색		웹 변수 옵션 1:`--now-color_grouped--green-2` 옵션 2:`--now-color_grouped--green-3` 옵션 3(접근 가능):`--now-color_grouped--green-4`
녹색-노란색		웹 변수 옵션 1:`--now-color_grouped--green-yelow-2` 옵션 2:`--now-color_grouped--green-yelow-3` 옵션 3(접근 가능):`--now-color_grouped--green-yelow-4`
자홍색		웹 변수 옵션 1:`--now-color_grouped--자홍색-2` 옵션 2:`--now-color_grouped--자홍색-3` 옵션 3(액세스 가능):`--now-color_grouped--magenta-4`
주황색		웹 변수 옵션 1:`--now-color_grouped--orange-2` 옵션 2"`--now-color_grouped--orange-3` 옵션 3(접근 가능):`--now-color_grouped--orange-4`
분홍색		웹 변수 옵션 1:`--now-color_grouped--pink-2` 옵션 2:`--now-color_grouped--pink-3` 옵션 3(접근 가능):`--now-color_grouped--pink-4`
보라색		웹 변수 옵션 1:`--now-color_grouped--purple-2` 옵션 2:`--now-color_grouped--purple-3` 옵션 3(접근 가능):`--now-color_grouped--purple-4`
청록색		웹 변수 옵션 1:`--now-color_grouped--teal-2` 옵션 2:`--now-color_grouped--teal-3` 옵션 3(접근 가능):`--now-color_grouped--teal-4`
노란색		웹 변수 옵션 1 : `--now-color_grouped--yellow-2` 옵션 2 : `--now-color_grouped--yellow-3` 옵션 3(접근 가능):`--now-color_grouped--yellow-4`