글꼴과 간격으로 작은 디자인 시스템 만들기

글꼴과 간격은 화면의 리듬을 만들고, 작은 토큰 집합은 여러 컴포넌트를 같은 제품처럼 보이게 해.

글자 역할부터 정해

본문, 제목, 보조 설명, 코드처럼 역할을 나누고 각 역할에 크기, 굵기, 줄높이를 연결해. 화면마다 임의의 값을 만들기보다 제한된 조합을 반복하면 계층이 빠르게 읽혀.

간격도 작은 척도를 사용해

4px이나 그 배수를 바탕으로 몇 개의 간격 토큰을 정하고 padding, margin, gap에 사용해. 모든 숫자를 금지할 필요는 없지만 같은 관계에는 같은 간격을 써야 해.

Tailwind 테마에 의미를 담아

@theme에 글꼴, 글자 크기, 간격 토큰을 선언하면 유틸리티와 직접 만든 CSS가 같은 값을 공유해. 디자인이 바뀌어도 토큰 한곳을 고치면 전체 리듬을 조정할 수 있어.

반응형에서도 역할은 유지해

작은 화면에서는 제목 크기와 여백을 줄일 수 있지만 제목과 본문의 관계까지 뒤집지는 마. Clamp나 breakpoint를 이용해 값은 바꾸되 계층은 유지해.

작은 디자인 시스템은 선택지를 줄여 줘. 모든 컴포넌트가 새 값을 발명하지 않게 하고 제품 전체의 리듬을 한 언어로 묶어.

Tailwind의 글자 크기를 전부 쓸 필요는 없어

Tailwind는 text-xs부터 text-9xl까지 제공하지만 한 앱에서는 보통 4~6개면 충분해. Caption과 badge에는 xs, 보조 본문에는 sm, 본문에는 base, 강조 문장에는 lg, 섹션 제목에는 xl~2xl, 페이지 제목에는 3xl~4xl 정도로 역할을 제한해. 9xl은 큰 hero처럼 정말 필요한 화면에만 남겨.

4px 간격 척도를 기준으로 삼아

Tailwind의 대표 간격은 1 = 4px, 2 = 8px, 4 = 16px, 6 = 24px, 8 = 32px로 이어져. 특별한 근거 없이 p-[13px]를 추가하면 같은 관계가 서로 다른 숫자로 흩어져.

세로 리듬은 관계를 보여 줘

한 묶음 안의 항목에는 space-y-4, 서로 다른 섹션 사이에는 space-y-8처럼 반복 가능한 기준을 정해. 가까운 것은 같은 집단으로, 멀리 떨어진 것은 다른 집단으로 읽히게 돼.

글꼴과 줄높이도 토큰이야

본문용 sans, 코드와 데이터용 mono, 드문 hero용 display 정도면 대부분의 앱을 덮어. 긴 본문에는 기본 1.5 줄높이가 편하고 빽빽한 목록에는 leading-snug이나 leading-tight를 검토해. 웹 폰트는 font-display: optional이나 swap 전략으로 보이지 않는 글자가 오래 남지 않게 해.

디자인 시스템은 파일 수가 아니라 반복되는 척도야. 글자 크기 다섯 개, 간격 네 개, 역할 색상 몇 개를 실제 코드가 일관되게 사용하면 이미 작은 디자인 시스템이 있어.

Code

@theme에 글꼴과 간격 token 선언하기·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 grid에 제품용 간격 토큰을 더해. */
  --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>
  );
}

Exercise

홈 화면이나 App.tsx를 고르고 사용 중인 모든 text size, spacing 값, font family를 먼저 목록으로 만들어. JSX에서 text-, p-, m-, space-y-, gap-, font-를 검색해 각각의 개수를 기록해. Text size가 6개, spacing이 5개, font가 3개를 넘으면 역할이 겹치는 값을 제거하고 @theme의 제한된 scale로 리팩터링해. 변경 전후 화면을 나란히 보고 계층과 간격이 더 일관되게 읽히는지도 적어.

Hint

Audit 표에는 값, 사용 횟수, 역할, 유지 또는 제거 결정을 남겨. Token 수가 기준 아래로 줄고 카드와 form 두 화면이 같은 scale을 사용하며, token 하나를 바꿨을 때 관련 사용처가 함께 변해야 완료야.

글자 역할부터 정해

간격도 작은 척도를 사용해

Tailwind 테마에 의미를 담아

반응형에서도 역할은 유지해

Tailwind의 글자 크기를 전부 쓸 필요는 없어

4px 간격 척도를 기준으로 삼아

세로 리듬은 관계를 보여 줘

글꼴과 줄높이도 토큰이야

Code

External links

Exercise

Progress

댓글 0