# 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 위에 진행