임시 UI 와 디자인된 UI 를 가르는 두 가지: 타이포그래픽 스케일과 spacing 스케일. Tailwind 가 디폴트 줘; 승리는 의도를 가지고 사용하는 것.
타이포그래픽 스케일
Tailwind 가 text-xs ~ text-9xl 출하. 디폴트 값이 대략 1.25x 비율 (디자인 용어로 'major third'). 한 프로젝트에 4-6 사이즈 사용, 12개 다 아님:
text-xs — 캡션, 도움말, 뱃지
text-sm — 보조 본문, 테이블 셀
text-base — 본문
text-lg — 강조 본문, intro 단락
text-xl ~ text-2xl — 섹션 헤더
text-3xl ~ text-4xl — 페이지 타이틀
모든 사이즈 쓰고 싶은 충동 저항. 규율이 UI 가 디자인된 느낌 만듦.
폰트 패밀리
슬롯 셋이 보통 앱 커버: 본문용 sans-serif, 코드/데이터용 monospace, (드물게) 히어로 타이틀용 디스플레이 폰트. @theme 에 --font-sans, --font-mono, --font-display 로 연결. Tailwind 가 그것들에서 font-sans, font-mono, font-display 유틸리티 생성.
Spacing 스케일
Tailwind 의 spacing 스케일이 0.5 (2px) 에서 시작해 올라감. 값들이 4px 그리드 (1 = 4px, 2 = 8px, 4 = 16px, 6 = 24px, 8 = 32px) 따름. 스케일에 stick. p-[13px] 쓰는 순간 UI 가 더는 그리드 위에 없음.
Vertical rhythm
관련 블록 간 (space-y-4) 과 무관 블록 간 (space-y-8) 의 디폴트 vertical spacing 선택. 일관되게 사용. 페이지의 섹션은 숨 쉬어야; 섹션 내 클러스터는 가까이. 뇌가 spacing 을 semantic 으로 읽어.
스케일이 디자인 시스템. 디자인 시스템은 Figma 라이브러리가 아냐 — 본인이 commit 하는 사이즈, 공간, 색, 폰트의 집합. 텍스트 사이즈 다섯, spacing 값 넷, semantic 색 셋 가진 동작하는 Tailwind 프로젝트가 디자인 시스템 가짐. 50개 컴포넌트 + 스케일 규율 없는 Figma 라이브러리는 아님.
Code
@theme — typography + spacing 토큰·css
@import "tailwindcss";
@theme {
/* 폰트 — 슬롯 셋 */
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--font-display: "Cal Sans", "Inter", sans-serif;
/* Tailwind 의 4px 그리드 위에 얹는 커스텀 spacing 슬롯 */
--spacing-section: 4rem; /* 주요 페이지 섹션 간 */
--spacing-cluster: 1rem; /* 관련 아이템 간 */
--spacing-gutter: 1.5rem; /* 페이지 gutter */
}
/* 사용: gap-cluster, py-section, px-gutter */
의도 가지고 스케일 쓰는 페이지·tsx
function HomePage() {
return (
<main className="min-h-screen bg-bg text-fg">
<div className="max-w-3xl mx-auto px-gutter py-section space-y-section">
{/* Hero — 디스플레이 폰트, 큰 타이틀 */}
<section>
<h1 className="font-display text-4xl text-fg">
Welcome
</h1>
<p className="mt-2 text-lg text-muted">
살짝 강조된 본문 타입의 짧은 intro 단락.
</p>
</section>
{/* 콘텐츠 클러스터 — 안은 tight, 섹션 간은 big */}
<section className="space-y-cluster">
<h2 className="text-2xl font-semibold">Latest posts</h2>
<article className="space-y-2">
<h3 className="text-lg font-medium">First post</h3>
<p className="text-base text-muted">본문 단락.</p>
<p className="text-xs text-subtle">Posted 2026-05-25</p>
</article>
</section>
</div>
</main>
);
}
위 홈 페이지 (또는 본인 부트스트랩 프로젝트 App.tsx) 가져와서 audit: 사용 중인 모든 텍스트 사이즈, 모든 spacing 값, 모든 폰트 패밀리 나열. 리스트가 텍스트 사이즈 6개, spacing 값 5개, 폰트 3개 넘으면 가지치기. 축소된 셋 쓰게 리팩토링. 페이지가 더 일관되게 읽힘 — 그게 디자인 시스템이 비치는 거.
Hint
정직한 audit 이 가장 어려움. JSX 에서 text-, p-, m-, space-y-, gap-, font- grep 해서 집계. Sprawl 보이면 고침은 쉬워.
Progress
Progress is local-only — sign in to sync across devices.