hehihoho3@gmail.com 9c276789f3 docs: add UI redesign design spec (light/dark SaaS design system)

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>

2026-06-12 22:19:09 +09:00

5.3 KiB

Raw Blame History

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" 더미) — 개인용이라 단순화.

5.3 KiB Raw Blame History