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

5.3 KiB
Raw Blame History

프리셋: swiss-minimal — 그리드와 침묵

한 문장: 제품이 복잡하니 화면이라도 조용해야 한다.

언제 고르나

  • 기능이 많고 설명할 것이 많은 제품 — B2B, 개발자 도구, 문서, 인프라
  • 신뢰가 전환의 조건일 때
  • 쓰지 마라: 기억에 남는 것이 목적일 때. 이 프리셋은 안전하지만 눈에 띄지 않는다

이름에 대한 주의: 이 프리셋은 스위스/인터내셔널 전통 중 정렬 질서만 차용한 B2B·도구용 변형이다. 극단적 스케일 대비와 강한 기억성을 가진 스위스 포스터 전통 자체를 원하면 ../style-atlas.md의 스위스/인터내셔널 카드를 연다.

결정

타이포그래피

  • 그로테스크 산세 하나에서 시작하고, 필요한 경우 라벨·코드 역할에 모노를 추가한다. 언어 범위나 실제 위계가 추가 패밀리를 요구하면 전송량과 렌더 근거를 남긴다.
  • 비율 1.200~1.250 — 위계 차이를 작게. 대신 웨이트와 색으로 구분
  • 정렬은 왼쪽. 가운데 정렬은 히어로 한 곳까지만
  • Inter는 실패가 아니지만(../antipatterns.md §2) 근거 없이 고르면 기본값으로 읽힌다. Switzer·Satoshi·DM Sans 같은 대안과 같은 문단으로 비교하고 고른 이유를 적는다.
슬롯 무료 유료 한글 후보 풀
전체 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의 한글 서체 후보 풀을 따른다.
  • 한글이 섞이는 라벨을 라틴 모노로 조판하지 않는다. 한글 글리프가 시스템 폰트로 떨어지고 고정폭 간격이 어절을 깨뜨린다.

색

  • 무채색 비중이 큰 팔레트에서 시작하고, 강조 역할이 필요하면 한 색으로 시작해 실제 상태색·링크·CTA의 경쟁을 검증한다
  • 배경 명도 범위: 밝은 면(OKLCH L 0.95~1.0)이 출발점이지만, 문서·도구가 아닌 브랜드 진입 화면은 원색 면 하나(스위스 포스터 전통의 빨강·노랑·코발트)를 섹션 단위로 쓰는 것도 범위 안이다. 웜 오프화이트를 습관적으로 깔지 않는다 — 이 프리셋의 중립은 대개 쿨 또는 완전 무채다.
  • 배경/카드/경계선의 명도 차이를 아주 작게. 그림자 대신 1px 경계선
  • 강조색 계열: 저채도 기능색(청·청록·회청) 또는 원색 하나. 형광에 가까운 색은 이 프리셋의 조용한 위계와 충돌하기 쉬우므로 실제 화면에서 경쟁 여부를 본다.
  • 보라~파랑 그라디언트는 AI 생성 화면에서 자주 반복되는 관찰 후보다(../antipatterns.md §1). 이 프리셋의 평면 언어와도 어긋나기 쉬우므로, 브랜드 자산이나 브리프가 요구하지 않으면 채택하지 않고, 채택하면 이유를 적는다.
  • radius 범위: 0~6px. 컨트롤과 카드를 같은 값으로 묶지 말고 역할별로 정한다.

간격

  • 4/8 배수 그리드를 엄격하게 지킨다. 여기서만큼은 예외를 만들지 마라
  • 정렬선이 전부 맞아야 한다. 이 프리셋의 품질은 정렬에서 나온다
  • 섹션과 본문의 간격 대비는 시작값으로 크게 두되, 콘텐츠 그룹과 좁은 폭에서 실제 리듬을 보고 확정한다.

재질 (svg-filters.md)

  • 재질을 거의 쓰지 않는다. 이 프리셋의 표면은 평평한 종이다
  • 굳이 쓴다면 아주 약한 그레인 하나까지
  • 유리 효과는 이 프리셋의 평면적 언어와 충돌하기 쉽다. 채택하려면 계층상 이유와 저사양 기기의 성능·대비·reduced-transparency 대안을 검증한다. 고정 FPS 하락 수치를 일반화하지 않는다.

모션 (motion.md)

  • 상태 변화 위주(--dur-instant, --dur-quick). 등장 애니메이션은 최소화
  • 모션은 피드백이지 연출이 아니다. 클릭했는데 아무 반응 없는 쪽이 훨씬 큰 죄다

흔한 실패

  1. 미니멀을 "요소를 지우는 것"으로 이해 → 미니멀은 정렬과 일관성이지 빈 화면이 아니다
  2. 회색이 너무 많아 위계가 사라짐 → --ink-muted 는 하나면 충분하다
  3. 카드에 그림자를 겹겹이 → 1px 경계선 하나가 낫다
  4. 아이콘을 이모지로 → 즉시 아마추어. 아이콘 세트 하나를 정해 일관되게
  5. 강조색을 CTA와 링크와 배지에 다 씀 → 강조가 셋이면 강조가 없다

리스크 후보

  • 히어로에서 이미지를 완전히 빼고 텍스트와 여백만
  • 색을 무채색 + 딱 한 색으로 극단적으로 제한
  • 섹션 구분선을 전부 없애고 여백만으로 구획