# INVY.ONE 전환 컨셉 문서

> VEXPLOR(현행) → INVY.ONE(목표) 전환을 위한 컨셉 정리
> 작성일: 2026-04-06

---

## 1. 비전

**"사용자가 직접 조합하는 엔터프라이즈 대시보드 플랫폼"**

현재 VEXPLOR는 관리자가 admin 패널에서 스크린/메뉴를 설정하고, 사용자는 정해진 화면만 사용하는 구조다. INVY.ONE은 이걸 뒤집어서, 사용자가 직접 템플릿을 골라 대시보드를 구성하고, 개발자가 컴포넌트를 조합해 새 템플릿을 만드는 **노코드 대시보드 빌더**로 전환한다.

### 핵심 키워드
- **대시보드 중심** (메뉴 중심 → 대시보드 중심)
- **사용자 자율 구성** (admin 의존 → 셀프서비스)
- **템플릿 마켓플레이스** (고정 페이지 → 선택/조합)
- **전방위 커스터마이징** (테마 토글 → 네비/색상/폰트/배경 자유 설정)

---

## 2. 현행 시스템 (VEXPLOR) 요약

### 기술 스택
| 레이어 | 스택 |
|--------|------|
| Frontend | Next.js 15, React 19, TypeScript, Tailwind CSS 4, shadcn/ui |
| Backend | Express.js (Node), TypeScript, JWT, RBAC |
| DB | PostgreSQL (~280 테이블), 멀티테넌시 (company_code) |
| AI | Express.js 마이크로서비스, Google GenAI |
| Infra | Docker Compose, Traefik, Kubernetes (Helm) |

### 이미 갖고 있는 강점
- **메타데이터 드리븐 스크린** — DB 메타데이터로 UI를 동적 렌더링
- **컴포넌트 레지스트리** — 86개 동적 컴포넌트 (테이블, 차트, 카드, 위젯 등)
- **풍부한 백엔드** — 결재, 데이터플로우, 바코드, 리포트, 멀티DB, 배치
- **3단계 권한** — SUPER_ADMIN / COMPANY_ADMIN / USER
- **다국어** — KR/EN 지원 인프라

### 현행의 한계
- 대시보드가 고정형 (1~2개, 미리 정해진 레이아웃)
- UI 구성 변경은 개발자/admin 패널 통해야만 가능
- 커스터마이징이 라이트/다크 테마 토글 정도
- 사용자가 자기 업무에 맞게 화면을 조합할 수 없음

---

## 3. 목표 시스템 (INVY.ONE) 컨셉

### 3.1 멀티 대시보드

```
┌─ 대시보드 관리 (사이드바) ──────────┐
│                                      │
│  📊 메인 대시보드 (기본)      ← 활성 │
│  📋 인사관리                          │
│  📦 재고현황                          │
│  💰 매출분석                          │
│  + 새 대시보드 추가                   │
│                                      │
└──────────────────────────────────────┘
```

- 사용자별로 여러 대시보드 생성/삭제/이름변경
- 대시보드마다 독립적인 템플릿 그리드 배치
- 기본 대시보드 설정 가능
- 대시보드 데이터는 DB 저장 (현재 localStorage → DB로)

### 3.2 템플릿 마켓플레이스

사용자가 대시보드에 추가할 템플릿을 고르는 모달.

```
┌─ 템플릿 추가 ────────────────────────────────────────┐
│  🔍 [컴포넌트, 템플릿 검색...]              [검색]   │
│                                                       │
│  카테고리: 🏠전체 🧩레이아웃 🗄️데이터 ✏️폼          │
│            📊차트 🧭네비 🛒커머스 💬커뮤니티 ⚙️시스템 │
│                                                       │
│  태그: [대시보드] [ERP] [MES] [인사/급여] [재고]...   │
│                                                       │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐              │
│  │ 인사관리  │ │ 영업대시 │ │ 재고현황  │              │
│  │ 👥       │ │ 📈       │ │ 📦       │              │
│  │ [추가]   │ │ [추가]   │ │ [추가]   │              │
│  └──────────┘ └──────────┘ └──────────┘              │
└───────────────────────────────────────────────────────┘
```

- **카테고리 아이콘 탭** — 레이아웃, 데이터, 폼, 차트, 커머스 등
- **태그 필터** — ERP, MES, SCM, 인사/급여, 재고/물류, 회계 등
- **키워드 검색**
- **템플릿 카드** — 미리보기 + 설명 + 추가 버튼
- 기존 레지스트리의 86개 컴포넌트를 템플릿 단위로 묶어서 제공

### 3.3 대시보드 그리드 편집

```
┌─ 편집 모드 ON ──────────────────────────────────┐
│  [✏️편집] [📄추가] [💾저장]                      │
│                                                   │
│  ┌──────────────────┐  ┌──────────────────┐      │
│  │ 인사 현황 (2x1)   │  │ 매출 차트 (1x1) │      │
│  │    드래그 이동 ↕   │  │                  │      │
│  │    리사이즈 ↔     │  │                  │      │
│  └──────────────────┘  └──────────────────┘      │
│  ┌─────────────────────────────────────────┐      │
│  │ 재고 테이블 (full-width)                 │      │
│  └─────────────────────────────────────────┘      │
└───────────────────────────────────────────────────┘
```

- 편집 모드 토글 (평소에는 잠김)
- 드래그앤드롭으로 위치 변경 (react-grid-layout 활용 — 이미 의존성 있음)
- 리사이즈 핸들 (1x1, 2x1, 1x2, 2x2, 3x1, full-width)
- 템플릿 삭제/추가
- 저장 시 레이아웃 정보 DB 저장

### 3.4 개발자 모드

일반 사용자가 아닌 개발자/admin이 사용하는 템플릿 제작 도구.

```
┌─ 개발자 모드 ─────────────────────────────────────────────┐
│  invy.one [개발자] 템플릿명: [________] 태그: [___] [저장] │
├───────────┬───────────────────────┬───────────────────────┤
│ 컴포넌트   │                       │ 속성 편집기            │
│ 팔레트     │    캔버스 (프리뷰)     │                       │
│           │                       │ - 컬럼 수              │
│ 📊 차트    │  ┌───┐ ┌───┐        │ - 배경색               │
│ 📋 테이블  │  │   │ │   │        │ - 패딩                 │
│ 📝 폼     │  └───┘ └───┘        │ - 데이터 소스           │
│ 🔘 버튼   │  ┌───────────┐      │                        │
│ ...       │  │           │      │                        │
│           │  └───────────┘      │                        │
├───────────┴───────────────────────┴───────────────────────┤
│ [사용자모드로 돌아가기]                                     │
└───────────────────────────────────────────────────────────┘
```

- 좌측: 원자 컴포넌트 팔레트 (기존 레지스트리 86개 활용)
- 가운데: 드래그로 배치하는 캔버스
- 우측: 선택된 컴포넌트 속성 편집 (데이터 바인딩 포함)
- 저장하면 템플릿 마켓에 등록됨
- 기존 스크린 메타데이터 시스템을 재활용할 수 있음

### 3.5 옵션/커스터마이징 패널

```
┌─ ⚙ 화면 설정 ────────────────────┐
│                                    │
│  네비게이션 바 위치                 │
│  [상단] [좌측] [우측] [하단]       │
│                                    │
│  테마 색상                         │
│  🔵🟢🔴🟡🟣 + 커스텀 피커        │
│                                    │
│  네비게이션 바                      │
│    배경: 🔲⬛🟫🔵...              │
│    글꼴: ⬛⬜🔵...                 │
│    아이콘: ⬛⬜🔵...               │
│                                    │
│  글꼴: [Pretendard ▾]              │
│  글꼴 크기: [작게] [보통] [크게]    │
│  배경 색상: 🔲⬜⬛🔷              │
│                                    │
└────────────────────────────────────┘
```

- 네비바 위치 4방향
- 테마 프라이머리 색상 (프리셋 8색 + 커스텀)
- 네비바 배경/글꼴/아이콘 색상 각각 지정
- 글꼴 패밀리 선택 (Pretendard, 맑은고딕, Noto Sans 등)
- 글꼴 크기 (프리셋 + 직접 입력)
- 배경 색상
- 설정값은 사용자별 DB 저장

---

## 4. 현행 자산 활용 전략

INVY.ONE을 처음부터 만드는 게 아니라, 현행 시스템 위에 얹는다.

### 그대로 쓰는 것
| 현행 자산 | INVY.ONE에서의 역할 |
|----------|-------------------|
| Express 백엔드 (94 라우트) | API 서버 그대로 유지 |
| PostgreSQL 280 테이블 | 데이터 레이어 그대로 |
| JWT + RBAC 인증 | 권한 체계 그대로 |
| React Query + Zustand | 상태관리 그대로 |
| shadcn/ui 35개 컴포넌트 | UI 기본 블록 그대로 |
| 결재/데이터플로우/바코드/리포트 | 기능 모듈 그대로 |
| AI Assistant 마이크로서비스 | AI 기능 그대로 |

### 확장/변형하는 것
| 현행 자산 | 변형 방향 |
|----------|----------|
| 컴포넌트 레지스트리 (86개) | 템플릿 마켓의 원자 컴포넌트로 재포장 |
| 스크린 메타데이터 시스템 | 개발자 모드의 템플릿 저장/로드에 활용 |
| AppLayout (고정형) | 네비 위치 4방향 전환 가능하게 리팩토링 |
| 테마 시스템 (라이트/다크) | 프라이머리 색상 + 네비 색상 + 폰트 확장 |
| 대시보드 (고정 1~2개) | 멀티 대시보드 + 그리드 편집 |

### 새로 만드는 것
| 신규 기능 | 설명 |
|----------|------|
| 대시보드 CRUD API | 사용자별 대시보드 생성/삭제/레이아웃 저장 |
| 템플릿 마켓 모달 | 카테고리/태그/검색으로 템플릿 선택 |
| 그리드 편집 모드 | 드래그/리사이즈/저장 (react-grid-layout) |
| 개발자 모드 페이지 | 3패널 템플릿 빌더 |
| 옵션 패널 | 네비위치/색상/폰트/배경 설정 UI |
| 사용자 설정 API | 옵션 값 DB 저장/로드 |

---

## 5. DB 확장 (예상)

### 신규 테이블

```sql
-- 사용자별 대시보드
CREATE TABLE user_dashboard (
    id SERIAL PRIMARY KEY,
    company_code VARCHAR(20),
    user_id VARCHAR(50),
    name VARCHAR(100),           -- 대시보드 이름
    is_default BOOLEAN DEFAULT false,
    sort_order INT DEFAULT 0,
    created_at TIMESTAMP DEFAULT NOW(),
    updated_at TIMESTAMP DEFAULT NOW()
);

-- 대시보드에 배치된 템플릿
CREATE TABLE dashboard_component (
    id SERIAL PRIMARY KEY,
    dashboard_id INT REFERENCES user_dashboard(id),
    template_id VARCHAR(50),     -- 템플릿 ID
    grid_x INT DEFAULT 0,        -- 그리드 X 위치
    grid_y INT DEFAULT 0,        -- 그리드 Y 위치
    grid_w INT DEFAULT 1,        -- 그리드 너비
    grid_h INT DEFAULT 1,        -- 그리드 높이
    config JSONB DEFAULT '{}',   -- 템플릿별 설정값
    sort_order INT DEFAULT 0,
    created_at TIMESTAMP DEFAULT NOW()
);

-- 템플릿 정의 (개발자 모드에서 제작한 것)
CREATE TABLE template_definition (
    id VARCHAR(50) PRIMARY KEY,
    company_code VARCHAR(20),
    name VARCHAR(100),
    description TEXT,
    category VARCHAR(50),        -- 카테고리
    tags TEXT[],                  -- 태그 배열
    icon VARCHAR(10),            -- 이모지 아이콘
    components JSONB,            -- 구성 컴포넌트 정의
    is_system BOOLEAN DEFAULT false,  -- 시스템 기본 vs 사용자 제작
    created_by VARCHAR(50),
    created_at TIMESTAMP DEFAULT NOW(),
    updated_at TIMESTAMP DEFAULT NOW()
);

-- 사용자별 UI 설정
CREATE TABLE user_ui_settings (
    id SERIAL PRIMARY KEY,
    company_code VARCHAR(20),
    user_id VARCHAR(50) UNIQUE,
    nav_position VARCHAR(10) DEFAULT 'left',      -- top/left/right/bottom
    theme_color VARCHAR(7) DEFAULT '#4a6cf7',      -- 프라이머리 색상
    nav_bg_color VARCHAR(7) DEFAULT '#ffffff',
    nav_text_color VARCHAR(7) DEFAULT '#333333',
    nav_icon_color VARCHAR(7) DEFAULT '#333333',
    font_family VARCHAR(100) DEFAULT 'Pretendard',
    font_size INT DEFAULT 14,
    bg_color VARCHAR(7) DEFAULT '#f5f6f8',
    updated_at TIMESTAMP DEFAULT NOW()
);
```

---

## 6. 화면 흐름

### 사용자 플로우

```
로그인
  │
  ▼
메인 대시보드 (기본 대시보드 로드)
  │
  ├─ 햄버거 → 사이드바 열기 → 대시보드 전환/추가/삭제
  │
  ├─ [✏️편집] → 편집 모드 ON
  │     ├─ [📄추가] → 템플릿 마켓 모달
  │     │     ├─ 카테고리/태그/검색으로 필터
  │     │     └─ 템플릿 선택 → 그리드에 추가
  │     ├─ 드래그로 위치 변경
  │     ├─ 리사이즈 핸들로 크기 변경
  │     ├─ 템플릿 X 버튼으로 삭제
  │     └─ [💾저장] → 레이아웃 DB 저장
  │
  ├─ ⚙️옵션 → 옵션 패널
  │     ├─ 네비 위치 변경
  │     ├─ 색상/폰트 변경
  │     └─ 즉시 반영 (저장 시 DB 저장)
  │
  ├─ 🛠️개발자 → 개발자 모드 (admin/개발자만)
  │     ├─ 컴포넌트 드래그 → 캔버스 배치
  │     ├─ 속성 편집
  │     └─ 저장 → template_definition에 저장
  │
  ├─ 👤프로필 → 프로필 패널
  │
  └─ 🏢로고 클릭 → 회사 정보 관리 (admin만)
```

### 모드 구분

| 모드 | 대상 | 기능 |
|------|------|------|
| **사용자 모드** | 전체 사용자 | 대시보드 사용, 템플릿 배치/편집, 옵션 설정 |
| **개발자 모드** | admin/개발자 | 컴포넌트 조합으로 새 템플릿 제작 |
| **관리자 기능** | admin | 회사 정보, 로고/인장, 시스템 설정 |

---

## 7. 구현 우선순위 (제안)

### Phase 1 — 기반 (대시보드 + 옵션)
1. `user_dashboard`, `dashboard_component`, `user_ui_settings` 테이블 생성
2. 멀티 대시보드 CRUD API
3. 대시보드 그리드 편집 (react-grid-layout)
4. 옵션 패널 (네비 위치, 색상, 폰트)
5. AppLayout 리팩토링 (네비 4방향 전환)

### Phase 2 — 템플릿 마켓
1. `template_definition` 테이블 + 시스템 기본 템플릿 시드
2. 템플릿 마켓 모달 (카테고리/태그/검색)
3. 기존 레지스트리 컴포넌트를 템플릿으로 패키징
4. 템플릿 → 대시보드 추가 연동

### Phase 3 — 개발자 모드
1. 개발자 모드 페이지 (3패널 레이아웃)
2. 컴포넌트 팔레트 (드래그)
3. 캔버스 (배치/프리뷰)
4. 속성 편집기 (데이터 바인딩)
5. 템플릿 저장 → 마켓 등록 연동

### Phase 4 — 고도화
1. 템플릿 공유/복제 (회사 간)
2. 대시보드 내보내기/가져오기
3. 실시간 데이터 바인딩 (WebSocket)
4. 모바일 대시보드 최적화
5. AI 추천 (사용 패턴 기반 템플릿 추천)

---

## 8. 참고

- INVY.ONE 프로토타입 위치: `~/다운로드/INVYONE개발/`
- 기술: 순수 Vanilla HTML/CSS/JS (프레임워크 없음, localStorage 저장)
- 프로토타입은 UX 방향 참고용이며, 실제 구현은 현행 Next.js + Express 위에 진행
