yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

feat(skill): route fixes, delivery report, composition diversity, platform refresh

Browse source 
- route table: extension route for products with an existing visual
  language, feedback row, derived state tokens stay local
- completion: blocking 0 plus reported unverified; hard-gate surface is
  the touched scope; delivery report starts with what and how to open
- design.md created at step 0 with a skeleton, fingerprint line and
  change log; product-surface rubric reading; direction delegation
  states the chosen card and reason
- layout: hero families, nav forms, footer forms; art-direction page
  convergence 6 axes; genre sections; image treatments; placeholder
  conventions; multi-screen order; Tailwind theme mapping
- platform: scroll-driven examples, anchor positioning, canvas OT,
  three/R3F pins, shadcn style prefixes, Safari 26 notes, subgrid
- design-gate: four result states, exit codes, cwd module resolution,
  --url/--out-dir/--strict, oklch contrast, dead selector word match
- Korean font budget split from the Latin baseline
This commit is contained in:
Yun Chan 2026-10-06 16:55:38 +09:00
parent 9bcb45cbd3
commit 88c11682b1
51 changed files with 5834 additions and 2259 deletions
Download patch file Download diff file Expand all files Collapse all files

101
packages/skill/references/presets/README.md
View file

@ -1,6 +1,14 @@
# presets — 미학 프리셋
2단계에서 읽는다. **하나를 고르고, 왜 그것인지 한 줄로 적는다.**
2단계에서 읽는다. **지배 프리셋 하나를 고르고, 왜 그것인지 한 줄로 적는다.** 브리프가 둘 이상의 스타일이나 이질적 물성을 명시하면 지배 프리셋 하나 + 보조 축으로 섞는다 — 절차는 [../remix.md](../remix.md). 프리셋에 없는 시각 언어(Y2K·아르데코·네오브루탈 등)의 어휘는 [../style-atlas.md](../style-atlas.md)에서 찾는다.
## 이 문서를 읽는 법
| 상황 | 읽을 곳 |
|---|---|
| 2단계에서 프리셋을 고른다 | 처음부터 "프리셋은 값이 아니라 범위를 준다" 끝까지만 읽고, 고른 프리셋 파일 하나를 연다 |
| 같은 세션·저장소에 다른 산출물이 있다 | "프리셋은 값이 아니라 범위를 준다"의 3~5번, "피하는 수렴 클러스터" |
| 3단계에서 한글 서체를 고른다 | [../typography.md](../typography.md) §6-6에서 역할별 이름을 보고, 고른 후보의 성격·라이선스·배포처만 "한글 서체 후보 풀"에서 확인한다. 2단계에서는 풀을 읽지 않는다 |
프리셋은 템플릿이 아니라 **결정의 출발점**이다. 값·폰트·효과 목록은 가설이며, 브리프·콘텐츠·실제 렌더 검증으로 조정한다. 단 각 프리셋이 정한 정체성 계약(예: editorial의 세리프 주역, dense 화면의 비교 가능성)은 바꾸려면 다른 프리셋 또는 새 방향을 정의한다.
1단계 레퍼런스 R2(다른 업종의 톤)를 여기에 섞어야 이 브리프만의 것이 된다.
@ -14,4 +22,93 @@
| [quiet-commerce](quiet-commerce.md) | 읽히는 커머스 | 전환이 목적인 B2C. 상품 수가 적고 사양이 설득의 주체 |
**어느 것도 맞지 않으면 새로 정의해라.** 브리프가 프리셋보다 우선한다.
새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/실패/검증)는 채운다. 실제 적용 조건과 검증은 `../style-playbook.md`를 따른다.
새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/흔한 실패/리스크 후보)는 채운다. 실제 적용 조건과 검증은 `../style-playbook.md`를 따른다.
---
## 프리셋은 값이 아니라 범위를 준다
실측 사고(2026-10-01 레드팀): designpaca로 만든 쇼케이스 21개가 업종은 청자·향·커피·광학·항공우주·법무까지 다양했는데 시각 언어는 하나로 수렴했다 — 본문 Pretendard 21/21, 표제 마루 부리 11/21, `--radius: 2px` 11/21, 배경은 웜 오프화이트(`#f4f1e9`~`#fdfdfb`) 12곳과 니어블랙 8곳뿐(중간 명도·유채색 배경 0), 강조색 19개 중 12개가 녹·테라코타·갈색·앰버. 원인은 프리셋의 한글 서체 칸이 사실상 한 후보였고, 배경·radius가 "출발값" 하나로 적혀 출발점이 곧 도착점이 됐기 때문이다.
그래서 각 프리셋은 서체·배경 명도·강조색 계열·radius를 **후보 풀과 허용 범위**로 적는다. 프리셋 문서의 첫 번째 후보는 기본값이 아니다. 풀 안에서 아래 순서로 고른다.
1. **브랜드 자산이 잠근 축은 그대로 쓴다.** 기존 서체·로고 색·radius가 있으면 풀보다 우선한다.
2. **브리프에서 성질을 끌어온다.** 서체는 획 대비·속공간·마감(각진/둥근 맺음)·폭이, 배경은 조도·사진 톤이, 강조는 제품·재료·업종의 실제 색이 이 브리프와 연결되는지로 고른다. "깔끔해서", "무난해서"는 근거가 아니다.
3. **포트폴리오 반복 점검.** 같은 저장소·같은 세션·직전 프로젝트의 산출물(`design.md`, `tokens.css`)이 있으면 대조한다. 서체 패밀리가 겹치면 풀의 다른 후보로 바꾼다. 그래도 같은 서체가 맞다면 다른 후보 둘과 같은 문단으로 만든 proof sheet 비교를 `design.md`에 남긴다.
4. **4축 수렴 점검.** 서체 · 배경 명도 · 강조 hue · radius 4개 중 3개 이상이 아래 수렴 클러스터나 직전 산출물과 같으면, 의도적 결정인지 한 줄로 기록하고 아니면 하나 이상을 범위 안의 다른 값으로 옮긴다.
5. **한 축이 전부 같아지지 않게 한다.** 같은 세션·저장소에서 산출물을 둘 이상 만들면 서체·배경 명도·강조 hue 구간(30° 단위)·radius 가운데 어느 한 축도 전부 같은 값이 되지 않게 한다. 같아야 하면 이유를 적는다. 4번은 한 쌍에서 셋 이상이 겹치는지만 봐서, 축 하나가 모두 같아도 지나간다 — 수렴을 고치려고 다시 만든 쇼케이스 3종은 서체와 배경이 서로 달라 4번을 통과했지만 강조색이 셋 다 적색 33~38°로 다시 모였다(2026-10-06 계측). 구성 쪽의 같은 점검은 [../art-direction.md](../art-direction.md) §3-2 B-2에 있다.
### 피하는 수렴 클러스터
아래 조합은 금지가 아니라 **근거를 요구하는 관찰 후보**다(`../antipatterns.md` §1·§3과 같은 판정). 브리프가 정확히 이 룩을 요구하면 그대로 쓴다.
| 클러스터 | 지문 | 대안 방향의 예 |
|---|---|---|
| 웜 페이퍼 하우스 룩 | 웜 오프화이트(L 95~98%) + 녹·테라코타·갈색 강조 + radius 2px + 모노 eyebrow + 부리 표제 | 중간 명도 유채색 배경, 쿨 또는 고채도 강조, radius 0이나 8px 이상, eyebrow 없이 본문 서체 라벨 |
| 니어블랙 단일 네온 | `#0a`~`#14` 배경 + 비비드 강조 하나 + 모노 수치 | 깊은 유채색 다크(먹청·적갈흑), 강조 둘의 역할 분리, 모노는 숫자·코드에만 |
| 브로드시트 | 헤어라인 전면 + radius 0 전면 + 조밀 컬럼 | 면 분할·색면 위계, 컬럼 대신 큰 이미지 리듬 |
### 범위 축의 공통 정의
| 축 | 어떻게 적나 | 왜 |
|---|---|---|
| 배경 명도 | OKLCH L 범위와 허용 채도(C) 상한. 예: `L 0.55~0.75, C ≤ 0.12` | 밝음/어두움 두 극단만 쓰면 중간 명도·유채색 면이 선택지에서 사라진다 |
| 강조색 계열 | hue 계열 2~3개 후보와 브리프 연결 질문 | 단일 출발값은 매번 같은 색으로 끝난다 |
| radius | 범위 + 역할별 차등(컨트롤/카드/미디어) | 2px 하나가 하우스 서명이 됐다 |
| 서체 | 아래 풀에서 프리셋별 부분집합 | 같은 한글 서체 반복이 가장 먼저 눈에 띄는 동질화다 |
중간 명도·유채색 배경을 쓸 때는 본문과 컨트롤의 대비를 그 배경 위에서 실측한다(`../color.md`). 배경이 중간 명도면 본문 면을 별도 밝은/어두운 판으로 두는 방법도 있다.
---
## 한글 서체 후보 풀
확인일: 2026-10-02. 라이선스는 각 배포처(GitHub 저장소·제작사 페이지·Google Fonts·공유마당)에서 확인한 범위다. **채택할 때는 배포처의 현재 라이선스 원문을 다시 열어 `design.md`에 확인일과 함께 적는다.** OFL 1.1은 웹 임베딩·상업 사용·서브셋을 허용하고 글꼴 단독 판매를 금지한다.
### 고딕(민부리) — 본문·UI
| 서체 | 성격 | 라이선스 | 배포 |
|---|---|---|---|
| Pretendard | 중립·넓은 웨이트·라틴 조화. 쇼케이스 실측에서 과다 사용 — 직전 산출물과 겹치면 바꾼다 | OFL 1.1 | GitHub orioncactus/pretendard |
| SUIT | 기하적이고 단정한 UI 본문, 속공간 큼 | OFL 1.1 | GitHub sun-typeface/SUIT |
| Wanted Sans | 곧으면서 유연한 곡선, 표제 겸용 표정 | OFL 1.1 | GitHub wanteddev/wanted-sans |
| Spoqa Han Sans Neo | 숫자·라틴이 단정, 정보 밀도에 강함 | OFL 1.1 | GitHub spoqa/spoqa-han-sans |
| IBM Plex Sans KR | 기계적 맺음, Plex 라틴·모노와 패밀리 일치 | OFL 1.1 | Google Fonts |
| LINE Seed Sans KR | 둥근 기하, 친근한 브랜드 톤 | OFL 1.1 | seed.line.me |
| Gothic A1 | 좁고 단단한 고딕, 웨이트 9종 | OFL 1.1 | Google Fonts |
| Gowun Dodum | 손맛 있는 부드러운 고딕, 작은 크기 따뜻함 | OFL 1.1 | Google Fonts |
| Noto Sans KR | 넓은 글리프 범위, 다국어 혼식 안정 | OFL 1.1 | Google Fonts |
| 나눔바른고딕 | 획 끝이 반듯한 부드러운 고딕, 작은 크기 본문 | 네이버 나눔글꼴 라이선스 — 수정·재배포·웹 임베딩 허용, 글꼴 단독 판매 금지(눈누 요약에서 확인 2026-10-06, 배포처 원문은 채택 때 확인) | 네이버 한글한글 아름답게 |
### 명조(부리) — 본문 가능
| 서체 | 성격 | 라이선스 | 배포 |
|---|---|---|---|
| 리디바탕 | 전자책 본문용, 긴 읽기에 맞춘 낮은 대비 | OFL 1.1 | ridicorp.com/ridibatang |
| 이롭게 바탕 | 웹 전용으로 기획된 한글 바탕 | OFL 1.1 | GitHub iropke/font-iropke-batang |
| Gowun Batang | 붓 맛이 남은 부드러운 바탕 | OFL 1.1 | Google Fonts |
| 나눔명조 | 고전적 명조, 넓은 보급 | OFL 1.1 | Google Fonts |
| Noto Serif KR | 웨이트 7종, 다국어 혼식 | OFL 1.1 | Google Fonts |
| 마루 부리 | 현대적 부리, 표제·본문 겸용. 쇼케이스 실측에서 과다 사용 — 직전 산출물과 겹치면 바꾼다 | OFL 1.1 | 네이버 한글한글 아름답게 |
| Hahmlet | 1950년대 영화 포스터 레터링 기반 가변 부리, 표제에서 표정이 큼 | OFL 1.1 | GitHub hyper-type/hahmlet, Google Fonts |
KoPub World 바탕·돋움은 인쇄·전자책에는 무료지만 **서버에 설치해 웹폰트로 임베딩하려면 한국출판인회의의 별도 승인이 필요하다**(kopus.org 안내). 승인 기록이 없으면 웹 풀에서 제외한다.
### 디스플레이 — 표제·브랜드 장면
| 서체 | 성격 | 라이선스 |
|---|---|---|
| Black Han Sans | 극굵은 각진 고딕, 포스터 | OFL 1.1 (Google Fonts) |
| Do Hyeon | 납작한 굵은 고딕, 간판 | OFL 1.1 (Google Fonts) |
| Jua | 둥근 굵은 고딕, 놀이·식음 | OFL 1.1 (Google Fonts) |
| Gasoek One | 초굵은 기하 표제 | OFL 1.1 (Google Fonts) |
| Bagel Fat One | 둥글고 두꺼운 팝 | OFL 1.1 (Google Fonts) |
| Orbit | 레트로 퓨처 기하 고딕 | OFL 1.1 (Google Fonts) |
| Song Myung | 붓 기운이 남은 표제 명조 | OFL 1.1 (Google Fonts) |
| 제주명조 | 개성 강한 표제 명조 | 공공누리 1유형(공유마당) |
| Paperlogy | 기하 산세, 표제·발표 | OFL 1.1 |
| G마켓 산스 · 여기어때 잘난체 | 굵은 브랜드 산세 | 제작사 자체 무료 라이선스 — 채택 시 원문 확인 필수 |
### 한글이 섞이는 모노·코드
라틴 모노(JetBrains Mono·IBM Plex Mono)는 한글 글리프가 없어 시스템 폰트로 떨어진다. 한글이 섞이는 라벨은 모노로 조판하지 않는다 — 숫자·코드·라틴 약어만 모노 스택에 두고 한글은 본문 서체로 남긴다(`unicode-range` 분리 또는 본문 서체 + `tabular-nums`). 한글 코드 주석처럼 정말 고정폭 한글이 필요하면 D2Coding이나 나눔고딕코딩(둘 다 OFL 1.1)을 쓴다.

54
packages/skill/references/presets/anti-grid.md
View file

@ -4,29 +4,45 @@
규칙적 격자에 비대칭·겹침·예상 밖의 리듬을 의도적으로 더하는 방향이다. 이것이 2026년에 보편적으로 더 효과적이라는 실증 주장은 하지 않는다.
**이 프리셋의 범위는 "그리드 해체" 한 가지 문법이다.** 예전에는 해체주의·브루탈리즘·그런지·맥시멀을 한 덩어리로 다뤘지만, 넷은 정체성 핵심이 다르다. 사용자가 아래 이름을 말하면 이 프리셋의 제약을 그대로 들이대지 말고 [../style-atlas.md](../style-atlas.md)의 해당 카드를 연다.
| 사용자가 말한 것 | 정체성 핵심 | 여는 곳 |
|---|---|---|
| 해체·실험적 레이아웃 | 격자를 정의하고 깬다 | 이 프리셋 |
| 브루탈리즘 | 기본값·구조의 노출, 장식 거부 | style-atlas 브루탈리즘 |
| 네오브루탈리즘 | 두꺼운 외곽선, 블러 0 오프셋 그림자, 고채도 면색 다수 | style-atlas 네오브루탈리즘 |
| 그런지·진(zine) | 복사기·콜라주 질감, 손 조판 | style-atlas 레트로 프린트 |
| 맥시멀·키치·멤피스 | 질서 있는 과잉, 반복 모티프 | style-atlas 키치/맥시멀·멤피스 |
이 프리셋을 지배로 두고 위 카드 하나를 보조 축으로 섞는 것은 [../remix.md](../remix.md)의 절차를 따른다.
## 언제 고르나
- 에이전시·스튜디오 자사 사이트, 아트/문화 프로젝트, 캠페인, 음악·패션
- 클라이언트가 "안전한 것 말고"를 명시적으로 요구했을 때
- **쓰지 마라**: 전환이 목적인 커머스, B2B SaaS 구매 경로, 접근성 요구가 엄격한 공공. 이 프리셋은 읽기 비용을 높인다
- **기본적으로 비채택**: 전환이 목적인 커머스 구매 경로, B2B SaaS 구매 경로, 접근성 요구가 엄격한 공공. 격자 해체는 읽기 비용을 높인다. 이런 브리프에서도 캠페인 장면 하나에만 쓰는 것은 표면 다이얼(`../trustworthy-showcases.md` §3)로 검토할 수 있다
## 결정
### 타이포그래피
- **모노스페이스 또는 개성 강한 그로테스크**를 주역으로
- **모노스페이스 또는 개성 강한 그로테스크**를 주역 후보로 둔다. 한글 모노는 라틴 모노로 조판하지 않는다(`README.md` 모노 절)
- 크기 대비를 극단적으로 — 비율 1.618 이상, 또는 스케일을 아예 무시하고 두세 개 크기만 극단적으로 배치
- 대문자·자간 확대·세로쓰기 같은 장치를 **하나만** 쓴다. 셋을 동시에 쓰면 아마추어
- **전체 대문자 헤드라인은 검출률 2위 슬롭 지문**이다. 쓰려면 이유가 있어야 하고, 짧아야 한다(한 줄 이내)
- 대문자·자간 확대·세로쓰기·회전 같은 조판 장치는 **하나의 중심 개념에 복무할 때** 쓴다. 장치 개수가 아니라 아래 "과잉과 무질서를 가르는 기준"으로 판정한다
- 전체 대문자 헤드라인은 AI 생성 화면에서 자주 반복되는 관찰 후보다(`../antipatterns.md` §2). 쓰려면 이유가 있어야 하고, 긴 문장은 대문자로 읽기 속도가 떨어지므로 짧게 둔다. 한글 화면의 영문 대문자 장식 라벨은 언어 판정과 함께 본다
| 슬롯 | 무료 | 유료 | 한글 |
| 슬롯 | 무료(라틴) | 유료(라틴) | 한글 후보 풀 |
|---|---|---|---|
| 디스플레이 | Karrik, Basteleur, Terminal Grotesque (Velvetyne) | Right Grotesk | 제주명조, 여기어때 잘난체 |
| 본문 | Work Sans, Archivo | Neue Montreal | Pretendard |
| 디스플레이 | Karrik, Basteleur, Terminal Grotesque (Velvetyne) | Right Grotesk | Gasoek One · Black Han Sans · Do Hyeon · 제주명조 · Orbit · Bagel Fat One · 여기어때 잘난체 |
| 본문 | Work Sans, Archivo | Neue Montreal | Gothic A1 · Wanted Sans · SUIT · Noto Sans KR |
- 선택 기준: 디스플레이는 브리프의 **소리**로 고른다 — 둔탁하고 무거우면 Gasoek One·Black Han Sans, 간판·거리면 Do Hyeon, 레트로 퓨처면 Orbit, 놀이·팝이면 Bagel Fat One, 문학·전통의 비틀기면 제주명조. 본문은 디스플레이와 폭·맺음이 충돌해 긴장을 만들되 읽히는 쪽을 고른다.
- 서체 성격과 라이선스는 [README.md](README.md)의 한글 서체 후보 풀을 따른다.
### 색
- 원색 또는 극단적 대비. 중간 톤을 피한다
- 배경색 자체를 강한 색으로 쓰는 것을 검토 (흰 배경이 기본값이라고 가정하지 마라)
- **단, 색은 두 개까지.** 무지개는 브루탈리즘이 아니라 혼돈이다
- 원색 또는 극단적 대비. 중간 톤을 피하는 것이 출발점이다
- **배경 명도 범위**: 제한 없음. 원색 면(OKLCH C 0.15 이상)을 배경 전체로 쓰는 것을 먼저 검토한다 — 흰 배경이나 웜 오프화이트를 기본값이라고 가정하지 않는다
- **강조색 계열**: 두 색의 강한 대비에서 시작한다. 색을 더 늘리는 것은 실패가 아니다 — 늘릴 때는 각 색의 역할(면/글자/행동)을 나누고, 아래 기준을 통과하는지 본다. 역할 없이 늘어난 무지개는 혼돈이다
- **radius 범위**: 0이나 완전 원형(pill) 같은 극단을 우선 검토한다. 2~4px 중간값은 이 프리셋의 의도를 흐리기 쉽다
### 간격
- 격자를 **정의한 뒤에 깬다.** 그리드 없이 배치하면 깨진 게 아니라 그냥 엉망이다
@ -36,20 +52,30 @@
### 재질 (`svg-filters.md`)
- 거친 질감이 어울린다: **강한 그레인, 리소그래프 인쇄, 잉크 번짐(`feTurbulence` + `feDisplacementMap`)**
- 크로마틱 애버레이션을 호버에 얹기
- 매끄러운 유리·글로우는 이 프리셋의 반대편이다
- 매끄러운 유리·글로우는 기본적으로 비채택이다. Y2K·사이버펑크 카드를 보조 축으로 섞기로 했다면 [../remix.md](../remix.md)의 축 소유권 표에 재질 축 소유자를 적고 채택한다
### 모션 (`motion.md`)
- 갑작스럽게. `steps()` 이징, 짧고 각진 전환
- 커서 인터랙션(마그네틱, 왜곡)이 잘 맞는다
- **`prefers-reduced-motion` 대응이 특히 중요하다.** 이 프리셋의 모션은 강해서 어지러움을 유발하기 쉽다
## 과잉과 무질서를 가르는 기준
장치 개수나 색 개수로 판정하지 않는다. 다음 세 질문에 모두 "예"면 의도된 과잉이다.
1. **읽기 경로가 하나로 고정되는가** — 회색조·390px에서 첫 시선 → 메시지 → 행동 순서를 한 문장으로 설명할 수 있다.
2. **반복 모티프로 통일되는가** — 장치들이 같은 형태·각도·색 관계를 되풀이해 한 시스템으로 묶인다.
3. **효과 off에서 메시지가 남는가** — 질감·모션·겹침을 끈 정지 화면에서도 히어로 메시지와 주 행동이 읽힌다.
하나라도 "아니오"면 장치를 줄이거나 한 장면으로 몰아넣는다.
## 흔한 실패
1. **그리드를 정의하지 않고 시작** → 깬 게 아니라 못 맞춘 것으로 보인다
2. **읽을 수 없게 만들고 "의도"라고 함** → 브루탈리즘도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
3. **장치를 전부 동원** → 대문자 + 자간확대 + 겹침 + 회전 + 그레인 = 소음
2. **읽을 수 없게 만들고 "의도"라고 함** → 해체도 읽혀야 한다. 히어로 메시지는 반드시 읽혀야 한다
3. **중심 개념 없이 장치를 동원** → 대문자 + 자간확대 + 겹침 + 회전 + 그레인이 서로 다른 이야기를 하면 소음이다. 위 세 질문으로 판정한다
4. **접근성 포기** → 포커스 링과 대비는 이 프리셋에서도 지킨다
5. **B2B 브리프에 적용** → 프리셋 선택 자체가 실패
5. **과업이 비교·구매·입력인 화면 전체에 적용** → 그 화면은 다른 프리셋이 지배하고, 해체는 진입 장면 하나로 좁힌다
## 리스크 후보

20
packages/skill/references/presets/dark-instrument.md
View file

@ -6,7 +6,7 @@
- 개발자 도구, 인프라, 데이터/모니터링, 보안, 금융 트레이딩
- 사용자가 이 화면을 **오래 본다**는 전제가 있을 때
- **쓰지 마라**: 다크가 "멋있어서" 고르는 경우. **다크 기본값은 단일 슬롭 시그니처 1위다.** 이유를 댈 수 없으면 라이트로 가라
- **쓰지 마라**: 다크가 "멋있어서" 고르는 경우. 브랜드·환경과 무관한 다크 기본값은 AI 생성 화면에서 자주 반복되는 관찰 후보다(`../antipatterns.md` §1). 이유를 댈 수 없으면 라이트로 가거나, 라이트 고밀도(금융 신문·시간표형) 변형을 검토한다
### 다크를 정당화하는 이유의 예
- 사용자가 어두운 환경(야간 운영, 스튜디오)에서 본다
@ -20,15 +20,21 @@
- 비율 1.200~1.250. 정보 밀도가 높으므로 위계 차이를 작게
- 숫자는 **tabular-nums** 를 켜라 (`font-variant-numeric: tabular-nums`). 수치가 흔들리면 계기판이 아니다
| 슬롯 | 무료 | 한글 |
| 슬롯 | 무료 | 한글 후보 풀 |
|---|---|---|
| 본문 | IBM Plex Sans, DM Sans, Switzer | Pretendard / Spoqa Han Sans Neo |
| 수치·코드 | JetBrains Mono, IBM Plex Mono | + Pretendard |
| 본문 | IBM Plex Sans, DM Sans, Switzer | IBM Plex Sans KR · Spoqa Han Sans Neo · SUIT · LINE Seed Sans KR · Noto Sans KR |
| 수치·코드 | JetBrains Mono, IBM Plex Mono | 숫자·코드만 모노. 한글 섞인 코드 주석은 D2Coding · 나눔고딕코딩 |
- 선택 기준: 수치 라틴이 Plex Mono면 IBM Plex Sans KR로 패밀리 맺음을 맞추고, 어두운 배경에서 획이 번지는지 작은 크기(12~13px)로 비교한다. 숫자가 주역이면 Spoqa Han Sans Neo의 숫자 폭을, 긴 설명 패널이 많으면 SUIT의 속공간을 먼저 본다.
- Pretendard는 쇼케이스 실측에서 과다 사용됐으므로 기본값으로 두지 않는다. 직전 산출물과 겹치면 다른 후보를 고른다. 서체 성격과 라이선스는 [README.md](README.md)의 한글 서체 후보 풀을 따른다.
### 색
- 순수 검정/흰색과 근접색을 모두 후보로 두고, 실제 기기·주변광·장시간 읽기에서 대비와 눈부심을 확인한다. `#0d0d0f`~`#14130f`, `#e8e4dc`~`#e6e6e9`는 출발값 예시다.
- **배경 명도 범위**: OKLCH L 0.12~0.28. 무채 니어블랙만이 아니라 hue를 실은 깊은 다크(먹청·심해 청록·적갈흑, C ≤ 0.06)도 범위 안이다. 니어블랙 + 단일 비비드 강조는 수렴 클러스터(`README.md`)이므로 고르면 이유를 적는다.
- 표면 단계를 3개로: `--surface`(가장 어두움) / `--surface-raised` / `--line`
- 강조색은 **밝고 채도 높게, 아주 좁게.** 어두운 배경에서는 작은 면적으로도 충분히 강하다
- **강조색 계열**: 데이터 범주색과 겹치지 않는 hue에서 고른다 — 앰버·시안·라임·마젠타 중 제품 도메인(전력·의료·금융)의 관습과 충돌하지 않는 것. 강조 둘을 쓰면 "선택/주의"처럼 역할을 나눈다.
- **radius 범위**: 0~6px. 패널과 컨트롤의 값을 역할별로 나눈다.
- 상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다
### 간격
@ -37,9 +43,9 @@
- 4px 그리드를 엄격히
### 재질 (`svg-filters.md`)
- **거의 쓰지 않는다.** 어두운 배경에서 그레인은 노이즈로 보인다
- **그레인은 기본 비채택이다.** 어두운 배경에서 그레인은 노이즈로 보이기 쉽다. 리믹스·브리프가 재질 축을 그레인에 배정하면 쓸 수 있다 — 어두운 면의 실제 렌더로 본문 대비와 노이즈를 확인하고 `design.md`에 기록한다([svg-filters.md](../svg-filters.md) §1, [remix.md](../remix.md))
- 쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(`feGaussianBlur` + `feMerge`)
- 글래스모피즘은 성능 대비 이득이 없다. 내비게이션 바 정도까지
- 글래스모피즘은 성능 대비 이득이 적다. 기본은 내비게이션 바 정도까지다([svg-glass.md](../svg-glass.md))
### 모션 (`motion.md`)
- 빠르고 정확하게. `--dur-instant`~`--dur-quick`
@ -49,7 +55,7 @@
## 흔한 실패
1. **배경·텍스트 대비를 기기에서 확인하지 않음** → 순수색과 근접색 모두 조건에 따라 눈부심·번짐·브랜드 인상을 만들 수 있다
2. **네온 보라/파랑 강조** → 슬롭 지문. 어두운 배경일수록 이 함정에 빠지기 쉽다
2. **브랜드와 무관한 네온 보라/파랑 강조** → AI 생성 다크 화면에서 자주 반복되는 관찰 후보다. 브랜드·데이터 역할과 연결한 근거가 없으면 다른 hue를 비교한다
3. **테마 결정을 설명하지 않음** → 다크 전용일 수 있지만 대상 환경·브랜드·접근성·운영 이유를 기록하고, 지원하는 테마는 역할 토큰과 실제 상태를 완성한다
4. **수치에 가변폭 폰트** → 숫자가 흔들려 읽기 어렵다
5. **대비 미달** → 어두운 배경에서 `--ink-muted` 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라

18
packages/skill/references/presets/editorial.md
View file

@ -13,18 +13,24 @@
### 타이포그래피
- 세리프 또는 고대비 산세를 주역 후보로 둔다. 대상 언어의 glyph·작은 크기·긴 읽기에서 더 잘 작동하는 쪽을 선택한다.
- 비율 **1.333~1.618**은 헤드라인과 본문 차이를 검토하는 출발 후보다. 실제 언어·폭·위계에서 필요한 차이를 확인해 정한다.
- 본문 `--measure`는 상대적으로 좁은 값에서 시작하고, 라틴 60~68자·한글 25~35자는 후보 범위로만 쓴다. 글꼴·언어·확대 상태의 실제 문단으로 확정한다.
- 본문 `--measure`는 상대적으로 좁은 값에서 시작하고, 라틴 60~68자·한글 25~35자는 후보 범위로만 쓴다(한글 정본은 [../typography.md](../typography.md) §6-5의 32~40자다. 그보다 좁게 잡는 것은 이 프리셋의 선택이고, 좁은 컬럼에 허용된 20자대 범위 안이다). 글꼴·언어·확대 상태의 실제 문단으로 확정한다.
- Regular + 하나는 관리하기 쉬운 시작점이다. 역할·언어·실제 위계가 더 많은 웨이트를 요구하면 전송량과 렌더를 확인해 추가한다.
| 슬롯 | 무료 | 유료 | 한글 |
| 슬롯 | 무료(라틴) | 유료(라틴) | 한글 후보 풀 |
|---|---|---|---|
| 디스플레이 | Instrument Serif, Fraunces | Signifier, PP Editorial New | 마루 부리 |
| 본문 | Spectral, Lora | Söhne, Tiempos | 마루 부리 / 리디바탕 |
| 디스플레이 | Instrument Serif, Fraunces | Signifier, PP Editorial New | Hahmlet · Song Myung · 제주명조 · 마루 부리 · (산세 표제면) Wanted Sans |
| 본문 | Spectral, Lora | Söhne, Tiempos | 리디바탕 · 이롭게 바탕 · Gowun Batang · 나눔명조 · Noto Serif KR · (산세 본문이면) Gowun Dodum · IBM Plex Sans KR |
- 한글 칸은 순서가 우선순위가 아니다. 선택 기준: **긴 읽기 본문**이면 대비가 낮고 속공간이 넉넉한 바탕(리디바탕·이롭게 바탕)을, **손맛·공예·문화재** 브리프면 붓 기운이 남은 쪽(Gowun Batang·Song Myung)을, **영화·포스터·강한 표정**이면 Hahmlet·제주명조를 먼저 proof sheet에 올린다.
- 마루 부리는 designpaca로 만든 쇼케이스 21종 실측(2026-10-01)에서 11종이 표제에 썼다. 직전 산출물과 겹치면 다른 후보로 바꾸거나, 두 후보와 비교한 기록을 남긴다(`README.md`의 포트폴리오 반복 점검).
- 서체 성격과 라이선스는 [README.md](README.md)의 한글 서체 후보 풀을 따른다.
### 색
- 종이 같은 따뜻한 배경과 순백 모두를 콘텐츠·이미지·브랜드 대비로 비교한다. `#fbfaf8`, `#f7f5f0`은 출발값 후보일 뿐이다.
- **배경 명도 범위**: 밝은 종이(OKLCH L 0.94~0.99)만이 아니다. 이미지·브랜드가 지지하면 중간 명도 유채색 면(L 0.55~0.80, C ≤ 0.10 — 예: 청회·올리브·쪽빛 회색)이나 깊은 유채 다크(L 0.15~0.25)도 editorial 리듬을 해치지 않는다. 웜 오프화이트(`#f4f1e9`~`#fdfdfb` 부근)는 이 저장소에서 과다 사용된 출발값이므로 고를 때 브리프 연결 근거를 적는다.
- 잉크는 순흑과 근접색을 실제 대비·주변 이미지·긴 읽기에서 비교한다.
- **강조색 계열**: 콘텐츠 이미지에서 실제로 뽑은 색, 출판 전통의 인쇄 원색(주홍·코발트), 또는 무채 + 밑줄 위계 중에서 고른다. 녹·테라코타·갈색은 수렴 클러스터(`README.md`)이므로 콘텐츠가 그 색일 때만 쓴다.
- 강조색의 면적은 역할과 실제 대비로 정한다. 넓은 specimen field나 이미지 배경도 브랜드·위계·접근성을 지지하면 쓸 수 있으며, 링크·인용·페이지 번호는 대비·밑줄·위치로도 구분할 수 있다.
- **radius 범위**: 0~4px가 인쇄 어휘에 가깝지만, 이미지 프레임에 8~24px 큰 곡률이나 원형 크롭을 쓰는 매거진 문법도 있다. 2px 단일값을 습관으로 쓰지 않는다.
### 간격
- **여백이 콘텐츠다.** 섹션 간격을 본문 간격의 5~6배까지 벌려도 된다
@ -37,7 +43,7 @@
- 유리·네온·글로우는 이 프리셋에 어울리지 않는다
### 모션 (`motion.md`)
- **거의 움직이지 않는다.** 등장은 페이드 + 짧은 상승(8~16px) 이하
- **거의 움직이지 않는다.** 등장 연출은 없어도 된다. 넣는다면 페이드 + 짧은 상승(8~16px)이 상한이다. 스크롤 등장은 기본값이 아니다
- duration 은 느리게(`--dur-slow`), 이징은 `--ease-out`
- 스크롤 재킹 금지. 읽는 사람의 속도를 뺏지 마라

29
packages/skill/references/presets/quiet-commerce.md
View file

@ -20,27 +20,34 @@
- 디스플레이 **세리프 1** + 본문 **산세리프 1**. 세리프가 톤을, 산세리프가 가독성을 맡는다
- 비율 1.333과 강한 display 대비에서 시작하고, 문구 길이·제품 증거·모바일 줄 수로 확정한다. 최대÷본문 4배 같은 고정 비율은 요구사항이 아니다.
- 단계 **4~5개**. 커머스 레퍼런스는 흔히 10단계인데 그대로 베끼면 "통제 실패"에 걸린다
- 웨이트 2개
- 웨이트는 적게 — 실제로 로드하는 값은 둘 안팎에서 시작한다. 값은 역할 토큰으로만 쓴다([tokens.md](../tokens.md) "웨이트와 컨트롤")
| 슬롯 | 라틴 | 한글 |
| 슬롯 | 라틴 | 한글 후보 풀 |
|---|---|---|
| 디스플레이 | Fraunces, Instrument Serif | 마루 부리 |
| 본문·UI | Switzer, Satoshi | Pretendard Variable |
| 디스플레이 | Fraunces, Instrument Serif | Hahmlet · Gowun Batang · 이롭게 바탕 · (산세 표제면) Paperlogy · Wanted Sans |
| 본문·UI | Switzer, Satoshi | SUIT · Wanted Sans · LINE Seed Sans KR · Spoqa Han Sans Neo · Gowun Dodum · Pretendard |
| 수치 | 본문 + `tabular-nums` | 본문 + `tabular-nums` |
**한글 본문에 세리프를 쓰지 마라.** 16px 대에서 가독성이 급격히 떨어진다. 세리프는 디스플레이에만.
- 선택 기준: 제품이 **공예·식음·생활재**면 손맛 있는 쪽(Gowun Batang + Gowun Dodum, 또는 LINE Seed의 둥근 기하), **기술 소비재·구독**이면 SUIT·Wanted Sans·Spoqa처럼 숫자가 단정한 고딕을 먼저 비교한다. 가격·사양 숫자를 표제 서체와 본문 서체로 각각 조판해 tabular 정렬을 확인한다.
- Pretendard는 풀의 하나일 뿐 기본값이 아니다. designpaca로 만든 쇼케이스 21종 실측(2026-10-01)에서 21종 모두 본문에 썼다. 직전 산출물과 겹치면 다른 후보를 고른다.
- 서체 성격과 라이선스는 [README.md](README.md)의 한글 서체 후보 풀을 따른다.
**한글 본문 부리는 proof sheet로 검증한 뒤 채택한다.** 획이 가늘고 대비가 큰 표제용 부리는 14~16px 본문에서 획이 흐려지기 쉽다. 반대로 리디바탕·이롭게 바탕처럼 본문용으로 설계된 바탕은 긴 상품 설명에 쓸 수 있다(`editorial.md`도 한글 본문 부리를 후보로 둔다). 실제 상품 설명 문단을 대상 기기의 16px·200% 확대에서 산세 후보와 나란히 렌더해 비교하고, 가격·옵션·폼 라벨은 산세로 남기는 쪽을 먼저 검토한다.
### 색
- 배경은 순백이 아니라 **오프화이트**. 단 **크림·베이지는 피해라** — "크림 = 고급"은 보라를 대체한 신종 슬롭이다. 크림을 쓰려면 브리프와 연결할 근거를 대라
- 잉크도 순흑이 아니다
- **배경 명도 범위**: 밝은 면(OKLCH L 0.92~0.99)에서 시작하되, 제품 사진의 배경색이나 패키지 색을 그대로 끌어온 중간 명도 유채색 면(L 0.60~0.85, C ≤ 0.14)도 후보다. 순백은 피할 대상이 아니라 상품 사진 배경과 맞는지로 판단한다.
- 크림·베이지는 "고급"의 자동 신호로 쓰지 않는다 — 웜 오프화이트는 AI 생성 결과가 가장 자주 수렴하는 배경 후보다(`../antipatterns.md` §1). 쓰려면 제품·패키지·매장의 실제 색과 연결한 근거를 적는다.
- 잉크도 순흑일 필요는 없다. 배경 hue를 조금 섞은 근접색과 순흑을 대비로 비교한다.
- **강조색 계열**: 제품·패키지의 실제 색, 업종과 반대되는 의외의 hue(예: 커피에 코발트), 또는 고채도 원색 하나 중에서 고른다. 녹·테라코타·갈색·앰버는 쇼케이스 실측에서 과다 사용된 계열이다. 직전 산출물과 겹치면 다른 계열을 고른다.
- 강조 역할이 필요하면 한 색으로 시작하고, 실제 상태색·링크·CTA를 포함한 화면에서 경쟁 여부를 검증한다. 5% 면적 같은 값은 보편 품질 기준이 아니다.
- hue 2개 (중립 + 강조)
- hue 2개 (중립 + 강조)에서 시작하고, 브랜드 색면이 넓으면 3개까지 검토한다.
- **radius 범위**: 컨트롤 4~12px, 상품 카드·이미지 0~16px. 패키지 형태(각진 상자·둥근 병)와 맞춘다.
### 간격
- 8px 그리드, 여백 값 5종
- 섹션과 요소 간격의 차이가 정보 묶음을 읽히게 하는지 본다. 1:5는 예시 가설이며, 상품 수·콘텐츠 길이·화면 폭에서 조정한다.
- 비대칭을 쓴다 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 사양·수치를 흘린다
- `--measure` 는 좁게. 한글 25~35자
- `--measure` 는 좁게. 한글 25~35자(정본 [../typography.md](../typography.md) §6-5의 32~40자보다 좁게 잡는 프리셋 선택이다)
### 재질 (`svg-filters.md`)
- **필름 그레인 최약(0.02~0.04).** 오프화이트 배경의 밴딩을 없애는 용도지 질감을 과시하는 게 아니다
@ -55,7 +62,7 @@
## 흔한 실패
1. **세리프 디스플레이를 쓰고 여백이 좁다** → 세리프는 숨 쉴 공간이 없으면 답답할 뿐이다
2. **CTA 가 둘로 갈라진다** ("구매하기" + "구독하기") → 레퍼런스가 그렇더라도 베끼지 마라. 브리프가 정한 목표 하나로 통합해라
2. **CTA 가 이유 없이 둘로 갈라진다** ("구매하기" + "구독하기") → 레퍼런스가 그렇더라도 베끼지 마라. 결과가 다른 두 경로라면 세그먼트 선택 + 단일 CTA와 병렬 두 CTA 중 브리프의 목표 행동 우선순위로 고르고, 채운 버튼은 목표 행동 하나에만 준다([color.md](../color.md) §7)
3. **수치를 지표 배너로 만든다** → 근거 없는 숫자는 신뢰를 깎는다. '사용자가 주지 않은 수치를 그럴듯한 값으로 넣지 않는다' 하드 게이트에 걸린다
4. **한글에 라틴 세리프만 지정** → 한글이 시스템 기본으로 떨어져 전부 무너진다
5. **사진이 없다고 일러스트로 때운다** → 사양·수치·타이포로 채우는 쪽이 이 대상에게 더 강하다
@ -66,4 +73,4 @@
- 가격을 첫 화면에 정직하게 노출한다
- 제품 설명을 산문 한 문단으로 쓰고 불릿을 없앤다
> 근거: research/references/03-trends-2026.md, 04-ai-slop-signatures.md, research/dogfood-coffee/ (검증일 2026-08-20)
> 근거: 2026 트렌드 조사, AI 슬롭 시그니처 조사, 커피 브랜드 도그푸드 기록(저장소 전용, 설치본 미포함, 검증일 2026-08-20)

20
packages/skill/references/presets/swiss-minimal.md
View file

@ -8,24 +8,32 @@
- 신뢰가 전환의 조건일 때
- **쓰지 마라**: 기억에 남는 것이 목적일 때. 이 프리셋은 안전하지만 눈에 띄지 않는다
> 이름에 대한 주의: 이 프리셋은 스위스/인터내셔널 전통 중 **정렬 질서만** 차용한 B2B·도구용 변형이다. 극단적 스케일 대비와 강한 기억성을 가진 스위스 포스터 전통 자체를 원하면 [../style-atlas.md](../style-atlas.md)의 스위스/인터내셔널 카드를 연다.
## 결정
### 타이포그래피
- 그로테스크 산세 하나에서 시작하고, 필요한 경우 라벨·코드 역할에 모노를 추가한다. 언어 범위나 실제 위계가 추가 패밀리를 요구하면 전송량과 렌더 근거를 남긴다.
- 비율 **1.200~1.250** — 위계 차이를 작게. 대신 웨이트와 색으로 구분
- 정렬은 왼쪽. 가운데 정렬은 히어로 한 곳까지만
- **Inter 를 기본값으로 쓰지 마라.** Switzer, Satoshi, DM Sans 가 거의 언제나 낫다
- Inter는 실패가 아니지만(`../antipatterns.md` §2) 근거 없이 고르면 기본값으로 읽힌다. Switzer·Satoshi·DM Sans 같은 대안과 같은 문단으로 비교하고 고른 이유를 적는다.
| 슬롯 | 무료 | 유료 | 한글 |
| 슬롯 | 무료 | 유료 | 한글 후보 풀 |
|---|---|---|---|
| 전체 | Switzer, Satoshi, DM Sans | Söhne, GT America | Pretendard Variable |
| 라벨·코드 | JetBrains Mono, IBM Plex Mono | — | Pretendard + JetBrains Mono |
| 전체 | Switzer, Satoshi, DM Sans | Söhne, GT America | SUIT · IBM Plex Sans KR · Spoqa Han Sans Neo · Gothic A1 · Wanted Sans · Pretendard |
| 라벨·코드 | JetBrains Mono, IBM Plex Mono | — | 숫자·코드만 모노, 한글은 본문 서체 |
- 선택 기준: 라틴 그로테스크와 **맺음·폭이 맞는** 한글을 고른다 — 기계적 맺음의 Plex 라틴이면 IBM Plex Sans KR, 기하적 Satoshi·DM Sans면 SUIT, 좁고 단단한 그로테스크면 Gothic A1, 숫자 비교가 많은 문서면 Spoqa Han Sans Neo를 먼저 비교한다.
- Pretendard는 풀의 하나일 뿐 기본값이 아니다. 직전 산출물과 겹치면 다른 후보를 고른다. 서체 성격과 라이선스는 [README.md](README.md)의 한글 서체 후보 풀을 따른다.
- 한글이 섞이는 라벨을 라틴 모노로 조판하지 않는다. 한글 글리프가 시스템 폰트로 떨어지고 고정폭 간격이 어절을 깨뜨린다.
### 색
- 무채색 비중이 큰 팔레트에서 시작하고, 강조 역할이 필요하면 한 색으로 시작해 실제 상태색·링크·CTA의 경쟁을 검증한다
- **배경 명도 범위**: 밝은 면(OKLCH L 0.95~1.0)이 출발점이지만, 문서·도구가 아닌 브랜드 진입 화면은 원색 면 하나(스위스 포스터 전통의 빨강·노랑·코발트)를 섹션 단위로 쓰는 것도 범위 안이다. 웜 오프화이트를 습관적으로 깔지 않는다 — 이 프리셋의 중립은 대개 쿨 또는 완전 무채다.
- 배경/카드/경계선의 명도 차이를 **아주 작게**. 그림자 대신 1px 경계선
- 강조색은 채도를 낮춰라. 형광에 가까운 색은 이 프리셋에서 즉시 싸구려가 된다
- **보라~파랑 그라디언트 절대 금지** (검출률 1위 슬롭 지문)
- **강조색 계열**: 저채도 기능색(청·청록·회청) 또는 원색 하나. 형광에 가까운 색은 이 프리셋의 조용한 위계와 충돌하기 쉬우므로 실제 화면에서 경쟁 여부를 본다.
- 보라~파랑 그라디언트는 AI 생성 화면에서 자주 반복되는 관찰 후보다(`../antipatterns.md` §1). 이 프리셋의 평면 언어와도 어긋나기 쉬우므로, 브랜드 자산이나 브리프가 요구하지 않으면 채택하지 않고, 채택하면 이유를 적는다.
- **radius 범위**: 0~6px. 컨트롤과 카드를 같은 값으로 묶지 말고 역할별로 정한다.
### 간격
- 4/8 배수 그리드를 **엄격하게** 지킨다. 여기서만큼은 예외를 만들지 마라