---
sourceDocument: 호주 애플리케이션 빌드 또는 수정
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 애플리케이션 빌드 또는 수정

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# 열 레이아웃

# 열 레이아웃 {#ariaid-title1}

* 릴리스 버전: Australia
* 
* 업데이트 날짜 2026년 03월 12일
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 8분

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

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

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

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

열 레이아웃을 전체적으로 구성하고 레이아웃 내의 개별 열을 구성할 수 있습니다. 예를 들어 열 레이아웃과 레이아웃 내의 개별 열에 대해 다른 테두리 너비와 색상을 설정합니다.  
주:  
현재 조건에 따라 열 레이아웃에서 열 숨기기/표시는 지원되지 않습니다.

## 열 레이아웃 추가 {#ariaid-title2}

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

### 시작하기 전에

필요한 역할: ui_builder_admin

### 프로시저

1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험.  
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") .
3. [UI 빌더에서 페이지 생성](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더") 페이지를 엽니다.
4. 콘텐츠 트리에서 + 콘텐츠 추가 를 선택합니다.
5. 레이아웃 탭에서 기본 옵션 중 하나를 선택합니다.  
   열에 구성요소를 추가할 수 있도록 열 레이아웃이 스테이지에 나타납니다. 자세한 내용은 [구성요소 추가 및 구성](https://servicenow-prod.fluidtopics.net/qmxQoGzAEcZmJDRXYpo1aw#add-components "에서 페이지에 UI 빌더구성요소를 추가하는 방법에 대해 알아봅니다. 구성요소를 추가하여 페이지가 빌드됩니다.") 문서를 참조하십시오.
6. 위 또는 아래에 열 레이아웃을 추가합니다.
   * 콘텐츠 트리에서 열 레이아웃 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열 레이아웃에 대한 메뉴 아이콘을 선택합니다. 그런 다음 목록에서 이전 추가 또는 이후에 추가 를 선택하고 레이아웃을 선택합니다.

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

   {#create-column-layout__choices_tgp_1d2_rzb}

## 열 레이아웃 구성 {#ariaid-title3}

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

### 시작하기 전에

필요한 역할: ui_builder_admin

### 프로시저

1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험.  
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") .
3. [UI 빌더에서 페이지 생성](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더") 페이지를 엽니다.
4. 페이지에 열 레이아웃 [열 레이아웃 추가](https://servicenow-prod.fluidtopics.net/rVU5iJlvhBUPVa9x5_mgfg#create-column-layout "에서 열 레이아웃 UI 빌더 을 추가하여 경험 페이지에서 구성요소를 빌드하고 구성합니다.")이 아직 포함되어 있지 않은 경우 .
5. 콘텐츠 트리, 스테이지 또는 구성 패널을 사용하여 열을 추가합니다(최대 6개).
   * 콘텐츠 트리에서 열 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열의 메뉴 아이콘을 선택한 다음 목록에서 다음 앞에 열 추가 또는 뒤에 열 추가 를 선택합니다.

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

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

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

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

   {#configure-column-layouts__choices_qqr_5wv_qzb}  
   주:  
   열은 서로 중첩될 수 있지만 페이지에서는 이러한 수준의 복잡성이 필요하지 않습니다.
6. 콘텐츠 트리, 스테이지 또는 구성 패널에서 열 레이블을 편집하여 열 이름을 바꿉니다.
   * 콘텐츠 트리에서 열 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열의 메뉴 아이콘을 선택하고 이름 바꾸기를 선택합니다.
   * 스테이지에서 열 이름 옆에 있는 메뉴 아이콘을 선택하고 이름 바꾸기를 선택합니다.
   * 구성 패널에서 열 이름 옆에 있는 정보 아이콘을 선택합니다.

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

   * 스테이지에서 열 헤더를 선택하고 열을 다른 위치로 끌어서 자홍색 세로 선으로 정의된 드롭존에 열을 놓습니다.

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

    {#configure-column-layouts__choices_ud2_hnr_11c}
11. 트리 아이콘을 선택하여 컨텐츠의 다른 레이어(예: 열에서 상위 열 레이아웃 또는 하위 구성요소로)로 이동합니다.  
12. 컨텐츠 트리 또는 스테이지에서 열을 삭제합니다.
    * 콘텐츠 트리에서 열 이름을 길게 누르거나 마우스 오른쪽 버튼으로 클릭하거나 열의 메뉴 아이콘을 선택한 다음 목록에서 열 삭제 를 선택합니다.
    * 스테이지에서 단일 열을 선택하고 열 이름 옆에 있는 메뉴 아이콘을 선택한 다음 목록에서 열 삭제 를 선택합니다.
    * 콘텐츠 트리에서 열 레이아웃을 선택한 다음 구성 패널에서 열 옆에 있는 빼기 아이콘을 사용하여 열 레이아웃의 오른쪽에서 열을 제거합니다.

    {#configure-column-layouts__choices_nrl_xjd_rzb}  
    열 간격 편집에 대한 자세한 내용은 다음 문서를 참조하십시오 [열의 구성요소 간 간격 설정](https://servicenow-prod.fluidtopics.net/rVU5iJlvhBUPVa9x5_mgfg#set-gap-between-and-in-columns "UI 빌더에서 열에 여러 구성요소가 포함된 경우 구성요소 사이의 간격을 설정합니다.").

## 열의 구성요소 간 간격 설정 {#ariaid-title4}

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

### 시작하기 전에

필요한 역할: ui_builder_admin

### 프로시저

1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험.  
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") .
3. [UI 빌더에서 페이지 생성](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더") 페이지를 엽니다.
4. 페이지에 열 레이아웃 [열 레이아웃 추가](https://servicenow-prod.fluidtopics.net/rVU5iJlvhBUPVa9x5_mgfg#create-column-layout "에서 열 레이아웃 UI 빌더 을 추가하여 경험 페이지에서 구성요소를 빌드하고 구성합니다.")이 아직 포함되어 있지 않은 경우 .
5. 단일 열 내에 두 개의 구성요소를 추가합니다
   1. 콘텐츠 트리에서 열을 식별하고 열 이름 아래에서 + 콘텐츠 추가 를 선택합니다.
   2. 도구 상자 창에서 구성요소(예: 아바타)를 선택합니다.
   3. 컨텐츠 트리에서 방금 추가한 구성요소의 이름 위로 마우스를 이동하고, 메뉴 열기(세로 점 3개) 아이콘을 선택하고, Add after (뒤에 추가) 를 선택합니다.  
   4. 도구 상자 창에서 다른 구성요소( 예: 버튼)를 선택합니다.
   {#set-gap-between-and-in-columns__substeps_csp_wgf_51c}
6. 저장을 선택합니다.
7. 콘텐츠 트리에서 두 구성요소를 추가한 열을 선택합니다.
8. 구성 패널의 간격에서 크기 옵션을 선택합니다.  
9. 정확한 간격 크기를 픽셀 단위로 지정하려면 간격 필드 위로 마우스를 이동하고 사용자 지정 값 사용 (연필) 아이콘을 선택한 다음 숫자( <kbd class="ph userinput">예: 300px</kbd>)를 입력합니다.  
10. 구성요소를 스택하는 것과 열에서 나란히 배치하는 사이를 변경하려면 방향에서행 또는 열 아이콘을 선택합니다.  
    ![구성 패널에서 방향 필드를 가리키는 검은색 화살표와 행 및 열 아이콘을 가리키는 두 번째 검은색 화살표.]()

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

    ![구성 패널에서 방향 필드를 가리키는 검은색 화살표와 고급 방향 아이콘을 가리키는 두 번째 검은색 화살표.]()

## 고급 열 레이아웃 옵션 설정 {#ariaid-title5}

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

### 시작하기 전에

필요한 역할: ui_builder_admin

### 프로시저

1. 다음으로 이동 모두Now Experience 프레임워크UI 빌더.
2. 선택하여 작업할 경험을 열거나 경험을 생성합니다. 작성경험.  
   경험 생성에 대한 자세한 내용은 다음을 참조하십시오 [UI 빌더에서 사용자가 애플리케이션과 상호 작용하는 방법 구성](https://servicenow-prod.fluidtopics.net/wmSXv2G8HVoRum7Zuh3W9w "에서 경험이 UI 빌더무엇인지 알아봅니다. 경험에 포함된 내용을 이해합니다.") .
3. [UI 빌더에서 페이지 생성](https://servicenow-prod.fluidtopics.net/hdB5pxJ108nQsFmjCl3uYg "사용자를 위한 웹 환경을 구축할 수 있도록 포털, 작업 공간 또는 사용자 지정 애플리케이션에 대한 페이지를 생성합니다.UI 빌더") 페이지를 엽니다.
4. 페이지에 열 레이아웃 [열 레이아웃 추가](https://servicenow-prod.fluidtopics.net/rVU5iJlvhBUPVa9x5_mgfg#create-column-layout "에서 열 레이아웃 UI 빌더 을 추가하여 경험 페이지에서 구성요소를 빌드하고 구성합니다.")이 아직 포함되어 있지 않은 경우 .
5. 콘텐츠 트리에서 두 개 이상의 열이 포함된 열 레이아웃을 선택합니다.  
6. 스택 너비를 설정하려면 구성 패널 \> 레이아웃 으로 이동하여 고급 레이아웃 옵션 표시를 선택합니다.  
   주:  
   스택 너비를 설정하면 열 레이아웃이 있는 페이지가 좁은 브라우저 창, 태블릿 또는 모바일 장치에서 어떻게 보이는지 제어할 수 있습니다.
7. 아래 스택 열에 너비를 입력합니다.
8. 저장을 선택합니다.
9. 업데이트된 스택 너비를 테스트하려면 미리 보기 옆의 화살표를 선택하고 URL 경로 열기를 선택합니다.
10. 브라우저 창 너비를 지정한 스택 너비보다 작게 줄여 오른쪽의 열이 첫 번째 열 아래로 이동하는지 확인합니다.
11. URL 경로와 함께 열린 브라우저 탭을 닫습니다.
12. 열 레이아웃 높이를 제어하려면 콘텐츠 트리에서 두 개 이상의 열이 있는 열 레이아웃을 선택하고 구성 패널 \> 레이아웃으로 이동한 다음 고급 레이아웃 옵션 표시를 선택합니다.  
    주:  
    열 레이아웃에 목록 구성요소와 같이 키가 클 수 있는 구성요소가 포함된 경우 높이 설정이 유용합니다.
13. 크기 조정에서 하나 이상의 옵션(높이, 최소값. H 및 최대. H)을 클릭하고 크기 조정 단위(예: px, % 또는 em)를 설정합니다.  
14. 저장을 선택합니다.
15. 업데이트된 크기를 테스트하려면 미리 보기 옆의 화살표를 선택하고 URL 경로 열기를 선택합니다.
16. 브라우저 창 높이를 줄이거나 확장하여 지정된 값을 테스트합니다.
17. URL 경로와 함께 열린 브라우저 탭을 닫습니다.