# 페이지 레이아웃

## Content

포건시를 사용해 페이지를 구성할 때, 처음부터 무작정 컨트롤을 끌어다 놓으면 페이지가 지저분해지고 구조가 복잡해져 나중에 유지보수가 어려워집니다.
올바른 방법은 **먼저 페이지 레이아웃 계획 수립 → 영역 분해 → 마지막으로 적합한 레이아웃 방식과 셀 유형 선택** 입니다.
이 장에서는 핵심 레이아웃 시스템 기능과 대표적인 활용 시나리오인 그리드, 플렉스 레이아웃, 자유 레이아웃, 폼(Form)을 소개합니다.

### 일반적인 웹 시스템 페이지 구조

일반적인 웹 시스템의 페이지 프레임은 다음과 같이 구성됩니다.

* **상단 내비게이션 영역**: 로고, 메뉴, 검색창 배치
* **좌측 메뉴 영역**: 세로 방향의 기능 진입점
* **데이터 페이지 영역**: 핵심 데이터의 차트, 카드, 테이블 표시 및 폼 입력 페이지

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4f96589d-8403-419e-b2a1-4f6776199cb9/image-20260608.4637d3.png)
예시 시스템에서는 좌측이 내비게이션 메뉴, 상단에 로고 및 로그인 사용자 정보, 중앙이 주요 데이터 표시 영역으로 구성됩니다.

***

### **레이아웃 기능 비교**

**그리드, 플렉스 레이아웃, 폼, 자유 레이아웃** 이렇게 네 가지 레이아웃 방식이 있습니다.

|  | 플렉스 레이아웃 | 폼 (Form) | 형태 | 자유 레이아웃 |
| --- | -------- | -------- | --- | ------- |
| **기능** | Excel 유사 그리드, 고정 행/열 방식 | 행 또는 열 기준으로 요소 배열, 강력한 정렬 및 공간 배분 기능 | 데이터 테이블의 필드를 폼 형식으로 표시 | 좌표 없이 자유롭게 배치하는 레이아웃 |  |
| **대표 시나리오** | 빠른 구현, Excel 유사 그리드 페이지에 적합 | 반응형 레이아웃, 동적 요소, 영역 간 독립성 유지 | 전형적인 폼 페이지 또는 쿼리 패널의 인라인 폼 | 정적이고 불규칙한 레이아웃 페이지 |  |
| **단점** | 요소를 동적으로 표시/숨김 시 반응형 변화 불가. 행 높이/열 너비 조정 시 전체 영향 | 학습 비용 발생, 차트 및 테이블 사용 불가 | — | 동적 콘텐츠에 부적합, 차트 및 테이블 사용 불가 |  |
| **특수 사용 시나리오** | 배경 이미지, 전경 이미지, 테이블, 차트는 그리드에서만 사용 가능 | — | — | 특수 이미지 오버레이 시나리오 |  |

***

### 레이아웃 선택 가이드

1. **모든 셀의 최외곽 레이어는 그리드 레이아웃**으로, 그리드의 행/열 제어를 받습니다.
2. **배경 이미지, 전경 이미지, 차트, 테이블**은 그리드 영역에만 배치 가능하며, 플렉스 레이아웃·폼·자유 레이아웃 안에는 넣을 수 없습니다. (단, ECharts 차트 셀, EL 테이블, 가상 테이블 등은 플렉스/폼/자유 레이아웃 내 배치 가능)
3. 페이지 레이아웃 시에는 **먼저 레이아웃 계획을 수립하고 영역을 분해**합니다. 배경/전경 이미지, 차트, 테이블을 제외한 영역은 **플렉스 레이아웃을 우선 선택**하는 것이 좋습니다. 플렉스 레이아웃이 반응형 레이아웃에 더 적합하고, 컨테이너로 영역이 격리되어 유지보수 시 다른 영역에 영향을 주지 않기 때문입니다.

***

### 마스터 페이지 

마스터 페이지는 내비게이션 역할을 하며, 시스템 전체의 공통 정보와 내비게이션 콘텐츠를 담습니다.

* 2행에 **플렉스 레이아웃**을 사용하여 로고와 사용자 정보를 표시
* 마스터 페이지 좌측에는 **메뉴 셀**을 사용하여 페이지 내비게이션 구성

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4f96589d-8403-419e-b2a1-4f6776199cb9/image-20260608.40ab1a.png?width=800)

***

### 데이터 페이지

시스템의 대부분 페이지는 데이터 페이지입니다. 대시보드/워크스페이스, 데이터 목록 페이지, 폼 입력 페이지 등이 해당됩니다.
어떤 페이지든 올바른 방식은 동일합니다: **레이아웃 계획 수립 → 영역 분해 → 적합한 레이아웃 방식 및 셀 유형 선택**

#### 데이터 목록 페이지

크게 **쿼리 패널, 작업 표시줄, 테이블** 3개 영역으로 구분됩니다.

* 쿼리 패널 및 작업 표시줄: **폼 또는 플렉스 레이아웃** 사용
* 테이블: **그리드 영역** 사용 (활자격 테이블의 경우)
* 권장 방식: 3개 영역으로 분리하여 **그리드 + 플렉스/폼** 조합 사용 → 플렉스 레이아웃 중첩을 줄여 복잡도 감소
    ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4f96589d-8403-419e-b2a1-4f6776199cb9/image-20260608.14a029.png?width=800)

#### 대시보드 페이지

상단부터 하단까지 크게 3개 영역으로 구분됩니다.

* **1영역** (데이터 통계): 플렉스 레이아웃 사용 (플렉스 중첩 필요)
* **2\~3영역** (차트 및 테이블): 차트와 테이블은 그리드 영역에서만 사용 가능하므로, 그리드 영역에서 직접 완성

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4f96589d-8403-419e-b2a1-4f6776199cb9/image-20260608.61704e.png?width=800)