열 레이아웃

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

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

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

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

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

주:

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

열 레이아웃 추가

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

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

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

     

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

     

열 레이아웃 구성

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

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

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

     

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

     

   • 스테이지에서 열을 길게 누르거나 마우스 오른쪽 버튼으로 클릭한 다음 목록에서 다음 앞에 열 추가 또는 뒤에 열 추가를 선택합니다.

     

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

     

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

     

   주:

   열은 서로 중첩될 수 있지만 페이지에 이러한 수준의 복잡성이 필요한 경우는 많지 않습니다.
6. 컨텐츠 트리, 스테이지 또는 구성 패널에서 열 레이블을 편집하여 열 이름을 바꿉니다.
   • 콘텐츠 트리에서 열 이름을 길게 누르거나(또는 마우스 오른쪽 단추로 클릭하거나) 열의 메뉴 아이콘을 선택하고 이름 바꾸기를 선택합니다.
   • 스테이지에서 열 이름 옆에 있는 메뉴 아이콘을 선택하고 이름 바꾸기를 선택합니다.
   • 구성 패널에서 열 이름 옆에 있는 정보 아이콘을 선택합니다.

     

   열 이름을 변경하면 스테이지와 콘텐츠 트리의 서로 다른 열을 구분하는 데 도움이 됩니다. 열 레이아웃과 열이 많은 복잡한 페이지가 있는 경우 열 이름을 바꾸는 것이 유용합니다.
7. 레이아웃에서 열의 너비를 변경하려면 열 레이아웃(콘텐츠 트리 또는 스테이지에서)을 선택한 다음, 스테이지의 열 구분선을 왼쪽 또는 오른쪽으로 드래그하여 열을 더 좁게 또는 넓히십시오.
   
   열 구분선을 끌면 열 위쪽의 너비 비율이 자동으로 변경됩니다. 백분율은 최대 100%까지 합산됩니다. 열 크기를 조정할 때는 열 내의 구성요소에 필요한 공간을 알고 있어야 합니다. 예를 들어 목록 및 양식 구성요소는 일반적으로 좁은 열에서 잘 표시되지 않습니다.
8. 콘텐츠 트리, 스테이지 또는 구성 패널을 사용하여 레이아웃의 열을 가로로 균등하게 분배합니다.
   • 콘텐츠 트리에서 열 레이아웃 이름을 길게 누르거나(또는 마우스 오른쪽 단추로 클릭) 열 레이아웃에 대한 메뉴 아이콘을 선택한 다음, 목록에서 균등하게 열 분배를 선택합니다.
   • 단계에서 열 레이아웃을 선택하고 열 레이아웃 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 열 균등 분배를 선택합니다.
   • 열 레이아웃(콘텐츠 트리 또는 스테이지)을 선택하고 구성 패널에서 열을 균등하게 분배를 선택합니다.
9. 콘텐츠 트리 또는 스테이지를 사용하여 열 레이아웃 내에서 열(해당 콘텐츠 포함)을 재정렬합니다.
   • 컨텐츠 트리에서 열을 선택하고 다른 위치(파란색 가로선은 열을 놓을 수 있는 위치를 나타냄)로 끕니다.

     

   • 스테이지에서 열 헤더를 선택하고 열을 다른 위치로 드래그한 다음 세로 자홍색 선으로 정의된 드롭 영역에 열을 놓습니다.

     

   콘텐츠 트리에서 열을 재정렬하면 스테이지가 업데이트되고 스테이지에서 순서를 변경하면 콘텐츠 트리가 업데이트됩니다.
10. 컨텐츠 트리, 스테이지 또는 구성 패널의 열 사이의 공간 크기를 지정합니다.
    • 콘텐츠 트리에서 열 레이아웃 이름을 길게 누르거나(또는 마우스 오른쪽 버튼으로 클릭하거나) 열 레이아웃의 메뉴 아이콘을 선택하고, 목록에서 레이아웃을 선택하고, 열 간격에서 크기 옵션을 선택합니다.
    • 스테이지에서 열 레이아웃을 선택하고, 열 레이아웃 이름 옆에 있는 메뉴 아이콘을 선택하고, 목록에서 레이아웃을 선택하고, 열 간격에서 크기 옵션을 선택합니다.
    • 열 레이아웃(콘텐츠 트리 또는 스테이지)을 선택하고 구성 패널의 열 간격에서 크기 옵션을 선택합니다.

      

11. 트리 아이콘을 선택하여 콘텐츠의 다른 계층(예: 열에서 상위 열 레이아웃 또는 하위 구성요소까지)으로 이동합니다.
    
12. 컨텐츠 트리 또는 스테이지에서 열을 삭제합니다.
    • 콘텐츠 트리에서 열 이름을 길게 누르거나(또는 마우스 오른쪽 단추로 클릭) 열의 메뉴 아이콘을 선택한 다음, 목록에서 열 삭제를 선택합니다.
    • 단계에서 단일 열을 선택하고 열 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 열 삭제를 선택합니다.
    • 콘텐츠 트리에서 열 레이아웃을 선택한 다음 구성 패널에서 열 옆에 있는 - 빼기 아이콘을 사용하여 열 레이아웃의 오른쪽에 있는 열을 제거합니다.
    열 간격 편집에 대한 자세한 내용은 을 참조하십시오 열에서 구성요소 간 간격 설정.

열에서 구성요소 간 간격 설정

에서 UI 빌더열에 여러 구성요소가 포함된 경우 구성요소 사이의 간격을 설정합니다.

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 를 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 에서 페이지 생성 UI 빌더 을 클릭하거나 페이지를 엽니다.
4. 페이지에 열 레이아웃이 아직 포함되어 있지 않은 경우 열 레이아웃 추가.
5. 단일 열 내에 두 개의 구성요소를 추가합니다.
   1. 콘텐츠 트리에서 열을 식별하고 열 이름 아래에서 + 콘텐츠 추가를 선택합니다.
   2. 도구 상자 창에서 구성요소(예: 아바타)를 선택합니다.
   3. 컨텐츠 트리에서 방금 추가한 구성 요소의 이름 위로 마우스를 이동하고 메뉴 열기(세로 점 3개) 아이콘을 선택한 다음 뒤에 추가를 선택합니다.
      
   4. 도구 상자 창에서 다른 구성요소(예: Button)를 선택합니다.
6. 저장을 선택합니다.
7. 콘텐츠 트리에서 두 구성요소를 추가한 열을 선택합니다.
8. 구성 패널의 간격에서 크기 옵션을 선택합니다.
   
9. 정확한 간격 크기를 픽셀 단위로 지정하려면 간격 필드 위로 마우스를 이동하고 사용자 지정 값 사용 (연필) 아이콘을 선택한 다음 숫자(예: 300px)를 입력합니다.
   
10. 컴포넌트를 스택하는 것과 열에 나란히 배치하는 것 사이에서 변경하려면 방향에서 행 또는 열 아이콘을 선택합니다.
    

    열에 있는 구성요소의 순서와 배치를 반대로 하려면 방향에서 고급(가로 점 3개) 아이콘을 선택한 다음 반전 옵션을 선택합니다.

    

고급 열 레이아웃 옵션 설정

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

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 를 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 에서 페이지 생성 UI 빌더 을 클릭하거나 페이지를 엽니다.
4. 페이지에 열 레이아웃이 아직 포함되어 있지 않은 경우 열 레이아웃 추가.
5. 콘텐츠 트리에서 두 개 이상의 열을 포함하는 열 레이아웃을 선택합니다.
   
6. 스택 너비를 설정하려면 구성 패널 > 레이아웃 으로 이동하여 고급 레이아웃 옵션 표시를 선택합니다.
   주:

   스택 너비를 설정하면 좁은 브라우저 창, 태블릿 또는 모바일 장치에서 열 레이아웃이 있는 페이지가 어떻게 보이는지 제어할 수 있습니다.

   
7. 아래 스택 열에 너비를 입력합니다.
8. 저장을 선택합니다.
9. 업데이트된 스택 너비를 테스트하려면 미리 보기 옆에 있는 화살표를 선택하고 URL 경로 열기를 선택합니다.
10. 브라우저 창 너비를 지정한 스택 너비보다 작게 줄여 오른쪽의 열이 첫 번째 열 아래로 이동하는지 확인합니다.
11. URL 경로로 열린 브라우저 탭을 닫습니다.
12. 열 레이아웃 높이를 제어하려면 콘텐츠 트리에서 두 개 이상의 열이 있는 열 레이아웃을 선택하고 구성 패널 > 레이아웃으로 이동한 다음 고급 레이아웃 옵션 표시를 선택합니다.
    주:

    높이 설정은 열 레이아웃에 목록 구성 요소와 같이 키가 클 수 있는 구성 요소가 포함된 경우에 유용합니다.
13. 크기 조정에서 하나 이상의 옵션에 숫자를 입력합니다(높이, 최소. H 및 Max. H)를 클릭하고 크기 조정 단위( 예: px, % 또는 em)를 설정합니다.
    
14. 저장을 선택합니다.
15. 업데이트된 크기 조정을 테스트하려면 미리 보기 옆에 있는 화살표를 선택하고 URL 경로 열기를 선택합니다.
16. 브라우저 창 높이를 줄이거나 확장하여 지정된 값을 테스트합니다.
17. URL 경로로 열린 브라우저 탭을 닫습니다.