페이지 레이아웃

포건시를 사용해 페이지를 구성할 때, 처음부터 무작정 컨트롤을 끌어다 놓으면 페이지가 지저분해지고 구조가 복잡해져 나중에 유지보수가 어려워집니다.

올바른 방법은 먼저 페이지 레이아웃 계획 수립 → 영역 분해 → 마지막으로 적합한 레이아웃 방식과 셀 유형 선택 입니다.

이 장에서는 핵심 레이아웃 시스템 기능과 대표적인 활용 시나리오인 그리드, 플렉스 레이아웃, 자유 레이아웃, 폼(Form)을 소개합니다.

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

예시 시스템에서는 좌측이 내비게이션 메뉴, 상단에 로고 및 로그인 사용자 정보, 중앙이 주요 데이터 표시 영역으로 구성됩니다.

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

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

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

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

시스템의 대부분 페이지는 데이터 페이지입니다. 대시보드/워크스페이스, 데이터 목록 페이지, 폼 입력 페이지 등이 해당됩니다.

어떤 페이지든 올바른 방식은 동일합니다: 레이아웃 계획 수립 → 영역 분해 → 적합한 레이아웃 방식 및 셀 유형 선택

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

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