코어 UI의 로고, 색상 및 시스템 기본값 구성

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 03월 12일
  • 소요 시간: 5분
  • 기본 구성 코어 UI 모듈을 사용하여 회사 로고와 색상으로 인스턴스 브랜딩을 하고 기본 시스템 기본값을 설정할 수 있습니다. 인스턴스를 처음 설정하거나 최근 코어 UI에 활성화한 경우 이 위치가 가장 좋은 시작점입니다.

    시작하기 전에

    다음 사항을 수집합니다.
    • 헤더에 사용할 회사 배너 이미지를 가져옵니다. 이미지는 고해상도일 수 있지만 표시될 때 종횡비에 따라 크기가 조정됩니다. 최대 20px 높이까지 확장됩니다.
    • 일반적으로 마케팅 부서에서 회사의 브랜드 색상 16진수 또는 RGB 번호를 받습니다. 이를 사용하여 UI 배경색을 구성하는 방법을 결정합니다.

    필요한 역할: 관리자

    이 태스크 정보

    각 색상 선택 옵션은 색상을 선택할 수 있는 색상 선택기를 제공합니다. 색상 선택기 옆에 있는 텍스트 상자를 사용하면 색상 값을 다음 CSS 형식으로 입력할 수 있습니다.
    • 이름: 빨간색, 녹색 또는 파란색과 같은 미리 정의된 색상 이름
    • RGB 10진수: RGB(102, 153, 204)
    • RGB 16진수: #223344
    HTML 색 이름에 대한 정보는 HTML 색 이름(W3CSchools) 을 참조하십시오.
    주:
    이 정보는 활성화되지 넥스트 경험 않은 인스턴스에만 적용됩니다. 에 대한 넥스트 경험테마 정보는 다음 문서를 참조하십시오 넥스트 경험에서 테마 작업.

    프로시저

    1. 다음으로 이동 모두 > 시스템 속성 > 기본 구성 UI16.
    2. 다음 설정을 변경하여 구성을 완료합니다.
      표 1. 기본 시스템 구성 속성
      레이블 속성 설명
      페이지 헤더 캡션 glide.product.description 로고 옆에 표시되는 텍스트를 변경합니다.
      브라우저 탭 제목 glide.product.name 브라우저 탭에 나타나는 텍스트를 변경합니다.
      사용자 기록에서 오버라이드되지 않은 경우 모든 사용자에 대한 시스템 시간대 glide.sys.default.tz 목록에서 시간대를 선택합니다.

      사용 가능한 시간대 구성을 선택하여 사용자가 사용자 기본 설정에서 선택할 수 있는 시간대를 선택합니다.

      코어 UI 의 배너 이미지 glide.product.image.light 이미지 옆에 있는 + 를 선택하고 로고를 업로드합니다.
      날짜 형식

      시간 형식

      glide.sys.date_format

      glide.sys.time_format

      선택 목록에서 날짜 및 시간 형식을 선택합니다.
      헤더 배경색 css.$navpage-헤더-bg 색상을 선택하거나 입력합니다.
      헤더 배경
      이 색상은 시스템 설정 아래 테마 탭에서 테마 미리 보기의 일부로도 사용됩니다.
      배너 텍스트 색 css.$navpage-header-color 색상을 선택하거나 입력합니다.
      배너 텍스트 색
      이 색상은 시스템 설정 아래 테마 탭에서 테마 미리 보기의 일부로도 사용됩니다.
      헤더 구분선 색 css.$navpage-header-divider-color 색상을 선택하거나 입력합니다.
      헤더 구분선 스트라이퍼
      탐색 머리글/바닥글 css.$navpage-탐색-배경 색상을 선택하거나 입력합니다.
      탐색
      탐색 배경 확장 항목 css.$subnav-배경-색상 색상을 선택하거나 입력합니다.
      색상 차이를 표시하는 확장된 모듈이 있는 애플리케이션
      애플리케이션 네비게이터의 코어 UI 모듈 텍스트 색 css.$navpage-탐색-색상-서브 색상을 선택하거나 입력합니다.
      즐겨찾기, 커넥트 목록
      탐색에서 선택된 탭의 배경색 css.$navpage-탐색-선택-bg 색상을 선택하거나 입력합니다.
      선택한 탭
      탐색에서 선택된 탭의 구분선 막대 색 css.$nav-highlight-bar-active
      모든 애플리케이션 탭이 선택되어 있고 화살표가 탭 아래의 선이 파란색임을 나타내는 애플리케이션 네비게이터
      이 색상은 시스템 설정 아래 테마 탭에서 테마 미리 보기의 일부로도 사용됩니다.
      선택되지 않은 탐색 탭의 구분선 색 css.$nav-highlight-bar-inactive
      모든 애플리케이션 탭을 선택하고 화살표가 다른 탭을 가리키면 선의 색이 다르다는 것을 알 수 있는 애플리케이션 네비게이터
      탐색 구분 기호 색 css.$nav-hr-color 색상을 선택하거나 입력합니다.
      구분 기호
      네비게이터 및 사이드바의 배경 css.$navpage-nav-bg-sub 색상을 선택하거나 입력합니다.
      네비게이터, 사이드바
      에 대해 현재 선택한 탐색 탭 아이콘 색상 코어 UI css.$navpage-탐색-선택-색상 색상을 선택하거나 입력합니다.
      탐색 아이콘
      선택되지 않은 탐색 탭 아이콘과 즐겨찾기 아이콘 색상 css.$navpage-탐색-선택되지 않음-색상 색상을 선택하거나 입력합니다.

      선택되지 않은 즐겨찾기 아이콘

      테두리 색상 코어 UI css.$navpage-탐색-테두리 색상을 선택하거나 입력합니다. 커넥트 채팅 사이드바에 있는 대화 필터링 검색 상자의 테두리에도 영향을 줍니다.
      필터 탐색기
      선택한 기본 테마 glide.ui.base_theme.selected_theme 메인 컨텐츠(애플리케이션 네비게이터와 헤더 이외의 모든 컨텐츠)를 La Jolla와 Cobalt 테마 간에 전환합니다.
      대부분의 설정에서 변경하면 페이지가 새로 고쳐지고 변경 내용의 미리 보기가 표시됩니다. 이러한 변경 사항은 사용자만 볼 수 있습니다. 일부 설정에서는 로그아웃했다가 다시 로그인해야 변경 내용을 볼 수 있습니다.
    3. 페이지 상단 또는 하단에서 저장을 선택합니다.

    결과

    구성 변경 내용을 저장하면 UI 개인화 옵션에서 시스템 테마를 선택하는 모든 사용자에게 새 구성 색상이 표시됩니다.

    라호야와 코발트 테마 비교

    La Jolla 테마는 의 새로운 브랜드 테마 ServiceNow입니다. 로 업그레이드 Madrid하면 테마가 La Jolla 테마로 자동 업그레이드됩니다. 시스템 테마에 대한 사용자 지정은 업그레이드되지 않습니다. 아래 목록의 스타일을 사용하여 스타일을 새 테마나 이전 테마로 업그레이드하거나 되돌리십시오.

    다음으로 이동하여 이러한 스타일을 변경합니다. 시스템 속성 > 기본 구성 UI16.

    표 2. La Jolla 및 Cobalt 테마 스타일
    속성 라호야 스타일 코발트 스타일
    헤더 배경색

    css.$navpage-헤더-bg

    #ffffff #303a46
    헤더 구분선 색

    css.$navpage-header-divider-color

    #5a7f71 #455464
    탐색 머리글/바닥글

    css.$navpage-탐색-배경

    #293e40 #303A46
    탐색 배경 확장 항목

    css.$subnav-배경-색상

    #213234 #303a46
    UI16의 모듈 텍스트 색

    css.$navpage-탐색-색상-서브

    #bec1c6 #bec1c6
    탐색에서 선택된 탭의 배경색

    css.$navpage-탐색-선택-bg

    #2f4fe #4b545f
    탐색에서 선택된 탭의 구분선 막대 색

    css.$nav-highlight-bar-active

    #82c9b8 #278efc
    선택되지 않은 탐색 탭의 구분선 색

    css.$nav-highlight-bar-inactive

    #213234 #81878e
    탐색 구분 기호 색

    css.$nav-hr-color

    #293e40 #303a46
    네비게이터 및 사이드바의 배경

    css.$navpage-nav-bg-sub

    #293e40 #455464
    UI16용으로 현재 선택한 탐색 탭 아이콘 색상

    css.$navpage-탐색-선택-색상

    #82c9b8 #ffffff
    선택되지 않은 탐색 탭 아이콘과 즐겨찾기 아이콘 색상

    css.$navpage-탐색-선택되지 않음-색상

    #bec1c6 #bec1c6
    UI16 테두리 색상

    css.$navpage-탐색-테두리

    #7a828a #ddd
    선택한 기본 테마

    glide.ui.base_theme.selected_theme

    라호야 SysID: c92c1ee153002300dda1ddeeff7b125b 코발트 SysID: 6f3c9ae153002300dda1ddeeff7b124a