레이아웃

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

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


해상도

  • 해상도는 스크린 점유율 통계를 기반으로 결정

  • PC 웹과 모바일 웹을 기준으로 하며 브라우저 별 변경 사이즈는 CSS미디어 쿼리로 정의

  • 태블릿의 경우 PC버전으로 구현

  • 웹의 최저 해상도는 1003px

UI구현 컨셉

메인프레임 레이아웃

기본구성

Top/left/work/Bottom 4분활 구조

GNB (Global Navigation Bar)

시스템 LOGO 전체 단위 시스템 이동

LNB (Local Navigation Bar)

로컬메뉴(1~3), 마이메뉴, 전체 시스템 메뉴(xx, xx, xx)

작업 공간(Work Area)

단위 메뉴 화면의 업무처리가 이루어지는 영역 단위와 관련된 기능(마이 메뉴 등록, 화면 잠금 기능, 도움말) 노출

MDI((Multiple document interface)

오픈 된 메뉴 화면 탭으로 보여짐

화면 스크롤 기본 정책

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

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

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

작업 공간 유형

마지막 업데이트