designpaca/packages/skill/references/presets
Yun Chan 88c11682b1 feat(skill): route fixes, delivery report, composition diversity, platform refresh
- 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
2026-10-06 16:55:38 +09:00
..
anti-grid.md feat(skill): route fixes, delivery report, composition diversity, platform refresh 2026-10-06 16:55:38 +09:00
dark-instrument.md feat(skill): route fixes, delivery report, composition diversity, platform refresh 2026-10-06 16:55:38 +09:00
editorial.md feat(skill): route fixes, delivery report, composition diversity, platform refresh 2026-10-06 16:55:38 +09:00
quiet-commerce.md feat(skill): route fixes, delivery report, composition diversity, platform refresh 2026-10-06 16:55:38 +09:00
README.md feat(skill): route fixes, delivery report, composition diversity, platform refresh 2026-10-06 16:55:38 +09:00
swiss-minimal.md feat(skill): route fixes, delivery report, composition diversity, platform refresh 2026-10-06 16:55:38 +09:00

presets — 미학 프리셋

2단계에서 읽는다. 지배 프리셋 하나를 고르고, 왜 그것인지 한 줄로 적는다. 브리프가 둘 이상의 스타일이나 이질적 물성을 명시하면 지배 프리셋 하나 + 보조 축으로 섞는다 — 절차는 ../remix.md. 프리셋에 없는 시각 언어(Y2K·아르데코·네오브루탈 등)의 어휘는 ../style-atlas.md에서 찾는다.

이 문서를 읽는 법

상황 읽을 곳
2단계에서 프리셋을 고른다 처음부터 "프리셋은 값이 아니라 범위를 준다" 끝까지만 읽고, 고른 프리셋 파일 하나를 연다
같은 세션·저장소에 다른 산출물이 있다 "프리셋은 값이 아니라 범위를 준다"의 3~5번, "피하는 수렴 클러스터"
3단계에서 한글 서체를 고른다 ../typography.md §6-6에서 역할별 이름을 보고, 고른 후보의 성격·라이선스·배포처만 "한글 서체 후보 풀"에서 확인한다. 2단계에서는 풀을 읽지 않는다

프리셋은 템플릿이 아니라 결정의 출발점이다. 값·폰트·효과 목록은 가설이며, 브리프·콘텐츠·실제 렌더 검증으로 조정한다. 단 각 프리셋이 정한 정체성 계약(예: editorial의 세리프 주역, dense 화면의 비교 가능성)은 바꾸려면 다른 프리셋 또는 새 방향을 정의한다. 1단계 레퍼런스 R2(다른 업종의 톤)를 여기에 섞어야 이 브리프만의 것이 된다.

프리셋 한 줄 언제
editorial 잡지의 여백과 세리프 콘텐츠가 주인공. 브랜드·미디어·포트폴리오·럭셔리
swiss-minimal 그리드와 침묵 제품이 복잡할 때. B2B·도구·문서
anti-grid 의도적으로 깨진 격자 기억되어야 할 때. 에이전시·아트·캠페인
dark-instrument 계기판처럼 정확한 개발자·데이터·기술 제품
quiet-commerce 읽히는 커머스 전환이 목적인 B2C. 상품 수가 적고 사양이 설득의 주체

어느 것도 맞지 않으면 새로 정의해라. 브리프가 프리셋보다 우선한다. 새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/흔한 실패/리스크 후보)는 채운다. 실제 적용 조건과 검증은 ../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 §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)을 쓴다.