Back Office의 구조

백오피스 기본 구조는 크게 5가지 영역으로 분류 할 수 있다.

헤더(Header) : 사이트의 최상단에 위치하며, 웹사이트 이름과 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택 등)로 구성된 영역이다.
사이드바(SideBar) : 사이트 우측, 또는 좌측에 고정으로 위치하여 메뉴 정보를 표시하는 영역이다.
네비게이션(Navigation) : 중요도가 높은 링크를 체계적으로 구성해 놓은 영역으로, GNB, LNB, 단순 본문 링크와 메뉴(카테고리) 성격의 링크로 구분합니다. 네비게이션은 Header와 Sidebar에 배치 할 수 있다.
본문(Body) : 실제 콘텐츠가 표현되는 공간으로 사용자와의 상호작용이 실질적으로 이뤄지는 본문 영역이다. BackOffice Builder를 통해 제작한 컴포넌트 구성이 실제 Page View로 보여진다.
푸터(Footer) : 사이트의 최하단에 위치하며, 저작권과 연락처, 소셜 미디어 링크 정보 등 다양한 정보를 집약적으로 보여주는 영역이다. [TOP]버튼 추가로 페이지 상단 이동의 편의성을 제공하기도 한다.

백오피스 구조는 [백오피스 사이트 관리] 메뉴에서 변경 할 수 있다.

Platform Console > BackOffices > BackOffice Sites ---> Click [BackOffice Layout] Setting Opt

TOBE 사이드바 좌/우 위치 설정 옵션 필요 ( ANT DESIGN Pagination Setting )

네비게이션의 배치와 사이드바 고정 여부 설정에 따라 2가지 형태(기본형/와이드형 사이트)로 구분된다.

기본형 사이트: 네비게이션 유형{Side}, 고정 사이드{ON}

와이드형 사이트: 네비게이션 유형{Top}, 고정 사이드{OFF}

ICE4의 Platform Console 사이트는 사이드바에 네비게이션이 들어간 기본형이 Default로 설정되어 있다.

EX ICE4 백오피스 “Platform Console“

[01] 헤더 영역

프로젝트 타이틀 정보와 함께 환경 설정 기능과 로그인 정보로 구성되어 있다.

프로젝트 타이틀
- 프로젝트 로고와 타이틀이 출력된다.
환경 설정
- 수정: BackOffice Builder가 새창으로 출력되며, BODY 영역의 Component 구성을 변경할 수 있다.
- 테마: 아이콘 클릭 시 Dark와 Light 테마 두 가지로 전환 가능하다.
- 언어: 아이콘 클릭 시 Eng와 Kor 언어 두가지로 설정 가능하다.
로그인 정보
- 사용자 이름과 함께 Logout 아이콘이 함께 표시된다.

생성한 백오피스 목록과 LNB 메뉴로 구성되어 있으며, 사이드바 열림/닫힘 아이콘이 있다.

백오피스 목록
- 기본적으로 제공하는 Platform Console을 포함하여 생성한 모든 백오피스가 리스트업 된다.
- 백오피스는 [Platform Console > BackOffices > BackOffice Sites] 메뉴를 통해 생성할 수 있다.
LNB 메뉴
- 백오피스를 선택하면 해당 백오피스에 생성되어 있는 메뉴가 하단에 모두 출력된다.
- 메뉴는 [Platform Console > BackOffices > BackOffice Menus] 에서 생성할 수 있다.

Platform Console : ICE4에서 제공하는 기본 백오피스

사이드바에 LNB 메뉴에 연결된 페이지가 출력되는 영역이다.