UI/UX Screen Specification
λμ보λ λ° κ΄λ¦¬μ νλ©΄ κΈ°λ₯ λͺ μΈμ (UI/UX Specification)
1. κ³΅ν΅ UI κ°μ΄λλΌμΈ λ° λμμΈ μμ€ν
κ΄λ¦¬μ ν¨λμ λͺ¨λ νλ©΄ λ μ΄μμ, μ»΄ν¬λνΈ λͺ μΈ, μ¬μ©μ μ‘μ λ° λ°μ΄ν° μ ν©μ± κ²μ¦ κ·μΉμ λ³Έ μμ€ν μ λμμΈ κ·μΉμ μ€μν©λλ€.
β μμ ν ν° (Color Tokens)
β‘ μ체 (Typography)
- μ체 ν¨λ°λ¦¬:
'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', sans-serif - κΈκΌ΄ ν¬κΈ° λͺ
μΈ:
- νμ΄μ§ λ©μΈ νμ΄ν:
1.25rem(700 Bold) - μΉ΄λ νμ΄ν:
1.05rem(700 Bold) - μΌλ° λ³Έλ¬Έ λ° ν
μ΄λΈ λ°μ΄ν°:
0.875rem(500 Medium / 600 Semi-Bold) - Muted 보쑰 ν
μ€νΈ:
0.8rem/0.75rem
- νμ΄μ§ λ©μΈ νμ΄ν:
β’ κ³΅ν΅ κ·Έλ¦¬λ & ν μ΄λΈ (Table Grid Rules)
- μλ² νμ (NO): λͺ¨λ ν
μ΄λΈ 그리λμ 1μ΄μ λ°μ΄ν° μΈλ±μ€ λ²νΈ(
NO)λ₯Ό νμ λ ΈμΆν©λλ€. - κ°λ‘ ꡬλΆμ : λ΅λ΅ν λμμΈμ λ°©μ§νκΈ° μν΄ μΈλ‘ ν λ리(Vertical Borders)λ μΌμ λ ΈμΆνμ§ μμΌλ©°, κ°λ‘ ν ꡬλΆμ λ§ λ ΈμΆν©λλ€.
- ν μ ν μΈν°λμ
: λ§μ°μ€ νΈλ² μ
var(--primary-soft)λ°°κ²½μμ μ§μ νλ©°, ν΄λ¦ ν νμ±ν μ ν μ€νΈ λκ» λ³κ²½μΌλ‘ μΈν μ€λμ΄ μκ³‘μ΄ μλλ‘ ν¨λ© μμ(inherit) μμ±μ μ μ©νμ¬ κ· μΌν ν λμ΄λ₯Ό μ μ§ν©λλ€.
β£ κ³΅ν΅ λͺ¨λ¬ νμ (Modal Overlay Rules)
- λ°±λλ‘:
rgba(20, 30, 29, 0.6)λ°ν¬λͺ λ€ λ°backdrop-filter: blur(4px)ν¨κ³Όλ‘ λͺ¨λ¬ ν¬μ»€μ€λ₯Ό κ³ μ ν©λλ€. - νΈλμ§μ
:
fade-inλ°slide-up (translateY 30px to 0)μ΄ μΌκ΄ μ μ©λμ΄ λ§€λλ¬μ΄ νμ λμμ 보μ₯ν©λλ€.
2. λ μ΄μμ ꡬ쑰 μ€κ³ (App Frame Layout)
LNB, μλ¨ ν€λ, κ·Έλ¦¬κ³ λ©μΈ μ½ν μΈ ν μμμ μν/μμ§ λΆν μν€ν μ²λ λ€μκ³Ό κ°μ΅λλ€.
3. νλ©΄λ³ μμΈ UI λ° κΈ°λ₯ μ€κ³
π νλ©΄ 1: μ’ ν© μ©λ λ° μ μμ νν© (Dashboard)
μλ¨ 3μ΄ KPI μμ½ μΉ΄λμ νλ¨ μ€ν λ¦¬μ§ νλ‘κ·Έλ μ€λ° λ° μ€μκ° μμΌ μ μμ ν μ΄λΈ ꡬ쑰μ λλ€.
β μ£Όμ UI μ»΄ν¬λνΈ
- μ€ν λ¦¬μ§ KPI μΉ΄λ: μ 체 νμ₯μ μ΄ νλ μ©λ λλΉ λμ μ¬μ© μ©λ μ€μκ° ν©μ° νμ (μ:
πΎ 9.70 GB / 20 GB). - μ μμ KPI μΉ΄λ: νμ¬ μμΌ μλ² μ°κ²° μΈμ μ λ ΈμΆ.
- μμΆμμ KPI μΉ΄λ: Redis(BullMQ) λ΄ λκΈ°μ€μΈ μμΆ κ±΄μ.
- νμ₯λ³ μ€ν λ¦¬μ§ μ¬μ© νν©: κ° νλ‘μ νΈ ID/λͺ μΉ, κ²μ΄μ§λ° λ° μ¬μ©λ μ 보(GB / λ°±λΆμ¨% / νμΌμλκ°) λμ λ λλ§.
β‘ μ€μκ° μ μ νν© ν μ΄λΈ μ¬μ
| NO | μ¬μ©μ ID | μ μ IP | νμ¬ μ‘°ν κ²½λ‘ | μμ |
|---|---|---|---|---|
| 1 | admin_test | 127.0.0.1 | /PM_TEST_01/archive |
κ°μ ν΄μ₯ |
ποΈ νλ©΄ 2: νλ‘μ νΈ κ΄λ¦¬ (Project Management)
μ’μΈ‘ νλ‘μ νΈ λͺ©λ‘ 그리λμ μ°μΈ‘ νλ‘μ νΈλ³ μ°Έμ¬μ λ° λ°°μ ν΅μ 그리λ ꡬ쑰μ λλ€.
β νλ‘μ νΈ λͺ©λ‘ ν μ΄λΈ μ¬μ (μ’μΈ‘ μΉ΄λ)
μΆλ ₯ 컬λΌ: NO | νλ‘μ νΈ ID | νμ₯λͺ
| μΉ΄ν
κ³ λ¦¬ | μ©λ μ ν(GB) | μν | κ΄λ¦¬(μμ /μμ )
- ν ν΄λ¦ μ, μ°μΈ‘μ 'μ°Έμ¬ κΆν μ¬μ©μ λͺ©λ‘'μ΄ ν΄λΉ νλ‘μ νΈ μ λ³΄λ‘ μλ 리λ°μΈλ©λ©λλ€.
- μμ μ ν: κ΄λ ¨ ν μ΄λΈ(tb_data, tb_official_doc_file, tb_banner_notice λ±)μ νμ₯ ID μ¬μ© μ΄λ ₯μ΄ μμΌλ©΄ μμ λΆκ°λ₯νλ©° κ²½κ³ λ©μμ§κ° λ°μν©λλ€.
- μ κ· νλ‘μ νΈ λ±λ‘ λ° μμ λͺ¨λ¬ (projectModalOverlay): νλ‘μ νΈ ID(μμ μ Readonly), νλ‘μ νΈλͺ , λ¨μΆλͺ , μΉ΄ν κ³ λ¦¬ Select, μ€ν λ¦¬μ§ μ ν(GB), μνλ₯Ό νΈμ§ν©λλ€.
β‘ μ°Έμ¬ κΆν μ¬μ©μ λͺ©λ‘ (μ°μΈ‘ μΉ΄λ - λ³ν© μμ)
μΆλ ₯ 컬λΌ: NO | μ¬μ©μ ID | μ΄λ¦ | λΆμ/μ§κΈ | κΆν λ±κΈ | μμ
(λ°°μ μ μΈ)
- κΆν λ±κΈ λ³κ²½: μΈλΌμΈ μ λ ν°(Admin, Sub-Master, Worker, Viewer)λ‘ κΆν λ 벨 μ¦μ μ λ°μ΄νΈ.
- μ¬μ©μ λ°°μ μΆκ° νμ λͺ¨λ¬ (assignModalOverlay): νμ¬ νμ₯μ λ―Έλ°°μ λ μ¬μ©μλ€μ 체ν¬λ°μ€λ‘ λ€μ€ μ ννμ¬ μΌκ΄ μΆκ°ν©λλ€. λν λͺ©λ‘ μ νμμ μ§μνκΈ° μν΄ μ°μΈ‘ νλ¨ λ°°μ λκΈ° λͺ©λ‘μμλ 'μ¦μ λ°°μ ' λ¨μΆ λ²νΌμ μ 곡ν©λλ€.
π₯ νλ©΄ 4: μ¬μ©μ κ΄λ¦¬ (User Management)
μ’μΈ‘ μ¬μ©μ λ§μ€ν° 리μ€νΈ λ° μ°μΈ‘ μ νλ μ¬μ©μμ μ°Έμ¬ κΆν νλ‘μ νΈ λ¦¬μ€νΈμ ꡬ쑰μ λλ€.
β μ¬μ©μ κ³μ λͺ©λ‘ (μ’μΈ‘ μΉ΄λ)
μΆλ ₯ 컬λΌ: NO | μμ΄λ | μ΄λ¦ | μμ/μ§κΈ | κ·Έλ£Ή | μν | κ΄λ¦¬(μμ /μμ )
- ν ν΄λ¦ μ, ν΄λΉ μ¬μ©μκ° μ°Έμ¬νκ³ μλ νλ‘μ νΈ λ¦¬μ€νΈκ° μ°μΈ‘ μΉ΄λμ μ¦μ λ°μΈλ©λ©λλ€.
- μμ μ ν: κΆν ν μ΄λΈ(tb_permission)μ νμ₯ λ°°μ /μ°Έμ¬ κΆν μ λ³΄κ° λ±λ‘λμ΄ μμΌλ©΄ μμ κ° λΆκ°λ₯νλ©° κ²½κ³ λ©μμ§κ° λ°μν©λλ€.
- μ¬μ©μ λ±λ‘ λ° μμ λͺ¨λ¬ (userModalOverlay): μμ΄λ(μμ μ Readonly), ν¨μ€μλ, μ΄λ¦, νμ¬λͺ , λΆμ, μ§κΈ, κΆν κ·Έλ£Ή μ§μ select, μ¬μ§ μν(μ¬μ§/ν΄μ§μ κΈ) μ§μ .
β‘ κΆνλΆμ¬ νλ‘μ νΈ λͺ©λ‘ (μ°μΈ‘ μΉ΄λ)
μΆλ ₯ 컬λΌ: NO | νλ‘μ νΈ ID | νλ‘μ νΈλͺ
| λΆμ¬ κΆν λ±κΈ
π νλ©΄ 5: κ°μ¬ λ‘κ·Έ μ‘°ν (Audit Logs)
νμΌ μ‘°μ μ€μ μ΄λ²€νΈ(μμ , μ΄λ, λ€μ΄λ‘λ) λͺ©λ‘ λ° κ²μ μ‘°ν νλ©΄μ λλ€.
β κ°μ¬ λ‘κ·Έ λͺ©λ‘ μ¬μ
μΆλ ₯ 컬λΌ: NO | μΌμ | νλ‘μ νΈ | μ¬μ©μ ID | μ μ IP | μ‘°μ μ‘μ
| μ‘°μ λμ κ²½λ‘(μ½λλ°μ€ μ€νμΌ)
- νν°λ§ νλͺ©: μ¬μ©μ ID κ²μ μ λ ₯λ, μ‘°μ μ‘μ Dropdown, κ²μ κΈ°λ₯.
βοΈ νλ©΄ 6: μλ λ³΄κ΄ λ° νμΌ μμ μ μ± μ€μ (Delete Policy)
μμ€ν κΈλ‘λ² μΌκ΄ μ μ± μ€μ μμ, μ€μκ° μμ μλλ¦¬μ€ μμ½, κ·Έλ¦¬κ³ λ°°μΉ μ²λ¦¬ μ΄λ ₯ ꡬ쑰μ λλ€.
β μμ€ν κ³΅ν΅ μλ μμ μ μ± μ€μ νΌ [κΈλ‘λ² μ μ± κ³΅ν΅ν]
- μ λ ₯ νλ: μ μ± νμ±ν μ¬λΆ(Toggle/Select), μ΅μ μ μ§ νμΌ κ°μ κΈ°μ€(μ«μ μ λ ₯), μλ μμ μ ν κΈ°ν(μΌ) (μ«μ μ λ ₯).
- κΈλ‘λ² ν΅ν©: κΈ°μ‘΄μ νλ‘μ νΈ κ°λ³ Dropdownμ μμ ν λ°°μ νκ³ , μ 체 νμ₯μ λμΌνκ² μΌκ΄ λ°μν©λλ€.
①보쑴 μ μ± μ€μκ° μμ½ (Dynamic Summary)
- νΌμ μ λ ₯κ°μ λ³κ²½νλ μ¦μ μμ½ μμ ν μ€νΈκ° μλλ¦¬μ€ λ¬Έκ΅¬λ‘ λμ μ‘°ν©λμ΄ λνλ©λλ€.
- μ:
"νμ¬ μ 체 κ³΅ν΅ μ€μ μ λ°λΌ, κ° νμ₯μ λ³΄κ΄ νμΌ μκ° 100κ° λ―Έλ§μ΄κ³ 30μΌμ΄ μ§λλ©΄ μλ μμ λ°°μΉ μ€μΌμ€λ¬κ° μλν©λλ€."
β’ μλ μμ μ²λ¦¬ μ΄λ ₯ ν μ΄λΈ μ¬μ
μΆλ ₯ 컬λΌ: NO | μλ μ²λ¦¬ μΌμ | νλ‘μ νΈ ID | μμ μ²λ¦¬ ν΄λ κ²½λ‘ | μ μ© κΈ°μ€ | μ²λ¦¬ κ²°κ³Ό(μ±κ³΅ λ°°μ§)
- μ μ±
κ° μ μ₯ μλ£ μ μ΄λ ₯ λ‘κ·Έμ λμ νλ‘μ νΈ ID μ리μλ
'SYSTEM'μ΄ κΈ°μ λ©λλ€.
π νλ©΄ 7: κ³΅ν΅ μ½λ κ΄λ¦¬ (Common Code Management)
λλΆλ₯ λ§μ€ν° λ° μΈλΆ μ½λ 리μ€νΈκ° λ°°μΉλλ μν 2λ¨ μμ§ μ λ ¬ λ μ΄μμ ꡬ쑰μ λλ€.
β λλΆλ₯ μ½λ λ§μ€ν° (μλ¨ μΉ΄λ)
μΆλ ₯ 컬λΌ: NO | λλΆλ₯ μ½λ | λλΆλ₯ μ½λλͺ
| μ¬μ© | κ΄λ¦¬(μμ /μμ )
- νμ μ ν(click)νλ©΄ ν΄λΉ νμ΄ νμ΄λΌμ΄νΈ(selected)λλ©°, νλ¨μ μΈλΆ μ½λ 그리λκ° λμ μΌλ‘ μλ‘κ³ μΉ¨λ©λλ€.
- λλΆλ₯ λ±λ‘ λ° μμ λͺ¨λ¬ (codeMasterModalOverlay): λλΆλ₯ μ½λ, λͺ μΉ, μ¬μ©μ¬λΆ, λΉκ³ μ€λͺ μ λ ₯.
β‘ μΈλΆ μλΆλ₯ μ½λ λͺ©λ‘ (νλ¨ μΉ΄λ)
μΆλ ₯ 컬λΌ: NO | μλΆλ₯ μ½λ | μ‘°ν© μ½λ (base_code) | μ½λ λͺ
μΉ | μ λ ¬ μμ | μ¬μ© | κ΄λ¦¬(μμ /μμ )
- μ ν¨μ± λ°©μ΄ μ°¨λ¨: μλ¨ λλΆλ₯ ν
μ΄λΈμμ νμ ν΄λ¦νμ¬ μ ννμ§ μμ μνμμλ νλ¨μ
[β μΈλΆμ½λ λ±λ‘]λ²νΌμ΄ κ°μ λΉνμ±ν(disabled)λλ©°, νμ μ κ·Ό μ μλ΄ νμ λ° κ²½κ³ ν μ€νΈ("μλ¨μμ λλΆλ₯ μ½λλ₯Ό μ νν΄ μ£ΌμΈμ.")λ₯Ό λ ΈμΆν©λλ€. - μ‘°ν© μ½λ(base_code): μλΆλ₯ μμ± μλ£ μ μΆ μ,
λλΆλ₯μ½λ_μλΆλ₯μ½λννλ‘ μλ κ²°ν©λμ΄ μ μ₯λ©λλ€. - μμ μ ν (RESTRICT): λ§μ€ν° λλΆλ₯ μ½λλ₯Ό μμ ν κ²½μ°, νμ μΈλΆ μ½λ(code_detail)κ° μ‘΄μ¬νλ©΄ λλΆλ₯ μμ κ° μ°¨λ¨λκ³ κ²½κ³ λ©μμ§λ₯Ό λ ΈμΆν©λλ€. (μΈλΆ μ½λκ° λ¨Όμ μμ λμ΄ λΉμ΄μμ λλ§ λλΆλ₯ μμ κ°λ₯)