UI 빌더 빠른 시작

  • 릴리스 버전: Zurich
  • 업데이트 날짜 2025년 07월 31일
  • 소요 시간: 6분

    • 이 빠른 시작은 에서 첫 페이지를 만드는 과정을 안내합니다 UI 빌더. 첫 번째 페이지를 만드는 것은 작업 공간 또는 사용자 지정 포털 환경을 위한 사용자 인터페이스 페이지를 빌드하는 방법을 이해하는 첫 번째 단계입니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    이 UI 빌더 빠른 시작에서는 다음 작업을 수행하여 다음에서 첫 페이지를 빌드합니다.UI 빌더

    • 시작 UI 빌더.
    • 작업 공간 또는 사용자 지정 포털 환경에 대한 페이지를 생성합니다. 페이지 생성에 대한 자세한 내용은 다음 문서를 참조하십시오 에서 페이지 생성 UI 빌더.
    • 구성요소를 추가하여 페이지를 빌드합니다. 구성요소에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소를 사용하여 페이지 사용자 지정 UI 빌더.
    • 페이지를 저장합니다.
    • 페이지를 미리 보고 브라우저에서 어떻게 보이는지 확인합니다.

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
      그림 1. UI 빌더 시작
      UI 빌더를 시작하는 중입니다.
    2. 홈페이지에서 작업하려는 환경을 선택합니다.UI 빌더
      작업할 경험이 나열되지 않으면 관리자에게 문의하여 경험에 액세스하거나 경험을 생성합니다. 자세한 내용은 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 문서를 참조하십시오.
    3. 페이지를 생성합니다.
      1. 페이지 섹션에서 + 아이콘을 선택합니다.
        경험 뷰 페이지의 페이지 생성 버튼입니다.
      2. 새 페이지 만들기를 선택합니다.
        페이지 유형 선택 모달.
      3. 대신 처음부터 새로 생성→ 선택하십시오.
        대신 처음부터 새로 만들기를 선택하여 빈 페이지를 만듭니다.

        페이지 템플릿을 사용하여 페이지를 생성할 수도 있습니다. 자세한 내용은 문서를 참조하십시오 템플릿에서 페이지 생성 .

      4. 이름 필드에 페이지의 고유 이름으로 시작 페이지를 입력합니다.
      5. URL 경로 필드에 페이지의 경로를 지정합니다. UI 빌더 는 마지막 단계에서 지정한 이름에 따라 기본 경로를 생성합니다.
        페이지 이름을 기반으로 기본 경로가 추가됩니다. 나만의 경로를 생성할 수도 있습니다. 경로는 필수이며 고유해야 합니다. 경로에는 숫자(0-9), 문자(A-Z, a-z) 및 몇 가지 특수 문자("-", ".", "_", "~")가 포함될 수 있으며 단어는 슬래시 또는 하이픈으로 구분됩니다. URL 미리 보기에 페이지의 경로가 표시됩니다.
        페이지 이름, URL 경로 및 유형 필드.
        주:
        애플리케이션 범위는 기본적으로 사용자가 현재 있는 범위로 설정됩니다.ServiceNow AI Platform® 애플리케이션 범위에 대한 자세한 내용은 다음 문서를 참조하십시오 보안 및 역할에 대해 알아보기.
      6. 계속을 선택합니다.
      7. 옵션: + 추가를 선택하여 페이지 URL에 매개변수를 추가합니다.
        자세한 내용은 페이지 및 페이지 변형 관리 UI 빌더 문서를 참조하십시오.
      8. 좋아 보기를 선택합니다.
      9. 페이지 변형의 이름으로 관리자 시작 페이지를 입력합니다.
      10. 옵션: 이 페이지에 대상을 하나 이상 추가합니다.
        필요한 대상이 나열되지 않은 경우 플랫폼 링크에서 대상 열기 를 선택하여 대상을 만들 수 있습니다.
      11. 옵션: 페이지 또는 탭을 표시할 시기에 대한 조건을 추가합니다.
      12. 계속을 선택합니다.
      13. 다음 화면에서 응답형 빌드를 선택합니다.
      14. 만들기를 선택하여 빈 페이지를 만듭니다.
      축하합니다! 첫 페이지를 생성했습니다! 페이지에 콘텐츠가 없습니다. 페이지에 구성요소를 추가하여 페이지를 빌드합니다. 구성요소는 페이지의 구성 요소입니다. UI 빌더 에는 페이지에 추가할 준비가 된 많은 구성요소가 함께 제공됩니다. 구성요소는 제목처럼 단순할 수도 있고 목록처럼 복잡할 수도 있습니다.
    4. 편집기를 선택하여 페이지 사용자 지정 추가를 시작합니다.
      페이지 편집기 링크를 가리키는 화살표.
    5. 페이지에 컨테이너 구성요소를 추가합니다.
      컨테이너는 구성요소를 보관하는 것입니다. 컨테이너는 정보, 이미지 또는 기능(구성요소)을 추가하는 페이지의 영역으로 생각하십시오. 한 페이지에 원하는 수의 컨테이너를 포함할 수 있으며, 컨테이너 내에 컨테이너가 있고 컨테이너에 있는 구성요소도 가질 수 있습니다.
      1. 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
        콘텐츠 트리에서 +콘텐츠 추가를 선택하는 포인터.
      2. 도구 상자에서 단일 열 레이아웃을 선택합니다.
      3. 콘텐츠 트리에서 열 레이아웃 1 을 선택하여 컨테이너를 강조 표시합니다.
        콘텐츠 트리의 열 레이아웃 1을 가리키는 화살표.
      4. 구성 패널에서 구성요소 이름을 선택합니다.
        열 레이아웃 레이블 및 ID 필드.
      5. 구성요소 레이블 필드에 제목에 대한 컨테이너를 입력합니다.
      6. 구성요소 ID 필드에 container_for_heading를 입력합니다.
      7. 적용을 선택합니다.

        컨텐츠 트리에서 열 레이아웃 이름이 제목 용 컨테이너 로 변경되는 것을 확인합니다. 콘텐츠 트리는 중요한 개념입니다. 콘텐츠 트리를 사용하면 페이지의 구조화된 레이아웃을 쉽게 볼 수 있습니다. 컨텐츠 트리는 페이지에 여러 구성요소가 있는 경우 특히 중요합니다. 컨텐츠 트리에서 구성요소를 선택하여 페이지에서 구성요소를 강조 표시하면 페이지를 더 쉽게 빌드할 수 있습니다. 구성요소에 대한 텍스트 검색을 수행할 수 있습니다.

        사용자 지정된 열 레이아웃의 콘텐츠 트리입니다.

        구성요소 ID에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 ID.

      페이지에 첫 번째 열 레이아웃을 성공적으로 추가했습니다.
    6. 열 레이아웃에 제목 구성요소를 추가합니다.
      다양한 방법으로 페이지에 구성요소를 추가할 수 있습니다. 페이지에 구성요소를 추가하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오 구성요소 추가 및 구성.
      1. 5단계에서 만든 열 레이아웃 아래의 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
        +를 가리키는 화살표 컨테이너 내에 제목 컨텐츠 추가.
      2. 검색에 제목을 입력하고 제목 구성요소를 선택합니다.
      3. 컨텐츠 트리에서 새 제목 구성요소를 선택하여 강조 표시합니다.
      4. 구성 패널에서 없음을 선택합니다.
      5. 구성 패널에서 구성요소 이름을 선택합니다.
      6. 구성요소 레이블 필드에 사용자 지정 제목을 제목 구성요소의 고유 레이블로 입력합니다.
      7. 구성요소 ID 필드에 제목 구성요소의 고유 ID로 custom_heading를 입력합니다.
      8. 적용을 클릭합니다.
        사용자 지정 제목 레이블을 가리키는 화살표.
    7. 제목 구성요소를 사용자 지정합니다.
      1. 콘텐츠 트리에서 제목 구성요소를 선택합니다.
      2. 구성 패널에서 구성 탭을 선택합니다.
      3. 레이블 필드에 내 새 제목과 같은 제목 텍스트를 입력합니다.
      4. 스타일은 제목 텍스트의 크기를 변경합니다.
        예를 들어 헤더 보조를 선택하면 텍스트가 더 작아집니다. 제목 크기가 두 개 있고 두 번째 제목이 기본 제목보다 작아지려는 경우에 유용합니다. 구성요소 구성에 대한 자세한 내용은 다음 문서를 참조하십시오 의 구성요소 구성 UI 빌더.
      5. 수준을1로 둡니다.
      6. 저장을 선택합니다.
      페이지에 제목 구성요소를 추가하고 사용자 지정했습니다.
    8. 페이지에 두 번째 열 레이아웃을 추가합니다.
      1. 이전과 마찬가지로 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
        +를 가리키는 화살표 콘텐츠 트리에 콘텐츠 추가.
      2. 도구 상자에서 단일 열 레이아웃을 선택합니다.
      3. 콘텐츠 트리에서 열 레이아웃 1 을 선택하여 컨테이너를 강조 표시합니다.
        두 개의 열 레이아웃이 있는 콘텐츠 트리.
      4. 구성 패널에서 구성요소 이름을 선택합니다.
      5. 구성요소 레이블 필드에 컨텐츠용 컨테이너를 입력합니다.
      6. 구성요소 ID 필드에 container_for_content를 입력합니다.
      7. 적용을 선택합니다.
        열 레이아웃 레이블 및 ID 필드.
      8. 저장을 선택합니다.
      페이지에 두 번째 컨테이너 구성 요소를 성공적으로 추가했습니다.
    9. 페이지에 이미지 구성요소를 추가합니다.
      이미지는 페이지에 시각적 개체를 추가하는 좋은 방법입니다. 이 빠른 시작에서는 와 함께 UI 빌더제공되는 스톡 사진을 추가합니다. 그러나 사용 가능한 모든 이미지를 추가할 수 있습니다.
      1. 8단계에서 만든 컨테이너 아래의 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
      2. 검색에 이미지를 입력하고 이미지 구성요소를 선택합니다.
        이미지 구성요소에 기본 이미지가 로드됩니다. 이미지에 URL을 추가하여 자신의 이미지를 추가할 수 있습니다. 인터넷에 호스팅된 이미지 또는 ServiceNow AI Platform®. 외부 사이트에서 호스팅된 이미지를 사용하는 경우 보안을 위해 https 프로토콜을 사용해야 합니다.
      3. 컨텐츠 트리에서 이미지 1 구성요소를 선택하여 이미지를 강조 표시합니다.
        콘텐츠 트리의 이미지 1 구성요소를 가리키는 화살표.
      4. 구성 패널에서 없음을 선택합니다.
      5. 구성 패널에서 구성요소 이름을 선택합니다.
      6. 구성요소 레이블 필드에 내 이미지를 입력합니다.
      7. 구성요소 ID 필드에 my_image를 입력합니다.
      8. 적용을 선택합니다.
        이미지 구성요소 레이블 및 ID입니다.
      9. 저장을 선택합니다.
      페이지에 이미지 구성요소를 추가했습니다.

      열 레이아웃에 추가된 이미지 구성요소를 보여주는 UI 빌더 페이지입니다.

    10. 헤더에서 UI 빌더미리 보기를 선택하여 페이지를 미리 봅니다.
      축하합니다! 빠른 시작을 완료했습니다 UI 빌더 . 작업 공간 또는 포털 환경에서 페이지가 어떻게 보이는지에 대한 미리 보기를 생성합니다.

      빠른 시작 절차에서 만든 페이지의 미리 보기입니다.UI 빌더

    결과

    1. 에서 UI 빌더첫 페이지를 생성했습니다.
    2. 페이지에 첫 번째 컨테이너 구성요소를 추가했습니다. 컨테이너의 레이블을 변경했습니다.
    3. 제목 구성요소를 컨테이너에 제목으로 추가했습니다. 제목의 텍스트를 변경했습니다. 레이블도 변경했습니다.
    4. 페이지에 두 번째 컨테이너 구성요소를 추가했습니다. 컨테이너의 레이블을 변경했습니다.
    5. 이미지 구성요소가 추가되었습니다. 이미지 구성요소의 레이블을 변경했습니다.
    6. 새 페이지를 저장했습니다.
    7. 브라우저에서 페이지를 미리 보았습니다.

    빠른 시작을 성공적으로 완료했습니다 UI 빌더 !