# 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 ``` 처럼 업무적 의미를 표현한다. 페이지에서 매번: ```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 방향이다.