---
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) 소요 시간: 3분

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

## 색상 사용 {#color-guide-landing__section_rgn_mth_vwb}

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

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

색상을 사용하여 대비를 제공하여 가독성을 높일 수 있습니다. 텍스트가 표시되는 영역에서는 시력이 약한 사용자와 색맹 사용자 모두를 수용할 수 있도록 텍스트와 배경의 대비가 높은지 확인하세요. WCAG(웹 콘텐츠 접근성 지침) 2.0을 준수하려면 명암비가 3:1 이상이어야 합니다. 색상 대비를 측정하는 데 도움이 되는 몇 가지 온라인 도구가 있습니다.

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

## 색 변수에 대한 일반 가이드라인 {#color-guide-landing__section_z3c_xhv_xvb}

색상 변수 사용을 시작하기 전에 다음 가이드라인을 염두에 두십시오.

넥스트 경험 활성화되어야 합니다.
:   색상 변수는 활성화된 경우에만 넥스트 경험 적용됩니다. 그렇지 않으면 색상 변수가 무시됩니다

변수에 사용할 수 있는 색상은 UX 테마 속성 테이블에 있습니다.

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

색상 변수는 덧셈 속성입니다.
:   새 색상 변수가 구성되지 않은 경우 기존 색상 속성(하드 코딩된 색상 사용)은 계속 작동합니다. 그러나 색상 속성은 테마에 따라 요소의 색상을 동적으로 변경할 수 없습니다.

색상 변수는 색상 속성을 재정의합니다.
:   색상 변수가 활성화되고 색상 변수 값이 발견된 경우 넥스트 경험 해당 비변수 색상 속성을 재정의합니다.
:   예를 들어 다음과 같은 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`입니다.

색상 변수는 명명 규칙을 사용합니다.
:   색상 변수의 명명 규칙은 기존 색상 속성에 `변수` 접미사를 추가하는 것입니다.
:   예를 들어 `BackgroundColorVariable`은 `BackgroundColor`에 사용됩니다

16진수 및 색상 변수 모두 구성
:

## 구성요소별 색상 변수 지원 {#color-guide-landing__section_xrp_fj5_cxb}

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

* [UI 규칙에 대한 색 변수 지원](https://servicenow-prod.fluidtopics.net/4HluAQhB49UuRRUzT0DcWA "색상 변수를 사용하여 모바일 UI 규칙의 테마를 변경하는 방법에 대해 알아봅니다.")
* [아이콘 UI 섹션에 대한 색상 변수 지원](https://servicenow-prod.fluidtopics.net/0guUJU9CGac~7uj8FaJiXA "색상 변수를 사용하여 모바일 아이콘 UI 섹션의 테마를 변경하는 방법에 대해 알아봅니다.")
* [맵 아이콘에 대한 색상 변수 지원](https://servicenow-prod.fluidtopics.net/hjNiQrUH692Aj8M9fcBlkA "색상 변수를 사용하여 모바일 맵 아이콘의 테마를 변경하는 방법 알아보기")
* [아이콘에 대한 색상 변수 지원](https://servicenow-prod.fluidtopics.net/G4XegVBSjgCEWgT3Iq8qkw "색상 변수를 사용하여 모바일 맵 화면에서 테마를 변경하는 방법 알아보기")
* [카드 뷰 템플릿에 대한 색상 변수 지원](https://servicenow-prod.fluidtopics.net/KYZRHMptQlM4bOXg2APtPA "색상 변수를 사용하여 모바일 카드 뷰에서 테마를 변경하는 방법에 대해 알아봅니다.")
* [카드 뷰 버튼에 대한 색상 변수 지원](https://servicenow-prod.fluidtopics.net/K7xoth_UQjuAgCKC32xp1Q "색상 변수를 사용하여 모바일 카드 뷰 버튼의 테마를 변경하는 방법에 대해 알아봅니다.")
* [입력 설명에 대한 색상 변수 지원](https://servicenow-prod.fluidtopics.net/bOuuB3Ja5NIQrkPATV9BmA "색상 변수를 사용하여 모바일 입력 설명의 테마를 변경하는 방법을 알아봅니다.")
{#color-guide-landing__ul_o3v_4j5_cxb}