모바일에 대한 색상 테마 고려 사항

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 3분

    • 모바일 애플리케이션에서 색상을 사용하여 사용자 경험을 개선하는 방법을 알아봅니다. 환경에 적합한 색상을 사용하면 앱을 통해 사용자를 안내하고 중요한 정보를 빠르게 식별하는 데 도움이 될 수 있습니다.

    색상 사용

    앱 전체에서 색상 결정의 일관성을 유지합니다. 특정 작업 또는 워크플로우를 색상과 연결하면 사용자가 올바른 위치에 있지 않은 때를 알 수 있습니다. 관련 애플릿에 동일하거나 유사한 색상을 사용하는 것이 좋습니다. 예를 들어, 인시던트 관련 애플릿에 파란색을 선택하고 작업 주문 애플릿에 녹색을 선택하면 사용자가 관련 작업에 빠르게 액세스할 수 있습니다.

    너무 많은 색상을 사용하지 마십시오. 2-3가지 색상의 단순한 디자인으로 더 깔끔하고 접근하기 쉬운 레이아웃이 됩니다.

    색상은 가독성을 높이기 위해 대비를 제공하는 데 사용할 수 있습니다. 텍스트가 나타나는 영역에서는 저시력 사용자와 색맹 사용자를 모두 수용할 수 있도록 텍스트와 배경의 대비가 높은지 확인합니다. WCAG(Web Content Accessibility Guidelines) 2.0을 준수하려면 최소 3:1의 명암비가 필요합니다. 색상 대비를 측정하는 데 도움이 되는 몇 가지 도구가 온라인에 있습니다.

    대비가 높은 보색은 사용자의 초점을 안내할 수 있습니다. 이러한 색상을 사용하여 사용자의 주의가 필요한 애플리케이션 영역을 강조 표시합니다.

    색상 변수에 대한 일반 지침

    색 변수를 사용하기 전에 다음 지침을 염두에 두십시오.
    넥스트 경험 을 활성화해야 합니다.
    색상 변수는 활성화된 경우에만 넥스트 경험 적용됩니다. 그렇지 않으면 색상 변수가 무시됩니다
    변수에 사용할 수 있는 색상은 UX 테마 속성 테이블에 있습니다.

    색상 변수는 UX 테마 속성 [sys_ux_theme_property] 테이블에 정의된 색상을 사용합니다.

    색상 변수는 추가 속성입니다.
    기존 색상 속성(하드 코딩된 색상 사용)은 새 색상 변수가 구성되지 않은 경우 계속 작동합니다. 그러나 color 속성은 테마에 따라 요소의 색상을 동적으로 변경할 수 없습니다.
    색상 변수는 색상 속성을 재정의합니다.
    색상 변수는 활성화되고 색상 변수 값이 발견된 경우 넥스트 경험 해당하는 비변수 색상 속성을 재정의합니다.
    예를 들어 이 UI 규칙 작업 구성이 다음과 같이 구성되어 있습니다.
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    및 이 구성을 사용하는 웹 색상 맵:
    {“--now-color-primary-0": “#22ff00”}
    이 UI 규칙 작업에 대해 해결된 배경색이 #22ff00.
    색 속성은 변수를 찾을 수 없거나 값이 없는 경우에 사용됩니다.
    변수가 비어 있거나 색상 변수 값을 찾을 수 없는 경우 색상 변수는 재정의되지 않습니다. 이러한 경우 색 속성(HEX)이 사용됩니다.
    예를 들어, 이 구성이 다음과 같이 제공됩니다.
    {“BackgroundColorVariable”: “", “BackgroundColor”: “#3f2c11”}
    색상 값은 #3f2c11입니다.
    이 구성이 주어지면 다음과 같습니다. 
    {“BackgroundColorVariable”: “--now-color-primary-0", “BackgroundColor”: “#3f2c11”}
    및 이 구성을 사용하는 웹 색상 맵: 
    {“--now-color-primary-1": “#1134a1”}
    배경색 값은 #3f2c11입니다.
    색상 변수는 명명 규칙을 사용합니다.
    색상 변수의 명명 규칙은 기존 색상 속성에 Variable 접미사를 추가하는 것입니다.
    예를 들어 BackgroundColorVariable은 BackgroundColor에 사용됩니다
    16진수 및 색상 변수 모두 구성

    구성요소별 색상 변수 지원

    다음 링크를 통해 색상 변수를 사용하여 모바일 구성요소의 테마를 변경하는 방법을 알아보십시오.