열 레이아웃

  • 릴리스 버전: Washingtondc
  • 업데이트 날짜 2024년 02월 01일
  • 읽기8분

    • 열 레이아웃은 페이지를 디자인하고 구성하는 UI 빌더 데 사용됩니다.

    이 비디오에서는 다음 절차를 수행하는 방법을 보여줍니다.

    열 레이아웃을 사용하면 유용하고 시각적으로 매력적인 경험 페이지를 만들 수 있습니다. 열 레이아웃은 구성요소를 포함할 수 있는 유연한 컨테이너의 한 유형입니다. 열 레이아웃은 미리 구성된 간단한 레이아웃으로, 효율적이고 매력적인 페이지를 빠르게 디자인할 수 있습니다. 구성요소를 추가하기 전에 열 레이아웃으로 페이지의 구조를 정의하고 설정하는 것이 유용합니다.

    열 레이아웃은 너비가 같거나 다른 열을 가질 수 있습니다.

    UI Builder에서 사용할 수 있는 열 레이아웃의 예시입니다.

    열 레이아웃 전체와 레이아웃 내의 개별 열을 구성할 수 있습니다. 예를 들어, 열 레이아웃과 레이아웃 내의 개별 열에 대해 서로 다른 테두리 너비와 색상을 설정합니다.

    제목이 포함된 단일 열 레이아웃과 그 아래에 3개의 열 레이아웃이 있는 UI Builder 페이지입니다.

    주:
    현재 조건에 따라 열 레이아웃에서 열을 숨기거나 표시하는 기능은 지원되지 않습니다.

    열 레이아웃 추가

    에 열 레이아웃 UI 빌더 을 추가하여 경험 페이지에서 구조를 빌드하고 구성요소를 구성합니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
    2. 작업할 환경을 열거나 + 만들기를 선택하여 환경을 만듭니다.
      경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 .
    3. 에서 페이지 만들기 UI 빌더 을 클릭하거나 페이지를 엽니다.
    4. 컨텐츠 트리에서 + 구성 요소 추가 를 선택합니다.
    5. 레이아웃 탭에서 기본 옵션 중 하나를 선택합니다.
      기본 열 레이아웃 옵션을 나열하는 레이아웃 탭이 표시된 UI Builder의 부동 구성요소 메뉴입니다.
      열 레이아웃이 스테이지에 표시되므로 열에 구성요소를 추가할 수 있습니다. 자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.세 개의 빈 열이 있는 열 레이아웃입니다.
    6. 위 또는 아래에 열 레이아웃을 추가합니다.
      • 컨텐츠 트리에서 열 레이아웃 이름을 길게 선택(또는 마우스 오른쪽 단추 클릭)하거나 열 레이아웃에 대한 메뉴 아이콘을 선택합니다. 그런 다음 목록에서 다음 이전에 추가 또는 다음 이후에 추가 를 선택하고 레이아웃을 선택합니다.

        선택한 열 레이아웃의 앞 또는 뒤에 추가할 옵션을 보여주는 열 레이아웃 메뉴 아이콘이 선택된 컨텐츠 트리입니다.

      • 스테이지에서 열 레이아웃을 선택한 다음 위쪽 또는 아래쪽에 있는 더하기 기호를 선택합니다.

        추가 열 레이아웃을 추가하기 위한 더하기 기호 아이콘이 있는 기존 2개 열 레이아웃입니다.

    열 레이아웃 구성

    에서 열 레이아웃 UI 빌더 을 구성하여 적절한 수의 열과 경험 페이지에서 원하는 모양을 추가합니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
    2. 작업할 환경을 열거나 + 만들기를 선택하여 환경을 만듭니다.
      경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 .
    3. 에서 페이지 만들기 UI 빌더 을 클릭하거나 페이지를 엽니다.
    4. 페이지에 열 레이아웃 열 레이아웃 추가이 아직 포함되어 있지 않으면 .
    5. 컨텐츠 트리, 스테이지 또는 구성 패널을 사용하여 열을 추가합니다(최대 6개).
      • 콘텐츠 트리에서 열 이름을 길게 선택(또는 마우스 오른쪽 단추 클릭)하거나 열에 대한 메뉴 아이콘을 선택한 다음 목록에서 앞에 열 추가 또는 뒤에 열 추가 를 선택합니다.

        선택한 열의 앞이나 뒤에 열을 추가하는 옵션을 보여주는 열 메뉴 아이콘이 선택된 컨텐츠 트리입니다.

      • 스테이지에서 단일 열을 선택하고 열 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 앞에 열 추가 또는 뒤에 열 추가 를 선택합니다.

        선택한 열의 앞 또는 뒤에 열을 추가하는 옵션을 보여주는 열 메뉴 아이콘이 선택된 상태로 표시되는 스테이지입니다.

      • 스테이지에서 열을 길게 선택(또는 마우스 오른쪽 단추로 클릭)한 다음 목록에서 앞에 열 추가 또는 뒤에 열 추가 를 선택합니다.

        열 메뉴가 열려 있고 선택한 열의 앞이나 뒤에 열을 추가하는 옵션을 가리키는 검은색 화살표가 있는 스테이지가 표시됩니다.

      • 컨텐츠 트리에서 열 레이아웃을 선택한 다음 스테이지에서 + 더하기 아이콘을 선택하여 열 레이아웃의 오른쪽에 열을 추가합니다.

        열 레이아웃이 선택되고 더하기 아이콘을 가리키는 검은색 화살표가 열을 추가하기 위해 표시되는 스테이지입니다.

      • 콘텐츠 트리에서 열 레이아웃을 선택한 다음, 구성 패널에서 열 옆에 있는 + 더하기 아이콘을 사용하여 열 레이아웃의 오른쪽에 열을 추가합니다.

        레이아웃 열 옵션을 가리키는 검은색 화살표가 있는 열 레이아웃 구성 패널입니다.

      주:
      열은 서로 중첩될 수 있지만 이러한 수준의 복잡성은 페이지에 필요하지 않은 경우가 많습니다.
    6. 컨텐츠 트리, 스테이지 또는 구성 패널에서 열 레이블을 편집하여 열의 이름을 바꿉니다.
      • 콘텐츠 트리에서 열 이름을 길게 선택(또는 마우스 오른쪽 단추 클릭)하거나 열에 대한 메뉴 아이콘을 선택하고 이름 바꾸기를 선택합니다.
      • 스테이지에서 열 이름 옆에 있는 메뉴 아이콘을 선택하고 이름 바꾸기를 선택합니다.
      • 구성 패널에서 열 이름 옆에 있는 정보 아이콘을 선택합니다.구성 패널을 가리키는 화살표 열 이름 정보 아이콘 및 팝업 창이 확장되어 열 레이블 필드가 표시됩니다.
      열 이름을 바꾸면 스테이지와 컨텐츠 트리의 서로 다른 열을 구분하는 데 도움이 됩니다. 열 레이아웃과 열이 많은 복잡한 페이지가 있는 경우 열 이름을 바꾸는 것이 유용합니다.
    7. 레이아웃에서 열의 너비를 변경하려면 열 레이아웃(콘텐츠 트리 또는 스테이지)을 선택한 다음 스테이지에서 열 구분선을 왼쪽 또는 오른쪽으로 드래그하여 열을 더 좁게 또는 더 넓게 만듭니다.
      열 구분선을 끌어 열 크기를 조정하는 방법을 보여 주는 애니메이션입니다.
      열 맨 위에 있는 너비 백분율은 열 구분선을 끌면 자동으로 변경됩니다. 백분율의 합은 100%가 됩니다. 열 크기를 조정할 때는 열 내의 구성요소에 필요한 공간을 알고 있어야 합니다. 예를 들어, 목록과 양식 구성요소는 일반적으로 좁은 열에 잘 표시되지 않습니다.
    8. 컨텐츠 트리, 스테이지 또는 구성 패널을 사용하여 레이아웃의 열을 가로로 균등하게 분배합니다.
      • 콘텐츠 트리에서 열 레이아웃 이름을 길게 선택(또는 마우스 오른쪽 단추 클릭)하거나 열 레이아웃에 대한 메뉴 아이콘을 선택한 다음 목록에서 균등하게 열 분배 를 선택합니다.
      • 스테이지에서 열 레이아웃을 선택하고 열 레이아웃 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 열을 균등하게 분배 를 선택합니다.
      • 열 레이아웃(컨텐츠 트리 또는 스테이지)을 선택하고 구성 패널에서 열을 균등하게 분배를 선택합니다.
    9. 컨텐츠 트리 또는 스테이지를 사용하여 열 레이아웃 내에서 열(컨텐츠 포함)의 순서를 변경합니다.
      • 콘텐츠 트리에서 열을 선택하고 새 위치로 끌어옵니다(파란색 가로선은 열을 놓을 수 있는 위치를 나타냄).컨텐츠 트리의 열에서 트리의 새 위치를 가리키는 화살표로, 파란색 가로선으로 표시됩니다.
      • 스테이지에서 열 헤더를 선택하고 열을 새 위치로 끈 다음 자홍색 세로선으로 정의된 드롭 영역에 열을 놓습니다.스테이지의 열 헤더에서 세로 자홍색 막대로 표시된 드롭 영역을 가리키는 화살표입니다.
      컨텐츠 트리에서 열을 재정렬하면 스테이지가 업데이트되고, 스테이지에서 재정렬하면 컨텐츠 트리가 업데이트됩니다.
    10. 컨텐츠 트리, 스테이지 또는 구성 패널에서 열 사이의 공간 크기를 지정합니다.
      • 콘텐츠 트리에서 열 레이아웃 이름을 길게 선택(또는 마우스 오른쪽 단추 클릭)하거나 열 레이아웃에 대한 메뉴 아이콘을 선택하고, 목록에서 레이아웃 을 선택하고, 열 간격에서 크기 옵션을 선택합니다.
      • 스테이지에서 열 레이아웃을 선택하고, 열 레이아웃 이름 옆에 있는 메뉴 아이콘을 선택하고, 목록에서 레이아웃 을 선택하고, 열 간격에서 크기 옵션을 선택합니다.
      • 열 레이아웃(컨텐츠 트리 또는 스테이지)을 선택하고 구성 패널의 열 간격에서 크기 옵션을 선택합니다.옵션을 표시하도록 확장된 열 갭 필드가 있는 구성요소 패널입니다.
    11. 트리 아이콘을 선택하여 다른 콘텐츠 계층(예: 열에서 상위 열 레이아웃 또는 하위 구성요소)으로 이동합니다.
      스테이지의 열 레이아웃, 열 및 구성요소를 탐색하기 위한 트리 아이콘을 가리키는 화살표입니다.
    12. 컨텐츠 트리 또는 스테이지에서 열을 삭제합니다.
      • 콘텐츠 트리에서 열 이름을 길게 선택(또는 마우스 오른쪽 단추 클릭)하거나 열에 대한 메뉴 아이콘을 선택한 다음 목록에서 열 삭제 를 선택합니다.
      • 스테이지에서 단일 열을 선택하고 열 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 열 삭제 를 선택합니다.
      • 컨텐츠 트리에서 열 레이아웃을 선택한 다음 구성 패널에서 열 옆에 있는 - 빼기 아이콘을 사용하여 열 레이아웃의 오른쪽에서 열을 제거합니다.

    열과 열의 간격 설정

    의 열 레이아웃에서 열 사이의 간격을 UI 빌더설정합니다. 열에 여러 구성요소가 포함된 경우 구성요소 사이의 수평 또는 수직 간격을 설정합니다.

    시작하기 전에

    필요한 역할: ui_builder_admin

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
    2. 작업할 환경을 열거나 + 만들기를 선택하여 환경을 만듭니다.
      경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 .
    3. 에서 페이지 만들기 UI 빌더 을 클릭하거나 페이지를 엽니다.
    4. 페이지에 열 레이아웃 열 레이아웃 추가이 아직 포함되어 있지 않으면 .
    5. 컨텐츠 트리, 스테이지 또는 구성 패널에서 열 사이의 공간 크기를 지정합니다.
      • 콘텐츠 트리에서 열 레이아웃 이름을 길게 선택(또는 마우스 오른쪽 단추 클릭)하거나 열 레이아웃에 대한 메뉴 아이콘을 선택하고, 목록에서 레이아웃 을 선택하고, 열 간격에서 크기 옵션을 선택합니다.
      • 스테이지에서 열 레이아웃을 선택하고, 열 레이아웃 이름 옆에 있는 메뉴 아이콘을 선택하고, 목록에서 레이아웃 을 선택하고, 열 간격에서 크기 옵션을 선택합니다.
      • 열 레이아웃(컨텐츠 트리 또는 스테이지)을 선택하고 구성 패널의 열 간격에서 크기 옵션을 선택합니다.옵션을 표시하도록 확장된 열 갭 필드가 있는 구성요소 패널입니다.
    6. 단일 열의 여러 구성요소 사이의 공간 크기를 지정하려면 컨텐츠 트리에서 열을 선택합니다.
    7. 구성 패널의 Gap에서 크기 옵션을 선택합니다.
    8. 컴포넌트를 쌓는 것과 나란히 배치하는 것 사이를 변경하려면 방향에서 행 또는 열 아이콘을 선택합니다.

    고급 열 레이아웃 옵션 설정

    스택 너비 및 열 레이아웃 높이를 UI 빌더 포함하여 고급 열 레이아웃 옵션을 설정합니다.

    시작하기 전에

    필요한 역할: admin

    프로시저

    1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
    2. 작업할 환경을 열거나 + 만들기를 선택하여 환경을 만듭니다.
      경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 .
    3. 에서 페이지 만들기 UI 빌더 을 클릭하거나 페이지를 엽니다.
    4. 페이지에 열 레이아웃 열 레이아웃 추가이 아직 포함되어 있지 않으면 .
    5. 콘텐츠 트리에 최소 두 개의 열이 있는 열 레이아웃을 선택합니다.
      열 레이아웃이 하나 선택된 컨텐츠 트리입니다.
    6. 스택 너비를 설정하려면 Configuration panel > Layout(레이아웃 ) 으로 이동하여 Show advanced layout options(고급 레이아웃 옵션 표시)를 선택합니다.
      주:
      스택 너비를 설정하면 열 레이아웃이 있는 페이지가 좁은 브라우저 창, 태블릿 또는 모바일 장치에서 어떻게 보이는지 제어할 수 있습니다.
      고급 레이아웃 옵션 링크를 표시하는 검은색 화살표가 있는 구성 패널.
    7. 아래 스택 열에 너비를 입력합니다.
    8. 저장을 선택합니다.
    9. 새 스택 너비를 테스트하려면 미리 보기 옆에 있는 화살표를 선택하고 URL 경로 열기를 선택합니다.
    10. 브라우저 창 너비를 지정한 스택 너비보다 작게 줄여 오른쪽의 열이 첫 번째 열 아래로 이동하는지 확인합니다.
    11. URL 경로로 열린 브라우저 탭을 닫습니다.
    12. 열 레이아웃 높이를 제어하려면 콘텐츠 트리에 두 개 이상의 열이 있는 열 레이아웃을 선택하고 구성 패널 > 레이아웃으로 이동한 다음 고급 레이아웃 옵션 표시를 선택합니다.
      주:
      높이 설정은 열 레이아웃에 List 구성 요소와 같이 키가 클 수 있는 구성 요소가 포함된 경우에 유용합니다.
    13. 크기 조정에서 하나 이상의 옵션(높이, 최소)에 숫자를 입력합니다. H 및 Max. H)를 선택하고 크기 조정 단위(예: px, % 또는 em)를 설정합니다.
      고급 크기 조정 옵션을 가리키는 검은색 화살표가 있는 구성 패널.
    14. 저장을 선택합니다.
    15. 새 크기 조정을 테스트하려면 미리 보기 옆에 있는 화살표를 선택하고 URL 경로 열기를 선택합니다.
    16. 브라우저 창 높이를 줄이고 확장하여 지정된 값을 테스트합니다.
    17. URL 경로로 열린 브라우저 탭을 닫습니다.