a2916e953c
Both hostnames served the same sitemap and feed, so the sitemap submitted for
paca.chanpaca.net listed only mediabrowser.chanpaca.net URLs and Naver rejected
it as not matching the verified domain. Switch every canonical URL, Open Graph
tag, hreflang, JSON-LD, sitemap, RSS feed, llms files, app share link, package
manifest and promo UTM to paca.chanpaca.net, then resubmit the corrected Naver
and Search Console sitemaps. All 2,757 tests pass.
💘 Generated with Crush
Assisted-by: Crush:deepseek-v4.1-flash
131 lines
14 KiB
Markdown
131 lines
14 KiB
Markdown
# design.md — PACA 디자인 시스템 및 테마 규격 (Designpaca SSOT)
|
||
|
||
## 0. 브리프 요약 (3-Line Brief)
|
||
- **무엇을**: PACA 브라우저 & 다운로더의 데스크톱(WPF) 및 모바일(MAUI) 프레임의 라이트/다크 테마 100% 동기화, 버튼 디자인 전면 정돈, 및 다운로드 사이드 패널의 과밀(Overcrowding) 해소와 3단계 슬림 레이아웃 개편.
|
||
- **누구에게**: PACA 사용자에게 웹페이지뿐 아니라 브라우저 외곽 프레임과 사이드 패널까지 시각적 피로도 없는 스위스 미니멀리즘(Swiss Minimalist / Linear-inspired) 감성을 제공.
|
||
- **제약**: .NET 8 WPF 데스크톱, .NET 10 MAUI 모바일, 1,737건 xUnit 테스트 전수 무결성, 1px 사각형 보더라인 금지, WCAG 2.1 AA/AAA 명도 대비 준수.
|
||
|
||
---
|
||
|
||
## 1. 디자인 방향 및 미학 프리셋 (Aesthetic Direction)
|
||
- **프리셋**: **스위스 미니멀리즘 (Swiss Minimalist) & 리니어(Linear) 스타일**
|
||
- **핵심 철학**:
|
||
1. **헤어라인 테두리 금지 (No Boxy Outlines)**: 인터랙션 버튼과 라디오 탭에 투박한 `1px Solid Border`를 두르지 않는다. 배경과 요소의 톤온톤 명도 차이(Surface Contrast)와 호버 음영(Soft Tint)으로 경계를 표현한다.
|
||
2. **프레임 테마 일관성 (Full Frame Sync)**: 라이트 테마 전환 시 웹뷰 내부뿐 아니라 상단 툴바, 탭 스트립, 옴니박스 캡슐, 하단 내비게이션 바까지 100% 밝은 톤으로 전환된다.
|
||
3. **과밀 방지 및 공간 위계 (Anti-Overcrowding & Visual Hierarchy)**: 한정된 사이드바 폭에 수많은 컨트롤을 한 줄에 쑤셔넣지 않는다. 검색창은 온전한 가로폭을 확보하고, 보조 필터는 서랍(Drawer)으로 필요할 때만 노출한다.
|
||
|
||
---
|
||
|
||
## 2. 디자인 토큰 체계 (Design Tokens)
|
||
|
||
### 2.1 데스크톱 (Paca.App - Themes/Light.xaml & Themes/Dark.xaml)
|
||
| 토큰명 | 라이트 테마 (Light) | 다크 테마 (Dark) | 용도 |
|
||
|---|---|---|---|
|
||
| `BgPrimary` / `Background` | `#F8FAFC` | `#0B0B0E` | 메인 윈도우 배경 |
|
||
| `TopBarBackground` / `ToolbarBg` | `#FFFFFF` | `#111116` | 상단 탭/툴바 프레임 |
|
||
| `Surface1` / `CardBg` | `#FFFFFF` | `#111116` | 팝업, 카드, 모달 표면 |
|
||
| `Surface2` / `OmniboxBg` | `#F1F5F9` | `#181820` | 옴니박스 입력창, 세컨더리 카드, 필터 서랍 배경 |
|
||
| `CardBgHover` | `#E2E8F0` | `#1E1E28` | 버튼/탭 호버 및 활성 선택 시 소프트 음영 |
|
||
| `TextPrimary` | `#0F172A` | `#F8FAFC` | 본문, 탭 타이틀, 옴니박스 텍스트 |
|
||
| `TextSecondary` | `#475569` | `#94A3B8` | 아이콘 글리프, 보조 레이블 |
|
||
| `Accent` | `#3B82F6` | `#3B82F6` | 다운로드 상태, 활성 인디케이터 |
|
||
|
||
### 2.2 모바일 (Paca.Mobile - MobileThemeSystem & BrowserPage)
|
||
| 토큰명 | 라이트 테마 (Light) | 다크 테마 (Dark) | 용도 |
|
||
|---|---|---|---|
|
||
| `Background` | `#F8FAFC` | `#08080C` | 페이지 배경 |
|
||
| `TopBarBackground` | `#FFFFFF` | `#0E0E14` | 상단 옴니박스 바 배경 |
|
||
| `BottomBarBackground` | `#FFFFFF` | `#0E0E14` | 하단 7개 메뉴 툴바 배경 |
|
||
| `UrlCapsuleBackground` | `#F1F5F9` | `#161622` | URL 입력 캡슐 배경 |
|
||
| `ButtonSubtleBackground`| `#E2E8F0` | `#1E1E2A` | 탭 카운터 버튼 배경 음영 |
|
||
| `TextPrimary` | `#0F172A` | `#FFFFFF` | 주 텍스트 |
|
||
| `TextSecondary` | `#475569` | `#94A3B8` | 툴바 아이콘 및 보조 텍스트 |
|
||
|
||
---
|
||
|
||
## 3. 버튼 및 탭 컴포넌트 규약 (Component Design System)
|
||
1. **GhostButton & IconButton (보더리스 폰트/아이콘 버튼)**:
|
||
- `BorderThickness`: `0` (외곽선 완전 제거)
|
||
- Normal: 투명 배경, `TextSecondary` 폰트 컬러
|
||
- Hover: `CardBgHover` 은은한 톤온톤 배경 음영, 부드러운 코너 라운딩(`CornerRadius="6"`)
|
||
2. **CardActionButton (소프트 음영 카드 액션 버튼)**:
|
||
- `BorderThickness`: `0`
|
||
- Normal: 투명 배경 또는 은은한 베이스 틴트
|
||
- Hover: `CardBgHover`, `BorderBrush` 없음
|
||
3. **FilterTabStyle (모던 세그먼트 알약 탭)**:
|
||
- `BorderThickness`: `0` (투박한 1px 사각형 박스 테두리 박멸)
|
||
- IsChecked: `CardBgHover` 은은한 소프트 배경, `TextPrimary` 세미볼드 폰트
|
||
4. **다운로드 사이드 패널 3단계 슬림 레이아웃**:
|
||
- 1행: 시원한 풀 너비 검색창 + 우측 미니멀 아이콘 툴바 (미디어 재수집, 완료 정리, 전체 비우기, 콤팩트 토글)
|
||
- 2행: 핵심 상태 탭 (`전체` `진행` `완료` `실패`) + 우측 필터 서랍 토글 버튼 (`⚙`)
|
||
- 3행 (접이식): `FilterDetailsDrawer` (평소에는 닫혀있어 공간을 차지하지 않으며, 토글 시 미디어 종류, 포맷, 정렬, 완료 후 행동이 2열로 여유 있게 노출)
|
||
- 4행: 하단 일괄 작업 및 속도 제한 콤보박스 (너비 82px로 텍스트 잘림 방지)
|
||
|
||
---
|
||
|
||
## 4. 자율 검증 및 감사 게이트 (Quality DoD)
|
||
- **Gate 82 (WPF Themes & Borderless Button)**: `Themes/Shared.xaml` 내 `GhostButton`, `CardActionButton`, `NewTabButtonStyle`의 `BorderThickness`가 `0`이어야 함.
|
||
- **Gate 83 (Desktop Light Frame Sync)**: 데스크톱 `MainWindow`에 라이트 테마 적용 시 `TopBarBackground`가 `#FFFFFF`로 반영되어야 하며, 다크 하드코딩이 없어야 함.
|
||
- **Gate 84 (Mobile Theme System & Frame Sync)**: `MobileThemeSystem`의 라이트 팔레트 및 `BrowserPage.ApplyTheme`가 상단바/하단바/캡슐/버튼을 온전히 라이트/다크로 전환해야 함.
|
||
- **Gate 85 (Download Panel Streamlined Layout & No Overcrowding)**: `FilterTabStyle` 사각형 테두리 제거, 속도 제한 콤보박스 80px 이상 확보, 접이식 필터 서랍(`FilterDetailsDrawer`) 및 토글 버튼(`ToggleFilterDrawerBtn`) 선언 무결성 검증.
|
||
|
||
---
|
||
|
||
## 5. 사이트(site/) 디자인 결정 기록 — designpaca 리디자인 (2026-09-11)
|
||
|
||
앱 UI와 별개로 홍보 사이트(`site/`)의 토큰·구조 결정. 앱 테마 결정(위 섹션)이 우선이며, 사이트는 여기서 정한 것을 따른다.
|
||
|
||
### 브리프 3줄
|
||
- **무엇을**: PACA 브라우저·다운로더 홍보 사이트(기존 site/ 리디자인) — 기존 사이트가 다운로더 정체성에 치우쳐 "다운로드 엔진의 계기판"으로 재정렬.
|
||
- **누구에게**: 한국어권 Windows 사용자 — 설치자 다운로드(1차), GitHub·가이드(2차, 가정으로 진행: 사용자 미답변, 미확정 목록 참조).
|
||
- **제약**: 정적 HTML/CSS/JS, 기존 배포 도구(deploy-site.ps1·fetch-releases.mjs) 계승, ko-KR.
|
||
|
||
### 경로·레퍼런스
|
||
- 경로: **전체** (토큰 재정의 있음, 사이트용 design.md 부재)
|
||
- R1 구조: Vivaldi 한국어 페이지 — 앱 실물 프레임 히어로, CTA 상하 반복, 피처 그리드 위계 (실측: 섹션 패딩 128, 컨테이너 1280~1344)
|
||
- R2 톤: Blackmagic DaVinci Resolve — 다크 계기판(#090909 대역, 단일 액센트, 모노 수치, 소폭 라디우스) [업종 상이 ✓]
|
||
- R3 디테일: Codrops 스크롤 드리븐 애니메이션(CSS `scroll()` 타임라인) — 상단 진행 게이지, transform만, 미지원 브라우저는 정적 폴백
|
||
|
||
### 프리셋·컨셉·리스크
|
||
- 프리셋: **dark-instrument** (다크 정당화: 제품 자체가 어두운 앱 + 계기판 프리셋)
|
||
- 컨셉: "다운로드 엔진의 계기판 — 제품이 일하는 걸 숫자로 보여주는 다크 콘솔"
|
||
- 감수한 리스크 1개: 히어로의 인터랙티브 시뮬레이터에 표면 결정을 집중
|
||
|
||
### 토큰 (site/styles.css)
|
||
- 색: 표면 #08090d/#0d1017/#11141d/#161b28 / 텍스트 #f8fafc·#94a3b8·#8fa0b5 / 액센트 #3b82f6(앱 계승, 좁은 면적) + 상태 틴트 #60a5fa·호버 #2563eb·프레스 #1d4ed8 (동일 파랑 가족)
|
||
- 타입: Wanted Sans Variable(SIL OFL, 한글 동적 서브셋 CDN) + 시스템 모노(다운로드 0KB 정당화), 본문 lh 1.65, `keep-all`, 헤드라인 자간 -0.02em, 수치 `tabular-nums`
|
||
- 형태: radius 3종 계약 — sm 4 / md 12 / pill
|
||
- 모션: instant 100ms·quick 200ms, transform·opacity만, `prefers-reduced-motion` 전면 대응
|
||
- 성능 예산: JS ~7KB(측정치, 기본선 150KB 대비 하향) / 폰트 패밀리 2 / 외부 요청 1(폰트 CSS)
|
||
|
||
### 이펙트 제거 결정 (사용자 승인 전 정책상 자율 적용)
|
||
- spotlight 카드 커서 추적, ambient 스포트라이트(blur 70px), mac식 윈도우 도트(Windows 앱 표현 왜곡 — Windows 타이틀바 텍스트로 교체), 프로그레스 그라디언트 — 계기판 프리셋의 "재질 절제"와 진정성 게이트에 따라 제거
|
||
|
||
### 감사 결과 (design-gate.mjs, site/gate.config.json)
|
||
- **게이트 통과**: SEO/meta·오버플로(320~1440 전 폭)·대비 AA·터치타깃 44px·토큰 위생·h1 2줄·수축·리듬 전부 PASS
|
||
- 교정된 실제 결함: 버튼 대비 3.68→5.5(#2563eb), 한글 keep-all 부재, radius 5종 위반, 가이드 번호 리스트 ul→ol 시맨틱, 안내문 이모지 제거, "~를 통해" 번역투 교정, 모바일 메뉴 Esc 복원, 인라인 링크 타깃 24px
|
||
- deadCss 검사는 비활성화(사유: site.js 렌더링 마크업 + 4페이지 공유 CSS로 오탐) — 대신 제거 삼위일чие grep으로 수동 검증(spotlight·window-dot·ambient-spotlight 0건)
|
||
|
||
### 미확정 목록 (사용자 확인 필요)
|
||
- 1차 CTA를 "다운로드/설치"로 가정(2차: GitHub). 바꾸려면 히어로 CTA 라벨과 릴리스 페이지 링크만 수정
|
||
- 시뮬레이터 수치(18.4 MB/s·72%·16 Threads)는 예시 캡션으로 명시됨 — 실측 벤치마크로 교체 후보
|
||
|
||
### 하지 않기로 한 것
|
||
- 라이트 테마 사이트 버전 — 계기판 프리셋의 단일 다크 방향(제품 정체성) 우선. 토큰은 역할 기반이라 추후 `prefers-color-scheme` 확장 가능
|
||
- 언론 인용 스트립 — 실제 보도 자산이 없어 하드 게이트 11 위반 소지
|
||
- 3D/WebGL/그레인 재질 — 예산 대비 기여 낮음(계기판 인상은 타이포·수치·게이지로 달성)
|
||
- 콘텐츠 카피 전면 교체 — 기존 승인된 카피(과장 완화 버전) 유지, 구조만 계기판으로 재조명
|
||
|
||
### 2차 패스 — 시그니처 비주얼 (2026-09-11, 사용자 피드백 "너무 평이하다")
|
||
- 히어로 재구성: 전면 디스플레이 헤드라인(2줄 계약 유지, 1440px에서 83px, 액센트 둘째 줄 `h1-accent`) + 하단 0.85:1.15 그리드(서브·CTA | 시뮬레이터)
|
||
- 엔진 글로우: 시뮬레이터에 파랑 링+글로우 섀도, 3도 틸트(호버 평탄화, reduced-motion 비활성), ambient 레이어에 정적 라디얼 글로우 2개
|
||
- 기계식 디테일: 카드 코너 틱(호버 액센트), 섹션 모노 인덱스(`.section-head h2::before`, CSS 카운터), eyebrow 틱 라인, bento/step 아이콘 글로우 링
|
||
- 밴드 리듬: `#compare`·플랫폼 섹션에 `--bg-band` 표면 반전 + 헤어라인(게이트 4의 "토큰으로 정의된 리듬 반전"으로 계약)
|
||
- 타입 대비 확대: h1 clamp 재조정 — 320~1440 × 배율 1.3x 전 조합에서 2줄 유지(게이트 스케일×폭 통과)
|
||
- 게이트 재통과(실패 0건), 오버플로 1440==1440·390==390, h1 2줄 실측
|
||
|
||
- 2026-09-11 · 법적 고지 섹션(index #legal + 전 페이지 푸터 링크) 추가 — 업계 관행(youtube-dl 저작권 정책, 4K Download ToU §2/§7/§13, cobalt zero-liability, yt-dlp Unlicense 무보증)을 한국어로 조판. 레이아웃 패밀리 1개 추가, 토큰 변경 없음, 게이트 재통과
|
||
- 2026-09-11 · SEO/AEO 적용 — robots.txt(전 크롤러 Allow), llms.txt(요약·페이지·확인된 사실만), sitemap.xml, canonical 3페이지, JSON-LD(SoftwareApplication: 무료 offers·featureList, aggregateRating 없음 — 리치결과 자격은 없으나 AI 구조화 시그널로 유지 / guide FAQPage: 실제 FAQ 3건). 히어로 서브에 "미디어 브라우저" 카테고리 정의문을 상단 30% 안에 배치(AI 인용 55%가 페이지 상단 30%에서 발생 — CXL/Kevin Indig). 근거: Semrush 인용 5요인(명확성 +32.8%, Q&A +25.5%, 구조화 +21.6%), Rutgers/Wharton AI 크롤러 차단 시 트래픽 -23.1%
|
||
- 2026-09-11 · 도메인 정오타 + Search Console 등록 — canonical/OG/sitemap/llms.txt에 있던 존재하지 않는 Paca.chanpaca.net을 실제 서빙 도메인 paca.chanpaca.net으로 전면 교정(SEO 결함 — canonical이 DNS 없는 도메인 가리킴), 재배포. Search Console에서 URL 접두어 속성 https://paca.chanpaca.net/ 생성·HTML 파일 방식으로 소유권 확인(확인 파일은 Cloudflare Pages의 .html→확장자 없음 308 리다이렉트를 거쳐 200 서빙 — 삭제 금지), sitemap.xml 제출 완료. 향후 더 짧은 커스텀 도메인을 쓰려면 Cloudflare 대시보드에서 DNS CNAME 수동 추가 후 속성 이관
|
||
- 2026-09-11 · paca.chanpaca.net 별칭 활성화 — .env의 기존 토큰에 DNS 편집 권한이 있어 CNAME 직접 생성 가능했음(zone id 저장 완료). API로 Pages 도메인 추가 시 검증이 계속 pending("CNAME record not set") → 대시보드 플로우(도메인 입력→자동 DNS 레코드 생성→활성화)로 해결. 두 도메인 모두 200 서빙 중. canonical은 mediabrowser 유지(GSC 인증·색인 기반), paca는 별칭. Pages 도메인 삭제 API는 ID가 아니라 도메인 이름으로 호출해야 함(등록 id로 404 나오는 함정)
|
||
- 2026-09-11 · 검색 엔진 등록 완료 — (1) GSC 홈페이지 URL 검사 → "색인 생성 요청" 제출(우선순위 크롤링 대기열 등록). (2) README에 홈페이지·다운로드·가이드 백링크 추가(커밋 a88aafa, Forgejo 푸시). (3) Bing Webmaster Tools — Google 계정 OAuth로 GSC에서 사이트+사이트맵 import 성공(Bing 인덱스는 ChatGPT 검색·AI Overviews가 상당 부분 사용). (4) canonical 최종 결정: paca.chanpaca.net 본칭 유지 — GSC 인증·사이트맵이 이미 귀속됐고 도메인명이 카테고리 키워드("미디어 브라우저")를 포함, paca는 별칭. (5) Forgejo 저장소 메타데이터 — 설명+웹사이트 백링크(https://paca.chanpaca.net/)+토픽 8종(video-downloader, media-browser, hls, dash, ffmpeg, wpf, dotnet, csharp) 등록
|