# UI 리뉴얼 — 정제된 라이트/다크 SaaS 디자인 시스템 작성일: 2026-06-12 대상: 전체 SSR(Thymeleaf) 화면의 시각 디자인 전면 개편 ## 1. 목표 현재 UI(다크 글래스모피즘)가 "너무 어둡고 대비 낮아 뭉개진다". 정제된 SaaS 스타일(Linear/Notion/Vercel 계열)로 전면 리뉴얼하되, **라이트를 기본**으로 하고 **라이트/다크 토글**을 제공한다. 승인된 시안: 대시보드 라이트 mockup. ## 2. 핵심 결정 - **기본 테마 = 라이트.** 다크는 토글로 전환, 선택은 `localStorage`에 저장. - **무플래시 초기화**: `` 인라인 스크립트가 페인트 전에 `localStorage.theme`(기본 light)를 ``에 적용. - **테마 토글 버튼은 사이드바 하단(전역)** — 페이지마다 넣지 않는다. - **레이아웃/마크업 구조는 유지**(사이드바 + 메인). 시각 스타일과 일부 페이지의 그리드/컴포넌트만 교체. - **아이콘은 기존 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` — ``에 무플래시 테마 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" 더미) — 개인용이라 단순화.