yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions
designpaca/packages/skill/references/presets/anti-grid.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.2 KiB
Raw Blame History

프리셋: anti-grid — 의도적으로 깨진 격자

한 문장: 기억되는 것이 목적일 때. 규칙을 알고 나서 깬다.

벤토 그리드가 표준화되자 그 반작용으로 부상한 방향이다. 2026년 현재 실제로 작동하는 차별화 수단이다.

언제 고르나

  • 에이전시·스튜디오 자사 사이트, 아트/문화 프로젝트, 캠페인, 음악·패션
  • 클라이언트가 "안전한 것 말고"를 명시적으로 요구했을 때
  • 쓰지 마라: 전환이 목적인 커머스, B2B SaaS 구매 경로, 접근성 요구가 엄격한 공공. 이 프리셋은 읽기 비용을 높인다

결정

타이포그래피

  • 모노스페이스 또는 개성 강한 그로테스크를 주역으로
  • 크기 대비를 극단적으로 — 비율 1.618 이상, 또는 스케일을 아예 무시하고 두세 개 크기만 극단적으로 배치
  • 대문자·자간 확대·세로쓰기 같은 장치를 하나만 쓴다. 셋을 동시에 쓰면 아마추어
  • 전체 대문자 헤드라인은 검출률 2위 슬롭 지문이다. 쓰려면 이유가 있어야 하고, 짧아야 한다(한 줄 이내)
슬롯 무료 유료 한글
디스플레이 Karrik, Basteleur, Terminal Grotesque (Velvetyne) Right Grotesk 제주명조, 여기어때 잘난체
본문 Work Sans, Archivo Neue Montreal Pretendard

색

  • 원색 또는 극단적 대비. 중간 톤을 피한다
  • 배경색 자체를 강한 색으로 쓰는 것을 검토 (흰 배경이 기본값이라고 가정하지 마라)
  • 단, 색은 두 개까지. 무지개는 브루탈리즘이 아니라 혼돈이다

간격

  • 격자를 정의한 뒤에 깬다. 그리드 없이 배치하면 깨진 게 아니라 그냥 엉망이다
  • 요소를 겹치게(z-index, 음수 마진) 배치 — 단 겹침이 읽기를 방해하면 실패
  • 화면 밖으로 흘려보내기, 극단적 여백과 극단적 밀집을 한 페이지에 공존시키기

재질 (svg-filters.md)

  • 거친 질감이 어울린다: 강한 그레인, 리소그래프 인쇄, 잉크 번짐(feTurbulence + feDisplacementMap)
  • 크로마틱 애버레이션을 호버에 얹기
  • 매끄러운 유리·글로우는 이 프리셋의 반대편이다

모션 (motion.md)

  • 갑작스럽게. steps() 이징, 짧고 각진 전환
  • 커서 인터랙션(마그네틱, 왜곡)이 잘 맞는다
  • prefers-reduced-motion 대응이 특히 중요하다. 이 프리셋의 모션은 강해서 어지러움을 유발하기 쉽다

흔한 실패

  1. 그리드를 정의하지 않고 시작 → 깬 게 아니라 못 맞춘 것으로 보인다
  2. 읽을 수 없게 만들고 "의도"라고 함 → 브루탈리즘도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
  3. 장치를 전부 동원 → 대문자 + 자간확대 + 겹침 + 회전 + 그레인 = 소음
  4. 접근성 포기 → 포커스 링과 대비는 이 프리셋에서도 지킨다
  5. B2B 브리프에 적용 → 프리셋 선택 자체가 실패

리스크 후보

  • 히어로 텍스트를 화면 밖으로 절반 흘려보내기
  • 스크롤에 따라 그리드 자체가 재배치되기
  • 배경을 원색 하나로 덮고 이미지를 흑백으로