| Table of Contents |
|---|
Front Office Builder의 구조
...
프론트 오피스 빌더의 기본 구조는
1. 글로벌 내비게이션(Global Navigation)
...
사이드바의 구성요소를 선택 후 워크플레이스로 드래그-앤-드롭으로 추가 시 디자인 및 설정이 가능하도록 인스펙터 영역이 노출됩니다.
...
글로벌 내비게이션 영역
해당 영역은 작업중인 페이지를 게시, 삭제 및 복제 등 상태를 변경하거나 빌더의 환경을 설정하는 주요 기능으로 구성되어 있으며 모든 화면의 상단에 위치합니다. 또한, 페이지간 이동이 가능한 목록 및 로그인 정보도 함께 노출됩니다.
...
1. 페이지 타이틀
현재 작업중인 페이지의 타이틀이 노출되며, 페이지 타이틀 또는 
화살표 아이콘을 클릭 시 사이트에 속한 페이지의 목록을 확인할 수 있으며, 별도의 어드민 화면을 거치지 않고 원하는 페이지로 바로 이동이 가능합니다.
...
2. 페이지 주요 기능
작업된 페이지를 저장, 삭제 및 게시 등 상태를 변경하거나 신규 등록 및 복제를 하는 빌더의 메인 기능입니다.
...
게시 : 클릭 시 변경된 페이지의 정보가 실시간으로 반영됩니다.
저장 : 클릭 시 변경된 페이지를 HTML 파일로 다운로드 가능합니다.
삭제 : 클릭 시 해당 페이지가 삭제됩니다.
추가 : 클릭 시 신규 페이지 생성을 위한 팝업이 노출됩니다.
복제 : 클릭 시 해당 페이지가 템플릿으로 저장됩니다.
3. 빌더 환경 설정
빌더의 환경을 설정하는 기능입니다.
...
모드 : 사이드바와 인스펙터의 노출여부를 설정하는 아이콘으로 클릭 시 모드가 전환됩니다.
테마 : 빌더의 테마를 설정하는 아이콘으로 클릭 시 테마가 전환됩니다.
언어 : 언어를 설정하는 아이콘으로 클릭 시 설정이 전환됩니다.
모드 | 사이드 바 뷰 | 풀 뷰 |
|---|---|---|
테마 | 다크 | 라이트 |
언어 | 영어 | 한국어 |
4. 로그인 정보
사이트 로그인 정보가 아바타와 함께 제공 되며 아바타 클릭 시 이름, 권한, 로그아웃 버튼이 노출됩니다.
...
사이드바 영역
해당 영역은 페이지 제작을 위한 기본 구성 요소인 컴포넌트, 템플릿 및 에셋 탭으로 구성되어 있습니다. 또한, 키워드 검색을 통해 찾고자 하는 구성요소를 빠르게 탐색 가능합니다.
...
1. 컴포넌트
기본 구성 요소인 컴포넌트는 총 9개의 카테고리로 구분됩니다. 선택된 테마에 따라 색상 및 폰트가 적용되는 컴포넌트는 디자인과 설정 탭으로 구성되어 있으며, 디자인 탭 내 [Customized]를 선택하는 경우 모양, 색상 및 폰트 등 사용자가 원하는 대로 변경이 가능합니다.
...
레이아웃 : 컴포넌트를 추가하기 위한 기본 구조를 설정하는 구성 요소로 열을 추가하고자 하는 경우 반드시 행 추가 후 가능합니다.
엘리먼트 : 단일 구성 요소로 페이지 제작을 위한 기본 단위입니다.
폼 : 입력폼, 라디오 버튼 및 체크박스 등 다양한 폼 필드로 구성되어 있습니다.
내비게이션 : 페이지 상단을 위한 구성요소입니다.
헤더 : 페이지 키비주얼 영역을 위해 다양한 엘리먼트를 조합하여 프리셋으로 제공됩니다.
콘텐츠 : 페이지 바디 영역을 위해 다양한 엘리먼트를 조합하여 프리셋으로 제공됩니다.
섹션 : 페이지 바디 영역을 위해 다양한 엘리먼트를 조합하여 프리셋으로 제공됩니다.
푸터 : 페이지 하단을 위한 구성요소입니다.
2. 템플릿
기업, 솔루션, 엔터테인먼트 등 다양한 비즈니스 영역의 페이지를 템플릿으로 제공합니다. 선택된 템플릿을 활용하여 다양하게 재구성이 가능합니다.
3. 에셋
이미지 및 동영상을 직접 업로드하여 관리합니다. 등록된 에셋은 페이지 제작 시 컨테이너 및 이미지 및 동영상 엘리먼트를 통해 사용 가능합니다.
...
워크플레이스 영역
다양한 컴포넌트 캔버스로 드래그-앤-드롭하여 추가하거나 템플릿을 선택하여 자유롭게 페이지를 구성합니다. 컴포넌트는 사이즈 조절 및 이동, 설정, 삭제, 복제 등 주요 기능을 통해 다양한 작업이 가능합니다. 또한 디바이스 모드 별 미리보기 및 채팅을 통해 실시간 의사소통이 가능합니다.
...
1. 툴바(Toolbar)
...
액션 컨트롤
- 새로고침 : 아이콘 클릭 시 최신 페이지가 재실행됩니다.
- 리두 : 아이콘 클릭 시 Undo를 취소합니다.
- 언두 : 아이콘 클릭 시 이전 실행 액션을 취소합니다.스크린 사이즈 : 각 아이콘 클릭 시 해당 스크린 사이즈로 변경되며, 각 스크린 사이즈별 페이지 설정이 가능합니다.
단, 반응형으로 설정한 경우 데스크탑 사이즈에서 설정한 값이 모바일, 태블릿에도 동일하게 반영됩니다.
...
미리보기 :
아이콘 선택된 스크린 사이즈에 미리보기가 가능합니다.코멘트 :
아이콘 클릭 시 캔버스 영역 내 코멘트를 남길 수 있으며, 댓글도 가능합니다. 신규 코멘트가 있는 경우 알림이 노출됩니다.줌 : 캔버스와 페이지를 동시에 축소 및 확대하는 기능으로 25% ~ 125%까지 조절가능합니다.
2. 캔버스(Canvas)
...
페이지 타이틀 : 작업중인 페이지 타이틀이 노출되며 클릭 시 인스펙터 영역 내 페이지 설정 요소가 노출되어 빠르게 변경 가능합니다.
설정 :
클릭 시 인스펙터 영역 내 페이지 설정 요소가 노출되어 빠르게 변경 가능합니다.컨테이너 추가 :
클릭 시 빈 컨테이너가 추가됩니다.
컴포넌트 기능 및 사용방법
| Note |
|---|
컴포넌트의 속성에 따라 노출되는 기능 및 사용방법은 상이할 수 있습니다. |
...
삭제 :
아이콘 클릭 시 선택된 컴포넌트를 삭제합니다.복제 :
아이콘 클릭 시 선택된 컴포넌트를 복제합니다.스키마 :
TBD분석 :
TBD닫기 :
아이콘 클릭 시 인스펙터 영역이 닫힙니다.제목 : 선택된 컴포넌트의 제목이 노출됩니다.
수정 : 해당 영역 더블 클릭 시 수정 가능합니다.
이동 : 테두리 영역 클릭 시 이동이 가능하며 X/Y 좌표값이 자동으로 노출됩니다.
크기 : 테두리 사각형 클릭 시 크기 조절이 가능하며 넓이, 높이값이 자동으로 노출됩니다.
3. 하단 패널(Bottom Pannel)
...
인디케이터 : 선택된 구성요소의 제목이 노출되어 작업중인 컴포넌트가 무엇인지 인지시켜 줍니다.
채팅 : 권한이 있는 사용자간 실시간 대화가 가능합니다.
...
인스펙터 영역
캔버스에 추가된 컴포넌트, 템플릿 및 에셋 들의 세부속성이 노출되는 영역으로 설정과 디자인 탭으로 구성됩니다.
모든 구성요소가 동일하게 설정과 디자인 탭으로 구성되어 있지 않으며, 설정 탭이 기본값으로 먼저 노출됩니다.
...
1. 설정
인터랙션, 데이터 설정, 디스플레이 옵션 등 세부속성을 정의하고 레이아웃을 설정하는 영역입니다.
2. 디자인
프리셋으로 정의된 디자인을 변경하는 영역으로 [Customized]를 선택하는 경우 모양, 색상 및 폰트 등 사용자가 원하는 대로 변경하는 영역입니다.