16 KiB
16 KiB
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 확장 (예상)
신규 테이블
-- 사용자별 대시보드
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 — 기반 (대시보드 + 옵션)
user_dashboard,dashboard_component,user_ui_settings테이블 생성- 멀티 대시보드 CRUD API
- 대시보드 그리드 편집 (react-grid-layout)
- 옵션 패널 (네비 위치, 색상, 폰트)
- AppLayout 리팩토링 (네비 4방향 전환)
Phase 2 — 템플릿 마켓
template_definition테이블 + 시스템 기본 템플릿 시드- 템플릿 마켓 모달 (카테고리/태그/검색)
- 기존 레지스트리 컴포넌트를 템플릿으로 패키징
- 템플릿 → 대시보드 추가 연동
Phase 3 — 개발자 모드
- 개발자 모드 페이지 (3패널 레이아웃)
- 컴포넌트 팔레트 (드래그)
- 캔버스 (배치/프리뷰)
- 속성 편집기 (데이터 바인딩)
- 템플릿 저장 → 마켓 등록 연동
Phase 4 — 고도화
- 템플릿 공유/복제 (회사 간)
- 대시보드 내보내기/가져오기
- 실시간 데이터 바인딩 (WebSocket)
- 모바일 대시보드 최적화
- AI 추천 (사용 패턴 기반 템플릿 추천)
8. 참고
- INVY.ONE 프로토타입 위치:
~/다운로드/INVYONE개발/ - 기술: 순수 Vanilla HTML/CSS/JS (프레임워크 없음, localStorage 저장)
- 프로토타입은 UX 방향 참고용이며, 실제 구현은 현행 Next.js + Express 위에 진행