FrontOffice Builder Manual

Front Office Builder의 구조

프론트 오피스 빌더의 기본 구조는 총 4개의 영역으로 구성되며, 각 영역의 기능은 다음과 같다.

1. 글로벌 내비게이션(Global Navigation)

2. 사이드바(Sidebar)

3. 워크플레이스(Workplace)

4. 인스펙터(Inspector)

Open

사이드바의 구성요소를 선택 후 워크플레이스로 드래그-앤-드롭으로 추가 시 디자인 및 설정이 가능하도록 인스펙터 영역이 노출된다.

글로벌 내비게이션 영역

해당 영역은 작업중인 페이지를 게시, 삭제 및 복제 등 상태를 변경하거나 빌더의 환경을 설정하는 주요 기능으로 구성되어 있으며 모든 화면의 상단에 위치한다. 또한, 페이지간 이동이 가능한 목록 및 로그인 정보도 함께 노출된다.

Open

1. 페이지 타이틀

현재 작업중인 페이지의 타이틀이 노출되며, 페이지 타이틀 또는 화살표 아이콘을 클릭 시 사이트에 속한 페이지의 목록을 확인할 수 있으며, 별도의 어드민 화면을 거치지 않고 원하는 페이지로 바로 이동이 가능하다.

2. 페이지 주요 기능

작업된 페이지를 저장, 삭제 및 게시 등 상태를 변경하거나 신규 등록 및 복제를 하는 빌더의 메인 기능이다.

• 게시 : 클릭 시 변경된 페이지의 정보가 실시간으로 반영

• 저장 : 클릭 시 변경된 페이지를 HTML 파일로 다운로드

• 삭제 : 클릭 시 해당 페이지를 삭제

• 추가 : 클릭 시 신규 페이지 생성을 위한 팝업 노출

• 복제 : 클릭 시 해당 페이지가 템플릿으로 저장

3. 빌더 환경 설정

빌더의 환경을 설정하는 기능이다.

• 모드 : 사이드바와 인스펙터의 노출여부를 설정하는 아이콘으로 클릭 시 모드 전환

• 테마 : 빌더의 테마를 설정하는 아이콘으로 클릭 시 테마 전환

• 언어 : 언어를 설정하는 아이콘으로 클릭 시 설정 전환

4. 로그인 정보

사이트 로그인 정보가 아바타와 함께 제공 되며 아바타 클릭 시 이름, 권한, 로그아웃 버튼이 노출된다.

사이드바 영역

해당 영역은 페이지 제작을 위한 기본 구성 요소인 컴포넌트, 템플릿 및 에셋 탭으로 구성되어 있다. 또한, 키워드 검색을 통해 찾고자 하는 구성요소를 빠르게 탐색 가능하다.

1. 컴포넌트

기본 구성 요소인 컴포넌트는 총 9개의 카테고리로 구분된다. 선택된 테마에 따라 색상 및 폰트가 적용되는 컴포넌트는 디자인과 설정 탭으로 구성되어 있으며, 디자인 탭 내 [Customized]를 선택하는 경우 모양, 색상 및 폰트 등 사용자가 원하는 대로 변경이 가능하다.

• 레이아웃 : 컴포넌트를 추가하기 위한 기본 구조를 설정하는 구성 요소로 열을 추가하고자 하는 경우 반드시 행 추가 후 가능

• 엘리먼트 : 단일 구성 요소로 페이지 제작을 위한 기본 단위

• 폼 : 입력폼, 라디오 버튼 및 체크박스 등 다양한 폼 필드로 구성

• 내비게이션 : 페이지 상단을 위한 구성요소

• 헤더 : 페이지 키비주얼 영역을 위해 다양한 엘리먼트를 조합하여 프리셋으로 제공

• 콘텐츠 : 페이지 바디 영역을 위해 다양한 엘리먼트를 조합하여 프리셋으로 제공

• 섹션 : 페이지 바디 영역을 위해 다양한 엘리먼트를 조합하여 프리셋으로 제공

• 푸터 : 페이지 하단을 위한 구성요소

컴포넌트 상세보기

2. 템플릿

기업, 솔루션, 엔터테인먼트 등 다양한 비즈니스 영역의 페이지를 템플릿으로 제공한다. 선택된 템플릿을 활용하여 다양하게 재구성이 가능하다.

템플릿 상세보기

3. 에셋

이미지 및 동영상을 직접 업로드하여 관리한다. 등록된 에셋은 페이지 제작 시 컨테이너 및 이미지 및 동영상 엘리먼트를 통해 사용 가능하다.

워크플레이스 영역

다양한 컴포넌트 캔버스로 드래그-앤-드롭하여 추가하거나 템플릿을 선택하여 자유롭게 페이지를 구성한다. 컴포넌트는 사이즈 조절 및 이동, 설정, 삭제, 복제 등 주요 기능을 통해 다양한 작업이 가능하다. 또한 디바이스 모드 별 미리보기 및 채팅을 통해 실시간 의사소통이 가능하다.

1. 툴바(Toolbar)

• 액션 컨트롤
  - 새로고침 : 아이콘 클릭 시 최신 페이지가 재실행
  - 리두 : 아이콘 클릭 시 Undo를 취소
  - 언두 : 아이콘 클릭 시 이전 실행 액션을 취소

• 스크린 사이즈 : 각 아이콘 클릭 시 해당 스크린 사이즈로 변경되며, 각 스크린 사이즈별 페이지 설정 가능
  단, 반응형으로 설정한 경우 데스크탑 사이즈에서 설정한 값이 모바일, 태블릿에도 동일하게 반영됨

• 미리보기 : 아이콘 선택된 스크린 사이즈에 미리보기가 가능

• 코멘트 :
  아이콘 클릭 시 캔버스 영역 내 코멘트를 남길 수 있으며, 댓글도 가능
  신규 코멘트가 있는 경우 알림이 노출

• 줌 : 캔버스와 페이지를 동시에 축소 및 확대하는 기능으로 25% ~ 125%까지 조절 가능

2. 캔버스(Canvas)

• 페이지 타이틀 : 작업중인 페이지 타이틀이 노출되며 클릭 시 인스펙터 영역 내 페이지 설정 요소가 노출되어 빠르게 변경 가능

• 설정 : 클릭 시 인스펙터 영역 내 페이지 설정 요소가 노출되어 빠르게 변경 가능

• 컨테이너 추가 : 클릭 시 빈 컨테이너 추가

컴포넌트 기능 및 사용방법

• 삭제 : 아이콘 클릭 시 선택된 컴포넌트를 삭제

• 복제 : 아이콘 클릭 시 선택된 컴포넌트를 복제

• 스키마 : TBD

• 분석 : TBD

• 닫기 : 아이콘 클릭 시 인스펙터 영역이 닫힘

• 제목 : 선택된 컴포넌트의 제목이 노출됩니다.

• 수정 : 해당 영역 더블 클릭 시 수정 가능합니다.

• 이동 : 테두리 영역 클릭 시 이동이 가능하며 X/Y 좌표값이 자동으로 노출

• 크기 : 테두리 사각형 클릭 시 크기 조절이 가능하며 넓이, 높이값이 자동으로 노출

3. 하단 패널(Bottom Pannel)

• 인디케이터 : 선택된 구성요소의 제목이 노출되어 작업중인 컴포넌트가 무엇인지 인지시킴

• 채팅 : 권한이 있는 사용자간 실시간 대화가 가능

인스펙터 영역

캔버스에 추가된 컴포넌트, 템플릿 및 에셋 들의 세부속성이 노출되는 영역으로 설정과 디자인 탭으로 구성된다.

1. 설정

인터랙션, 데이터 설정, 디스플레이 옵션 등 세부속성을 정의하고 레이아웃을 설정하는 영역이다.

2. 디자인

프리셋으로 정의된 디자인을 변경하는 영역으로 [Customized]를 선택하는 경우 모양, 색상 및 폰트 등 사용자가 원하는 대로 변경하는 영역이다.