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)
69 lines
4.2 KiB
Markdown
69 lines
4.2 KiB
Markdown
# 프리셋: quiet-commerce — 읽히는 커머스
|
|
|
|
> 한 문장: **콘텐츠가 설득하고, 화면은 한 번만 요구한다.**
|
|
|
|
`editorial` 의 타이포 규율에 전환 구조를 붙인 것이다. 콘텐츠가 주인공이되 **CTA 가 경로 위에 정확히 하나** 있다.
|
|
|
|
## 언제 고르나
|
|
|
|
- 상품 수가 적고(5개 이하) 구매자가 **이미 카테고리를 아는** D2C — 로스터리, 소규모 브랜드, 구독 서비스, 단일 제품
|
|
- **사진보다 사양·근거가 설득의 주체**일 때. 또는 사진이 아직 없을 때
|
|
- **쓰지 마라**: 상품 수가 많은 커머스(그리드·필터가 주인공이 된다) · 카테고리 입문자 대상(설명이 먼저다) · B2B 도구(→ `swiss-minimal`)
|
|
|
|
> 이 프리셋이 존재하는 이유: `editorial` 과 `anti-grid` 는 "전환이 목적인 랜딩에는 쓰지 마라"고 명시하고,
|
|
> `swiss-minimal` 은 B2B·도구용이며, `dark-instrument` 는 다크 정당화가 필요하다.
|
|
> **전환이 목적인 B2C 랜딩에는 넷 다 맞지 않는다.**
|
|
|
|
## 결정
|
|
|
|
### 타이포그래피
|
|
- 디스플레이 **세리프 1** + 본문 **산세리프 1**. 세리프가 톤을, 산세리프가 가독성을 맡는다
|
|
- 비율 **1.333**, 최대÷본문 **4배 이상**. 비율만으로 안 나오면 디스플레이를 스케일 밖에 따로 정의한다(`tokens.md` §1)
|
|
- 단계 **4~5개**. 커머스 레퍼런스는 흔히 10단계인데 그대로 베끼면 "통제 실패"에 걸린다
|
|
- 웨이트 2개
|
|
|
|
| 슬롯 | 라틴 | 한글 |
|
|
|---|---|---|
|
|
| 디스플레이 | Fraunces, Instrument Serif | 마루 부리 |
|
|
| 본문·UI | Switzer, Satoshi | Pretendard Variable |
|
|
| 수치 | 본문 + `tabular-nums` | 본문 + `tabular-nums` |
|
|
|
|
**한글 본문에 세리프를 쓰지 마라.** 16px 대에서 가독성이 급격히 떨어진다. 세리프는 디스플레이에만.
|
|
|
|
### 색
|
|
- 배경은 순백이 아니라 **오프화이트**. 단 **크림·베이지는 피해라** — "크림 = 고급"은 보라를 대체한 신종 슬롭이다. 크림을 쓰려면 브리프와 연결할 근거를 대라
|
|
- 잉크도 순흑이 아니다
|
|
- **강조색 하나, 면적 5% 미만.** 좋은 커머스 레퍼런스는 강조색을 CTA 한 곳과 링크에만 쓴다
|
|
- hue 2개 (중립 + 강조)
|
|
|
|
### 간격
|
|
- 8px 그리드, 여백 값 5종
|
|
- **섹션 간 : 요소 간 = 1:5.** 커머스는 섹션이 많아 간격이 좁으면 즉시 뭉개진다
|
|
- 비대칭을 쓴다 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 사양·수치를 흘린다
|
|
- `--measure` 는 좁게. 한글 25~35자
|
|
|
|
### 재질 (`svg-filters.md`)
|
|
- **필름 그레인 최약(0.02~0.04).** 오프화이트 배경의 밴딩을 없애는 용도지 질감을 과시하는 게 아니다
|
|
- 유리·글로우·굴절 없음. 이 프리셋의 표면은 종이다
|
|
- 사진이 있다면 듀오톤·그라디언트 맵으로 톤을 통일한다
|
|
|
|
### 모션 (`motion.md`)
|
|
- 거의 움직이지 않는다. 스크롤 진입 페이드 + 8px 상승 하나면 충분하다
|
|
- **스크롤 재킹 금지.** 구매 결정 중인 사람의 속도를 뺏지 마라
|
|
- CTA 는 호버·포커스 피드백을 확실히 준다. 여기가 유일하게 반응이 즉각적이어야 하는 곳이다
|
|
|
|
## 흔한 실패
|
|
|
|
1. **세리프 디스플레이를 쓰고 여백이 좁다** → 세리프는 숨 쉴 공간이 없으면 답답할 뿐이다
|
|
2. **CTA 가 둘로 갈라진다** ("구매하기" + "구독하기") → 레퍼런스가 그렇더라도 베끼지 마라. 브리프가 정한 목표 하나로 통합해라
|
|
3. **수치를 지표 배너로 만든다** → 근거 없는 숫자는 신뢰를 깎는다. 하드 게이트 #11에 걸린다
|
|
4. **한글에 라틴 세리프만 지정** → 한글이 시스템 기본으로 떨어져 전부 무너진다
|
|
5. **사진이 없다고 일러스트로 때운다** → 사양·수치·타이포로 채우는 쪽이 이 대상에게 더 강하다
|
|
|
|
## 리스크 후보
|
|
|
|
- 히어로에 이미지도 감성 카피도 없이 **사양 수치표**를 올린다 (대상이 카테고리를 아는 경우에만)
|
|
- 가격을 첫 화면에 정직하게 노출한다
|
|
- 제품 설명을 산문 한 문단으로 쓰고 불릿을 없앤다
|
|
|
|
> 근거: research/references/03-trends-2026.md, 04-ai-slop-signatures.md, research/dogfood-coffee/ (검증일 2026-08-20)
|