3.3 KiB
3.3 KiB
프리셋: swiss-minimal — 그리드와 침묵
한 문장: 제품이 복잡하니 화면이라도 조용해야 한다.
언제 고르나
- 기능이 많고 설명할 것이 많은 제품 — B2B, 개발자 도구, 문서, 인프라
- 신뢰가 전환의 조건일 때
- 쓰지 마라: 기억에 남는 것이 목적일 때. 이 프리셋은 안전하지만 눈에 띄지 않는다
결정
타이포그래피
- 그로테스크 산세 하나에서 시작하고, 필요한 경우 라벨·코드 역할에 모노를 추가한다. 언어 범위나 실제 위계가 추가 패밀리를 요구하면 전송량과 렌더 근거를 남긴다.
- 비율 1.200~1.250 — 위계 차이를 작게. 대신 웨이트와 색으로 구분
- 정렬은 왼쪽. 가운데 정렬은 히어로 한 곳까지만
- Inter 를 기본값으로 쓰지 마라. Switzer, Satoshi, DM Sans 가 거의 언제나 낫다
| 슬롯 | 무료 | 유료 | 한글 |
|---|---|---|---|
| 전체 | Switzer, Satoshi, DM Sans | Söhne, GT America | Pretendard Variable |
| 라벨·코드 | JetBrains Mono, IBM Plex Mono | — | Pretendard + JetBrains Mono |
색
- 무채색 비중이 큰 팔레트에서 시작하고, 강조 역할이 필요하면 한 색으로 시작해 실제 상태색·링크·CTA의 경쟁을 검증한다
- 배경/카드/경계선의 명도 차이를 아주 작게. 그림자 대신 1px 경계선
- 강조색은 채도를 낮춰라. 형광에 가까운 색은 이 프리셋에서 즉시 싸구려가 된다
- 보라~파랑 그라디언트 절대 금지 (검출률 1위 슬롭 지문)
간격
- 4/8 배수 그리드를 엄격하게 지킨다. 여기서만큼은 예외를 만들지 마라
- 정렬선이 전부 맞아야 한다. 이 프리셋의 품질은 정렬에서 나온다
- 섹션과 본문의 간격 대비는 시작값으로 크게 두되, 콘텐츠 그룹과 좁은 폭에서 실제 리듬을 보고 확정한다.
재질 (svg-filters.md)
- 재질을 거의 쓰지 않는다. 이 프리셋의 표면은 평평한 종이다
- 굳이 쓴다면 아주 약한 그레인 하나까지
- 유리 효과는 이 프리셋의 평면적 언어와 충돌하기 쉽다. 채택하려면 계층상 이유와 저사양 기기의 성능·대비·reduced-transparency 대안을 검증한다. 고정 FPS 하락 수치를 일반화하지 않는다.
모션 (motion.md)
- 상태 변화 위주(
--dur-instant,--dur-quick). 등장 애니메이션은 최소화 - 모션은 피드백이지 연출이 아니다. 클릭했는데 아무 반응 없는 쪽이 훨씬 큰 죄다
흔한 실패
- 미니멀을 "요소를 지우는 것"으로 이해 → 미니멀은 정렬과 일관성이지 빈 화면이 아니다
- 회색이 너무 많아 위계가 사라짐 →
--ink-muted는 하나면 충분하다 - 카드에 그림자를 겹겹이 → 1px 경계선 하나가 낫다
- 아이콘을 이모지로 → 즉시 아마추어. 아이콘 세트 하나를 정해 일관되게
- 강조색을 CTA와 링크와 배지에 다 씀 → 강조가 셋이면 강조가 없다
리스크 후보
- 히어로에서 이미지를 완전히 빼고 텍스트와 여백만
- 색을 무채색 + 딱 한 색으로 극단적으로 제한
- 섹션 구분선을 전부 없애고 여백만으로 구획