UI Builder 빠른 시작

  • 릴리스 버전: Xanadu
  • 업데이트 날짜 2024년 08월 01일
  • 읽기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. 이름 필드에 페이지의 고유 이름으로 Start Page를 입력합니다.
      5. URL 경로 필드에 페이지의 경로를 지정합니다. UI 빌더 는 마지막 단계에서 지정한 이름을 기반으로 기본 경로를 생성합니다.
        페이지 이름을 기반으로 기본 경로가 추가됩니다. 사용자 고유의 경로를 만들 수도 있습니다. 경로는 필수이며 고유해야 합니다. 경로에는 숫자(0-9), 문자(A-Z, a-z) 및 몇 가지 특수 문자("-", ".", "_", "~")가 포함될 수 있으며 단어는 슬래시 또는 하이픈으로 구분됩니다. URL 미리보기에는 페이지의 경로가 표시됩니다.
        페이지 이름 및 경로 이름 필드
        주:
        애플리케이션 범위는 기본적으로 사용자가 현재 .Now Platform® 애플리케이션 범위에 대한 자세한 내용은 다음 문서를 참조하십시오 보안 및 역할에 대해 알아보기.
      6. 계속을 선택합니다.
      7. 옵션: + 추가를 선택하여 페이지 URL에 매개변수를 추가합니다.
        자세한 내용은 페이지 및 페이지 변형 관리 UI 빌더 문서를 참조하십시오.
      8. Looks good(보기 좋음)을 선택합니다.
      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. 검색에 heading 을 입력하고 제목 구성요소를 선택합니다.
      3. 컨텐츠 트리에서 새 제목 구성요소를 선택하여 강조 표시합니다.
      4. 구성 패널에서 없음 을 선택합니다.
      5. 구성 패널에서 구성요소 이름을 선택합니다.
      6. Component label(구성요소 레이블) 필드에 Custom heading(사용자 지정 제목)을 제목 구성요소의 고유 레이블로 입력합니다.
      7. 구성요소 ID 필드에 제목 구성요소의 고유 ID로 custom_heading 입력합니다.
      8. 적용을 클릭합니다.
        사용자 지정 제목 레이블을 가리키는 화살표입니다.
    7. 제목 구성요소를 사용자 지정합니다.
      1. 컨텐츠 트리에서 제목 구성요소를 선택합니다.
      2. 구성 패널에서 구성 탭을 선택합니다.
      3. 레이블 필드에 제목 텍스트(예: My new heading)를 입력합니다.
      4. 스타일은 제목 텍스트의 크기를 변경합니다.
        예를 들어 헤더 보조를 선택하면 텍스트가 더 작아집니다. 제목이 두 개인 경우 제목 크기가 다르고 두 번째 제목을 기본 제목보다 작게 하려는 경우에 유용합니다. 구성 요소 구성에 대한 자세한 내용은 을 참조하십시오 에서 구성요소 구성 UI 빌더.
      5. 레벨을 1로 둡니다.
      6. 저장을 선택합니다.
      페이지에 제목 구성요소를 추가하고 사용자 지정했습니다.
    8. 페이지에 두 번째 열 레이아웃을 추가합니다.
      1. 이전과 마찬가지로 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
        콘텐츠 트리에서 + 콘텐츠 추가를 가리키는 화살표입니다.
      2. 도구 상자에서 단일 열 레이아웃을 선택합니다.
      3. 콘텐츠 트리에서 열 레이아웃 1 을 선택하여 컨테이너를 강조 표시합니다.
        두 개의 열 레이아웃이 있는 콘텐츠 트리
      4. 구성 패널에서 구성요소 이름을 선택합니다.
      5. 구성요소 레이블 필드에 Container for content를 입력합니다.
      6. 구성요소 ID 필드에 container_for_content를 입력합니다.
      7. 적용을 선택합니다.
        열 레이아웃, 레이블 및 ID 필드
      8. 저장을 선택합니다.
      페이지에 두 번째 컨테이너 구성요소를 성공적으로 추가했습니다.
    9. 페이지에 이미지 구성 요소를 추가합니다.
      이미지는 페이지에 시각적 개체를 추가하는 좋은 방법입니다. 이 빠른 시작에서는 와 함께 UI 빌더제공되는 스톡 사진을 추가합니다. 그러나 사용 가능한 모든 이미지를 추가할 수 있습니다.
      1. 8단계에서 만든 컨테이너 아래의 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
      2. 검색에 이미지를 입력하고 이미지 구성요소를 선택합니다.
        기본 이미지가 이미지 구성 요소에 로드됩니다. 이미지에 URL을 추가하여 고유한 이미지를 추가할 수 있습니다. 인터넷에 호스팅된 이미지 또는 Now Platform®. 외부 사이트에서 호스팅되는 이미지를 사용하는 경우 보안을 위해 https 프로토콜을 사용해야 합니다.
      3. 컨텐츠 트리에서 이미지 1 구성요소를 선택하여 이미지를 강조 표시합니다.
        콘텐츠 트리의 이미지 1 구성요소를 가리키는 화살표입니다.
      4. 구성 패널에서 없음 을 선택합니다.
      5. 구성 패널에서 구성요소 이름을 선택합니다.
      6. 구성 요소 레이블 필드에 My image를 입력합니다.
      7. 구성 요소 ID 필드에 my_image를 입력합니다.
      8. 적용을 선택합니다.
        이미지 구성요소 레이블 및 ID입니다.
      9. 저장을 선택합니다.
      페이지에 이미지 구성요소를 추가했습니다.

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

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

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

    결과

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

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