364 lines
16 KiB
Markdown
364 lines
16 KiB
Markdown
# 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 위에 진행
|