디자이너를 서비스 포털 사용하여 페이지 생성 및 편집

  • 릴리스 버전: Australia
  • 업데이트 날짜 2026년 04월 22일
  • 소요 시간: 8분

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

    시작하기 전에

    필요한 역할: sp_admin 또는 admin

    이 태스크 정보

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

    프로시저

    1. 다음으로 이동 모두 > 서비스 포털 > 서비스 포털 구성.
    2. 디자이너를 선택합니다.
    3. 헤더에서 포털 이름을 선택하여 페이지를 디자인할 포털로 전환합니다.
      포털 이름이 SP가 강조 표시된 서비스 포털 디자이너 헤더
    4. 디자이너에서 서비스 포털 사용자 지정할 페이지를 선택하거나 새 페이지 추가를 선택합니다.
    5. 레이아웃 아래에서 컨테이너를 선택하고 페이지로 끌어옵니다.
    6. 다른 레이아웃 중 하나를 끌어서 컨테이너에 놓습니다.
      이 레이아웃은 페이지의 구조와 위젯을 놓는 데 사용할 수 있는 공간을 정의합니다. 레이아웃의 구조가 부트스트랩 그리드 템플릿과 정렬되고 최대 12까지 추가됩니다.
    7. 필터를 사용하여 위젯을 검색한 다음 위젯을 레이아웃으로 끌어 놓습니다.
      그림 1. 컨테이너, 레이아웃, 위젯을 페이지로 끌어다 놓기
      컨테이너, 레이아웃, 위젯을 페이지로 드래그하는 방법을 보여주는 GIF

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

    8. 옵션: 페이지 속성을 편집합니다.
      1. 페이지 속성 편집을 선택합니다.
        페이지 테이블 [sp_page]의 페이지 기록이 열립니다.
      2. 양식을 편집합니다.
        표 1. 페이지 필드
        필드 설명
        직위 페이지의 내부 이름입니다. 제목을 사용하여 서비스 포털 디자이너에서 페이지를 검색합니다.
        ID 페이지의 고유 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> 컨테이너, 행 또는 열에 적용할 수 있습니다. 자세한 내용은 페이지에서 메인 태그 구성 문서를 참조하십시오.
        • 헤더: <header> 태그는 소개 콘텐츠로 사용됩니다. 내부를 포함하여 페이지당 여러 번 사용할 수 있습니다. <article> 태그.
        • Nav: The <nav> 태그는 페이지 수준 탐색에 사용됩니다. 각 페이지에서 여러 번 사용할 수 있습니다.
        • 섹션: <section> 태그는 공통 제목 또는 테마 아래에 관련 컨텐츠를 그룹화합니다.
        • 문서: <article> 태그는 독립적으로 실행되거나 재사용할 수 있는 독립적인 콘텐츠입니다.
        • 세부 정보: <details> 태그는 섹션 확장/축소에서 사용할 수 있으며 FAQ용입니다.
        • 요약: <summary> 태그는 다음 중 첫 번째 하위 항목입니다. <details> 클릭 가능한 레이블 역할을 합니다.
        • 시간: <time> 태그는 날짜, 시간 및 기간을 나타냅니다. 머신이 읽을 수 있는 값에 추가합니다.
        • 그림 캡션: <figcaption> 태그는 다음의 하위 항목으로만 유효합니다. <figure> 그림에 대한 캡션을 제공합니다.
        애플리케이션 애플리케이션 범위입니다.
        너비 컨테이너의 너비입니다. 옵션은 다음과 같습니다.
        • 고정
        • 유체
        상위 클래스 컨테이너의 상위 CSS 클래스입니다.
        CSS 클래스 컨테이너의 CSS 클래스입니다. 페이지별 CSS를 덮어씁니다.
        배경색 컨테이너의 배경색입니다.
        배경 이미지 컨테이너의 배경 이미지입니다.
        배경 스타일 배경 이미지의 표시 스타일입니다. 옵션은 다음과 같습니다.
        • 기본값
        • 표지
        • 포함
        • 반복
        부트스트랩 대안 이 필드를 선택하면 표준 부트스트랩 그리드 클래스가 제거되고 컨테이너에서 부트스트랩 그리드 시스템이 비활성화됩니다. 선택하면 다음이 적용되지 않습니다.
        • 컨테이너 기록의 너비 필드입니다.
        • 컨테이너 내 행 기록의 표준 부트스트랩 클래스입니다.
        • 컨테이너 내 열 기록의 크기 - xs, 크기 - sm, 크기 - md 및 크기 - lg 필드입니다.

        컨테이너, 행 및 열 기록에 대한 사용자 지정 CSS 클래스와 CSS를 제공하려는 경우에만 이 필드를 선택합니다.
        머리글로 이동 선택하면 컨테이너가 헤더에 고정되고 스크롤되지 않습니다. 이 옵션을 사용하여 하위 헤더를 생성합니다.
    10. 옵션: 다른 페이지로 전환하려면 왼쪽 창에서 페이지 탭을 선택한 다음 구성하려는 다음 페이지를 선택합니다.
    11. 옵션: 헤더의 미리 보기 버튼을 사용하여 페이지를 디자인하는 대로 봅니다.
      미리 보기를 사용하여 헤더에 표시된 컨트롤을 통해 모바일 또는 태블릿 모드에서 페이지를 볼 수도 있습니다.
      그림 2. 디자이너 태블릿 뷰
      iPad 뷰 모드를 선택한 상태에서 페이지 미리 보기.

    페이지에 하위 헤더 추가

    페이지 하위 헤더 역할을 할 컨테이너 기록을 선택합니다. 하위 머리글은 페이지 머리글에 달라붙고 스크롤되지 않습니다.

    시작하기 전에

    필요한 역할: 관리자

    프로시저

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

    결과

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

    페이지에 글꼴 아이콘 포함

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

    시작하기 전에

    필요한 역할: sp_admin 또는 admin

    프로시저

    1. 다음으로 이동 모두 > 서비스 포털 > 페이지 을 클릭하고 글꼴 아이콘을 추가할 페이지를 클릭합니다.
    2. 글꼴 아이콘 파일을 페이지 기록에 첨부합니다.
    3. 페이지의 페이지별 CSS 필드에 글꼴 아이콘 정의에 대한 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>