8808c672dc
웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포. 스킬 (packages/skill) - SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로 본문은 절차와 인덱스만, 지식은 references/ 로 분리 - 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기 - 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외 - 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙, SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침 설치 CLI (packages/cli, packages/core) - npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md - 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다 - 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성 - AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입 - Windsurf 는 12,000자 상한 초과 시 설치를 차단 배포 (build/ci, .forgejo/workflows) - 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러 → draft 릴리스 → Cloudflare Pages. 재실행 멱등 근거 (research/) - 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다 테스트 22개 통과 (core 16 · cli 6)
62 lines
3.3 KiB
Markdown
62 lines
3.3 KiB
Markdown
# 프리셋: dark-instrument — 계기판처럼 정확한
|
|
|
|
> 한 문장: **정밀함이 곧 신뢰인 화면.** 어둡되 분위기가 아니라 기능으로 어둡다.
|
|
|
|
## 언제 고르나
|
|
|
|
- 개발자 도구, 인프라, 데이터/모니터링, 보안, 금융 트레이딩
|
|
- 사용자가 이 화면을 **오래 본다**는 전제가 있을 때
|
|
- **쓰지 마라**: 다크가 "멋있어서" 고르는 경우. **다크 기본값은 단일 슬롭 시그니처 1위다.** 이유를 댈 수 없으면 라이트로 가라
|
|
|
|
### 다크를 정당화하는 이유의 예
|
|
- 사용자가 어두운 환경(야간 운영, 스튜디오)에서 본다
|
|
- 화면에 밝은 데이터 시각화가 있고 배경이 어두워야 대비가 산다
|
|
- 제품 자체(터미널·에디터·모니터링)가 어둡다
|
|
|
|
## 결정
|
|
|
|
### 타이포그래피
|
|
- 산세 + **모노스페이스 병용**. 수치·ID·코드는 반드시 모노
|
|
- 비율 1.200~1.250. 정보 밀도가 높으므로 위계 차이를 작게
|
|
- 숫자는 **tabular-nums** 를 켜라 (`font-variant-numeric: tabular-nums`). 수치가 흔들리면 계기판이 아니다
|
|
|
|
| 슬롯 | 무료 | 한글 |
|
|
|---|---|---|
|
|
| 본문 | IBM Plex Sans, DM Sans, Switzer | Pretendard / Spoqa Han Sans Neo |
|
|
| 수치·코드 | JetBrains Mono, IBM Plex Mono | + Pretendard |
|
|
|
|
### 색
|
|
- **순수 검정을 쓰지 마라.** `#0d0d0f`~`#14130f` 대역. 순흑은 대비가 과해 눈이 아프다
|
|
- 텍스트도 순백 금지. `#e8e4dc`~`#e6e6e9`
|
|
- 표면 단계를 3개로: `--surface`(가장 어두움) / `--surface-raised` / `--line`
|
|
- 강조색은 **밝고 채도 높게, 아주 좁게.** 어두운 배경에서는 작은 면적으로도 충분히 강하다
|
|
- 상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다
|
|
|
|
### 간격
|
|
- 밀도를 높이되 **정렬을 완벽하게.** 이 프리셋에서 어긋난 1px은 즉시 보인다
|
|
- 데이터 영역과 설명 영역의 간격을 명확히 구분
|
|
- 4px 그리드를 엄격히
|
|
|
|
### 재질 (`svg-filters.md`)
|
|
- **거의 쓰지 않는다.** 어두운 배경에서 그레인은 노이즈로 보인다
|
|
- 쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(`feGaussianBlur` + `feMerge`)
|
|
- 글래스모피즘은 성능 대비 이득이 없다. 내비게이션 바 정도까지
|
|
|
|
### 모션 (`motion.md`)
|
|
- 빠르고 정확하게. `--dur-instant`~`--dur-quick`
|
|
- 실시간 데이터의 변화는 **위치 이동이 아니라 색·굵기 변화**로 알린다(레이아웃 시프트 금지)
|
|
- 로딩은 스피너보다 스켈레톤. 무엇이 올지 미리 보여준다
|
|
|
|
## 흔한 실패
|
|
|
|
1. **순수 검정 + 순수 흰색** → 눈이 아프고 아마추어
|
|
2. **네온 보라/파랑 강조** → 슬롭 지문. 어두운 배경일수록 이 함정에 빠지기 쉽다
|
|
3. **다크만 만들고 라이트를 안 만듦** → 토큰으로 짰으면 라이트도 나온다. 다크 전용은 사용자 선택권을 뺏는 것
|
|
4. **수치에 가변폭 폰트** → 숫자가 흔들려 읽기 어렵다
|
|
5. **대비 미달** → 어두운 배경에서 `--ink-muted` 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라
|
|
|
|
## 리스크 후보
|
|
|
|
- 강조색을 데이터에만 쓰고 UI 전체를 무채색으로
|
|
- 히어로를 실제 제품 화면(터미널·차트)으로 대체
|
|
- 모노스페이스를 본문까지 확장
|