디자이너를 사용하여 서비스 포털 페이지 만들기 및 편집

페이지를 만들거나 편집하고 레이아웃을 사용하여 위젯을 보관하는 열을 구성합니다.

시작하기 전에

필요한 역할: sp_admin 또는 admin

이 태스크 정보

이러한 단계는 코딩 경험이 거의 또는 전혀 없는 사용자를 위한 것입니다. Designer에는 서비스 포털 단순히 페이지의 특정 구성에 위젯을 추가하는 것부터 CSS 클래스를 추가하는 것까지 여러 사용자 정의 레이어가 포함되어 있습니다.

프로시저

1. 다음으로 이동 모두 > Service Portal > 서비스 포털 구성레이블이 표시됩니다.
2. 디자이너를 선택합니다.
3. 헤더에서 포털 이름을 선택하여 페이지를 디자인할 포털로 전환합니다.
   
4. 디자이너에서 서비스 포털 사용자 지정할 페이지를 선택하거나 새 페이지 추가를 선택합니다.
5. Layouts(레이아웃)에서 Container(컨테이너 )를 선택하고 페이지로 드래그합니다.
6. 다른 레이아웃 중 하나를 끌어 컨테이너에 놓습니다.
   이 레이아웃은 페이지의 구조와 위젯을 놓을 수 있는 공간을 정의합니다. 레이아웃의 구조는 부트스트랩 그리드 템플릿과 일치하며 항상 최대 12까지 추가됩니다.
7. 필터를 사용하여 위젯을 검색한 다음, 위젯을 레이아웃으로 드래그하십시오.

   그림 1. 컨테이너, 레이아웃, 위젯을 페이지로 끌어다 놓기

   

   기본적으로 정보를 포함하지 않는 위젯의 경우 위젯 인스턴스가 포털 페이지에 나타나기 전에 해당 위젯 인스턴스에 대한 옵션을 구성해야 합니다. 위젯 인스턴스 옵션 구성에 대한 자세한 내용은 을 참조하십시오 위젯 인스턴스 구성.

8. 옵션: 페이지 속성을 편집합니다.
   1. Edit Page Properties(페이지 속성 편집)를 선택합니다.
      페이지 테이블 [sp_page]의 페이지 기록이 열립니다.
   2. 양식을 편집합니다.

      표 1. 페이지 필드

      필드	설명
      직위	페이지의 내부 이름입니다. 제목을 사용하여 서비스 포털 디자이너에서 페이지를 검색합니다.
      ID	페이지의 고유 ID입니다. ID는 포털에 페이지를 할당하는 데 사용하는 것입니다. 또한 페이지의 URL을 결정합니다(예: https://instance name.service-now.com/doc_portal/?id=doc_page. 여기서 doc_page는 페이지 ID임).
      애플리케이션	애플리케이션 범위입니다.
      공개	인증할 필요 없이 페이지에 액세스할 수 있도록 설정합니다. [공용]을 선택하면 나열된 역할에 관계없이 모든 사용자가 페이지를 볼 수 있습니다.
      초안	페이지를 초안으로 표시하여 페이지를 생성하는 동안 사용자가 페이지를 볼 수 없도록 제한합니다. 관리자 역할이 있는 사용자만 초안 페이지를 볼 수 있으며 다른 모든 사용자는 404 페이지를 볼 수 있습니다.
      역할	역할별로 페이지에 대한 사용자 액세스를 제한합니다.
      간단한 설명	포털 페이지를 설명합니다. 이 필드는 일반에 공개되지 않습니다.
      페이지 관련 CSS	페이지에 페이지별 CSS가 없는 경우 페이지는 테마 및 브랜딩에서 CSS를 상속합니다. 페이지가 다르게 보여야 하는 경우 페이지별 CSS가 테마 및 브랜딩의 상속을 재정의합니다.
      동적 페이지 제목	페이지에 로드된 컨텐츠에 따라 설명이 포함된 제목을 생성하는 변수를 생성합니다. 자세한 내용은 페이지에 동적 제목 추가 문서를 참조하십시오.
      클론 페이지	수정할 수 있는 페이지의 사본을 만들 수 있습니다. 기본 시스템 페이지를 복제하면 페이지의 각 위젯에 대해 새 위젯 인스턴스가 생성됩니다.
      SEO 스크립트 사용	표준 URL 및 hreflang 태그에 대한 SEO 태그를 추가하는 스크립트 포함을 활성화하는 옵션입니다. 자세한 내용은 현지화된 포털 페이지 버전에 SEO 사용 문서를 참조하십시오.
      SEO 스크립트	페이지에 적용할 스크립트 포함입니다. 기본적으로 시스템은 페이지의 표준 URL 및 hreflang 태그에 대한 기본 구현을 포함하는 SPSEOHeaderTags 스크립트 포함을 서비스 포털 분석 사용합니다.
      사람이 읽을 수 있는 URL 구조	사람이 읽을 수 있는 키워드를 페이지 URL에 추가하여 공개 페이지의 검색 엔진 최적화(SEO) 및 클릭률을 개선합니다. 사람이 읽을 수 있는 URL은 또한 사용자가 공개 및 비공개 페이지의 페이지에서 무엇을 기대할 수 있는지 이해하는 데 도움이 됩니다. 예: https://<instance>/kb/en/faq/what-is-a-cookie?id=kb_article_view&sysparm_article=KB0000007. 자세한 내용은 페이지 URL에 사람이 읽을 수 있는 키워드 추가 문서를 참조하십시오.

9. 옵션: 컨테이너 속성을 편집합니다.
   1. 편집하려는 컨테이너 내부를 선택하거나 이동 경로에서 컨테이너 를 선택합니다.
   2. 편집 아이콘 []을 선택합니다.
      컨테이너 테이블 [sp_container]의 컨테이너 기록이 열립니다.
   3. 양식을 편집합니다.

      표 2. 컨테이너 필드

      필드	설명
      이름	컨테이너의 내부 이름입니다.
      순서	페이지에 컨테이너가 표시되는 순서입니다. 컨테이너가 다른 모든 컨테이너 위에 나타나도록 설정하려면 [순서 ] 필드에서 컨테이너에 가장 낮은 숫자를 지정합니다.
      페이지	컨테이너가 포함된 페이지입니다.
      화면 판독기 제목	화면 판독기에서 사용하는 제목입니다.
      시맨틱 태그	컨테이너를 포함하는 시맨틱 HTML 태그입니다. 옵션은 다음과 같습니다. 없음: 머리글과 바닥글 사이에 있는 페이지의 모든 콘텐츠가 태그에 <main> 포함됩니다. 기본: 태그에는 <main> 컨테이너와 해당 콘텐츠만 포함됩니다. 태그는 <main> 페이지의 기본 콘텐츠를 포함하는 의미 체계 HTML 요소입니다. 페이지에 고유한 콘텐츠에 적용해야 하며 페이지의 한 요소에 대해서만 구성해야 합니다. 주: 태그는 <main> 컨테이너, 행 또는 열에 적용할 수 있습니다. 자세한 내용은 페이지에서 기본 태그 구성 문서를 참조하십시오.
      애플리케이션	애플리케이션 범위입니다.
      너비	컨테이너의 너비입니다. 옵션은 다음과 같습니다. 고정 유동
      상위 클래스	컨테이너의 상위 CSS 클래스입니다.
      CSS 클래스	컨테이너의 CSS 클래스입니다. 페이지별 CSS를 덮어씁니다.
      배경색	컨테이너의 배경색입니다.
      배경 이미지	컨테이너의 배경 이미지입니다.
      배경 스타일	배경 이미지의 표시 스타일입니다. 옵션은 다음과 같습니다. 기본값 표지 포함 반복
      부트스트랩 대안	이 필드를 선택하면 표준 부트스트랩 그리드 클래스가 제거되고 컨테이너에서 부트스트랩 그리드 시스템이 비활성화됩니다. 선택하는 경우 다음 이 적용되지 않습니다 . 컨테이너 기록의 너비 필드입니다. 컨테이너 내 행 레코드의 표준 부트스트랩 클래스입니다. 컨테이너 내 열 레코드의 Size - xs, Size - sm, Size - md 및 Size - lg 필드입니다. 컨테이너, 행 및 열 레코드에 대한 사용자 지정 CSS 클래스와 CSS를 제공하려는 경우에만 이 필드를 선택합니다.
      머리글로 이동	이 옵션을 선택하면 컨테이너가 헤더에 고정되고 스크롤되지 않습니다. 이 옵션을 사용하여 하위 머리글을 만들 수 있습니다.

10. 옵션: 다른 페이지로 전환하려면 왼쪽 창에서 페이지 탭을 선택한 다음, 구성할 다음 페이지를 선택합니다.
11. 옵션: 헤더의 미리 보기 버튼을 사용하여 페이지를 디자인하면서 볼 수 있습니다.
    미리 보기를 사용하여 헤더에 표시된 컨트롤을 통해 모바일 또는 태블릿 모드에서 페이지를 볼 수도 있습니다.

    그림 2. 디자이너 태블릿 뷰

    

페이지에 하위 머리글 추가

페이지 하위 헤더로 제공할 컨테이너 기록을 선택합니다. 하위 머리글은 페이지 머리글에 고정되며 스크롤되지 않습니다.

시작하기 전에

필요한 역할: admin

프로시저

1. 다음으로 이동 모두 > Service Portal > 서비스 포털 구성레이블이 표시됩니다.
2. 디자이너를 선택합니다.
3. 페이지를 선택합니다.
4. 헤더에서 포털 이름을 선택하여 페이지를 디자인할 포털로 전환합니다.
   
5. 하위 머리글로 사용할 컨테이너를 선택하거나 이동 경로를 사용하여 컨테이너를 선택합니다.
6. 편집 아이콘()을 선택합니다.
7. 머리글로 이동을 선택합니다.

결과

하위 헤더로서 컨테이너는 헤더에 고정되며 스크롤되지 않습니다.

페이지에 글꼴 아이콘 포함

페이지의 모든 위젯이 글꼴 아이콘 세트에 액세스할 수 있도록 페이지에 글꼴 아이콘을 포함합니다.

시작하기 전에

필요한 역할: sp_admin 또는 admin

프로시저

1. 다음으로 이동 모두 > Service Portal > 페이지 을 클릭하고 글꼴 아이콘을 추가할 페이지를 클릭합니다.
2. 글꼴 아이콘 파일을 페이지 기록에 첨부합니다.
3. 페이지의 페이지별 CSS 필드에서 font-icon 정의에 대한 CSS를 추가합니다.
   첨부 파일의 sys_id CSS에서 src 로 사용합니다. 예:

   /* fallback */
   @font-face {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
     src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
   }
   
   .material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
     white-space: nowrap;
     direction: ltr;
   
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;
   
     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
   
     /* Support for IE. */
     font-feature-settings: 'liga';
   }

결과

이 페이지의 위젯에 설정된 아이콘에서 아이콘을 선택할 수 있습니다. 예를 들어 HTML 위젯에서 소스 코드 옵션을 사용하여 아이콘을 사용할 수 있습니다. 예:

<p style="text-align: center;"><em class="material-icons">flight_land</em></p>