구성요소 편집

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

    • 브랜드에 더 적합하고 접근성 적합성 표준을 충족하도록 개별 구성요소를 편집 테마 작성기 합니다. 편집할 수 있는 테마 후크는 각 구성요소 유형에 따라 다릅니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    세분화된 역할에 대한 자세한 내용은 다음 문서를 참조하십시오 Granular admin roles.

    이 태스크 정보

    에서 편집 테마 작성기 할 수 있는 구성요소가 에서 ServiceNow AI Platform 설계 시스템생성되었습니다. 자세한 내용은 개발자 사이트의 ServiceNow넥스트 경험 구성요소를 참조하십시오.

    구성 요소 편집에 통합 탐색 대한 지침은 문서를 참조하십시오 구성요소를 통합 탐색 사용하여 브랜드와 정렬.

    접근성 위반의 총 수는 빨간색 번호 배지 아이콘 접근성 검사기 배지 에 표시됩니다. 접근성 검사기 패널 옆에 있습니다.

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > 테마 작성기.
      방문 페이지가 테마 작성기 홈페이지 보기에 표시됩니다.
    2. 페이지 드롭다운 목록을 사용하여 편집기 페이지 뷰를 선택합니다.
      그림 1. 페이지 드롭다운 목록
      편집기가 선택된 페이지 드롭다운 목록입니다.
    3. 테마 드롭다운 목록에서 구성요소를 편집할 테마를 선택합니다.
    4. 편집기 페이지 뷰에서 구성요소 스타일 탭을 선택합니다.
      구성요소 스타일이 그래픽으로 나열됩니다.
      구성요소 스타일.
    5. 편집 탭을 선택합니다.
      구성요소 스타일 편집 탭.
      주:
      편집할 수 있는 구성요소가 표시됩니다. 편집하려는 구성요소를 찾기 위해 구성요소 목록을 필터링하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 미리 보기.
    6. 편집할 구성요소를 선택하여 구성 가능한 스타일 패널에 액세스합니다.
      편집 페이지에 나열된 구성요소를 볼 때 일부 구성요소에 다음 기호가 표시될 수 있습니다.
      접근성 오류입니다.
      주:
      액세스 가능성 경고 기호는 선택한 구성 요소의 색상 대비가 색상 대비에 대한 WCAG(Web Content Accessibility Guidelines) 2.1 액세스 표준을 준수하지 않음을 나타냅니다. 접근성 위반이 있는 구성 요소 편집에 대한 자세한 내용은 다음 문서를 참조하십시오 접근성 표준에 맞게 구성요소 조정.
    7. 구성 가능한 스타일 패널에서 필요에 따라 선택한 구성요소에 사용할 수 있는 테마 후크를 편집합니다.
      그림 2. 구성 가능한 스타일 패널
      구성 가능한 스타일 패널.

      사용 가능한 편집 가능한 테마 후크는 선택한 구성요소 유형에 따라 다릅니다. 예를 들어 배지 구성요소를 선택하면 배지의 색상과 접근성 후크를 편집할 수 있습니다. 텍스트 링크 구성 요소를 선택하면 기본 색상과 접근성 후크를 편집할 수 있습니다.

      주:
      구성 요소별 후크를 업데이트한 후에는 전역 스타일에서 변경한 내용이 구성 요소 편집에 영향을 주지 않습니다. 구성 요소별 스타일은 전역으로 정의된 스타일보다 우선합니다.
    8. 편집할 색상을 선택하면 색상 선택기가 열립니다.
      그림 3. 색 선택기
      색 선택기.
      주:
      기본적으로 색 선택기에는 구성요소에 사용 가능한 모든 색이 표시됩니다. 내 색상 탭을 사용하여 미리 정의된 색상 목록에서 선택하거나 사용자 지정 탭을 선택하여 원하는 특정 색상 모델(HEX, RGB 또는 HSL)을 선택합니다.
    9. 색상 변경을 완료했으면 변경 내용 저장을 선택합니다.
    10. 편집할 도형을 선택하는 경우 선택기 모달을 사용하여 테두리 너비와 모서리 반경을 선택합니다.
    11. 모양 변경을 완료했으면 변경 내용 저장을 선택합니다.
    12. 편집할 글꼴 집합 또는 글꼴 면을 선택하면 선택기 모달이 열립니다.
      그림 4. 글꼴 집합 모달 편집
      글꼴 집합 선택기 모달을 편집합니다.
      주:
      사용자 지정 글꼴을 업로드한 경우 모달에 표시되어 선택할 수 있습니다. 선택기 모달에서 직접 사용자 지정 글꼴을 업로드하여 테마 전체에서 사용할 수도 있습니다. 자세한 내용은 테마에 사용자 지정 글꼴 업로드 문서를 참조하십시오.
    13. 글꼴 변경을 완료했으면 변경 내용 저장을 선택합니다.
    14. 옵션: 필요한 경우 실행 취소 아이콘을 선택하여 글꼴을 Source Sans Pro로 되돌립니다.
    15. 구성요소 편집기에 액세스하면 아래 두 가지 방법 중 하나를 사용하여 구성요소의 다양한 측면에 스타일을 지정할 수 있습니다.
      • 구성요소 타일을 두 번 클릭합니다.
      • 특정 구성요소에 사용할 수 있는 항목에 따라 구성 가능한 스타일 패널 내에서 스타일 상호작용,스타일 하위 구성요소 또는 스타일 변형 버튼을 선택합니다.
        주:
        일부 구성요소에는 편집 가능한 부품이 포함되어 있지 않습니다.
        그림 5. 구성요소 편집기
        구성요소 편집기 페이지.
    16. 구성 요소 편집기에서 선택한 구성 요소의 상호 작용, 변형 또는 하위 구성 요소를 선택한 다음 사용 가능한 테마 후크를 편집합니다.
      주:
      색상 후크에 대한 변경 사항을 저장하면 재정의 제거 기호가 나타납니다. 재정의 제거 기호를 사용하면 색상 변경 사항을 원래 자동 생성된 색상으로 되돌릴 수 있습니다.
      재지정 기호를 제거합니다.
    17. 옵션: 탐색 경로 내의 링크를 사용하여 구성요소 개요 화면으로 돌아갑니다.
      그림 6. 구성요소 편집 이동 경로 탐색
      구성요소 편집 이동 경로 탐색.

    결과

    테마가 게시되면 새로 고침 시 테마가 적용된 사용자에게 구성요소 편집 내용이 표시됩니다. 테마 게시에 대한 자세한 내용은 을 참조하십시오 테마 작성기를 사용하여 테마 게시.