모바일에 대한 색상 테마 고려 사항
모바일 애플리케이션에서 색상을 사용하여 사용자 경험을 향상시키는 방법에 대해 알아봅니다. 환경에 적합한 색을 사용하면 사용자에게 앱을 안내하고 중요한 정보를 빠르게 식별하는 데 도움이 될 수 있습니다.
색상 사용
앱 전체에서 색상 결정의 일관성을 유지합니다. 특정 작업이나 워크플로우를 색상과 연결하면 사용자가 자신이 올바른 위치에 있지 않다는 것을 알 수 있습니다. 관련 애플릿에 동일하거나 유사한 색상을 사용하는 것이 좋습니다. 예를 들어, 인시던트 관련 애플릿의 경우 파란색, 작업 주문 애플릿의 경우 녹색을 선택하면 사용자가 관련 작업을 빠르게 수행할 수 있습니다.
너무 많은 색상을 사용하지 마십시오. 2-3가지 색상의 단순한 디자인은 더 깔끔하고 접근하기 쉬운 레이아웃을 만듭니다.
색상은 가독성을 높이기 위해 대비를 제공하는 데 사용할 수 있습니다. 텍스트가 표시되는 영역에서는 텍스트와 배경이 저시력 및 색맹 사용자 모두를 수용할 수 있도록 높은 수준의 대비를 갖도록 합니다. WCAG(Web Content Accessibility Guidelines) 2.0을 준수하려면 명암비가 3:1 이상이어야 합니다. 색상 대비를 측정하는 데 도움이 되는 몇 가지 온라인 도구가 있습니다.
고대비의 보색은 사용자의 초점을 안내할 수 있습니다. 이러한 색상을 사용하여 사용자의 주의가 필요한 애플리케이션 영역을 강조 표시합니다.
색상 변수에 대한 일반 지침
- Next Experience 를 활성화해야 합니다.
- 색상 변수는 활성화된 경우에만 Next Experience 적용됩니다. 그렇지 않으면 색 변수가 무시됩니다
- 변수에 사용할 수 있는 색상은 UX 테마 속성 테이블에 있습니다.
색 변수는 UX 테마 속성 [sys_ux_theme_property] 테이블에 정의된 색을 사용합니다.
- 색 변수는 가산적 속성입니다.
- 새 색 변수가 구성되지 않은 경우 기존 색 속성(하드 코딩된 색 사용)은 계속 작동합니다. 그러나 색상 속성은 테마에 따라 요소의 색상을 동적으로 변경할 수 없습니다.
- 색상 변수는 색상 속성을 재정의합니다.
- 색상 변수는 활성화되고 색상 변수 값이 발견된 경우 Next Experience 해당하는 비변수 색상 속성을 재정의합니다.
- 변수를 찾을 수 없거나 값이 없는 경우 색상 속성이 사용됩니다.
- 변수가 비어 있거나 색상 변수 값을 찾을 수 없는 경우 색상 변수는 재정의되지 않습니다. 이러한 경우 색 속성(16진수)이 사용됩니다.
- 색 변수는 명명 규칙을 사용합니다.
- 색 변수의 명명 규칙은 기존 색 속성에
변수접미사를 추가하는 것입니다. - hex 변수와 color 변수를 모두 구성합니다.
구성요소별 색상 변수 지원
이 링크를 통해 색상 변수를 사용하여 모바일 구성요소의 테마를 변경하는 방법을 알아보십시오.