1976 lines
35 KiB
Markdown
1976 lines
35 KiB
Markdown
# 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 방향이다. |