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

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 6분

    • 색상 변수를 사용하여 모바일 맵 화면에서 테마를 변경하는 방법 알아보기

    모바일 아이콘에는 아이콘의 모양을 정의하는 데 사용되는 모양 설정 섹션이 있습니다. FontColorVariable 스타일 옵션을 사용하여 색 변수 a 색을 사용합니다.

    이 스타일을 사용하여 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: 경보--낮음-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--magenta-2
    • 옵션 2:--now-color_grouped--magenta-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