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

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

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

    색상 사용

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

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

    색상을 사용하여 대비를 제공하여 가독성을 높일 수 있습니다. 텍스트가 표시되는 영역에서는 시력이 약한 사용자와 색맹 사용자 모두를 수용할 수 있도록 텍스트와 배경의 대비가 높은지 확인하세요. WCAG(웹 콘텐츠 접근성 지침) 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진수 및 색상 변수 모두 구성

    구성요소별 색상 변수 지원

    이러한 링크를 사용하여 색상 변수를 사용하여 모바일 구성요소에서 테마를 변경하는 방법을 알아보십시오.