Upflow AX 대시보드

SI 사업관리 · Fullstack · 2025

Upflow AX

SI 사업 전 주기 관리 플랫폼 — 제안부터 정산까지 하나의 워크스페이스

Next.js 16React 19TypeScriptSupabaseTanStack QueryTiptap

Upflow AX는 SI(시스템통합) 사업의 수주·기획·개발·정산까지 전 과정을 한 플랫폼에서 관리하는 사업관리 툴입니다. 제안서·WBS·요구사항 등 6종 SI 산출 문서를 AI 보조로 작성하고, DDD 도메인 캔버스·RTM·자원 배정·손익·SLA 모니터링을 통합 제공합니다.

Overview

프로젝트 대시보드, 문서 편집기(Tiptap), 도메인 맵(DDD 캔버스), 요구사항 추적 매트릭스(RTM), 자원·일정 관리, 손익 분석, SLA 대시보드를 React 19와 Next.js 16 App Router 기반으로 구현했습니다.

Upflow AX 기능

Problem

SI 기업은 제안서·착수 보고·WBS·요구사항·결과 보고 등 수십 종의 문서를 각기 다른 툴(Word·Excel·PPT)로 관리합니다. 프로젝트 진행 중 문서·이슈·자원·손익이 파편화되어 PM은 통합 현황 파악에 많은 시간을 씁니다.

Solution

Upflow AX 대시보드

SI 문서 6종(작업개요·제안서·요구사항·WBS·데모·결과보고서)을 AI 보조로 작성하고 프로젝트 대시보드에서 진행률·자원·손익을 실시간 모니터링합니다. DDD 도메인 캔버스와 RTM으로 개발-비즈니스 요구사항 정렬도 추적합니다.

Main Features

  • SI 산출 문서 6종 AI 보조 편집기 (Tiptap 기반)
  • DDD 도메인 캔버스 — 바운디드 컨텍스트 시각화
  • RTM(요구사항 추적 매트릭스) 자동 생성·관리
  • 프로젝트별 자원 배정·일정·마일스톤 관리
  • 손익 분석 및 SLA 모니터링 대시보드
  • TanStack Query + Supabase RLS 실시간 상태 동기화
  • Tailwind v4 + shadcn/ui 기반 통합 UI 시스템
Upflow AX 오버뷰

Tech Stack

Frontend

Next.js 16 (App Router)React 19TypeScriptTailwind CSS v4 + shadcn/uiTiptap (리치 텍스트 편집기)

Backend & Data

Supabase (Auth + PostgreSQL + RLS)TanStack React Query v5Next.js API RoutesSupabase Realtime

Tooling & Infra

TypeScript strict modeESLint + PrettierVercel 배포Supabase Edge Functions

Architecture Highlights

문서 편집기

Tiptap 기반 리치 텍스트 편집기에 SI 문서 템플릿(작업개요·제안서 등)을 연결. AI 보조 작성 기능 탑재.

DDD 도메인 캔버스

바운디드 컨텍스트·애그리게이트·이벤트 스토밍을 시각적 캔버스로 관리. 개발-비즈니스 정렬 추적.

RTM + 손익

요구사항과 개발 태스크를 매핑하는 RTM 자동 생성. 자원 배정 기반 손익 계산 및 SLA 모니터링.

My Role & Contributions

01서비스 기획 · PRD · SI 문서 체계 단독 설계
02Next.js 16 + React 19 풀스택 아키텍처 구성
03Tiptap 기반 AI 보조 문서 편집기 구현
04DDD 도메인 캔버스 시각화 컴포넌트 개발
05RTM·자원·손익·SLA 모듈 설계 및 구현
06Supabase RLS + TanStack Query 실시간 상태 관리

Progress & What's Next

01

프로젝트 대시보드 및 핵심 기능 완성

02

SI 문서 6종 편집기 완성 (Tiptap)

03

DDD 캔버스 + RTM 모듈 완성

04

Claude AI 에이전트 기반 문서 자동 생성 고도화 예정

05

실제 SI 기업 파일럿 도입 협의 중