yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
designpaca/packages/skill/references/presets/dark-instrument.md
Yun Chan 8808c672dc designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인 
웹 디자인 파이프라인 스킬과 이를 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)
2026-08-20 10:48:00 +09:00

3.3 KiB
Raw Blame History

프리셋: 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 전체를 무채색으로
  • 히어로를 실제 제품 화면(터미널·차트)으로 대체
  • 모노스페이스를 본문까지 확장