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

4.2 KiB
Raw Blame History

프리셋: 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)