BO Pattern이란 백오피스에서 가장 많이 사용되는 기능을 인터페이스 상에서 효과적으로 구현 할 수 있도록 UI 컴포넌트를 조합하여 제공하는 Component Set를 의미한다. 기본 패턴을 이해하고 BackOffice Builder에서 컴포넌트를 배치한 뒤 커스터마이징하여 사용하도록 한다.

기본 컴포넌트

기본 컴포넌트는 데이터에 대한 목적에 따라 다음과 같이 5가지로 분류한다. 기본적인 컴포넌트는 사용자가 혼락스럽지 않도록 기존에 사용해왔던 형태를 그대로 따르도록 한다.

데이터 입력(Input)
데이터 출력(Output)
데이터 탐색(Navigation)
데이터 검색(Search)
데이터 정보(Information)

[01] 데이터 입력

정보를 입력할 때 사용 하는 컴포넌트이다. 사용자가 입력 또는 선택하는 정보의 종류에 따라 아래와 같이 총 6개의 컴포넌트를 사용 할 수 있다.

Text Fields : 텍스트 정보를 입력 받을 경우 사용
Checkbox : 여러 요소의 중복 선택이 필요한 경우 사용
Radio button : 여러 요소 중 1개만 선택해야 하는 경우 사용
Dropdown : 창을 펼쳐 여러 정보를 확인하고 선택해야 하는 경우 사용
Buttons : 사용자의 결정에 대한 정보를 입력 받을 경우 사용
Toggle : 특정 상태를 ON/OFF 할 경우 사용

1. 텍스트 필드

사용자가 문자와 숫자를 입력할 수 있는 가장 기본적인 입력 컨트롤이다. 사용자 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.

텍스트 필드의 기본 구조는 다음과 같다.

1	필드 라벨	입력 필드에 입력 할 정보가 무엇인지 제목 표시
2	입력 필드	라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보를 실시간으로 출력
3	플레이스 홀더 텍스트	입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐
4	입력 텍스트	사용자가 입력 필드에 작성한 텍스트
5	커서(Cursor)	사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시
6	클리어 버튼	필드에 입력한 정보를 한번에 삭제
7	도움말 텍스트	사용자가 정보 입력 중 필드 하단에 노출되는 도움말 문구

2. 체크박스

3. 라디오 버튼

4. 드롭다운

드롭다운 메뉴와 드롭다운 리스트 2가지 타입으로 구분된다.

STATUS TABLE

Normal	Hover	Activated	Focused	Selected	Disabled

5. 버튼

STATUS TABLE

Inactive	Focus	Hover	Active	Loading	Disabled

6. 토글 버튼

[02] 데이터 출력

[03] 데이터 탐색

[04] 데이터 검색

Card :
List
Gallery
Carousel
Tab
Menu

[05] 데이터 정보

사용자에게 정보 전달을 해야하는 경우 사용되는 컴포넌트이다. 사용자의 액션 전/후 상황에 구체적인 정보를 전달하여 사용자가 혼란스럽지 않도록 가이드 해주는 목적을 가진다.

Guide Text : 정보를 텍스트 형태로 상세히 전달
Tool Tips :
Toast :
Alert
Dialog
Coach Mark

컴포넌트 세트

위에 소개한 기본적인 컴포넌트 요소들을 조합하여 만든 컴포넌트 세트는 다음과 같다. BackOffice

백오피스 패턴

< 작성중 >

TBD 백오피스 본문(Body)에서 많이 사용되는 페이지 패턴은 12개가 있다.

1. Master-Detail	2. Column Browse

3. Search-Results	4. Filter Dataset

5. Form-View	6. Tab-Page

7. Table	8. Page-Modal

9. Parallel Panels	10. Wizard

11. Dashoboard	12. Blank-State

List of BO Patterns