yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
designpaca/packages/skill/references/presets/editorial.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

2.9 KiB
Raw Blame History

프리셋: editorial — 잡지의 여백과 세리프

한 문장: 읽는 것이 목적인 화면. 콘텐츠가 주인공이고 UI는 뒤로 물러난다.

언제 고르나

  • 콘텐츠(글·사진·작업물)가 실제로 있고 그것이 설득의 주체일 때
  • 브랜드·미디어·포트폴리오·럭셔리·문화 기관
  • 쓰지 마라: 기능이 많은 제품, 전환이 목적인 랜딩, 데이터 밀도가 높은 화면

결정

타이포그래피

  • 세리프를 주역으로. 디스플레이와 본문 중 최소 하나는 세리프
  • 비율 1.333~1.618 — 헤드라인과 본문의 차이를 크게 벌린다
  • 본문 --measure 를 반드시 좁게. 라틴 6068자, 한글 2535자
  • 웨이트는 2개면 충분(Regular + 하나). 굵기로 소리치지 않는다
슬롯 무료 유료 한글
디스플레이 Instrument Serif, Fraunces Signifier, PP Editorial New 마루 부리
본문 Spectral, Lora Söhne, Tiempos 마루 부리 / 리디바탕

색

  • 배경은 순백이 아니다. 종이 쪽으로 살짝 따뜻하게 (#fbfaf8, #f7f5f0)
  • 잉크도 순흑이 아니다 (#1a1917, #211f1c)
  • 강조색은 하나, 작게. 링크·인용부호·페이지 번호 정도. 면적을 넓히면 잡지가 아니라 전단지가 된다

간격

  • 여백이 콘텐츠다. 섹션 간격을 본문 간격의 5~6배까지 벌려도 된다
  • 비대칭을 적극적으로 — 본문을 그리드 왼쪽 2/3에 두고 오른쪽을 비우거나, 캡션을 여백에 흘린다
  • 이미지는 본문 폭을 넘어가게(wide/full) 두어 리듬을 만든다

재질 (svg-filters.md)

  • 필름 그레인이 이 프리셋의 기본 재질. feTurbulence fractalNoise 를 아주 약하게(opacity 0.03~0.06)
  • 인쇄물의 질감: 이미지에 미세한 듀오톤 또는 그라디언트 맵
  • 유리·네온·글로우는 이 프리셋에 어울리지 않는다

모션 (motion.md)

  • 거의 움직이지 않는다. 등장은 페이드 + 짧은 상승(8~16px) 이하
  • duration 은 느리게(--dur-slow), 이징은 --ease-out
  • 스크롤 재킹 금지. 읽는 사람의 속도를 뺏지 마라

흔한 실패

  1. 세리프를 썼는데 여백이 좁다 → 세리프는 숨 쉴 공간이 없으면 그냥 답답해진다
  2. 강조색을 넓게 칠했다 → 에디토리얼의 색은 점이지 면이 아니다
  3. 모든 이미지를 같은 크기로 넣었다 → 크기 차이가 리듬이다
  4. 본문 폭이 넓다 → 이 프리셋에서 가장 자주 나오는 실패
  5. 한글에 라틴 세리프만 지정 → 한글이 시스템 기본으로 떨어져 전부 무너진다

리스크 후보 (2단계에서 하나 고른다)

  • 히어로에 이미지 없이 타이포그래피만
  • 본문 폭을 극단적으로 좁히고 여백에 주석을 흘리기
  • 페이지 번호·러닝헤드 같은 인쇄물 장치를 웹에 가져오기