6805fb2be7
- Restore the step-0 interview as a mechanical gate the skill explicitly depends on; add harness.md (per-harness question tools, limits, fallbacks) and brief-interview.md (slots, question cards, rounds). - Add 10 reference docs absorbed from external design skills (accessibility, interaction-feel, elevation, color, icons, product-copy, component-systems, critique, change-review, print-email) and extend existing references. - Add a review-only route and two hard-gate clauses (truncated content reachability, three-flashes limit). - design-gate: split tap targets into WCAG 2.5.8 and 44px contract layers, run axe-core when available, and fix false positives found on a real site (decorative alt="", stacked wordmark line count, url-only pages). - lint-skill: fail if the interview gate section or its links disappear. - Ship agents/openai.yaml and THIRD_PARTY_NOTICES.md.
4.5 KiB
4.5 KiB
프리셋: quiet-commerce — 읽히는 커머스
한 문장: 콘텐츠가 설득하고, 화면은 한 번만 요구한다.
editorial 의 타이포 규율에 전환 구조를 붙인 것이다. 콘텐츠가 주인공이되 CTA 가 경로 위에 정확히 하나 있다.
언제 고르나
- 상품 수가 적고(5개 이하) 구매자가 이미 카테고리를 아는 D2C — 로스터리, 소규모 브랜드, 구독 서비스, 단일 제품
- 사진보다 사양·근거가 설득의 주체일 때. 또는 사진이 아직 없을 때
- 쓰지 마라: 상품 수가 많은 커머스(그리드·필터가 주인공이 된다) · 카테고리 입문자 대상(설명이 먼저다) · B2B 도구(→
swiss-minimal)
이 프리셋이 존재하는 이유:
editorial과anti-grid는 "전환이 목적인 랜딩에는 쓰지 마라"고 명시하고,swiss-minimal은 B2B·도구용이며,dark-instrument는 다크 정당화가 필요하다. 전환이 목적인 B2C 랜딩에는 넷 다 맞지 않는다.
결정
타이포그래피
- 디스플레이 세리프 1 + 본문 산세리프 1. 세리프가 톤을, 산세리프가 가독성을 맡는다
- 비율 1.333과 강한 display 대비에서 시작하고, 문구 길이·제품 증거·모바일 줄 수로 확정한다. 최대÷본문 4배 같은 고정 비율은 요구사항이 아니다.
- 단계 4~5개. 커머스 레퍼런스는 흔히 10단계인데 그대로 베끼면 "통제 실패"에 걸린다
- 웨이트 2개
| 슬롯 | 라틴 | 한글 |
|---|---|---|
| 디스플레이 | Fraunces, Instrument Serif | 마루 부리 |
| 본문·UI | Switzer, Satoshi | Pretendard Variable |
| 수치 | 본문 + tabular-nums |
본문 + tabular-nums |
한글 본문에 세리프를 쓰지 마라. 16px 대에서 가독성이 급격히 떨어진다. 세리프는 디스플레이에만.
색
- 배경은 순백이 아니라 오프화이트. 단 크림·베이지는 피해라 — "크림 = 고급"은 보라를 대체한 신종 슬롭이다. 크림을 쓰려면 브리프와 연결할 근거를 대라
- 잉크도 순흑이 아니다
- 강조 역할이 필요하면 한 색으로 시작하고, 실제 상태색·링크·CTA를 포함한 화면에서 경쟁 여부를 검증한다. 5% 면적 같은 값은 보편 품질 기준이 아니다.
- hue 2개 (중립 + 강조)
간격
- 8px 그리드, 여백 값 5종
- 섹션과 요소 간격의 차이가 정보 묶음을 읽히게 하는지 본다. 1:5는 예시 가설이며, 상품 수·콘텐츠 길이·화면 폭에서 조정한다.
- 비대칭을 쓴다 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 사양·수치를 흘린다
--measure는 좁게. 한글 25~35자
재질 (svg-filters.md)
- 필름 그레인 최약(0.02~0.04). 오프화이트 배경의 밴딩을 없애는 용도지 질감을 과시하는 게 아니다
- 유리·글로우·굴절 없음. 이 프리셋의 표면은 종이다
- 사진이 있다면 듀오톤·그라디언트 맵으로 톤을 통일한다
모션 (motion.md)
- 거의 움직이지 않는다. 스크롤 진입 페이드 + 8px 상승 하나면 충분하다
- 스크롤 재킹 금지. 구매 결정 중인 사람의 속도를 뺏지 마라
- CTA 는 호버·포커스 피드백을 확실히 준다. 여기가 유일하게 반응이 즉각적이어야 하는 곳이다
흔한 실패
- 세리프 디스플레이를 쓰고 여백이 좁다 → 세리프는 숨 쉴 공간이 없으면 답답할 뿐이다
- CTA 가 둘로 갈라진다 ("구매하기" + "구독하기") → 레퍼런스가 그렇더라도 베끼지 마라. 브리프가 정한 목표 하나로 통합해라
- 수치를 지표 배너로 만든다 → 근거 없는 숫자는 신뢰를 깎는다. '사용자가 주지 않은 수치를 그럴듯한 값으로 넣지 않는다' 하드 게이트에 걸린다
- 한글에 라틴 세리프만 지정 → 한글이 시스템 기본으로 떨어져 전부 무너진다
- 사진이 없다고 일러스트로 때운다 → 사양·수치·타이포로 채우는 쪽이 이 대상에게 더 강하다
리스크 후보
- 히어로에 이미지도 감성 카피도 없이 사양 수치표를 올린다 (대상이 카테고리를 아는 경우에만)
- 가격을 첫 화면에 정직하게 노출한다
- 제품 설명을 산문 한 문단으로 쓰고 불릿을 없앤다
근거: research/references/03-trends-2026.md, 04-ai-slop-signatures.md, research/dogfood-coffee/ (검증일 2026-08-20)