UI 빌더
- 무엇: 배포된 화면의 모양을 다듬는 화면 편집기
- 여는 곳: 좌측 메뉴 설계 스튜디오 → UI 빌더
- 편집할 수 있는 화면: 목록 화면, 입력 화면, 처리 화면(승인·반려·스캔 등), POP 현장 화면
- 전제: 프로세스 디자이너에서 화면을 먼저 배포해야 목록에 나옵니다
무엇인가
스키마 디자이너에서 테이블과 화면 노드를 배포하면 목록·입력 화면이 자동으로 만들어집니다. 자동으로 만든 화면은 컬럼이 테이블 순서대로 나오고 모든 필드가 다 보입니다. UI 빌더는 이 화면을 실제 사용자에게 맞게 다듬는 곳입니다. 자주 보는 컬럼을 앞으로 옮기고, 필요 없는 필드를 숨기고, 처리 화면의 버튼을 정합니다.
화면 목록
UI 빌더 메뉴를 열면 배포된 화면 목록이 나옵니다.
| 기능 | 설명 |
|---|---|
| 검색 | 화면명, 테이블명, 메뉴로 검색 |
| 유형 필터 | 전체 / 화면 설정 / 처리 화면 (괄호 안에 개수) |
| 목록 열 | 화면명, 타입, 화면 모드, 바인딩 테이블, 메뉴 그룹, 구성(필드·버튼·컬럼 수), 순서 |
| 편집 | 행의 편집 버튼 또는 행 더블클릭으로 화면 편집기 열기 |
화면 모드는 목록, 입력, 상세, 대시보드, POP, 마스터-상세, 모달, 드로어, 페이지로 표시됩니다. 배포된 화면이 없으면 디자이너로 이동 버튼이 나옵니다.
화면 편집기
편집기 머리에는 돌아가기, 실행 취소(Ctrl+Z), 다시 실행(Ctrl+Y), 저장 버튼이 있습니다. 화면 종류에 따라 편집기가 달라집니다. 각 편집기에는 미리보기 영역이 있어 고친 결과를 바로 봅니다.
목록 화면 · 입력 화면
일반 화면은 목록 화면과 입력 화면 두 탭으로 나뉩니다.
목록 화면(테이블 컬럼 설정)
| 설정 | 설명 |
|---|---|
| 순서 | 컬럼을 끌어서 순서를 바꿉니다 |
| 표시/숨김 | 눈 아이콘으로 컬럼을 보이거나 숨깁니다 |
| 너비·정렬 | 컬럼 너비와 좌측·중앙·우측 정렬 |
| 정렬 가능·필터 | 사용자가 그 컬럼으로 정렬하거나 거를 수 있게 할지 |
| 목록 옵션 | 행번호, 체크박스, 페이지네이션, 페이지 크기 |
입력 화면(입력 필드 설정)
| 설정 | 설명 |
|---|---|
| 순서 | 필드를 끌어서 순서를 바꿉니다 |
| 표시/숨김 | 필드를 보이거나 숨깁니다 |
| 위젯 타입 | 텍스트, 긴 텍스트, 숫자, 스위치, 날짜, 선택, FK 조회 |
| 필수·비활성화 | 필수 입력 여부, 입력 막기 |
| 너비 | 한 줄에서 차지하는 칸 수 (전체 포함) |
| 레이아웃 | 라벨 위치(상단·좌측), 그리드 열(1열·2열·3열) |
처리 화면
결재 승인, 담당자 처리, 문서 생성, 자동 처리처럼 워크플로우 단계에서 사용하는 화면입니다.
| 설정 | 설명 |
|---|---|
| 표시 방식 | 모달 팝업, 슬라이드 패널, 전체 페이지 |
| 진행 상태 바 | 워크플로우 진행 단계를 보여줄지 |
| 표시 필드 | 처리 대상 정보로 보여줄 필드 |
| 입력 필드 | 텍스트, 긴 텍스트, 숫자, 날짜, 선택, 예/아니오, 파일, 바코드 |
| 액션 버튼 | 승인, 반려, 처리완료, 상위보고, 제출, 다운로드, 스캔, 사용자 정의 |
| 버튼 옵션 | 스타일(기본·보조·위험), 코멘트 필수, 확인 메시지 |
예를 들어 반려 버튼에 「코멘트 필수」를 켜면 반려 사유 없이는 처리할 수 없습니다.
POP 현장 화면
생산 현장의 터치 단말용 화면입니다. 먼저 레이아웃을 고릅니다.
| 레이아웃 | 용도 |
|---|---|
| 상태 보드 | 현황 모니터링 |
| 입력 폼 | 데이터 입력·등록 |
| 스캔 액션 | 바코드·QR 스캔 |
| 모니터 | 실시간 감시 |
| 목록 액션 | 목록 조회 후 처리 |
| 공정 실행 | 공정 실행 |
글로벌 설정에서 밝은·어두운 테마, 갱신 주기(초), 폰트 크기를 정합니다. 그 밖에 헤더 필드, 상태 표시(값 컬럼과 경고·위험 임계값), 입력 필드, 퀵 액션, 스캔 설정(대상 필드, 자동 제출), 참조 정보, 목록 표시 컬럼과 필터(검색·선택·날짜범위)를 레이아웃에 맞게 구성합니다.
사용 흐름
- 프로세스 디자이너에서 테이블과 화면 노드를 설계하고 배포합니다.
- UI 빌더를 열고 다듬을 화면을 검색해 더블클릭합니다.
- 목록 화면 탭에서 자주 보는 컬럼을 앞으로 끌어 오고, 필요 없는 컬럼은 눈 아이콘으로 숨깁니다.
- 입력 화면 탭에서 필드 순서를 업무 순서대로 바꾸고, 그리드 열을 2열로 바 꿔 한 화면에 더 많이 보이게 합니다.
- 미리보기로 결과를 확인합니다. 잘못 고쳤으면
Ctrl+Z로 되돌립니다. - 저장을 누르면 사용자 화면에 반영됩니다.
- 사용자 모드에서 그 메뉴를 열어 실제 화면을 확인합니다.
실무 팁
UI 빌더에서 컬럼을 숨겨도 테이블의 컬럼은 그대로 있습니다. 컬럼을 없애려면 스키마 디자이너에서 고칩니다.
POP 화면은 장갑 낀 손으로 누르는 일이 많습니다. 폰트 크기를 키우고 입력 필드는 꼭 필요한 것만 남기세요.
캔버스에서 화면을 크게 바꿔 재배포했다면 UI 빌더에서 다듬어 둔 설정이 기대대로 남았는지 한 번 확인합니다.