열 레이아웃

열 레이아웃은 페이지를 디자인하고 구성하는 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. 도구 상자 창에서 구성요소(예: Avatar)를 선택합니다.
   3. 콘텐츠 트리에서 방금 추가한 구성 요소의 이름 위로 마우스를 이동하고, 메뉴 열기(세로 점 3개) 아이콘을 선택하고, 뒤에 추가를 선택합니다.
      
   4. 도구 상자 창에서 다른 구성요소(예: Button)를 선택합니다.
6. 저장을 선택합니다.
7. 컨텐츠 트리에서 두 구성요소를 추가한 열을 선택합니다.
8. 구성 패널의 [간격]에서 크기 옵션을 선택합니다.
   
9. 정확한 간격 크기를 픽셀 단위로 지정하려면 간격 필드 위로 마우스를 이동하고 사용자 지정 값 사용 (연필) 아이콘을 선택한 다음 숫자(예: 300px)를 입력합니다.
   
10. 구성요소를 쌓는 것과 열에서 나란히 배치하는 것 사이를 변경하려면 방향에서 행 또는 열 아이콘을 선택합니다.
    

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

    

고급 열 레이아웃 옵션 설정

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

시작하기 전에

필요한 역할: ui_builder_admin

프로시저

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

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

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

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