--- sourceDocument: 호주 고객 서비스 관리 sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/customer-service-management Release : - australia ft:locale : - ko-KR ft:publication_title : - 호주 고객 서비스 관리 ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # 구성요소 색상 사용자 지정 # AEM에서 ServiceNow 구성요소 색상 사용자 지정 {#ariaid-title1} * 릴리스 버전: Australia * * 업데이트 날짜 2026년 03월 12일 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 7분 Adobe Experience Manager(AEM)에서 색상을 지정하여 ServiceNow 구성요소의 모양과 느낌을 정의할 수 있습니다. AEM 관리자는 모든 구성 요소에 대해 미리 구성된 색상 변수를 수정하거나 initializeCSS 함수를 사용하여 사용자 지정 CSS 클래스를 사용하여 특정 구성 요소의 색상을 사용자 지정할 수 있습니다. 사용자 지정 CSS 클래스 속성에서 구성요소에 대한 사용자 지정 CSS 클래스를 지정합니다. 자세한 내용은 [Adobe Experience Manager 페이지에서 ServiceNow 지식 문서 표시](https://servicenow-prod.fluidtopics.net/yBzKtBw9ZqCkrfzJ15Binw "AEM(Adobe Experience Manager) 내에서 이용 가능한 지식 구성요소를 사용하여 ServiceNow 인스턴스에서 지식베이스에 액세스하고 AEM 기반 웹 사이트에 관련 지식 문서를 표시합니다.") 및 [Adobe Experience Manager 페이지에서 ServiceNow 케이스 표시](https://servicenow-prod.fluidtopics.net/WeGOIxIkAKPC88WScIBEng "AEM(Adobe Experience Manager) 내에서 이용 가능한 케이스 구성요소를 사용하여 ServiceNow 인스턴스에서 고객 서비스 케이스에 액세스하고 AEM 기반 웹 사이트에 표시합니다.") 문서를 참조하십시오. 주: 기본적으로 구성요소는 ServiceNow 부트스트랩 v4.4.1 CSS 스타일을 사용하여 구성됩니다. AEM 페이지에서 다른 부트스트랩 버전을 ServiceNow 사용하는 경우 구성 요소 스타일이 페이지 스타일에 의해 재정의됩니다. ## AEM의 모든 ServiceNow 구성요소에 대한 색상 테마 수정 {#ariaid-title2} 색상 변수를 구성하여 Adobe Experience Manager(AEM)의 구성 요소에 ServiceNow 대한 색상 테마를 한 번에 설정합니다. ### 시작하기 전에 필요한 역할: AEM 관리자 ### 이 태스크 정보 주: 기본적으로 구성요소는 ServiceNow 부트스트랩 v4.4.1 CSS 스타일을 사용하여 구성됩니다. AEM 페이지에서 다른 부트스트랩 버전을 ServiceNow 사용하는 경우 구성 요소 스타일이 페이지 스타일에 의해 재정의됩니다. ### 프로시저 1. [브라우저에서 CRXDE Lite를 엽니다](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html). 예를 들어 브라우저에서 http://\:\/crx/de 형식으로 URL을 입력합니다. CRXDE Lite의 기본 URL은 http://localhost:4502/crx/de 입니다. 2. 다음으로 이동 앱servicenow-components클라이언트 라이브러리clientlib-일반. 3. variables.less 파일을 엽니다. 4. 구성요소의 HTML 요소에 사용할 수 있는 색상 변수를 구성합니다 ServiceNow . {#aem-modify-color-all-comp__table_vhh_gjm_2mb__entry__2} | 색 설정 | 변수 | |-|-| | 텍스트 컨텐츠 | @text색 | | 하이퍼링크 | @link색 | | 배지 | @badge-텍스트-색상 | | 배지 배경 | @badge-배경-색상 | | 시각적 강조를 위한 기본 색상 | @primary색 | | 시각적 강조를 위한 기본 색상의 보색 | @secondary색 | | 구성요소 제목 | @title색 | | 기본 버튼 텍스트 | @primary-btn-텍스트-색상 | | 기본 버튼 배경 | @primary-btn-bkg-color | | 보조 버튼 텍스트 | @secondary-btn-텍스트-색상 | | 보조 버튼 배경 | @secondary-btn-bkg-color | [표 1. 색상 변수 설정] {#aem-modify-color-all-comp__table_vhh_gjm_2mb} 주: 다음 방법 중 하나로 변수 색상을 지정합니다. * 색 이름예: 빨간색 * 16진수 값 예를 들면 다음과 같습니다#FF0000 * RGB 값 예: rgb(255,0,0) * var 함수 var 함수를 사용하여 색상에 대한 사용자 지정 속성을 지정합니다. 예를 들어, var(--gray-dark)입니다. {#aem-modify-color-all-comp__ul_u1g_slm_2mb} 5. CRXDE Lite 메뉴에서 모두 저장 을 클릭하여 변경 내용을 AEM 서버에 저장합니다. ## AEM의 구성요소에 대한 ServiceNow 색상 테마 수정 {#ariaid-title3} 초기화 함수를 사용하여 Adobe Experience Manager(AEM)의 구성요소에 ServiceNow 대한 색상 테마를 재정의합니다. ### 시작하기 전에 필요한 역할: AEM 관리자 ### 이 태스크 정보 variables.less 파일에서 지정하는 색상 변수는 AEM의 모든 ServiceNow 구성 요소에 적용됩니다. initializeCSS 함수에서 구성요소에 대한 색상 변수를 설정하여 특정 구성요소의 기본 색상을 재정의할 수 있습니다. 주: 기본적으로 구성요소는 ServiceNow 부트스트랩 v4.4.1 CSS 스타일을 사용하여 구성됩니다. AEM 페이지에서 다른 부트스트랩 버전을 ServiceNow 사용하는 경우 구성 요소 스타일이 페이지 스타일에 의해 재정의됩니다. ### 프로시저 1. [브라우저에서 CRXDE Lite를 엽니다](https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/enabling-crxde-lite.html). 예를 들어 브라우저에서 http://\:\/crx/de 형식으로 URL을 입력합니다. CRXDE Lite의 기본 URL은 http://localhost:4502/crx/de 입니다. 2. 다음으로 이동 앱servicenow-components클라이언트 라이브러리clientlib-일반. 3. variables.less 파일을 엽니다. 4. 구성요소에 대해 initializeCSS 함수를 \ 형식으로 지정합니다. <class_name>; <color_variable_1>; <color_variable_2>; <color_variable_n>. * component_type: 사용자 지정 색상 테마를 적용하려는 구성요소의 유형(예: 기사 목록, 기사 보기, 케이스 카드 등)입니다. * class_name: 구성요소의 사용자 지정 CSS 클래스 속성에 입력하는 사용자 지정 CSS 클래스입니다. * color_variable_1, color_variable_2, color_variable_n: 구성요소의 HTML 요소에 지정하는 색상 변수입니다. 자세한 내용은 [색상 변수 설정](https://servicenow-prod.fluidtopics.net/5V3t2mCHujlVuiJGPu_fYQ#aem-modify-color-all-comp__table_vhh_gjm_2mb) 테이블을 참조하십시오. {#aem-modify-color-comp__ul_dyk_py4_2mb} 구성요소 수준에서 색상 스타일링에 대한 참조로 다음 샘플 코드를 사용합니다. .initialize(@componentType:articlelist;@className:now-article-list;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:articleview; @className:now-article-view;@text-color:red; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@secondary-color:indigo;); .initialize(@componentType:casecards; @className:now-case-cards; @text-color:red;@link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:caselist; @className:now-case-list; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;); .initialize(@componentType:searchbox; @className:now-search-box; @text-color:red; @link-color:orange;@title-color:magenta;@primary-color:green;@secondary-btn-text-color:white;@secondary-btn-bkg-color:black;); .initialize(@componentType:searchresults;@className:now-search-results;@text-color:gray; @link-color:orange;@badge-text-color:blue;@badge-background-color:yellow;@title-color:magenta;@secondary-color:indigo;); .initialize(@componentType:caseview;@className:now-case-view;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;); .initialize(@componentType:createcase;@className:now-create-case;@text-color:red;@link-color:orange;@primary-color:green;@secondary-color:indigo;@primary-btn-text-color:blue;@primary-btn-bkg-color:white;@secondary-btn-text-color:white;@secondary-btn-bkg-color:blue;) 5. CRXDE Lite 메뉴에서 모두 저장 을 클릭하여 변경 내용을 AEM 서버에 저장합니다.