---
sourceDocument: 호주 판매 고객 관계 관리
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/order-management

 Release :

    - australia

ft:locale :

    - ko-KR

ft:publication_title :

    - 호주 판매 고객 관계 관리

ft:clusterId :

    - omgmt

bundleId :

    - omgmt

workflow :

    - Customer and Industry


---

# 레이아웃: 심층 분석

# 레이아웃: 심층 분석 {#ariaid-title1}

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

에서 계층, 열 세트, 제품 목록 레이아웃 등 고급 레이아웃 개념 CPQ을 알아봅니다. CSV 파일로 페이지, 탭 및 섹션을 구조화하여 체계적이고 직관적인 사용자 경험을 갖춘 동적이고 반응이 빠른 구성 인터페이스를 만드는 방법을 이해합니다.

## 계층 및 계층 정의 {#layout_deeper_dive__section_ohv_zh2_dhc}

계층은 페이지의 섹션을 정의합니다.

각 계층과 하위 계층에는 구성요소 표시 유형(F열)을 정의하는 tierDef가 필요합니다. 각 계층에는 Tab, ExpandableSection, Pages, Accordion, AccordionWithNavigation 및 VerticalTab 옵션이 있습니다. 아래의 각 예는 계층 구조가 다른 동일한 구성을 보여줍니다.

* 탭:

* ExpandableSection(이렇게 하면 레이아웃이 더 세로로 만들어집니다)
* 페이지:

{#layout_deeper_dive__ul_lj4_xww_shc}

계층 내에 하위 계층을 가질 수도 있습니다.

ExpandableSection 하위 계층이 있는 탭 계층:

이 2계층 레이아웃을 생성하는 데 사용된 CSV 파일의 스크린샷은 다음과 같습니다. 강조 표시된 셀은 여러 계층에 플래그가 지정되는 방법을 보여줍니다. 행 9와 10의 경로가 8행의 맨 위 행 tierDef와 동일하므로 셀이 탭 레이아웃으로 표시됩니다.

tierDef 수준(이미지의 8행)에서 레이블 또는 변수 이름을 정의하지 마십시오. 계층 수준(9행과 10행)에서 적용됩니다.

## 레이블 열 {#layout_deeper_dive__label_column}

필드와 계층 모두에서 레이블 열에 입력된 텍스트는 레이아웃의 화면에 나타나는 텍스트입니다. 노란색 행의 레이블은 각 탭의 레이블로 나타납니다. 레이블 열은 필드에도 사용됩니다.

## 변수 이름 {#layout_deeper_dive__variablename}

변수는 경로를 정의하고 에서 CPQ작성된 특정 필드를 호출하는 데 사용됩니다. 다음 이미지의 9행에서 변수 이름 background 은 E 열에 정의되어 있습니다. 행 25-29에서 경로 background (열 B)에 추가됩니다. 이렇게 하면 해당 항목이 계층에 포함된다는 것을 알 CPQ 수 있습니다.background

레이아웃과 관련된 변수는 필드 또는 규칙에 정의된 CPQ 변수와 달라야 합니다. 에 CPQ 정의된 변수가 레이아웃 CSV에도 사용되기 때문입니다. UI의 CPQ 필드에 할당된 변수 이름은 필드를 레이아웃에 추가하는 데 사용됩니다. 다음 이미지는 필드 변수(variablename=desiredIrons) CPQ 를 참조하는 CSV 파일을 보여 주며, 그 결과 레이아웃에 필드가 표시됩니다.

## 열 세트 유형 {#layout_deeper_dive__columnset_types}

열 세트는 계층에서 객체의 수직 위치를 정의하는 데 도움이 됩니다. 레이아웃은 브라우저의 너비(변경 CPQ 될 수 있음)에 반응하므로 열 세트를 사용하여 관리자가 의도적인 행 중단점을 식별하는 데 도움을 줍니다.

사용자가 전체 열 세트가 한 행에 맞지 않는 작은 창을 사용하는 경우 열은 다음 행으로 계속 진행됩니다. 열 세트의 끝은 항상 새 행을 트리거합니다.

다음 이미지에서 필드는 user 1열 세트의 일부이고 필드 leftHanded 와 bag 는 두 번째 열 세트의 일부입니다. 브라우저 창이 너무 작아져서 세 그림(에 대한 선택 목록 옵션) user을 모두 볼 수 없으면 열 세트가 다음 행에서 계속됩니다. 세 번째 이미지 옆에 필드를 위한 leftHanded 공간이 있지만 새 행에 있습니다.

## 열 순서 {#layout_deeper_dive__columnorder}

CSV 파일의 열은 columnorder 동일한 열 세트에 있는 열의 순서를 변경합니다. 다음 이미지와 같이 필드를 순서대로 CSV에 추가할 필요는 없습니다.

## 제품 목록 레이아웃 {#layout_deeper_dive__product_list_layouts}

제품 목록은 구성의 쇼핑 카트 기능을 사용자 지정하는 방법입니다. 제품 목록에 항목을 추가하기 위해 새 제품 규칙이 생성됩니다. 사용자가 단순을 선택하면 다음 필드를 사용할 수 있습니다.

사용자가 필드를 레이아웃에 표시하려면 필드의 레이아웃 CSV에 열을 추가합니다. (사용자는 연결된 테이블의 열에 있는 ProductList.\<param\> 값을 변수 이름으로 사용합니다. 다음 이미지는 참고 1을 참조하십시오.)

다음은 레이아웃 CSV의 제품 목록 섹션 스크린샷입니다.

몇 가지 유의 사항:

1. 이 열의 변수가 productList의 값과 일치합니다.\<param\> 열 {hauss- extList 및 List가 누락되었습니다}. 이것은 다음을 알려줍니다. CPQ 테이블에 사용자 입력을 추가합니다.
2. 개별 열의 텍스트 정렬을 조정하려면 클래스 slds-text- align_left, , slds-text-align_right또는 slds-text-align_center. 여러 클래스 이름을 추가하려면 공백으로 구분합니다.
3. price, list, 숫자 extList 가 잘 정렬되도록 항상 오른쪽으로 정렬합니다.
4. 화면의 공간을 절약하려면 을 선택합니다modal.location
{#layout_deeper_dive__ul_dgp_rm2_dhc}

## 계층 구성요소 {#layout_deeper_dive__section_fxw_1vg_phc}

CSV 레이아웃의 구성요소 열에 이러한 계층 구성요소 속성 이름을 사용합니다.
{#layout_deeper_dive__table_uqd_f32_dhc__entry__3}

| 구성요소 | 속성 이름 | 설명 |
|-|-|-|
| 기본 컨테이너 | BasicContainer | 장식 또는 탐색이 없는 계층 컨테이너 |
| 확장 가능한 섹션 | ExpandableSection | 섹션 헤더로 회색 막대가 있는 확장 가능한 섹션의 계층 표시 초기 상태에 대한 값 설정: `defaultState: 지연 | 축소됨` 계층을 지연 로드하려면 다른 섹션이 렌더링을 시작한 후 섹션을 여는 "지연"을 사용합니다. |
| 아코디언 | Accordion | 확장 가능한 섹션과 유사하지만 하나만 확장됨 |
| 탐색이 있는 아코디언 | AccordionWithNavigation | 확장 가능한 섹션과 비슷하지만 하나만 확장되고 다음/이전 버튼이 포함됩니다. |
| 탭 | Tab | 가로 탭 그룹의 계층 표시 |
| 세로 탭 | VerticalTab | 세로 탭 그룹에 계층 표시(탭은 왼쪽에 있음) |
| 페이지 | Pages | 계층을 상단에 진행률 탐색 표시줄이 있는 페이지로 표시합니다(계층 이름은 마우스를 가리킬 때 표시됨). |
| 레이블이 있는 페이지 | PagesWithLabels | 필요에 따라 잘라내는 레이블을 포함하여 상단에 진행률 탐색 표시줄이 있는 페이지로 계층을 표시합니다(가리키기 표시 없음). |
[표 1. 계층 구성요소]

{#layout_deeper_dive__table_uqd_f32_dhc}