181 lines
8.7 KiB
Markdown
181 lines
8.7 KiB
Markdown
# SPRINT-015: Master Dashboard v3 정보 구조 리디자인
|
|
|
|
## 목표
|
|
기존 미니멀 터미널 UI를 유지하면서, 자기야가 제안한 레퍼런스의 강한 정보 구조를 흡수해 메인 대시보드를 `4자매 운영 관제의 대표 화면`으로 재정의한다.
|
|
|
|
## 핵심 방향
|
|
- glassmorphism으로 회귀하지 않음
|
|
- 현재 프로덕션의 미니멀 터미널 톤 유지
|
|
- 대신 레이아웃/정보 위계/운영 흐름 표현은 새 레퍼런스를 적극 반영
|
|
- 장식보다 운영 가독성을 우선
|
|
- 데스크톱 우선 설계 후 모바일 세로 흐름까지 함께 정리
|
|
|
|
## 디자인 원칙
|
|
1. **정보 구조 우선**
|
|
- 예쁜 카드보다 `지금 무엇이 진행 중인지`가 먼저 읽혀야 함
|
|
2. **운영 화면다운 밀도**
|
|
- 한 화면에서 자매 상태 / 현재 파이프라인 / 활동 / 지표 / 인프라를 함께 판단 가능해야 함
|
|
3. **현행 톤 유지**
|
|
- 배경, border, mono 보조 텍스트, 브라켓/터미널 감성은 유지
|
|
4. **애니메이션 절제**
|
|
- 상태 강조용 pulse/flow만 제한적으로 사용
|
|
- 불필요한 glow, 과한 색 번짐, 반복 뱃지는 줄임
|
|
5. **실데이터 우선**
|
|
- 예시 숫자가 아니라 실제 runtime/task/project/deploy 데이터를 붙일 수 있는 구조로 설계
|
|
|
|
## 범위
|
|
- 메인 대시보드(`/`) 레이아웃 v3 개편
|
|
- 상단 global status bar 재설계
|
|
- 4자매 상태 카드 재배치/요약 정보 재정의
|
|
- `ACTIVE PIPELINE` 섹션 신설
|
|
- `ACTIVITY FEED` / `SPRINT METRICS` 병렬 구조 재정렬
|
|
- `INFRASTRUCTURE OVERVIEW` / `MISTAKE LOG & HARNESS` 하단 운영 영역 재구성
|
|
- 기존 프로젝트/활동/자매/관리 페이지와 연결되는 진입 동선 재정리
|
|
|
|
## 제외 범위
|
|
- 이번 Sprint에서 새 도메인 기능 추가는 하지 않음
|
|
- 백엔드 데이터 모델을 대규모로 갈아엎지 않음
|
|
- 기존 페이지 전체를 동시 리디자인하지 않음
|
|
- chart 라이브러리 교체는 필요할 때만 제한적으로 수행
|
|
|
|
## 태스크
|
|
|
|
### TASK-070: 대시보드 v3 IA 확정 및 섹션 맵 정리
|
|
- **담당:** 하랑이 → 나랑이
|
|
- **상태:** pending
|
|
- **설명:** 레퍼런스를 현행 제품에 맞게 번역한 섹션 구조/우선순위를 확정한다.
|
|
- **산출물:**
|
|
- `.plans/design/ui/dashboard-design.md` 갱신
|
|
- 섹션별 데이터 소스 매핑 표
|
|
- **완료 기준:**
|
|
- 상단바 / 자매 카드 / Active Pipeline / Activity Feed / Metrics / Infra / Mistake Log의 역할이 문서로 명확함
|
|
|
|
### TASK-071: 상단 Global Status Bar + Hero Summary 개편
|
|
- **담당:** 나랑이
|
|
- **상태:** pending
|
|
- **주요 파일:**
|
|
- `frontend/app/page.tsx`
|
|
- `frontend/components/**` 내 dashboard 공통 헤더/요약 관련 컴포넌트
|
|
- **설명:**
|
|
- 좌측 브랜드/페이지 아이덴티티
|
|
- 중앙 sprint/day 또는 현재 운영 focus
|
|
- 우측 연결 상태/알림/관리자 프로필 요약
|
|
구조를 재정의한다.
|
|
- **완료 기준:**
|
|
- 첫 화면 상단에서 현재 스프린트/연결 상태를 즉시 읽을 수 있음
|
|
- 모바일에서 세로 스택 또는 2단 구조로 무너지지 않음
|
|
|
|
### TASK-072: 4자매 상태 카드 v3 재설계
|
|
- **담당:** 나랑이
|
|
- **상태:** pending
|
|
- **주요 파일:**
|
|
- `frontend/app/page.tsx`
|
|
- `frontend/components/sisters/**` 또는 대시보드 상태 카드 컴포넌트
|
|
- **설명:** 각 자매 카드에 아래 정보를 안정적으로 담는다.
|
|
- 이름 / 역할
|
|
- 현재 상태 (`IDLE`, `WORKING`, `REVIEWING`, `OFFLINE` 등)
|
|
- CPU / RAM 또는 대응 운영 지표
|
|
- 현재 작업 한 줄 요약
|
|
- **완료 기준:**
|
|
- 카드 4개가 한 세트로 읽힘
|
|
- 색상/강조는 자매별 역할과 상태를 동시에 표현함
|
|
- 아바타/아이콘/텍스트 길이 차이로 카드 높이가 깨지지 않음
|
|
|
|
### TASK-073: `ACTIVE PIPELINE` 시각화 도입
|
|
- **담당:** 나랑이
|
|
- **상태:** pending
|
|
- **의존성:** TASK-070
|
|
- **주요 파일:**
|
|
- `frontend/app/page.tsx`
|
|
- 새 공통 컴포넌트 생성 가능 (`frontend/components/dashboard/ActivePipeline.tsx` 등)
|
|
- **설명:**
|
|
- User → Harang → Narang → Darang → Irang 흐름을 운영 그래프로 표현
|
|
- maker-checker loop, escalation 조건, 현재 active task를 읽을 수 있게 구성
|
|
- **구현 메모:**
|
|
- SVG/HTML 혼합 구현 허용
|
|
- 애니메이션은 실제 active state가 있을 때만 제한적으로 사용
|
|
- 정적인 장식보다 상태 전달이 우선
|
|
- **완료 기준:**
|
|
- 현재 누가 받고/처리하고/검토 중인지 한눈에 보임
|
|
- 3회 실패 escalation 같은 운영 규칙이 과하지 않게 드러남
|
|
|
|
### TASK-074: `ACTIVITY FEED` / `SPRINT METRICS` 병렬 재배치
|
|
- **담당:** 나랑이
|
|
- **상태:** pending
|
|
- **주요 파일:**
|
|
- `frontend/app/page.tsx`
|
|
- 기존 activity/task/metrics 컴포넌트
|
|
- **설명:** 활동 피드와 지표를 같은 행에서 비교하는 운영 레이아웃으로 정렬한다.
|
|
- **완료 기준:**
|
|
- 활동 피드는 이벤트 타입/주체/대상 task를 읽기 쉬움
|
|
- metrics는 total tasks, 완료율, 반복 횟수, first-pass rate, escalation 수를 빠르게 읽을 수 있음
|
|
- mock처럼 보이지 않도록 실제 데이터 연결 포인트가 드러남
|
|
|
|
### TASK-075: `INFRASTRUCTURE OVERVIEW` / `MISTAKE LOG & HARNESS` 하단 운영 영역 구성
|
|
- **담당:** 나랑이
|
|
- **상태:** pending
|
|
- **설명:** 인프라 상태 맵과 mistake/harness 규칙 영역을 하단 2열 운영 패널로 정리한다.
|
|
- **주요 파일:**
|
|
- `frontend/app/page.tsx`
|
|
- 관련 API 데이터를 읽는 서비스/타입
|
|
- **완료 기준:**
|
|
- Gateway / sisters infra / deploy access 흐름이 읽힘
|
|
- MISTAKE.md/하네스 규칙 로그는 운영 학습 자산처럼 보여야 함
|
|
- 모바일에서는 Infra → Mistake Log 순 세로 배치
|
|
|
|
### TASK-076: 현행 디자인 시스템과 v3 레이아웃 정합화
|
|
- **담당:** 나랑이
|
|
- **상태:** pending
|
|
- **의존성:** TASK-071 ~ TASK-075
|
|
- **설명:** 새 레이아웃이 기존 미니멀 터미널 UI와 충돌하지 않게 색/간격/타이포/테두리 규칙을 정리한다.
|
|
- **완료 기준:**
|
|
- 기존 프로젝트/활동/설정 페이지와 같은 제품군처럼 보임
|
|
- Tailwind 레퍼런스의 분위기를 가져오되 styled-components 기반 현행 톤과 충돌하지 않음
|
|
|
|
### TASK-077: 반응형/실데이터 QA 준비
|
|
- **담당:** 나랑이 → 다랑이
|
|
- **상태:** pending
|
|
- **의존성:** TASK-071 ~ TASK-076
|
|
- **설명:** 데스크톱/태블릿/모바일 반응형과 실데이터 연결 상태를 확인하고 QA 요청 준비를 마친다.
|
|
- **완료 기준:**
|
|
- Desktop / Tablet / Mobile 주요 breakpoints 확인
|
|
- 빈 상태 / 긴 텍스트 / offline 상태 / 데이터 없음 상태가 깨지지 않음
|
|
- QA 전달 시 스크린샷 또는 확인 포인트 포함
|
|
|
|
## 데이터 매핑 기준
|
|
| 섹션 | 우선 데이터 |
|
|
|---|---|
|
|
| Global Status Bar | current sprint, connection status, notifications, current operator |
|
|
| Sister Cards | runtime status, role, usage metrics, current work summary |
|
|
| Active Pipeline | latest handoff, active implementation, active review, escalation count |
|
|
| Activity Feed | latest activities/log events/task transitions |
|
|
| Sprint Metrics | total tasks, completion, review loops, first-pass rate, escalations |
|
|
| Infrastructure Overview | gateway/node/server/process summary |
|
|
| Mistake Log & Harness | latest MISTAKE/Harness rules or derived operational lessons |
|
|
|
|
## UX 규칙
|
|
- 정보 순서는 `지금 상태 → 흐름 → 근거 이벤트 → 정량 지표 → 인프라/학습 자산`
|
|
- 카드 하나하나보다 섹션 간 관계가 더 중요함
|
|
- hover가 없어도 중요한 정보는 보여야 함
|
|
- 색은 상태 의미가 있을 때만 강하게 쓴다
|
|
- `Working`, `Reviewing`, `Ready for Deploy` 같은 운영 단어는 전체 제품에서 같은 표현을 유지한다
|
|
|
|
## 구현 제약
|
|
- styled-components 구조 유지
|
|
- 기존 공통 토큰/색 변수 최대한 재사용
|
|
- 새 레이아웃 때문에 기존 페이지 진입 동선이 숨지면 안 됨
|
|
- 과한 애니메이션/지속적인 repaint 유발 구현 지양
|
|
- fake 숫자 하드코딩으로 끝내지 말고 실데이터 연결 지점을 남길 것
|
|
|
|
## 검증 기준
|
|
- 홈 화면 진입 시 `하나랑 대시보드가 무엇을 운영하는지` 즉시 이해됨
|
|
- 4자매 상태와 현재 파이프라인이 첫 스크롤 안에서 읽힘
|
|
- 활동/지표/인프라/학습 로그가 운영자 관점에서 자연스럽게 이어짐
|
|
- 데스크톱/모바일 모두 정보 손실 없이 읽힘
|
|
- 현행 미니멀 터미널 UI와 충돌하지 않음
|
|
|
|
## 참고
|
|
- 레퍼런스는 `정보 구조`를 강하게 채택
|
|
- 비주얼은 현재 제품 톤을 유지한 상태로 70%만 차용
|
|
- `ACTIVE PIPELINE`은 이번 v3 리디자인의 대표 섹션으로 취급
|