UI 빌더 방문 페이지 튜토리얼

  • 릴리스 버전: Yokohama
  • 업데이트 날짜 2025년 01월 30일
  • 읽기5분
  • 레거시 UI 빌더 를 사용하여 사용자 지정 방문 페이지를 만드는 방법에 대해 알아봅니다.

    시작하기 전에

    중요사항:
    이 페이지에 설명된 빌더는 CSM을 제외한 모든 작업 공간에서 방문 페이지를 빌드하고 편집하기 위한 것입니다. CSM 작업 공간에서 모든 페이지를 빌드하고 편집하는 새 UI Builder에 대한 자세한 내용은 UI Builder를 참조하십시오.
    이 작업은 방문 페이지만 생성할 수 있는 레거시 UI 빌더 와 관련이 있습니다. 새 버전의 UI 빌더를 사용하여 구성 가능한 작업 공간을 생성합니다. 자세한 내용은 UI Builder를 참조하십시오.

    필요한 역할: workspace_admin 또는 ui_builder_admin

    이 태스크 정보

    방문 페이지를 생성하기 전에 기존 방문 페이지를 탐색하여 작동 방식을 UI 빌더 살펴보겠습니다.

    프로시저

    1. 다음으로 이동 모두 > 작업 공간 경험 > 관리 > 모든 워크플레이스 을 클릭하고 작업 공간을 클릭하여 엽니다.
    2. 열리는 페이지를 편집할 수 없는 경우 다음 위치의 링크 클릭 이 기록을 편집하려면 여기를 클릭하여 페이지를 편집할 수 있도록 합니다.
    3. UI Builder에서 열기를 클릭합니다.
    4. 페이지 관리 창의 페이지 탭에서 인시던트 개요 방문 페이지를 클릭합니다.
      이 방문 페이지는 스테이지 창에 나타납니다. 구성 창 위에 있는 상태애플리케이션 필드를 확인합니다. 활성 상태는 방문 페이지가 현재 사용 중임을 의미합니다. 애플리케이션 필드에는 ITSM에이전트 작업 공간에서 방문 페이지를 사용 중이라고 표시됩니다. 클릭한 경우:
      • 비활성화하면 상태가 비활성 으로 변경되고 방문 페이지가 더 이상 작업 공간에 표시되지 않습니다.

        비활성화 버튼은 작업 공간에 방문 페이지를 게시할 수 있는 활성화 버튼으로 대체됩니다.

        일반적으로 작업 중인 방문 페이지는 비활성화합니다. 예를 들어 현재 방문 페이지를 업데이트하려면 다음을 수행할 수 있습니다.
        1. 현재 방문 페이지를 복제합니다.
        2. 비활성 상태에서 작업합니다.
        3. 업데이트된 버전을 활성화합니다.
        4. 원래 버전을 비활성으로 만듭니다.
      • 저장 버튼을 클릭하면 방문 페이지에 대한 변경 내용이 저장됩니다. 상태가 다음과 같은 경우:
        • 활성인 경우 변경 내용이 작업 공간에 즉시 나타납니다.
        • 비활성화하면 변경 내용이 저장되지만 게시되지는 않습니다.
    5. 구성요소를 클릭하고 구성 창에서 구성 매개변수가 어떻게 변경되는지 확인합니다.
    6. 지금 발생 중을 클릭합니다.

      컨테이너는 4개의 더 작은 구성 요소 주위에 표시됩니다. Happening Now 는 컨테이너의 레이블입니다. 구성 창의 레이블 아래를 확인합니다. 컨테이너는 다른 구성요소를 그룹화하는 방법입니다.

    7. 컨테이너가 강조 표시된 상태에서 테두리 표시 슬라이더를 오른쪽으로 밉니다.

      컨테이너를 보여주는 테두리가 나타납니다.

    8. 축소 가능 슬라이더를 오른쪽으로 밉니다.

      컨테이너 위에 캐럿 아이콘( Collapse icon)이 나타납니다. 에이전트는 캐럿을 클릭하여 컨테이너와 그 안의 모든 것을 축소할 수 있습니다.

    9. 구성 창의 오른쪽 상단에서 오른쪽 화살표(>)를 클릭하여 창을 축소합니다.
    10. [Stage] 창에서 컨테이너를 클릭한 다음 해당 구성 아이콘( Configuration icon)을 클릭합니다.

      구성요소 팝업 창

      구성 창이 다시 열립니다.

      구성요소를 드래그하는 데 사용할 수 있는 이동 아이콘( Grab component)도 볼 수 있습니다. 아직은 그렇게 하지 마세요.

      구성 창의 축소됨 슬라이더는 컨테이너가 축소된 상태로 시작되고 에이전트가 컨테이너를 확장하기 위해 클릭할 수 있는 아래쪽 화살표( 확장 아이콘)로 표시됨을 의미합니다.

      이제 인터페이스의 다른 부분을 사용하는 방법을 보았으므로 방문 페이지를 만드는 방법을 살펴보겠습니다.

    새 방문 페이지 튜토리얼 생성

    새 방문 페이지를 생성합니다.

    프로시저

    1. 페이지 탭에서 더하기 아이콘(+)을 클릭하여 새 방문 페이지를 엽니다.

      새 페이지 생성

      을 클릭하여 새 페이지를 만들 수도 있습니다. 페이지 작업 > +새 페이지.

    2. 좋습니다. 이 페이지에 대한 몇 가지 일반 정보를 가져옵시다. 모달에서 방문 페이지의 이름을 입력하고 방문 페이지 생성을 클릭합니다.

      이 제목은 방문 페이지가 아닌 스테이지 위에 나타납니다.

      방문 페이지 이름

    구성요소 추가 및 구성 튜토리얼

    방문 페이지에서 구성요소를 추가하고 구성합니다.

    프로시저

    1. +구성요소 추가 탭을 클릭하고 이미지 구성요소를 스테이지 창으로 드래그합니다.

      이미지의 매개변수가 구성 창에 나타납니다.

    2. 데이터 시각화 구성요소를 이미지 아래로 끌어서 놓습니다.

      구성요소는 스테이지 창에 나타나지 않습니다.

    3. 데이터 시각화 구성요소를 이미지 구성요소 위로 끌어서 놓지는 마십시오.
      이미지 구성요소의 가장자리 주위로 데이터 시각화 구성요소를 이동합니다.

      데이터 시각화 구성요소를 이미지 위로 이동하면 이미지 구성요소의 측면이 강조 표시됩니다. 구성요소 끌기

    4. 데이터 시각화 구성요소를 이미지 왼쪽에 대고 놓습니다.

      데이터 시각화 구성요소는 이미지 구성요소의 왼쪽에 나타납니다.

    5. 데이터 시각화 구성요소 위에 있는 이동 아이콘( Grab component)을 클릭한 다음 이미지 구성요소의 하단 가장자리 위로 끌어다 놓습니다.

      이제 착륙 공간에서 구성요소를 이동하는 방법을 알게 되었습니다. 데이터 시각화 구성요소가 비어 있습니다. 볼 수 있도록 채워 봅시다.

    6. 구성 창의 보고서 필드에 incident를 입력합니다.

      가능한 항목의 자동 완성 목록이 나타납니다.

    7. 목록에서 우선순위별 인시던트 열기 를 클릭합니다.
      해당 보고서가 구성요소에서 열립니다.
    8. 구성 창에서 우선순위별 오픈 인시던트 를 삭제하고 PA 위젯 필드에 incident를 입력합니다.
      가능한 항목의 자동 완성 목록이 나타납니다. 이러한 항목은 (PA) 위젯입니다 퍼포먼스 분석 .

      구성요소에는 하나의 데이터 시각화만 넣을 수 있습니다. 따라서 보고서 또는 PA 위젯을 표시할 수 있지만 둘 다 표시할 수는 없습니다. 보고서와 PA 위젯 UI 빌더 모두에 대한 항목을 넣으면 보고서만 표시됩니다.

      지금까지 방문 페이지에서 구성요소를 추가하고 정렬하는 방법을 알아보았습니다. 이제 그룹화하는 방법을 살펴보겠습니다.

    구성요소 그룹화 및 정렬 튜토리얼

    방문 페이지에서 구성요소를 그룹화하고 정렬합니다.

    프로시저

    1. 페이지 작업을 클릭하고 페이지 삭제를 선택한 다음 삭제를 확인합니다.
    2. 데이터 시각화 구성 요소를 선택하고 휴지통 아이콘( 휴지통 아이콘)을 클릭한 다음 구성 요소 위의 삭제 확인 표시 아이콘( Delete component)을 클릭하여 제거합니다.
      이제 방문 페이지의 구성요소를 삭제했습니다. 원하는 경우 이미지 구성 요소를 제거할 수도 있습니다.
    3. 컨테이너 구성요소를 스테이지 창으로 끌어옵니다.
    4. 구성 요소 창에서 컨테이너의 레이블 필드에 값을 입력하고 테두리 표시 슬라이더를 오른쪽으로 밀어 컨테이너를 볼 수 있도록 합니다.
    5. 레이블 필드에서 컨테이너에 제목(예: 중요 목록)을 추가합니다.
    6. 목록 구성요소를 컨테이너에 끌어옵니다.
    7. 구성요소 창의 테이블 필드에 기록 목록이 생성된 테이블의 값(예: 인시던트)을 입력합니다.
    8. 다른 목록 구성요소를 컨테이너에 끌어옵니다.

      목록을 컨테이너 내부 또는 외부에 놓을 수 있습니다. 용기 안에 놓습니다.

      컨테이너에 목록 추가

    9. 구성요소 창의 테이블 필드에 기록 목록이 생성된 다른 테이블에 대한 값(예: 작업)을 입력합니다.

      이제 목록을 설명하는 레이블이 있는 컨테이너 구성요소 내에 두 개의 목록 구성요소가 있습니다.

    10. 계속해서 컨테이너 내부 또는 외부에 구성요소를 추가하고 이동 아이콘( Grab component)을 사용하여 구성요소를 드래그하여 구성요소 추가, 삭제, 이동 및 그룹화에 익숙해질 수 있습니다.
    11. 저장을 클릭합니다.

      실제 방문 페이지를 만드는 경우 활성화도 클릭합니다. 이 자습서에서는 실제 방문 페이지를 만들고 있지 않으므로 이 실습 방문 페이지를 삭제해 보겠습니다.

    방문 페이지 삭제 튜토리얼

    방문 페이지를 삭제합니다.

    프로시저

    1. 페이지 탭에서 방문 페이지를 선택합니다.
    2. 페이지 작업에서 페이지 삭제를 클릭합니다.

    다음에 수행할 작업

    이제 UI 빌더 사용 방법을 파악했습니다. 첫 번째 방문 페이지를 생성할 준비가 되었습니다.