35 KiB
KBX Reference Screens v1.0
OMS · WMS · ERP 실제 화면 설계 표준
1. Reference Screen의 역할
앞서 정의한 KBX Standard가 “헌법”이라면 이번 문서는 실제 화면을 만드는 표준 원형이다.
새 화면을 만들 때 디자이너와 개발자가 빈 화면에서 시작하지 않는다.
업무 요구사항
↓
Reference Screen 선택
↓
필드/컬럼/Action 교체
↓
업무 Rule 연결
원칙적으로 신규 화면의 80~90%는 아래 Reference Screen 중 하나를 복제해 만든다.
2. Desktop 기준 해상도
기본 설계:
1440 × 900
지원 범위:
1280px 이상 : Desktop 업무 화면
1024~1279 : Compact Desktop
768~1023 : 제한적 Tablet
767 이하 : Desktop ERP 화면 사용 비권장
WMS 현장 화면은 별도 Mobile Template을 사용한다.
3. Global Application Shell
1440
┌──────────────────────────────────────────────────────────────────────────────┐
│ 56 Global Header │
├───────┬──────────────────────────────────────────────────────────────────────┤
│ │ 40 Workspace Tabs │
│ 220 ├──────────────────────────────────────────────────────────────────────┤
│ Side │ 48 Page Header │
│ Nav ├──────────────────────────────────────────────────────────────────────┤
│ │ 44 Command Bar │
│ ├──────────────────────────────────────────────────────────────────────┤
│ │ │
│ │ Main Workspace │
│ │ │
│ │ │
│ │ │
└───────┴──────────────────────────────────────────────────────────────────────┘
4. Global Header
높이:
56px
구성:
[Logo]
[OMS ▼]
[메뉴 검색 __________________________________]
[알림] [도움말] [사용자]
메뉴검색은 단순 메뉴명 검색 외에 화면코드도 검색한다.
예:
"주문"
"품목"
"재고"
"OMS-ORD-001"
5. Side Navigation
폭:
Expanded 220px
Collapsed 56px
구조:
즐겨찾기
────────────────
★ 주문관리
★ 재고현황
OMS
────────────────
주문
출고
배송
CS
ERP
────────────────
기준정보
구매
재고
WMS
────────────────
입고
출고
재고
작업관리
3단계 이상의 메뉴 Depth는 원칙적으로 금지한다.
6. Workspace Tabs
[주문관리 ×] [출고지시 ×] [재고현황 ×] [품목관리 ×]
기본 최대:
10
초과:
[더보기 3]
활성 Tab만 강조한다.
7. Page Header
높이:
48px
OMS > 주문
주문관리 [☆] [?] [AI] [제안]
화면 ID는 일반 사용자에게 기본 노출하지 않는다.
Help에서 확인 가능하게 한다.
8. Command Bar
높이:
44px
OMS 주문관리:
[조회 F3] [신규] [주문복사]
│
[출고지시] [보류]
│
[인쇄] [엑셀 ▼] [더보기 ⋯]
스크롤하더라도 Command Bar는 업무 특성에 따라 Sticky 허용.
9. Reference 01
OMS 주문관리
Screen ID:
OMS-ORD-001
Template:
T01 Search/List
9.1 화면 전체
┌────────────────────────────────────────────────────────────────────────────┐
│ 주문관리 [?] [AI] [제안] │
├────────────────────────────────────────────────────────────────────────────┤
│ [조회 F3] [신규] [주문복사] │ [출고지시] [보류] │ [엑셀▼] │
├────────────────────────────────────────────────────────────────────────────┤
│ 주문일 [오늘 ▼] 판매채널 [전체▼] 상태 [전체▼] │
│ 주문자/번호 [____________________] 상품 [________________] [조회] [상세] │
├────────────────────────────────────────────────────────────────────────────┤
│ 전체 8,241 │ 신규 2,138 │ 출고대기 927 │ 오류 16 │
├────────────────────────────────────────────────────────────────────────────┤
│□│주문번호│채널│주문일시│주문자│상품│수량│결제│재고│배송상태│송장 │
│□│... │
│□│... │
│ │
│ │
├────────────────────────────────────────────────────────────────────────────┤
│ 8,241건 │ 선택 0건 │ 상품수량 12,824 │ 금액 ￦182,420,300 │
└────────────────────────────────────────────────────────────────────────────┘
10. OMS 주문 Search Panel
1차 조건:
주문기간
판매채널
주문상태
통합검색
상품검색
2차 상세조건:
택배사
결제수단
배송상태
재고할당상태
주문유형
담당자
오류유형
창고
상세조건이 활성화되어 있으면:
상세조건 3
Badge를 표시한다.
11. OMS KPI Bar
Dashboard가 아니라 현재 조회 결과를 빠르게 분류하기 위한 Toolbar다.
전체
8,241
신규
2,138
출고대기
927
재고부족
7
처리오류
16
클릭:
해당 상태 즉시 Filter.
다시 클릭:
Filter 해제.
12. 주문 Grid 표준 컬럼
기본 순서:
선택
상태
주문번호
판매채널
채널주문번호
주문일시
주문자
수취인
대표상품
상품수
총수량
주문금액
재고상태
출고상태
택배사
송장번호
담당자
오류
모든 컬럼을 처음부터 보여주지 않는다.
기본:
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
┌──────────────────────────────────┐
│ 주문 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건 선택:
17건 선택
[출고지시]
[보류]
[담당자 변경]
[택배사 변경]
[더보기]
실행:
출고지시 결과
성공 15
실패 2
실패 사유
- 재고 부족 1
- 배송지 오류 1
[실패 2건만 보기]
16. OMS Exception Indicator
Grid Row에 색 전체를 칠하지 않는다.
문제 Cell 또는 Status에 Indicator.
예:
재고
⚠ 부족
배송지
⚠ 확인필요
Hover/Click:
원인 표시.
17. Reference 02
OMS 주문등록
Screen ID:
OMS-ORD-002
Template:
T03 Header + Detail
전체
주문등록
[신규] [저장 F8] [주문복사] [엑셀▼]
기본정보
─────────────────────────────────────────────────────────────
주문일 * [2026-08-08] 판매채널 [직접주문 ▼]
거래처 [10001][대한상사 ][F2]
담당자 [홍길동 ▼] 출고창고 [서울물류센터 ▼]
배송정보
─────────────────────────────────────────────────────────────
수취인 [홍길동 ] 연락처 [010-....]
우편번호 [06236][주소검색]
주소 [서울 ... ]
상품
─────────────────────────────────────────────────────────────
│품목코드│품목명│규격│재고│수량│단가│금액│비고│
│ │ │ │ │ │ │ │ │
[+ 행추가]
─────────────────────────────────────────────────────────────
품목 3종 │ 총수량 10 │ 주문금액 ￦328,000
18. 주문등록 Focus Flow
초기 Focus:
거래처
권장 순서:
거래처
→ 주문일
→ 출고창고
→ 수취인
→ 연락처
→ 주소
→ 상품 Grid
Header 입력 완료 후 Grid로 자연스럽게 넘어간다.
19. Detail Grid Entry
첫 셀:
품목코드
사용:
ABC001 Enter
정상:
ABC001 │ 운동화 │ Black/270 │ 83 │ [1]
코드를 모르면:
F2
품목 조회.
품목명을 입력해도 AutoComplete 가능.
20. 행 입력 최적화
새 행에서 이전 행 값을 선택적으로 상속한다.
예:
- 창고
- 납기일
- 비고
- 단가구분
품목코드와 수량 등 고유 데이터는 임의 복사하지 않는다.
21. Reference 03
ERP 품목관리
Screen:
ERP-MST-ITEM-001
Template:
T02 Master CRUD
Layout
품목관리
[조회] [신규] [저장 F8] [복사] [사용중지] [엑셀▼]
┌────────────────────────────┬───────────────────────────────────────────┐
│ 품목 목록 │ 품목 상세 │
│ │ │
│ 검색 [_______________] │ 기본정보 │
│ │ │
│ ABC001 운동화 │ 품목코드 * [ABC001] │
│ ABC002 운동화 │ 품목명 * [남성 운동화] │
│ ABC003 양말 │ 품목그룹 [신발 ▼] │
│ │ 규격 [BLACK / 270] │
│ │ 단위 [EA ▼] │
│ │ │
│ │ 물류정보 │
│ │ │
│ │ 기본창고 [WH01][서울물류센터][F2] │
│ │ 바코드 [8801234567890] │
│ │ LOT [✓ 사용] │
│ │ 유통기한 [ 사용 ] │
│ │ │
│ │ [변경이력] │
└────────────────────────────┴───────────────────────────────────────────┘
Master 관리는 목록과 상세를 동시에 보는 방식이 기본이다.
22. 신규 품목
신규 클릭 시 기존 상세 Panel 초기화.
Focus:
품목코드
Auto Code 사용 회사:
품목코드
[자동생성]
으로 노출 가능.
23. 품목 복사
기존 품목:
ABC001 / 운동화 BLACK 270
복사
결과:
새 품목
품목코드 [ ]
품목명 [운동화]
품목그룹 [신발]
단위 [EA]
...
Identity와 고유 Barcode 등은 복사하지 않는다.
24. Reference 04
ERP 거래처관리
Screen:
ERP-MST-CUSTOMER-001
품목관리와 동일한 T02 문법 사용.
핵심:
거래처라고 해서 새 UI를 만들지 않는다.
Tabs:
기본
배송
거래조건
담당자
첨부
변경이력
25. Reference 05
ERP 구매등록
Screen:
ERP-PUR-001
Template:
T03
구매등록
[신규] [저장 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
재고이동
[신규] [저장] [이동확정] [엑셀▼]
이동일 [2026-08-08]
출발창고 [WH01 서울센터 F2]
도착창고 [WH02 부산센터 F2]
──────────────────────────────────────────────
품목 │ 가용재고 │ 이동수량 │ LOT │ 비고
──────────────────────────────────────────────
Validation:
출발창고 != 도착창고
이동수량 > 0
이동수량 <= 출고가능수량
하지만 UI Validation은 편의 기능이다.
확정 시 Domain에서 다시 검증한다.
27. 재고이동 상태
작성
↓
확정
↓
출고
↓
이동중
↓
입고완료
각 상태에서 가능 Action을 고정한다.
작성:
[저장]
[확정]
확정:
[확정취소]
[출고]
입고완료:
[변경이력]
직접 수정 불가.
28. Reference 07
재고현황 Master-Detail
Screen:
ERP-INV-001
Template:
T05
재고현황
창고 [전체] 품목 [________________] [조회]
┌──────────────────────────────────┬───────────────────────────────────┐
│ 품목 │ 창고/Location │
│ │ │
│ ABC001 운동화 1,280 │ 서울 830 │
│ ABC002 양말 721 │ 부산 450 │
│ ABC003 셔츠 312 │ │
│ │ A-01-01 300 │
│ │ A-01-02 530 │
└──────────────────────────────────┴───────────────────────────────────┘
재고이력
─────────────────────────────────────────────────────────────────────
일시 │ 업무 │ 입고 │ 출고 │ 잔량 │ 참조번호
한 화면에서:
현재 재고 → 위치 → 재고이력
까지 연결한다.
29. 재고 숫자 Drill-down
830
클릭:
별도 창을 만드는 것이 아니라 아래 Detail 또는 Drawer에서 근거를 표시한다.
현재고 830
정상 700
할당 100
보류 20
불량 10
재고 숫자는 가능한 한 설명 가능해야 한다.
30. Reference 08
WMS 작업 Queue
Desktop 관리자용.
Screen:
WMS-WORK-001
오늘 물류작업
입고대기 218
적치대기 43
피킹대기 927
검수대기 122
출고대기 84
예외
재고부족 7
재고불일치 3
Barcode오류 2
아래 Grid:
작업번호 │ 작업유형 │ Wave │ 작업자 │ 진행률 │ SLA │ 상태
31. WMS 관리자에게 필요한 것은 그래프보다 Queue
금지:
원형차트
막대차트
원형차트
막대차트
만 가득한 화면.
권장:
지금 해야 하는 작업
지연된 작업
예외 작업
작업자 부하
차트는 의사결정을 돕는 경우만 추가한다.
32. Reference 09
WMS Picking Mobile
기준:
390 × 844
화면 1 — 작업 시작
┌────────────────────────┐
│ 피킹 작업 │
│ 온라인 ● │
├────────────────────────┤
│ │
│ Wave W260808-01 │
│ │
│ 총 138건 │
│ 예상수량 427 │
│ │
│ │
│ │
│ [ 작업 시작 ] │
│ │
└────────────────────────┘
33. Picking 진행
┌────────────────────────┐
│ 피킹 23 / 138 │
├────────────────────────┤
│ │
│ LOCATION │
│ │
│ A-03-02 │
│ │
│ 위치를 스캔하세요 │
│ │
│ ┌────────────────────┐ │
│ │ SCAN READY │ │
│ └────────────────────┘ │
│ │
└────────────────────────┘
위치 스캔 성공 후:
상품
ABC 운동화
BLACK / 270
8801234567890
필요
6
피킹
4
남음
2
상품을 스캔하세요
34. Scanner UX
Scanner Keyboard Wedge 입력을 기본 지원한다.
Input은 보이지 않더라도 Scan Capture 영역이 명확해야 한다.
Scanner Data 종료문자:
일반적으로 Enter.
Scan:
Barcode
→ Resolver
→ Validation
→ Command
→ Feedback
35. 정상 Scan
사용자 확인 Modal 없음.
SCAN
↓
성공음
↓
+1
↓
남음 수량 갱신
남음 0:
자동으로 다음 품목.
36. 잘못된 상품
✕ 다른 상품입니다.
스캔
ABC-002
필요
ABC-001
운동화 BLACK 270
[다시 스캔]
확인 버튼보다 다음 행동을 직접 표현한다.
37. 수량 부족
현장에서 단순히 막지 않는다.
필요수량
6
실재고
4
[4개 피킹]
[재고부족 신고]
예외 프로세스로 진입한다.
38. 재고부족 신고
사용자에게 긴 사유를 입력시키지 않는다.
재고부족
○ 실물 없음
○ 수량 부족
○ 위치 오류
○ 상품 이상
메모
[선택 입력]
[등록]
사진이 업무상 필요할 경우 촬영 추가.
39. Reference 10
WMS 검수 Mobile
출고 검수
주문
ORD-260808-00182
3 / 5
상품을 스캔하세요
────────────────
✓ ABC001 × 2
✓ DEF002 × 1
○ XYZ003 × 2
────────────────
[문제 신고]
전체 검수 완료:
검수 완료
상품 3종
수량 5
[다음 주문]
확인 Modal은 넣지 않는다.
40. Reference 11
Excel Import
Screen:
COMMON-IMPORT-001
Step 1
주문 Excel 업로드
1 파일
2 매핑
3 검증
4 반영
┌─────────────────────────────────────────────┐
│ │
│ Excel 파일을 선택하세요 │
│ │
│ [파일 선택] │
│ │
│ 또는 파일을 여기에 놓으세요 │
│ │
└─────────────────────────────────────────────┘
[업로드 양식 다운로드]
Drag & Drop은 편의기능.
파일선택 버튼은 반드시 존재한다.
41. Step 2 — Mapping
Excel 시스템
주문번호 ───────→ 주문번호 ✓
상품코드 ───────→ 품목코드 ✓
수량 ───────→ 주문수량 ✓
구매자 ───────→ 주문자명 ✓
업체코드 ───────→ ? !
[거래처코드 ▼]
자동매핑 이유도 표시 가능.
품목코드
자동매핑
Alias "상품코드" 일치
AI 추천은:
추천
거래처코드 87%
정도로 구별한다.
42. Mapping 저장
하단:
☑ 이 매핑을 다음에도 사용
이름
[쿠팡 주문 업로드]
43. Step 3 — Validation
검증 결과
전체 18,230
정상 17,894
오류 336
오류만 보기 [✓]
행 │ 필드 │ 값 │ 오류
8 │품목코드│ABC99│존재하지 않는 품목
잘못된 셀을 그대로 Highlight.
44. 오류 수정 방식
두 가지 지원.
Excel에서 수정
[오류파일 다운로드]
화면에서 간단 수정
단순 Code Mapping 정도는 Grid에서 수정 가능.
복잡한 300건 오류를 웹화면에서 일일이 수정하도록 만들지 않는다.
45. Step 4 — Commit
17,894건을 반영합니다.
신규 17,201
수정 693
오류 데이터 336건은 제외됩니다.
[취소]
[17,894건 반영]
중요 Import에서는 신규/수정을 반드시 구분한다.
46. Background Processing
대량:
반영 작업
████████████░░░░
13,421 / 17,894
75%
사용자가 다른 업무로 이동 가능.
Job Center:
Excel 주문 Import
처리중 75%
[상세]
47. Reference 12
Reconcile
Screen:
COMMON-RECON-001
예:
OMS ↔ WMS 수량대사.
재고/출고 대사
기준일 [2026-08-08]
[조회]
전체 12,482
정상 12,439
불일치 43
☑ 불일치만 표시
────────────────────────────────────────────────────
주문번호 │ OMS │ WMS │ 차이 │ 원인 │ 처리상태
001 │ 10 │ 10 │ 0
002 │ 10 │ 9 │ -1 │ 피킹부족
003 │ 5 │ 0 │ -5 │ 연계실패
48. Reconcile의 핵심
사용자가 양쪽 화면을 띄워 놓고 비교하지 않게 한다.
시스템이:
Expected
Actual
Difference
Reason
Resolution
형태로 제시한다.
49. Reference 13
Audit Trail
공통 Drawer.
변경이력
오늘
──────────────────────
15:32 홍길동
주문수량
10
↓
8
사유
고객 요청
──────────────────────
15:22 시스템
출고창고
서울
↓
인천
배송정책 자동적용
──────────────────────
14:50 AI 추천 / 홍길동 승인
택배사
CJ
↓
롯데
50. 변경값 Display
긴 JSON Diff를 사용자에게 그대로 보여주지 않는다.
사용자:
출고수량 10 → 8
개발/감사 상세:
Field
OldValue
NewValue
EventId
RequestId
CorrelationId
Actor
으로 분리한다.
51. AI Side Panel
폭:
360~420px
기본적으로 닫힌 상태.
사용자가 호출하거나 중요한 예외가 있는 경우 Badge 표시.
52. AI 기본 화면
AI 도우미
현재
주문관리
────────────────────
확인할 항목
재고부족
7건
주소확인
4건
────────────────────
빠른 질문
[왜 출고 안 된 주문이 있어?]
[재고부족만 보여줘]
[이 화면 사용법]
────────────────────
질문
[______________________]
53. AI 답변 규칙
답변:
출고되지 않은 주문은 16건입니다.
• 재고 부족 7건
• 주소 확인 필요 4건
• SKU 연결 오류 2건
• 송장 발급 실패 3건
[16건 보기]
좋은 AI UX는 자연어 설명에서 끝나지 않는다.
실제 업무 UI로 연결하는 Action이 있어야 한다.
54. AI Data Mutation
AI:
재고가 있는 창고로 변경할 수 있습니다.
즉시 변경 금지.
변경 제안
3건
ORD001
서울 → 인천
ORD002
서울 → 인천
ORD003
서울 → 부산
[상세]
[변경안 적용]
Domain Validation 후 적용.
55. Error Message 표준
금지:
Validation Failed.
금지:
처리할 수 없습니다.
권장:
출고수량을 확인하세요.
현재 출고 가능 수량은 8개입니다.
입력한 수량은 10개입니다.
Action 가능하면:
[8개로 변경]
56. Empty State
금지:
화려한 Illustration + 긴 설명.
업무시스템에서는 짧게.
조회된 주문이 없습니다.
조회조건을 변경해 보세요.
[조회조건 초기화]
57. Loading
Grid 전체 Skeleton을 반복적으로 보여주기보다 Loading Overlay.
조회 중...
기존 데이터가 있는 재조회는 기존 Grid를 완전히 지우지 않는다.
58. Save UX
일반 저장 성공:
저장했습니다.
Toast.
Modal 없음.
중요 확정:
출고를 확정하시겠습니까?
주문 128건
상품 412개
확정 후 주문수량은 수정할 수 없습니다.
[취소]
[출고 확정]
59. Destructive UX
삭제
보다는 업무 의미를 사용한다.
주문취소
출고취소
입고취소
사용중지
가능하면 물리 DELETE를 숨긴다.
60. Status Component
공통 상태 Chip:
작성
확정
대기
진행
완료
보류
오류
취소
새 모듈이 임의로 유사 상태를 만들기 전에 기존 Dictionary를 검토한다.
예:
완료
완료됨
처리완료
종료
를 각각 만들지 않는다.
61. Component API 방향
Vue 화면에서:
<KbxLookup
v-model="customerId"
entity="customer"
label="거래처"
required
/>
처럼 업무적 의미를 표현한다.
페이지에서 매번:
InputText
Button
Dialog
DataTable
을 조립하지 않는다.
62. Grid Schema 예
OrderGridSchema
가 다음을 정의한다.
field
header
width
align
format
editable
sortable
filter
lookup
summary
export
permission
화면 자체에서 중복 Column 정의를 피한다.
63. Field Dictionary
예:
OrderNo
CustomerId
CustomerCode
CustomerName
ItemId
ItemCode
ItemName
WarehouseId
WarehouseCode
OrderQty
AllocatedQty
PickedQty
ShippedQty
제품 전체에서 동일 개념에 동일 FieldKey를 사용한다.
이것이 Excel Mapping과 AI Grounding까지 연결된다.
64. Responsive 정책
ERP Desktop 화면을 Mobile에서 억지로 재배치하지 않는다.
Desktop 업무:
Desktop Optimized
현장 업무:
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. 과유불급 판단 기준
기능 추가 전:
이 기능 때문에
사용자가 더 빠르게 처리하는가?
오류가 줄어드는가?
입력이 줄어드는가?
판단이 쉬워지는가?
넷 중 하나에도 해당하지 않으면 기본 화면에는 넣지 않는 것을 우선한다.
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
특히 다음을 지속적으로 측정한다.
Manual Intervention Rate
예:
총 주문
10,000
사용자가 직접 확인한 주문
318
Manual Intervention Rate
3.18%
OMS/ERP 자동화가 고도화될수록 이 수치는 낮아져야 한다.
단, 위험 업무까지 억지로 자동화해 수치를 낮추는 방식은 금지한다.
70. 최종 Reference Architecture
KBX Application Shell
│
┌────────────────┼────────────────┐
│ │ │
OMS ERP WMS
│ │ │
└────────────┬───┴───────┬────────┘
│ │
Screen Templates │
│ │
Business Components
│
UI Primitive
│
PrimeVue / AG Grid
그리고 화면 뒤에는:
Screen
↓
Vertical Slice
↓
Application Command / Query
↓
Domain
↓
PostgreSQL
├─ Outbox
├─ Audit
├─ Job
└─ Projection
이 연결관계가 유지되어야 한다.
71. 우리가 만들 UI의 최종 모습
이 제품은 처음 보았을 때
“완전히 새로운 프로그램인데 어떻게 쓰지?”
가 아니라,
“업무 프로그램이네. 조회하고 선택해서 처리하면 되겠구나.”
라는 반응이 나와야 한다.
그리고 실제 사용을 시작하면 기존 시스템보다:
- 입력할 것이 적고
- 클릭할 것이 적고
- 기다릴 일이 적고
- Excel 작업이 쉽고
- 오류 원인이 잘 보이고
- 처리할 예외만 나타나고
- AI가 옆에서 필요한 경우에만 도와주는
제품이어야 한다.
이것이 KBX의 최종 UX/AX 방향이다.