feat(ads/seo/release): v1.2.0 with live Google Ads, isolated ad profile, ads.txt, and SEO/AEO/GEO optimization

This commit is contained in:
Yun Chan 2026-09-14 00:39:44 +09:00
parent a88aafa1e5
commit 0e568f1f0a
975 changed files with 130593 additions and 16783 deletions

131
design.md Normal file
View file

@ -0,0 +1,131 @@
# 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을 실제 서빙 도메인 mediabrowser.chanpaca.net으로 전면 교정(SEO 결함 — canonical이 DNS 없는 도메인 가리킴), 재배포. Search Console에서 URL 접두어 속성 https://mediabrowser.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 최종 결정: mediabrowser.chanpaca.net 본칭 유지 — GSC 인증·사이트맵이 이미 귀속됐고 도메인명이 카테고리 키워드("미디어 브라우저")를 포함, paca는 별칭. (5) Forgejo 저장소 메타데이터 — 설명+웹사이트 백링크(https://mediabrowser.chanpaca.net/)+토픽 8종(video-downloader, media-browser, hls, dash, ffmpeg, wpf, dotnet, csharp) 등록