> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/ui-ux/undefined/undefined-2.md).

# 레이아웃

본 문서에서 X2BEE 프로젝트의 표준 레이아웃에 대하여 기술합니다.

레이아웃 해상도와 UI구현 컨셉에 대하여 설명합니다.

***

## 해상도 <a href="#undefined" id="undefined"></a>

* 해상도는 스크린 점유율 통계를 기반으로 결정
* PC 웹과 모바일 웹을 기준으로 하며 브라우저 별 변경 사이즈는 CSS미디어 쿼리로 정의
* 태블릿의 경우 PC버전으로 구현
* 웹의 최저 해상도는 1003px

&#x20;

<div align="left"><figure><img src="https://tech.x2bee.com/download/attachments/14352398/%EB%AA%A8%EB%8B%88%ED%84%B0%20%ED%95%B4%EC%83%81%EB%8F%84.png" alt=""><figcaption></figcaption></figure></div>

## UI구현 컨셉 <a href="#ui" id="ui"></a>

### 메인프레임 레이아웃 <a href="#undefined" id="undefined"></a>

<figure><img src="https://tech.x2bee.com/download/attachments/14352398/Untitled%20Diagram.drawio.png" alt=""><figcaption></figcaption></figure>

| 기본구성                              | Top/left/work/Bottom 4분활 구조                                               |
| --------------------------------- | ------------------------------------------------------------------------- |
| GNB (Global Navigation Bar)       | 시스템 LOGO 전체 단위 시스템 이동                                                     |
| LNB (Local Navigation Bar)        | 로컬메뉴(1\~3), 마이메뉴, 전체 시스템 메뉴(xx, xx, xx)                                   |
| 작업 공간(Work Area)                  | <p>단위 메뉴 화면의 업무처리가 이루어지는 영역<br>단위와 관련된 기능(마이 메뉴 등록, 화면 잠금 기능, 도움말) 노출</p> |
| MDI((Multiple document interface) | 오픈 된 메뉴 화면 탭으로 보여짐                                                        |

### 화면 스크롤 기본 정책 <a href="#undefined" id="undefined"></a>

업무영역은 기준 해상도에서 가로 스크롤이 생성되지 않는 것을 원칙으로 하고 업무영역의 세로방향은 가급적 스크롤이 생성되지 않은 것을 권장합니다.

Grid Text Area 컴포넌트 내부의 가로 또는 세로스크롤 생성은 허용합니다.

기준 행상도 1920\*1080/사용자 작업 공간 1360\*1040

<figure><img src="https://tech.x2bee.com/download/attachments/14352398/frame%20scroll.png" alt=""><figcaption></figcaption></figure>

### 작업 공간 유형 <a href="#undefined" id="undefined"></a>

<br>

<figure><img src="https://tech.x2bee.com/download/attachments/14352398/%EC%A0%9C%EB%AA%A9%20%EC%97%86%EB%8A%94%20%EB%8B%A4%EC%9D%B4%EC%96%B4%EA%B7%B8%EB%9E%A8-1684455402143.drawio-aaa74d4878d6110e1eb4b7df7c87532df0f9c79d.png" alt=""><figcaption></figcaption></figure>