...

Back Office Structure

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

• 헤더(Header) : 사이트의 최상단에 위치하며, 웹사이트 이름과 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택 등)로 구성된 영역이다.

• 사이드바(SideBar) : 사이트 우측, 또는 좌측에 고정으로 위치하여 메뉴 정보를 표시하는 영역이다.

• 네비게이션(Navigation) : 중요도가 높은 링크를 체계적으로 구성해 놓은 영역으로, GNB, LNB, 단순 본문 링크와 메뉴(카테고리) 성격의 링크로 구분합니다. 네비게이션은 Header와 Sidebar에 배치 할 수 있다.

• 본문(Body) : 실제 콘텐츠가 표현되는 공간으로 사용자와의 상호작용이 실질적으로 이뤄지는 본문 영역이다. BackOffice Builder를 통해 제작한 컴포넌트 구성이 실제 Page View로 보여진다.

• 푸터(Footer) : 사이트의 최하단에 위치하며, 저작권과 연락처, 소셜 미디어 링크 정보 등 다양한 정보를 집약적으로 보여주는 영역이다. [TOP]버튼 추가로 페이지 상단 이동의 편의성을 제공하기도 한다.

...

...

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

...

• Sidebar 상단 백오피스 목록을 선택하면 하단에 해당 백오피스의 LNB 메뉴가 노출된다.

• Sidebar 하단의 LNB 메뉴를 선택하면 해당 메뉴의 셋팅 화면이 BODY에 출력된다.

• Header에 있는 수정 아이콘(BackOffice Builder)을 클릭하여 BODY 화면 구성을 변경한다.

...

...

1. Header Area

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

...

1. 프로젝트 타이틀

   • 프로젝트 로고와 타이틀이 출력된다.

2. 환경 설정

   • 수정: BackOffice Builder가 새창으로 출력되며, BODY 영역의 Component 구성을 변경할 수 있다.

   • 테마: 아이콘 클릭 시 Dark와 Light 테마 두 가지로 전환 가능하다.

   • 언어: 아이콘 클릭 시 Eng와 Kor 언어 두가지로 설정 가능하다.

3. 로그인 정보

   • 사용자 이름과 함께 Logout 아이콘이 함께 표시된다.

...

...

2. SideBar Area

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

...

1. 백오피스 목록

   • 기본적으로 제공하는 Platform Console을 포함하여 생성한 모든 백오피스가 리스트업 된다.

   • 백오피스는 [Platform Console > BackOffices > BackOffice Sites] 메뉴를 통해 생성할 수 있다.

2. LNB 메뉴

   • 백오피스를 선택하면 해당 백오피스에 생성되어 있는 메뉴가 하단에 모두 출력된다.

   • 메뉴는 [Platform Console > BackOffices > BackOffice Menus] 에서 생성할 수 있다.

...

3. Body Area

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

...