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)
58 lines
3.2 KiB
Markdown
58 lines
3.2 KiB
Markdown
# 프리셋: 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 브리프에 적용** → 프리셋 선택 자체가 실패
|
|
|
|
## 리스크 후보
|
|
|
|
- 히어로 텍스트를 화면 밖으로 절반 흘려보내기
|
|
- 스크롤에 따라 그리드 자체가 재배치되기
|
|
- 배경을 원색 하나로 덮고 이미지를 흑백으로
|