hehihoho3@gmail.com
9c276789f3
Light-default + dark toggle, refined SaaS components, phased rollout across all SSR pages. Approved dashboard mockup as the visual reference. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
86 lines
5.3 KiB
Markdown
86 lines
5.3 KiB
Markdown
# UI 리뉴얼 — 정제된 라이트/다크 SaaS 디자인 시스템
|
|
|
|
작성일: 2026-06-12
|
|
대상: 전체 SSR(Thymeleaf) 화면의 시각 디자인 전면 개편
|
|
|
|
## 1. 목표
|
|
|
|
현재 UI(다크 글래스모피즘)가 "너무 어둡고 대비 낮아 뭉개진다". 정제된 SaaS 스타일(Linear/Notion/Vercel 계열)로 전면 리뉴얼하되, **라이트를 기본**으로 하고 **라이트/다크 토글**을 제공한다. 승인된 시안: 대시보드 라이트 mockup.
|
|
|
|
## 2. 핵심 결정
|
|
|
|
- **기본 테마 = 라이트.** 다크는 토글로 전환, 선택은 `localStorage`에 저장.
|
|
- **무플래시 초기화**: `<head>` 인라인 스크립트가 페인트 전에 `localStorage.theme`(기본 light)를 `<html data-theme>`에 적용.
|
|
- **테마 토글 버튼은 사이드바 하단(전역)** — 페이지마다 넣지 않는다.
|
|
- **레이아웃/마크업 구조는 유지**(사이드바 + 메인). 시각 스타일과 일부 페이지의 그리드/컴포넌트만 교체.
|
|
- **아이콘은 기존 Lucide 유지**(CDN). 폰트 Inter 유지.
|
|
|
|
## 3. 디자인 토큰 (`variables.css` 재작성)
|
|
|
|
CSS 변수로 라이트 기본 + `:root[data-theme="dark"]` 오버라이드. 의미 기반 토큰:
|
|
|
|
| 토큰 | 라이트 | 다크 |
|
|
|---|---|---|
|
|
| `--bg` | #f6f7f9 | #0a0b0e |
|
|
| `--surface` | #ffffff | #131519 |
|
|
| `--surface-2` | #f1f3f6 | #191c22 |
|
|
| `--inset` | #eef0f3 | #0e1014 |
|
|
| `--border` | #e6e8ec | rgba(255,255,255,.07) |
|
|
| `--border-strong` | #d9dce1 | rgba(255,255,255,.12) |
|
|
| `--text` | #15181d | #e8eaef |
|
|
| `--text-2` | #5a626d | #9aa1ad |
|
|
| `--text-3` | #9aa1ad | #646b78 |
|
|
| `--shadow` | 부드러운 2단 그림자 | 어두운 그림자 |
|
|
|
|
공통: `--accent #4f7cff`, `--accent-2 #7c5cff`(그라데이션 포인트만 절제), `--accent-soft`, 상태색 `--green/--amber/--red/--purple/--sky`. radius `--r:12px / --r-sm:9px`. 기존 변수명(`--primary`, `--text-primary`, `--text-muted`, `--glass-border` 등)은 **별칭으로 매핑 유지**해 기존 마크업이 깨지지 않게 한다(점진 교체).
|
|
|
|
## 4. 컴포넌트 (`style.css` 재작성/확장)
|
|
|
|
- **사이드바**: 라벨 + 섹션 구분(분석 / 파이프라인 / 기타), 활성 상태(accent-soft 배경 + 좌측 accent 바), 하단 사용자 + **테마 토글**. 라벨 한국어 통일(대시보드/발굴/채널/수집함/칸반 보드/재가공/발행 큐/프로덕션/설정).
|
|
- **페이지 헤더**: 타이틀 + 서브타이틀 + 우측 액션 영역.
|
|
- **버튼**: `.btn`(secondary 기본) / `.btn-primary`(accent) / `.btn.icon`. 그림자·보더 정돈.
|
|
- **카드**: `.card`(surface+border+shadow). 섹션 헤더 `.card .ch`.
|
|
- **스탯**: `.stat-grid`(반응형 5열) + `.stat`(+`.accent` 강조). 빈공간 없는 균등 그리드.
|
|
- **프로그레스바** `.bar`, **배지** `.badge`(비율/상태색), **랭크/리스트행** `.rank`/`.mini`.
|
|
- **테이블**: 수집함/발행 목록용 — 헤더, zebra/hover, 셀 패딩 정돈.
|
|
- **폼 입력**: `.input`/`select`/`textarea` 통일(재가공·발행 화면).
|
|
- **칸반**: `.kb-col`/`.kb-card` 라이트/다크 대응.
|
|
- **칩/태그**: 카테고리·상태.
|
|
|
|
## 5. 파일 변경
|
|
|
|
- `static/css/variables.css` — 토큰 재작성(라이트 기본 + 다크 오버라이드 + 기존 변수 별칭).
|
|
- `static/css/style.css` — 컴포넌트 재작성/확장.
|
|
- `static/js/common.js` — 테마 토글 함수 + 적용/저장.
|
|
- `templates/layout/base.html` — `<head>`에 무플래시 테마 init 인라인 스크립트.
|
|
- `templates/layout/sidebar.html` — 라벨/섹션/활성/사용자/테마토글 재구성.
|
|
- 각 페이지 템플릿 — 페이지별 마크업을 새 컴포넌트로 조정(인라인 스타일 정리).
|
|
|
|
## 6. 롤아웃 (페이지)
|
|
|
|
라이브 라우트 12개: dashboard, collection, board, discover, channels, channel_detail, multi_channel_videos, rework, publish, production, production_detail, videos.
|
|
|
|
> `videos.html`은 레거시 가능성(Video 모델 제거됨) — 적용 전 라우트 실사용 확인, 미사용이면 nav에서 숨김.
|
|
|
|
**단계:**
|
|
- **A. 디자인 시스템 토대** — variables.css + style.css 코어 + common.js 토글 + base.html init + sidebar.html. (적용 즉시 공통 컴포넌트 쓰는 화면 전반이 새 톤으로 전환)
|
|
- **B. 페이지 폴리시** — dashboard(시안 일치)부터 → collection → board → rework → publish → discover → channels/channel_detail → production/production_detail. 페이지별 그리드·인라인스타일을 컴포넌트로 교체.
|
|
|
|
## 7. 검증
|
|
|
|
- 각 페이지를 라이트/다크 양쪽에서 Playwright 스크린샷으로 확인(주요 화면은 사용자에게 텔레그램 이미지로 공유).
|
|
- 테마 토글 동작 + 새로고침 후 유지(localStorage) 확인.
|
|
- 기존 JS(데이터 fetch, 드래그앤드롭 등) 회귀 없는지 스모크.
|
|
|
|
## 8. 범위 밖(YAGNI)
|
|
|
|
- 반응형 모바일 정밀 대응은 최소(데스크톱 우선, 기존 모바일 토글 유지).
|
|
- 컴포넌트 라이브러리/빌드 도구 도입(순수 CSS 유지, SSR 그대로).
|
|
- 기능/도메인 로직 변경 없음 — 순수 프레젠테이션.
|
|
|
|
## 9. 열린 항목
|
|
|
|
- 액센트 색: 현재 파랑(#4f7cff)→보라(#7c5cff) 그라데이션. 사용자 확정 대기(변경 시 토큰만 수정).
|
|
- `videos.html` 레거시 여부 → 숨김/유지 결정.
|
|
- 사이드바 사용자 영역 실제 값(현재 "Admin User/Pro Plan" 더미) — 개인용이라 단순화.
|