# KBX Reference Screens v1.0
## OMS · WMS · ERP 실제 화면 설계 표준

---

# 1. Reference Screen의 역할

앞서 정의한 KBX Standard가 “헌법”이라면 이번 문서는 실제 화면을 만드는 **표준 원형**이다.

새 화면을 만들 때 디자이너와 개발자가 빈 화면에서 시작하지 않는다.

```text
업무 요구사항
    ↓
Reference Screen 선택
    ↓
필드/컬럼/Action 교체
    ↓
업무 Rule 연결
```

원칙적으로 신규 화면의 80~90%는 아래 Reference Screen 중 하나를 복제해 만든다.

---

# 2. Desktop 기준 해상도

기본 설계:

```text
1440 × 900
```

지원 범위:

```text
1280px 이상 : Desktop 업무 화면
1024~1279   : Compact Desktop
768~1023    : 제한적 Tablet
767 이하    : Desktop ERP 화면 사용 비권장
```

WMS 현장 화면은 별도 Mobile Template을 사용한다.

---

# 3. Global Application Shell

```text
1440
┌──────────────────────────────────────────────────────────────────────────────┐
│ 56 Global Header                                                            │
├───────┬──────────────────────────────────────────────────────────────────────┤
│       │ 40 Workspace Tabs                                                    │
│ 220   ├──────────────────────────────────────────────────────────────────────┤
│ Side  │ 48 Page Header                                                       │
│ Nav   ├──────────────────────────────────────────────────────────────────────┤
│       │ 44 Command Bar                                                       │
│       ├──────────────────────────────────────────────────────────────────────┤
│       │                                                                      │
│       │ Main Workspace                                                       │
│       │                                                                      │
│       │                                                                      │
│       │                                                                      │
└───────┴──────────────────────────────────────────────────────────────────────┘
```

---

# 4. Global Header

높이:

`56px`

구성:

```text
[Logo]
[OMS ▼]

[메뉴 검색 __________________________________]

               [알림] [도움말] [사용자]
```

메뉴검색은 단순 메뉴명 검색 외에 화면코드도 검색한다.

예:

```text
"주문"
"품목"
"재고"
"OMS-ORD-001"
```

---

# 5. Side Navigation

폭:

```text
Expanded 220px
Collapsed 56px
```

구조:

```text
즐겨찾기
────────────────
★ 주문관리
★ 재고현황

OMS
────────────────
주문
출고
배송
CS

ERP
────────────────
기준정보
구매
재고

WMS
────────────────
입고
출고
재고
작업관리
```

3단계 이상의 메뉴 Depth는 원칙적으로 금지한다.

---

# 6. Workspace Tabs

```text
[주문관리 ×] [출고지시 ×] [재고현황 ×] [품목관리 ×]
```

기본 최대:

`10`

초과:

```text
[더보기 3]
```

활성 Tab만 강조한다.

---

# 7. Page Header

높이:

`48px`

```text
OMS > 주문

주문관리                                    [☆] [?] [AI] [제안]
```

화면 ID는 일반 사용자에게 기본 노출하지 않는다.

Help에서 확인 가능하게 한다.

---

# 8. Command Bar

높이:

`44px`

OMS 주문관리:

```text
[조회 F3] [신규] [주문복사]
│
[출고지시] [보류]
│
[인쇄] [엑셀 ▼] [더보기 ⋯]
```

스크롤하더라도 Command Bar는 업무 특성에 따라 Sticky 허용.

---

# 9. Reference 01
# OMS 주문관리

Screen ID:

`OMS-ORD-001`

Template:

`T01 Search/List`

---

## 9.1 화면 전체

```text
┌────────────────────────────────────────────────────────────────────────────┐
│ 주문관리                                             [?] [AI] [제안]       │
├────────────────────────────────────────────────────────────────────────────┤
│ [조회 F3] [신규] [주문복사] │ [출고지시] [보류] │ [엑셀▼]                │
├────────────────────────────────────────────────────────────────────────────┤
│ 주문일 [오늘 ▼] 판매채널 [전체▼] 상태 [전체▼]                            │
│ 주문자/번호 [____________________] 상품 [________________] [조회] [상세]   │
├────────────────────────────────────────────────────────────────────────────┤
│ 전체 8,241 │ 신규 2,138 │ 출고대기 927 │ 오류 16                        │
├────────────────────────────────────────────────────────────────────────────┤
│□│주문번호│채널│주문일시│주문자│상품│수량│결제│재고│배송상태│송장        │
│□│...                                                                    │
│□│...                                                                    │
│                                                                          │
│                                                                          │
├────────────────────────────────────────────────────────────────────────────┤
│ 8,241건 │ 선택 0건 │ 상품수량 12,824 │ 금액 ￦182,420,300               │
└────────────────────────────────────────────────────────────────────────────┘
```

---

# 10. OMS 주문 Search Panel

1차 조건:

```text
주문기간
판매채널
주문상태
통합검색
상품검색
```

2차 상세조건:

```text
택배사
결제수단
배송상태
재고할당상태
주문유형
담당자
오류유형
창고
```

상세조건이 활성화되어 있으면:

```text
상세조건 3
```

Badge를 표시한다.

---

# 11. OMS KPI Bar

Dashboard가 아니라 현재 조회 결과를 빠르게 분류하기 위한 Toolbar다.

```text
전체
8,241

신규
2,138

출고대기
927

재고부족
7

처리오류
16
```

클릭:

해당 상태 즉시 Filter.

다시 클릭:

Filter 해제.

---

# 12. 주문 Grid 표준 컬럼

기본 순서:

```text
선택
상태
주문번호
판매채널
채널주문번호
주문일시
주문자
수취인
대표상품
상품수
총수량
주문금액
재고상태
출고상태
택배사
송장번호
담당자
오류
```

모든 컬럼을 처음부터 보여주지 않는다.

기본:

12~14개.

나머지는 Column Chooser.

---

# 13. 주문번호 Interaction

Single Click:

행 선택.

Double Click:

Order Detail Drawer.

주문번호 Link:

동일하게 Drawer.

Ctrl+Click:

새 Workspace Tab으로 상세화면.

---

# 14. Order Detail Drawer

폭:

`520~600px`

```text
┌──────────────────────────────────┐
│ 주문 20260808-000124        [×] │
├──────────────────────────────────┤
│ 주문상태   출고대기              │
│ 판매채널   쿠팡                  │
│ 주문일시   2026-08-08 13:42      │
│                                  │
│ 주문자                           │
│ 홍길동 / 010-****-1234           │
│                                  │
│ 배송                             │
│ 서울특별시 ...                   │
│                                  │
│ 상품                             │
│ ABC-001 운동화     2 EA          │
│ XYZ-003 양말       1 EA          │
│                                  │
│ 처리이력                         │
│ 13:42 주문수집                   │
│ 13:43 결제확인                   │
│ 13:45 재고할당                   │
│                                  │
├──────────────────────────────────┤
│ [전체 상세] [출고지시]           │
└──────────────────────────────────┘
```

조회 Context를 유지한다.

---

# 15. OMS Bulk Action

행 선택 전:

Action disabled.

17건 선택:

```text
17건 선택

[출고지시]
[보류]
[담당자 변경]
[택배사 변경]
[더보기]
```

실행:

```text
출고지시 결과

성공 15
실패 2

실패 사유
- 재고 부족 1
- 배송지 오류 1

[실패 2건만 보기]
```

---

# 16. OMS Exception Indicator

Grid Row에 색 전체를 칠하지 않는다.

문제 Cell 또는 Status에 Indicator.

예:

```text
재고
⚠ 부족

배송지
⚠ 확인필요
```

Hover/Click:

원인 표시.

---

# 17. Reference 02
# OMS 주문등록

Screen ID:

`OMS-ORD-002`

Template:

`T03 Header + Detail`

---

## 전체

```text
주문등록

[신규] [저장 F8] [주문복사] [엑셀▼]

기본정보
─────────────────────────────────────────────────────────────

주문일 *   [2026-08-08]      판매채널   [직접주문 ▼]

거래처     [10001][대한상사              ][F2]
담당자     [홍길동 ▼]         출고창고   [서울물류센터 ▼]

배송정보
─────────────────────────────────────────────────────────────

수취인     [홍길동      ]     연락처     [010-....]
우편번호   [06236][주소검색]
주소       [서울 ...                               ]

상품
─────────────────────────────────────────────────────────────

│품목코드│품목명│규격│재고│수량│단가│금액│비고│
│        │      │    │    │    │    │    │    │

[+ 행추가]

─────────────────────────────────────────────────────────────
품목 3종 │ 총수량 10 │ 주문금액 ￦328,000
```

---

# 18. 주문등록 Focus Flow

초기 Focus:

`거래처`

권장 순서:

```text
거래처
→ 주문일
→ 출고창고
→ 수취인
→ 연락처
→ 주소
→ 상품 Grid
```

Header 입력 완료 후 Grid로 자연스럽게 넘어간다.

---

# 19. Detail Grid Entry

첫 셀:

`품목코드`

사용:

```text
ABC001 Enter
```

정상:

```text
ABC001 │ 운동화 │ Black/270 │ 83 │ [1]
```

코드를 모르면:

`F2`

품목 조회.

품목명을 입력해도 AutoComplete 가능.

---

# 20. 행 입력 최적화

새 행에서 이전 행 값을 선택적으로 상속한다.

예:

- 창고
- 납기일
- 비고
- 단가구분

품목코드와 수량 등 고유 데이터는 임의 복사하지 않는다.

---

# 21. Reference 03
# ERP 품목관리

Screen:

`ERP-MST-ITEM-001`

Template:

`T02 Master CRUD`

---

## Layout

```text
품목관리

[조회] [신규] [저장 F8] [복사] [사용중지] [엑셀▼]

┌────────────────────────────┬───────────────────────────────────────────┐
│ 품목 목록                  │ 품목 상세                                 │
│                            │                                           │
│ 검색 [_______________]     │ 기본정보                                  │
│                            │                                           │
│ ABC001 운동화              │ 품목코드 * [ABC001]                       │
│ ABC002 운동화              │ 품목명 *   [남성 운동화]                  │
│ ABC003 양말                │ 품목그룹   [신발 ▼]                       │
│                            │ 규격       [BLACK / 270]                  │
│                            │ 단위       [EA ▼]                         │
│                            │                                           │
│                            │ 물류정보                                  │
│                            │                                           │
│                            │ 기본창고   [WH01][서울물류센터][F2]       │
│                            │ 바코드     [8801234567890]                │
│                            │ LOT        [✓ 사용]                       │
│                            │ 유통기한   [ 사용 ]                       │
│                            │                                           │
│                            │ [변경이력]                                │
└────────────────────────────┴───────────────────────────────────────────┘
```

Master 관리는 목록과 상세를 동시에 보는 방식이 기본이다.

---

# 22. 신규 품목

`신규` 클릭 시 기존 상세 Panel 초기화.

Focus:

`품목코드`

Auto Code 사용 회사:

```text
품목코드
[자동생성]
```

으로 노출 가능.

---

# 23. 품목 복사

기존 품목:

```text
ABC001 / 운동화 BLACK 270
```

`복사`

결과:

```text
새 품목

품목코드      [            ]
품목명        [운동화]
품목그룹      [신발]
단위          [EA]
...
```

Identity와 고유 Barcode 등은 복사하지 않는다.

---

# 24. Reference 04
# ERP 거래처관리

Screen:

`ERP-MST-CUSTOMER-001`

품목관리와 동일한 T02 문법 사용.

핵심:

**거래처라고 해서 새 UI를 만들지 않는다.**

Tabs:

```text
기본
배송
거래조건
담당자
첨부
변경이력
```

---

# 25. Reference 05
# ERP 구매등록

Screen:

`ERP-PUR-001`

Template:

`T03`

```text
구매등록

[신규] [저장 F8] [확정] [복사] [엑셀▼]

구매일      [2026-08-08]
거래처      [10001][대한상사][F2]
입고창고    [WH01 서울]
담당자      [홍길동]

─────────────────────────────────────────────────────────────

품목코드│품목명│규격│수량│단가│금액│납기일│
ABC001  │...   │... │100 │... │... │...   │

─────────────────────────────────────────────────────────────

공급가액     1,000,000
부대비용        20,000
총금액       1,020,000
```

ERP 전체 Transaction이 이 문법을 공유한다.

---

# 26. Reference 06
# ERP 재고이동

Screen:

`ERP-INV-MOVE-001`

```text
재고이동

[신규] [저장] [이동확정] [엑셀▼]

이동일      [2026-08-08]

출발창고    [WH01 서울센터 F2]
도착창고    [WH02 부산센터 F2]

──────────────────────────────────────────────

품목 │ 가용재고 │ 이동수량 │ LOT │ 비고

──────────────────────────────────────────────
```

Validation:

```text
출발창고 != 도착창고
이동수량 > 0
이동수량 <= 출고가능수량
```

하지만 UI Validation은 편의 기능이다.

확정 시 Domain에서 다시 검증한다.

---

# 27. 재고이동 상태

```text
작성
↓
확정
↓
출고
↓
이동중
↓
입고완료
```

각 상태에서 가능 Action을 고정한다.

작성:

```text
[저장]
[확정]
```

확정:

```text
[확정취소]
[출고]
```

입고완료:

```text
[변경이력]
```

직접 수정 불가.

---

# 28. Reference 07
# 재고현황 Master-Detail

Screen:

`ERP-INV-001`

Template:

`T05`

```text
재고현황

창고 [전체] 품목 [________________] [조회]

┌──────────────────────────────────┬───────────────────────────────────┐
│ 품목                             │ 창고/Location                    │
│                                  │                                   │
│ ABC001 운동화              1,280 │ 서울      830                    │
│ ABC002 양말                  721 │ 부산      450                    │
│ ABC003 셔츠                  312 │                                   │
│                                  │ A-01-01      300                  │
│                                  │ A-01-02      530                  │
└──────────────────────────────────┴───────────────────────────────────┘

재고이력
─────────────────────────────────────────────────────────────────────
일시 │ 업무 │ 입고 │ 출고 │ 잔량 │ 참조번호
```

한 화면에서:

`현재 재고 → 위치 → 재고이력`

까지 연결한다.

---

# 29. 재고 숫자 Drill-down

`830`

클릭:

별도 창을 만드는 것이 아니라 아래 Detail 또는 Drawer에서 근거를 표시한다.

```text
현재고 830

정상     700
할당     100
보류      20
불량      10
```

재고 숫자는 가능한 한 설명 가능해야 한다.

---

# 30. Reference 08
# WMS 작업 Queue

Desktop 관리자용.

Screen:

`WMS-WORK-001`

```text
오늘 물류작업

입고대기    218
적치대기     43
피킹대기    927
검수대기    122
출고대기     84

예외
재고부족      7
재고불일치    3
Barcode오류   2
```

아래 Grid:

```text
작업번호 │ 작업유형 │ Wave │ 작업자 │ 진행률 │ SLA │ 상태
```

---

# 31. WMS 관리자에게 필요한 것은 그래프보다 Queue

금지:

```text
원형차트
막대차트
원형차트
막대차트
```

만 가득한 화면.

권장:

```text
지금 해야 하는 작업
지연된 작업
예외 작업
작업자 부하
```

차트는 의사결정을 돕는 경우만 추가한다.

---

# 32. Reference 09
# WMS Picking Mobile

기준:

```text
390 × 844
```

---

## 화면 1 — 작업 시작

```text
┌────────────────────────┐
│ 피킹 작업              │
│              온라인 ● │
├────────────────────────┤
│                        │
│ Wave W260808-01        │
│                        │
│ 총 138건               │
│ 예상수량 427           │
│                        │
│                        │
│                        │
│ [ 작업 시작 ]          │
│                        │
└────────────────────────┘
```

---

# 33. Picking 진행

```text
┌────────────────────────┐
│ 피킹        23 / 138   │
├────────────────────────┤
│                        │
│ LOCATION               │
│                        │
│ A-03-02                 │
│                        │
│ 위치를 스캔하세요      │
│                        │
│ ┌────────────────────┐ │
│ │    SCAN READY      │ │
│ └────────────────────┘ │
│                        │
└────────────────────────┘
```

위치 스캔 성공 후:

```text
상품
ABC 운동화

BLACK / 270

8801234567890

필요
6

피킹
4

남음
2

상품을 스캔하세요
```

---

# 34. Scanner UX

Scanner Keyboard Wedge 입력을 기본 지원한다.

Input은 보이지 않더라도 Scan Capture 영역이 명확해야 한다.

Scanner Data 종료문자:

일반적으로 Enter.

Scan:

```text
Barcode
→ Resolver
→ Validation
→ Command
→ Feedback
```

---

# 35. 정상 Scan

사용자 확인 Modal 없음.

```text
SCAN
↓
성공음
↓
+1
↓
남음 수량 갱신
```

남음 0:

자동으로 다음 품목.

---

# 36. 잘못된 상품

```text
✕ 다른 상품입니다.

스캔
ABC-002

필요
ABC-001

운동화 BLACK 270

[다시 스캔]
```

확인 버튼보다 다음 행동을 직접 표현한다.

---

# 37. 수량 부족

현장에서 단순히 막지 않는다.

```text
필요수량
6

실재고
4

[4개 피킹]
[재고부족 신고]
```

예외 프로세스로 진입한다.

---

# 38. 재고부족 신고

사용자에게 긴 사유를 입력시키지 않는다.

```text
재고부족

○ 실물 없음
○ 수량 부족
○ 위치 오류
○ 상품 이상

메모
[선택 입력]

[등록]
```

사진이 업무상 필요할 경우 촬영 추가.

---

# 39. Reference 10
# WMS 검수 Mobile

```text
출고 검수

주문
ORD-260808-00182

3 / 5

상품을 스캔하세요

────────────────

✓ ABC001 × 2
✓ DEF002 × 1
○ XYZ003 × 2

────────────────

[문제 신고]
```

전체 검수 완료:

```text
검수 완료

상품 3종
수량 5

[다음 주문]
```

확인 Modal은 넣지 않는다.

---

# 40. Reference 11
# Excel Import

Screen:

`COMMON-IMPORT-001`

---

## Step 1

```text
주문 Excel 업로드

1 파일
2 매핑
3 검증
4 반영

┌─────────────────────────────────────────────┐
│                                           │
│      Excel 파일을 선택하세요              │
│                                           │
│      [파일 선택]                          │
│                                           │
│      또는 파일을 여기에 놓으세요          │
│                                           │
└─────────────────────────────────────────────┘

[업로드 양식 다운로드]
```

Drag & Drop은 편의기능.

파일선택 버튼은 반드시 존재한다.

---

# 41. Step 2 — Mapping

```text
Excel                         시스템

주문번호        ───────→     주문번호       ✓
상품코드        ───────→     품목코드       ✓
수량            ───────→     주문수량       ✓
구매자          ───────→     주문자명       ✓
업체코드        ───────→     ?              !

                            [거래처코드 ▼]
```

자동매핑 이유도 표시 가능.

```text
품목코드
자동매핑
Alias "상품코드" 일치
```

AI 추천은:

```text
추천
거래처코드 87%
```

정도로 구별한다.

---

# 42. Mapping 저장

하단:

```text
☑ 이 매핑을 다음에도 사용

이름
[쿠팡 주문 업로드]
```

---

# 43. Step 3 — Validation

```text
검증 결과

전체       18,230
정상       17,894
오류          336

오류만 보기 [✓]

행 │ 필드 │ 값 │ 오류
8  │품목코드│ABC99│존재하지 않는 품목
```

잘못된 셀을 그대로 Highlight.

---

# 44. 오류 수정 방식

두 가지 지원.

### Excel에서 수정

```text
[오류파일 다운로드]
```

### 화면에서 간단 수정

단순 Code Mapping 정도는 Grid에서 수정 가능.

복잡한 300건 오류를 웹화면에서 일일이 수정하도록 만들지 않는다.

---

# 45. Step 4 — Commit

```text
17,894건을 반영합니다.

신규       17,201
수정          693

오류 데이터 336건은 제외됩니다.

[취소]
[17,894건 반영]
```

중요 Import에서는 신규/수정을 반드시 구분한다.

---

# 46. Background Processing

대량:

```text
반영 작업

████████████░░░░

13,421 / 17,894

75%
```

사용자가 다른 업무로 이동 가능.

Job Center:

```text
Excel 주문 Import
처리중 75%

[상세]
```

---

# 47. Reference 12
# Reconcile

Screen:

`COMMON-RECON-001`

예:

OMS ↔ WMS 수량대사.

```text
재고/출고 대사

기준일 [2026-08-08]
[조회]

전체 12,482
정상 12,439
불일치 43

☑ 불일치만 표시

────────────────────────────────────────────────────

주문번호 │ OMS │ WMS │ 차이 │ 원인 │ 처리상태

001      │ 10  │ 10  │ 0
002      │ 10  │ 9   │ -1   │ 피킹부족
003      │ 5   │ 0   │ -5   │ 연계실패
```

---

# 48. Reconcile의 핵심

사용자가 양쪽 화면을 띄워 놓고 비교하지 않게 한다.

시스템이:

```text
Expected
Actual
Difference
Reason
Resolution
```

형태로 제시한다.

---

# 49. Reference 13
# Audit Trail

공통 Drawer.

```text
변경이력

오늘
──────────────────────

15:32 홍길동

주문수량
10
↓
8

사유
고객 요청

──────────────────────

15:22 시스템

출고창고
서울
↓
인천

배송정책 자동적용

──────────────────────

14:50 AI 추천 / 홍길동 승인

택배사
CJ
↓
롯데
```

---

# 50. 변경값 Display

긴 JSON Diff를 사용자에게 그대로 보여주지 않는다.

사용자:

```text
출고수량 10 → 8
```

개발/감사 상세:

```text
Field
OldValue
NewValue
EventId
RequestId
CorrelationId
Actor
```

으로 분리한다.

---

# 51. AI Side Panel

폭:

`360~420px`

기본적으로 닫힌 상태.

사용자가 호출하거나 중요한 예외가 있는 경우 Badge 표시.

---

# 52. AI 기본 화면

```text
AI 도우미

현재
주문관리

────────────────────

확인할 항목

재고부족
7건

주소확인
4건

────────────────────

빠른 질문

[왜 출고 안 된 주문이 있어?]
[재고부족만 보여줘]
[이 화면 사용법]

────────────────────

질문
[______________________]
```

---

# 53. AI 답변 규칙

답변:

```text
출고되지 않은 주문은 16건입니다.

• 재고 부족 7건
• 주소 확인 필요 4건
• SKU 연결 오류 2건
• 송장 발급 실패 3건

[16건 보기]
```

좋은 AI UX는 자연어 설명에서 끝나지 않는다.

**실제 업무 UI로 연결하는 Action**이 있어야 한다.

---

# 54. AI Data Mutation

AI:

```text
재고가 있는 창고로 변경할 수 있습니다.
```

즉시 변경 금지.

```text
변경 제안

3건

ORD001
서울 → 인천

ORD002
서울 → 인천

ORD003
서울 → 부산

[상세]
[변경안 적용]
```

Domain Validation 후 적용.

---

# 55. Error Message 표준

금지:

```text
Validation Failed.
```

금지:

```text
처리할 수 없습니다.
```

권장:

```text
출고수량을 확인하세요.

현재 출고 가능 수량은 8개입니다.
입력한 수량은 10개입니다.
```

Action 가능하면:

```text
[8개로 변경]
```

---

# 56. Empty State

금지:

화려한 Illustration + 긴 설명.

업무시스템에서는 짧게.

```text
조회된 주문이 없습니다.

조회조건을 변경해 보세요.

[조회조건 초기화]
```

---

# 57. Loading

Grid 전체 Skeleton을 반복적으로 보여주기보다 Loading Overlay.

```text
조회 중...
```

기존 데이터가 있는 재조회는 기존 Grid를 완전히 지우지 않는다.

---

# 58. Save UX

일반 저장 성공:

```text
저장했습니다.
```

Toast.

Modal 없음.

중요 확정:

```text
출고를 확정하시겠습니까?

주문 128건
상품 412개

확정 후 주문수량은 수정할 수 없습니다.

[취소]
[출고 확정]
```

---

# 59. Destructive UX

`삭제`

보다는 업무 의미를 사용한다.

```text
주문취소
출고취소
입고취소
사용중지
```

가능하면 물리 DELETE를 숨긴다.

---

# 60. Status Component

공통 상태 Chip:

```text
작성
확정
대기
진행
완료
보류
오류
취소
```

새 모듈이 임의로 유사 상태를 만들기 전에 기존 Dictionary를 검토한다.

예:

```text
완료
완료됨
처리완료
종료
```

를 각각 만들지 않는다.

---

# 61. Component API 방향

Vue 화면에서:

```text
<KbxLookup
  v-model="customerId"
  entity="customer"
  label="거래처"
  required
/>
```

처럼 업무적 의미를 표현한다.

페이지에서 매번:

```text
InputText
Button
Dialog
DataTable
```

을 조립하지 않는다.

---

# 62. Grid Schema 예

```text
OrderGridSchema
```

가 다음을 정의한다.

```text
field
header
width
align
format
editable
sortable
filter
lookup
summary
export
permission
```

화면 자체에서 중복 Column 정의를 피한다.

---

# 63. Field Dictionary

예:

```text
OrderNo
CustomerId
CustomerCode
CustomerName
ItemId
ItemCode
ItemName
WarehouseId
WarehouseCode
OrderQty
AllocatedQty
PickedQty
ShippedQty
```

제품 전체에서 동일 개념에 동일 FieldKey를 사용한다.

이것이 Excel Mapping과 AI Grounding까지 연결된다.

---

# 64. Responsive 정책

ERP Desktop 화면을 Mobile에서 억지로 재배치하지 않는다.

Desktop 업무:

```text
Desktop Optimized
```

현장 업무:

```text
Mobile/PDA Optimized
```

관리자가 휴대폰으로 단순 조회하는 경우만 별도 Read-only Mobile View를 제공한다.

---

# 65. 실제 디자인 리뷰 시 가장 먼저 볼 것

디자인 리뷰 순서를 다음으로 고정한다.

### 1. 업무 단계

클릭 몇 번인가?

### 2. 입력량

사용자가 다시 입력하는 값은 없는가?

### 3. Focus

키보드 흐름이 끊기는가?

### 4. 예외

정상 건과 오류 건을 구분했는가?

### 5. Grid

Excel 사용자의 기대와 충돌하지 않는가?

### 6. 상태

현재 업무상태가 명확한가?

### 7. 복구

잘못 처리했을 때 되돌릴 수 있는가?

### 8. 감사

나중에 재현 가능한가?

### 9. AI

AI 때문에 과정이 더 길어지지 않았는가?

### 10. 미관

마지막에 본다.

---

# 66. 화면 복잡도 제한

하나의 화면에서 Primary 목적은 하나만 둔다.

예:

주문관리의 목적:

`주문을 찾고 처리`

거기에

- 매출분석
- 재고예측
- 고객분석
- 광고성과

까지 한 화면에 넣지 않는다.

연결은 하되 혼합하지 않는다.

---

# 67. 과유불급 판단 기준

기능 추가 전:

```text
이 기능 때문에
사용자가 더 빠르게 처리하는가?
오류가 줄어드는가?
입력이 줄어드는가?
판단이 쉬워지는가?
```

넷 중 하나에도 해당하지 않으면 기본 화면에는 넣지 않는 것을 우선한다.

---

# 68. KBX UX 핵심 Metric

향후 UX 개선은 감성 평가보다 실제 업무 Metric을 본다.

### 입력

- Keyboard strokes / Transaction
- Manual fields / Transaction

### 조작

- Clicks / Task
- Context switches / Task
- Popup count

### 처리

- Orders / Minute
- Picking Lines / Hour
- Import success rate

### 오류

- Validation failure
- Wrong shipment
- Inventory mismatch
- Duplicate operation

### 자동화

- Auto processed ratio
- Exception ratio
- Manual intervention ratio

---

# 69. 가장 중요한 KPI

특히 다음을 지속적으로 측정한다.

```text
Manual Intervention Rate
```

예:

```text
총 주문
10,000

사용자가 직접 확인한 주문
318

Manual Intervention Rate
3.18%
```

OMS/ERP 자동화가 고도화될수록 이 수치는 낮아져야 한다.

단, 위험 업무까지 억지로 자동화해 수치를 낮추는 방식은 금지한다.

---

# 70. 최종 Reference Architecture

```text
                 KBX Application Shell
                         │
        ┌────────────────┼────────────────┐
        │                │                │
       OMS              ERP              WMS
        │                │                │
        └────────────┬───┴───────┬────────┘
                     │           │
              Screen Templates   │
                     │           │
              Business Components
                     │
                 UI Primitive
                     │
             PrimeVue / AG Grid
```

그리고 화면 뒤에는:

```text
Screen
 ↓
Vertical Slice
 ↓
Application Command / Query
 ↓
Domain
 ↓
PostgreSQL

       ├─ Outbox
       ├─ Audit
       ├─ Job
       └─ Projection
```

이 연결관계가 유지되어야 한다.

---

# 71. 우리가 만들 UI의 최종 모습

이 제품은 처음 보았을 때

> “완전히 새로운 프로그램인데 어떻게 쓰지?”

가 아니라,

> “업무 프로그램이네. 조회하고 선택해서 처리하면 되겠구나.”

라는 반응이 나와야 한다.

그리고 실제 사용을 시작하면 기존 시스템보다:

- 입력할 것이 적고
- 클릭할 것이 적고
- 기다릴 일이 적고
- Excel 작업이 쉽고
- 오류 원인이 잘 보이고
- 처리할 예외만 나타나고
- AI가 옆에서 필요한 경우에만 도와주는

제품이어야 한다.

이것이 KBX의 최종 UX/AX 방향이다.