> 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>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tech.x2bee.com/dev-guide/pjt-prepare/ui-ux/undefined/undefined-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.