구성요소 편집

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기2분
  • 브랜드에 더 적합하고 접근성 준수 표준을 충족하도록 개별 구성요소를 편집합니다 테마 작성기 . 편집할 수 있는 테마 후크는 각 구성요소 유형에 따라 다릅니다.

    시작하기 전에

    필요한 역할: 관리자

    이 태스크 정보

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

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

    총 접근성 위반 수는 접근성 검사기 패널과 함께 빨간색 번호가 매겨진 배지 접근성 검사기 번호가 매겨진 배지 에 표시됩니다.

    프로시저

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

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

      주:
      구성 요소별 후크를 업데이트한 후에는 구성 요소별 스타일이 전역적으로 정의된 스타일보다 우선하기 때문에 전역 스타일을 변경해도 구성 요소 스타일이 업데이트되지 않습니다.
    8. 편집할 색상을 선택하면 색상 선택기가 열립니다.
      그림 3. 색 선택기
      색 선택기.
      주:
      기본적으로 색 선택기에는 구성요소에 사용 가능한 모든 색이 표시됩니다. 액세스할 수 없는 선택 항목 숨기기 슬라이더를 선택하여 현재 WCAG(Web Content Accessibility Guidelines) 지침에 따라 접근 가능한 것으로 식별된 색상으로 색상 선택을 제한할 수 있습니다.
    9. 변경을 완료했으면 변경 내용 저장을 선택합니다.
    10. 구성요소 편집기에 액세스하면 아래 두 가지 방법 중 하나를 사용하여 구성요소의 다양한 측면에 스타일을 지정할 수 있습니다.
      • 구성요소 타일을 두 번 클릭합니다.
      • 해당 특정 구성요소에 사용할 수 있는 항목에 따라 구성 가능한 스타일 패널 내에서 스타일 상호작용, 스타일 하위 구성요소 또는 스타일 변형 버튼을 선택합니다. 일부 구성요소에는 편집 가능한 부품이 포함되어 있지 않습니다.
        그림 4. 스타일 버튼이 있는 구성 가능한 스타일 패널
        스타일 변형 버튼이 강조 표시된 구성 가능한 스타일 패널.
    11. 옵션: 탐색 경로 내의 링크를 사용하여 구성요소 개요 화면으로 돌아갑니다.
      그림 5. 구성요소 편집 이동 경로 탐색
      구성요소 편집 이동 경로 탐색.

    결과

    테마가 현재 게시된 경우 새로 고침 시 테마가 적용된 사용자는 구성요소 편집 내용을 볼 수 있습니다. 테마 게시에 대한 자세한 내용은 을 참조하십시오 를 사용하여 테마 게시 테마 작성기.