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)
77 lines
4.5 KiB
Markdown
77 lines
4.5 KiB
Markdown
# 2단계 — 방향 결정
|
|
|
|
## 한 문장 컨셉
|
|
**감상은 이름에만, 화면에는 수치만.**
|
|
"무월(霧月)"이라는 이름은 모호하다. 이 브랜드가 파는 것은 모호함이 아니라 **측정된 정확성**이다. 그 낙차를 컨셉으로 쓴다.
|
|
|
|
## 프리셋 — ❗ 네 프리셋 중 어느 것도 맞지 않는다. 새로 정의한다: `quiet-commerce`
|
|
|
|
판정 근거(각 프리셋 파일의 "쓰지 마라"):
|
|
|
|
| 프리셋 | 배제 사유 |
|
|
|---|---|
|
|
| `editorial` | "**전환이 목적인 랜딩**에는 쓰지 마라" — 이 브리프의 목표가 정확히 구독 전환이다 |
|
|
| `anti-grid` | "**전환이 목적인 커머스**에는 쓰지 마라" — 동일 |
|
|
| `swiss-minimal` | "제품이 복잡할 때. B2B·도구·문서" — 이 제품은 원두 3종이고 B2C다. 적극적 근거가 없다 |
|
|
| `dark-instrument` | 다크를 정당화할 이유(야간 사용·밝은 데이터 시각화·제품 자체가 어두움)가 브리프에 없다 |
|
|
|
|
→ README의 "어느 것도 맞지 않으면 새로 정의해라"를 따른다. 항목 구조는 프리셋 문서 형식 그대로 채운다.
|
|
(이 판정 자체가 검증 결과다 — FINDINGS.md F5)
|
|
|
|
---
|
|
|
|
### `quiet-commerce` — 읽히는 커머스
|
|
|
|
> 한 문장: **콘텐츠가 설득하고, 화면은 한 번만 요구한다.**
|
|
> editorial의 타이포 규율 + 전환 구조. 콘텐츠가 주인공이되 CTA가 경로 위에 정확히 하나 있다.
|
|
|
|
**언제 고르나**: 상품 수가 적고(≤5), 구매자가 이미 카테고리를 아는 D2C. 사진보다 사양·근거가 설득의 주체일 때.
|
|
**쓰지 마라**: 상품 수가 많은 커머스(그리드·필터가 주인공이 됨), 카테고리 입문자 대상.
|
|
|
|
#### 타이포그래피
|
|
- 디스플레이 **세리프 1**(R2에서 가져온 원리) + 본문 **산세리프 1**. R2는 세리프 2종이었으나 한글 본문 세리프는 16px에서 가독성이 떨어져 교체
|
|
- 비율 **1.333**, 최대/본문 **4.2배** (R2의 1.375배를 의도적으로 벌림)
|
|
- 단계 **4개**. R1은 10단계였다 — 그대로 두면 antipatterns 2절 "8단계 이상 = 통제 실패"에 걸린다
|
|
- 웨이트 2개
|
|
|
|
| 슬롯 | 라틴 | 한글 |
|
|
|---|---|---|
|
|
| 디스플레이 | Fraunces (무료, Google Fonts) | 마루 부리 |
|
|
| 본문·UI | Switzer (Fontshare, 무료 상업) | Pretendard Variable |
|
|
| 수치 | 본문과 동일 + `tabular-nums` | — |
|
|
|
|
#### 색
|
|
- 배경은 순백이 아니다. **오프화이트**. 단 크림/베이지는 아니다 — antipatterns 1절 "크림을 고급의 기본값으로"에 걸린다. 브리프와의 연결: 무월 = 안개 낀 달 → **회청색이 2% 섞인 종이색**
|
|
- 잉크는 순흑이 아니다
|
|
- **강조색 하나, 면적 5% 미만.** R1이 오렌지를 1회만 쓴 것(면적 <1%)과 R2가 파랑을 링크에만 쓴 것(46회, 전부 링크)이 같은 원리다
|
|
- hue 2개 (중립 + 강조). antipatterns "hue 4개 이상" 회피
|
|
|
|
#### 간격
|
|
- 8px 그리드. 여백 값 **5종**
|
|
- 섹션 간 : 요소 간 = **1:5**
|
|
- 비대칭 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 수치를 흘린다 (R2의 "텍스트가 이미지를 대신한다"를 여백 운용으로 번역)
|
|
- 컨테이너 최대 **1120px**, 본문 `--measure`는 한글 **32자**
|
|
|
|
#### 재질 (`svg-filters.md`)
|
|
- **필름 그레인 `--grain: 0.03`** — 최약. 오프화이트 배경의 밴딩만 없앤다
|
|
- 유리·글로우·굴절 없음
|
|
- 사진이 없으므로 듀오톤·그라디언트 맵은 이번 브리프에서 쓸 곳이 없다
|
|
|
|
#### 모션 (`motion.md`)
|
|
- 거의 움직이지 않는다. R3의 `animation-timeline: view()` 페이드 + 8px 상승 하나만
|
|
- 스크롤 재킹 금지
|
|
|
|
#### 흔한 실패
|
|
1. 세리프 디스플레이를 쓰고 여백이 좁다
|
|
2. CTA가 2개로 갈라진다 (R1이 그렇다 — 베끼면 걸린다)
|
|
3. 수치를 "지표 배너"로 만든다 — 근거 없는 숫자는 신뢰를 깎는다
|
|
4. 한글에 라틴 세리프만 지정해 한글이 시스템 기본으로 떨어진다
|
|
|
|
---
|
|
|
|
## 감수할 리스크 하나
|
|
**히어로에 이미지도 감성 카피도 없이, 원두 3종의 로스팅 프로파일 수치표를 첫 화면에 올린다.**
|
|
|
|
- 정당화: 대상이 홈카페 3년차 이상이고 이미 여러 로스터리를 거쳤다. 이들에게 "장인의 손길" 카피는 정보량 0이다. 산미·바디 수치는 즉시 판단 재료가 된다
|
|
- 이 리스크가 브리프 제약(사진 없음)을 **결함에서 자산으로** 바꾼다
|
|
- 대담함은 여기 한 곳뿐. 나머지(타이포·색·여백)는 조용히 받쳐준다
|