Cloudwiki

Claude 보고서/디자인 개선과 테마 아이디어

현재 `DESIGN.md`(프리미엄 플랫 + 글래스모피즘, 라이트/다크 2테마)의 개선점과, 크게 바꿔본다면 시도할 만한 테마 컨셉을 제안합니다. 상위 문서: [[Claude 보고서]]. 구현 토대는 [[Claude 보고서/모듈형 테마 시스템]] 참조.

## DESIGN.md 개선점

### 문서-구현 불일치 정정
위험: 발견된 불일치
`DESIGN.md` 본문은 포커스 링을 `rgba(88,166,255,0.15)` 로 기술하지만, 실제 `:root` 의 `--wiki-focus-ring-color` 는 `rgba(14,165,233,0.15)` 입니다(primary 계열). **문서를 실제 값에 맞춰 정정**하거나 토큰으로 단일화해야 합니다.


### 토큰 아키텍처 명문화
- 콜아웃 틴트 불투명도(라이트 8–10% / 다크 14–16%)가 **산문으로만** 기술됨 → `--wiki-callout-*-tint` 토큰으로 정의.
- 버튼/배지/카드/글래스 컴포넌트 토큰을 DESIGN.md 에 별도 섹션으로 문서화(현재 일부는 render.ts 계산값).
- `light-dark()` 가 2스킴 한정임을 명시하고 N-테마 확장 경로를 안내.

### 접근성 보강
- `prefers-reduced-motion` 가이드 추가(page enter, SPA 진행바, fold, dropdown).
- 콜아웃/diff 색상 대비를 AA 기준으로 검증한 수치 명시.

### 일관성·정리
- **죽은 클래스 정리**: 플랫으로 오버라이드된 레거시 `.neu-*` 클래스 제거 명시.
- **타이포 스케일 정돈**: `base 0.85` · `body 0.9` · `md 0.95` 등 근접 사이즈가 많아 단계 축소 권장.
- **Outfit 폰트**: 로드되지만 본문 미사용 → 디스플레이 헤딩에 실제 사용하거나 폰트 요청 제거(성능).
- **스크롤바**: 고정 `#30363d` 가 라이트 배경에서 다소 무겁게 보일 수 있음 → 테마 인지하되 절제된 값 검토.
- 인쇄(`@media print`) 스타일 가이드와 `accent`(violet) 의 라이트/다크 쌍 정의 검토(현재 단일 고정).

## 크게 바꾼다면: 테마 컨셉


Editorial / 세리프
세리프 본문(Noto Serif KR 등) · 종이질감 웜톤 배경 · 넉넉한 행간/측정폭. 장문 읽기 중심 매거진 감성.

Sepia / E-reader
저블루 종이색 · 낮은 대비 · 눈 피로 최소화. 장시간 독서/문서 열람 모드.

High-contrast / A11y
순흑백 · 큰 타이포 · 두꺼운 포커스 링 · 글래스/모션 제거. 접근성 우선 테마.

Terminal / Hacker
전면 모노스페이스 · 그린-온-블랙 · 스캔라인 악센트. 기술/개발 위키용.

Material You / 동적 색상
브랜드 시드 색 1개로 전체 톤 팔레트 자동 생성. 모듈형 테마 시스템과 직결.

Neo-brutalist
하드 보더 · 그림자 제거 · 강한 원색 · 오프셋 블록. 개성 강한 트렌디 룩.



### 그 외 컨셉
-  **Aurora / 글래스 맥스**: 기존 글래스모피즘을 오로라 그라데이션 배경으로 확장(성능·대비 주의).
-  **Compact / 밀도 모드**: 색 테마가 아닌 **레이아웃 테마** — 간격을 좁혀 파워유저/대형 문서에 최적.
-  **Solarized 라이트/다크 쌍**: 개발자 친화 팔레트. 기존 Prism 매핑 재활용 용이.
-  **Namu 스타일**: 위키 문법이 나무위키류이므로, 친숙도를 위한 나무위키 풍 룩.
-  **Print / Paper**: 내보내기·인쇄 전용 테마(Browser Rendering 연동).

팁: 적용 전제
위 테마들은 모두 [[Claude 보고서/모듈형 테마 시스템]] 의 **토큰 3계층 + 매니페스트 + 런타임 전환** 이 선행되어야 깔끔하게 추가됩니다. 그 전까지는 라이트/다크 변형 수준의 부분 적용만 가능합니다.