📏 Tailwind 3장: 간격과 사이징 시스템

2026년 3월 5일 수정됨

📋 개요

Tailwind 의 4px 기반 간격 스케일 — margin, padding, width, height 를 일관되게 다루는 법

📋 목차

📌 이 문서를 읽기 전에
🤔 왜 알아야 하는가
🏗️ 비유로 먼저 이해하기
📐 Tailwind 의 간격 스케일 시스템
📦 Padding & Margin 완전 정복
📐 Width & Height 완전 정복
💻 Before / After: 영수네 커뮤니티 UI
🚨 흔한 실수와 베스트 프랙티스
🏁 이번에 배운 내용 총정리
📝 마무리 퀴즈
🐣 영철이의 퇴근 일기
🔗 더 알아보기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 15분 (전체) / 핵심 파트만: 8분

🎯 이 문서를 다 읽으면 할 수 있는 것

p-4, mt-6, w-full, h-screen 같은 클래스를 보고 즉시 픽셀 값을 머릿속에서 계산할 수 있다
디자인 시스템의 일관된 간격 규칙을 Tailwind 로 강제할 수 있다
margin: auto 를 이용한 가운데 정렬부터 max-w-* 를 이용한 콘텐츠 너비 제한까지 다룰 수 있다

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

🐣 영철 (신입): "영숙 님이 디자인 피그마 보면 여백이 '16px', '24px', '32px' 이렇게 되어 있는데, Tailwind 클래스로 어떻게 매핑하면 돼요?"
🦁 영호 (리드): "16px 는 p-4, 24px 는 p-6, 32px 는 p-8 이에요. Tailwind 기본 단위가 4px 니까 숫자에 4 곱하면 px 값이 나와요."
🎨 영숙 (디자이너): "제가 항상 8의 배수로 간격 잡는 이유가 있어요. Tailwind 와 궁합이 딱이죠!"
🐣 영철: "오... 그러면 피그마 수치 ÷ 4 = Tailwind 숫자인 거네요?"
🦁 영호: "정확해요."

🤔 왜 알아야 하는가

영철이가 처음 Tailwind 로 UI 를 만들 때 자주 이런 일이 생겨:

{/* 🐣 영철: "영숙 님이 '버튼 좌우 여백 20px로 해주세요'라고 하셨는데...
    p-5 는 20px이고, px-5 는 좌우만 20px이고...
    px-[20px] 로 명시적으로 써야 하나? */}
<button className="px-[20px]">   {/* 임의값으로 도망 */}

이렇게 매번 임의값(px-[20px])으로 도망치면 디자인 일관성이 무너져. 컴포넌트마다 여백이 조금씩 달라지고, 나중에 "전체 여백을 좀 늘려주세요" 라는 요청이 왔을 때 수십 개의 px-[...] 를 하나씩 수정해야 하는 유지보수 지옥에 빠져.

Tailwind 의 간격 스케일을 완전히 내 것으로 만들면, 영숙의 피그마 수치를 즉시 클래스로 변환할 수 있어.

🏗️ 비유로 먼저 이해하기

Tailwind 간격 시스템은 '눈금자' 야.

줄자에 mm, cm, inch 같은 단위가 있듯이, Tailwind 에는 1, 2, 3, 4... 같은 숫자 스케일이 있어. 그 단위는 4px (= 0.25rem) 이야.

Tailwind 숫자 × 4 = px 값
예) p-4 → 4 × 4 = 16px
    p-6 → 6 × 4 = 24px
    p-8 → 8 × 4 = 32px

💡 한 줄로 기억하기
숫자 × 4 = px. 영숙 피그마의 여백 값 ÷ 4 = Tailwind 숫자.

📐 Tailwind 의 간격 스케일 시스템

자주 쓰는 간격 값 대조표

Tailwind 클래스	rem 값	px 값	언제 쓸까
`p-1` / `m-1`	0.25rem	4px	아주 작은 내부 여백
`p-2` / `m-2`	0.5rem	8px	소형 요소 여백 (배지, 칩)
`p-3` / `m-3`	0.75rem	12px	중소형 버튼 여백
`p-4` / `m-4`	1rem	16px	기본 여백 (가장 자주 씀)
`p-5` / `m-5`	1.25rem	20px	버튼/입력 필드 여백
`p-6` / `m-6`	1.5rem	24px	카드 내부 여백
`p-8` / `m-8`	2rem	32px	섹션 간격
`p-10` / `m-10`	2.5rem	40px	대형 섹션 여백
`p-12` / `m-12`	3rem	48px	히어로 영역 여백
`p-16` / `m-16`	4rem	64px	페이지 최상단 여백
`p-24` / `m-24`	6rem	96px	넓은 페이지 섹션

특수 값

/* p-px: 1px 정확히 */
.p-px { padding: 1px; }
 
/* p-0.5: 2px */
.p-0\.5 { padding: 0.125rem; } /* 0.125 × 16 = 2px */
 
/* p-1.5: 6px */
.p-1\.5 { padding: 0.375rem; } /* 0.375 × 16 = 6px */

📦 Padding & Margin 완전 정복

방향 접미사 패턴

<!-- 전체 방향 -->
<div class="p-4">   <!-- padding: 16px (사방) -->
<div class="m-4">   <!-- margin: 16px (사방) -->
 
<!-- 가로/세로 -->
<div class="px-4">  <!-- padding-left + padding-right: 16px -->
<div class="py-4">  <!-- padding-top + padding-bottom: 16px -->
<div class="mx-4">  <!-- margin-left + margin-right: 16px -->
<div class="my-4">  <!-- margin-top + margin-bottom: 16px -->
 
<!-- 각 방향 -->
<div class="pt-4">  <!-- padding-top: 16px -->
<div class="pr-4">  <!-- padding-right: 16px -->
<div class="pb-4">  <!-- padding-bottom: 16px -->
<div class="pl-4">  <!-- padding-left: 16px -->
<div class="mt-4">  <!-- margin-top: 16px -->
<div class="mr-4">  <!-- margin-right: 16px -->
<div class="mb-4">  <!-- margin-bottom: 16px -->
<div class="ml-4">  <!-- margin-left: 16px -->
 
<!-- 자동 마진 (가운데 정렬!) -->
<div class="mx-auto">  <!-- margin-left: auto; margin-right: auto → 가운데 정렬 -->

🎯 `mx-auto` 의 마법: 콘텐츠 가운데 정렬

// 페이지 콘텐츠를 화면 중앙에 배치하는 가장 일반적인 패턴
function PageLayout({ children }: { children: React.ReactNode }) {
  return (
    // max-w-6xl: 최대 너비 제한 (1152px)
    // mx-auto: 좌우 마진 auto → 가운데 정렬
    // px-4: 모바일에서 화면 가장자리 여백 확보
    <main className="mx-auto max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
      {children}
    </main>
  );
}

Space Between 유틸리티 (자식 요소 간격)

<!-- 자식 요소 사이에 margin 자동 부여 (gap 과 유사하지만 Flex/Grid 없이도 가능) -->
<div class="space-y-4">  <!-- 자식들 사이에 margin-top: 16px -->
  <Card />
  <Card />
  <Card />
</div>
 
<div class="space-x-4">  <!-- 자식들 사이에 margin-left: 16px -->
  <Button />
  <Button />
</div>

⚠️ 주의: space-y-* 는 :not(:last-child) 에 margin-bottom 을 부여해. Flex/Grid 의 gap 과 동작이 비슷하지만, Flex/Grid 컨테이너 안에서는 gap 이 더 명확해. space-y-* 는 일반 블록 레이아웃에 유용해.

📐 Width & Height 완전 정복

핵심 Width 클래스

<!-- 고정 너비 (간격 스케일과 동일) -->
<div class="w-4">   <!-- width: 16px -->
<div class="w-8">   <!-- width: 32px -->
<div class="w-16">  <!-- width: 64px -->
<div class="w-32">  <!-- width: 128px -->
<div class="w-64">  <!-- width: 256px -->
 
<!-- 비율 너비 -->
<div class="w-1/2">   <!-- width: 50% -->
<div class="w-1/3">   <!-- width: 33.333% -->
<div class="w-2/3">   <!-- width: 66.667% -->
<div class="w-3/4">   <!-- width: 75% -->
<div class="w-full">  <!-- width: 100% ← 자주 씀! -->
 
<!-- 특수 너비 -->
<div class="w-auto">    <!-- width: auto -->
<div class="w-screen">  <!-- width: 100vw (뷰포트 전체) -->
<div class="w-fit">     <!-- width: fit-content -->
<div class="w-max">     <!-- width: max-content -->
<div class="w-min">     <!-- width: min-content -->
 
<!-- 최대/최소 너비 (콘텐츠 제한에 자주 씀!) -->
<div class="max-w-sm">   <!-- max-width: 24rem (384px) -->
<div class="max-w-md">   <!-- max-width: 28rem (448px) -->
<div class="max-w-lg">   <!-- max-width: 32rem (512px) -->
<div class="max-w-xl">   <!-- max-width: 36rem (576px) -->
<div class="max-w-2xl">  <!-- max-width: 42rem (672px) -->
<div class="max-w-4xl">  <!-- max-width: 56rem (896px) -->
<div class="max-w-6xl">  <!-- max-width: 72rem (1152px) ← 페이지 너비에 자주 씀 -->
<div class="max-w-none"> <!-- max-width: none (제한 없음) -->

핵심 Height 클래스

<!-- 고정 높이 -->
<div class="h-4">   <!-- height: 16px -->
<div class="h-8">   <!-- height: 32px -->
<div class="h-16">  <!-- height: 64px (내비게이션 바 높이에 딱) -->
<div class="h-64">  <!-- height: 256px -->
 
<!-- 비율 높이 -->
<div class="h-1/2">    <!-- height: 50% -->
<div class="h-full">   <!-- height: 100% -->
<div class="h-screen"> <!-- height: 100vh ← 전체 화면 높이 -->
<div class="h-svh">    <!-- height: 100svh (모바일 주소창 제외) -->
 
<!-- 최소/최대 높이 -->
<div class="min-h-screen"> <!-- min-height: 100vh ← 페이지 최소 높이 설정에 필수! -->
<div class="min-h-0">      <!-- min-height: 0 -->
<div class="max-h-96">     <!-- max-height: 24rem -->
 
<!-- 정사각형 (w 와 h 동시) -->
<div class="size-10">   <!-- width: 40px; height: 40px -->
<div class="size-full"> <!-- width: 100%; height: 100% -->

💻 Before / After: 영수네 커뮤니티 UI

❌ 순진한 코드: 임의값 남용

// 🐣 영철: "피그마 보면서 그냥 px 값 그대로 때려넣었어요..."
function StudyCard() {
  return (
    <div style={{ padding: '20px', marginBottom: '16px', maxWidth: '380px' }}>
      <div style={{ padding: '4px 12px', marginBottom: '8px' }}>
        <span>React</span>
      </div>
      <h3 style={{ fontSize: '18px', marginBottom: '12px' }}>
        React 스터디 모집
      </h3>
      <p style={{ marginBottom: '20px', color: '#6b7280' }}>
        매주 토요일 오전 10시
      </p>
      <button style={{ padding: '10px 20px', width: '100%' }}>
        참여하기
      </button>
    </div>
  );
}

문제점: 인라인 스타일이라 hover, 반응형, dark: 모두 불가. 값이 흩어져 있어서 나중에 "전체 카드 여백 줄여주세요" 요청 시 5곳을 수정해야 해.

✅ 프로 코드: Tailwind 간격 스케일 활용

// 🦁 영호: "피그마 수치를 4로 나누면 Tailwind 숫자가 나와요.
//           영숙 님이 설계한 8px 배수 시스템과 딱 맞아요."
function StudyCard() {
  return (
    // p-5 = 20px, mb-4 = 16px, max-w-sm = 384px (피그마의 380px에 근접)
    <div className="max-w-sm rounded-xl border border-gray-200 bg-white p-5 shadow-md transition-shadow hover:shadow-lg">
      {/* 배지: py-0.5 = 2px, px-3 = 12px, mb-2 = 8px */}
      <span className="mb-2 inline-block rounded-full bg-blue-100 px-3 py-0.5 text-xs font-semibold text-blue-700">
        React
      </span>
 
      {/* 제목: mb-3 = 12px */}
      <h3 className="mb-3 text-lg font-bold text-gray-900">
        React 스터디 모집
      </h3>
 
      {/* 설명: mb-5 = 20px */}
      <p className="mb-5 text-sm text-gray-500">
        매주 토요일 오전 10시
      </p>
 
      {/* 버튼: py-2.5 = 10px, px-5 = 20px, w-full = 100% */}
      <button className="w-full rounded-lg bg-blue-600 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700">
        참여하기
      </button>
    </div>
  );
}

이점: hover 효과(hover:shadow-lg), 트랜지션(transition-shadow) 모두 클래스로 해결. 나중에 "여백 전체 줄여주세요" → p-5 하나만 p-4 로 바꾸면 끝.

🚨 흔한 실수와 베스트 프랙티스

실수 1: `p-` 와 `px-/py-*` 혼용으로 덮어쓰기

{/* ❌ 위험: p-4 가 먼저 적용되고, px-6 이 좌우만 덮어씀 — 의도 불명확 */}
<div className="p-4 px-6">
 
{/* ✅ 명확한 의도: 세로 16px, 가로 24px */}
<div className="px-6 py-4">

실수 2: `h-full` 이 안 먹힐 때

{/* ❌ 부모 높이가 없으면 h-full 은 의미 없음 */}
<div>
  <div className="h-full bg-blue-100">부모 높이가 없어서 0임</div>
</div>
 
{/* ✅ 부모에 명시적 높이 지정 */}
<div className="h-64">
  <div className="h-full bg-blue-100">이제 64px 높이</div>
</div>

실수 3: `w-full` 과 `max-w-*` 같이 쓰기

{/* 콘텐츠 영역: w-full 로 가로 꽉 채우되, max-w-6xl 로 최대 너비 제한 */}
{/* mx-auto 로 가운데 정렬 — 이 패턴이 페이지 레이아웃의 표준! */}
<main className="mx-auto w-full max-w-6xl px-4">
  {/* 페이지 내용 */}
</main>

베스트 프랙티스: 스케일 밖의 값은 임의값으로

{/* 피그마에서 딱 맞는 Tailwind 값이 없을 때: 임의값 사용 */}
<div className="h-[72px]">   {/* h-16=64px, h-20=80px 둘 다 안 맞을 때 */}
<div className="w-[340px]">  {/* 정확한 너비가 필요할 때 */}
<div className="mt-[13px]">  {/* 영숙이 피그마에서 딱 13px 를 지정했을 때 */}

📌 임의값 사용 원칙: 디자인 시스템 토큰(8px 배수 등)으로 해결 가능하면 스케일 내 클래스를 우선. 불가피하게 다를 때만 [...] 사용.

🏁 이번에 배운 내용 총정리

개념	클래스 패턴	핵심
기본 단위	`숫자 × 4 = px`	`p-4` = 16px
Padding 방향	`p-`, `px-`, `py-`, `pt-`, `pr-`, `pb-`, `pl-`	방향 접미사
Margin 방향	`m-`, `mx-`, `my-`, `mt-`, `mr-`, `mb-`, `ml-`	방향 접미사
가운데 정렬	`mx-auto`	좌우 마진 자동
너비 제한	`max-w-6xl mx-auto`	페이지 표준 패턴
정사각형	`size-10`	w+h 동시
전체 화면	`min-h-screen`	페이지 최소 높이

📝 마무리 퀴즈

Q1. 영숙이 피그마에서 카드의 내부 여백을 "좌우 24px, 상하 16px" 로 지정했다. Tailwind 클래스는?

✅ 정답: px-6 py-4

💡 상세 해설:

계산: 24px ÷ 4 = 6 → px-6. 16px ÷ 4 = 4 → py-4.
p-6 만 쓰면 상하좌우 모두 24px 가 돼서 오답. px-6 은 좌우, py-4 는 상하를 각각 지정하는 게 핵심.
📌 핵심 기억법: "px = 가로(x축), py = 세로(y축). 수학 좌표계랑 같아."

Q2. 영철이가 콘텐츠 영역을 화면 중앙에 배치하고, 최대 너비를 1152px 로 제한하고 싶다. 올바른 패턴은?

✅ 정답: mx-auto max-w-6xl px-4

💡 상세 해설:

mx-auto: 좌우 마진을 자동으로 설정해서 가운데 정렬.
max-w-6xl: 최대 너비를 72rem(1152px)으로 제한. 화면이 이보다 넓어도 더 늘어나지 않아.
px-4: 모바일에서 화면 가장자리에 최소 여백(16px) 확보.
이 세 클래스 조합이 Next.js/React 앱에서 페이지 콘텐츠 영역에 쓰는 표준 패턴이야.
📌 핵심 기억법: "제한(max-w) + 정렬(mx-auto) + 가장자리 여백(px) = 완벽한 페이지 레이아웃"

Q3. h-full 을 줬는데 높이가 0 으로 나온다. 원인과 해결책은?

✅ 정답: 부모 요소에 명시적 높이가 없기 때문. 부모에 h-64, h-screen 등 높이를 지정해야 h-full 이 효과를 발휘한다.

💡 상세 해설:

h-full 은 height: 100% 야. 퍼센트 값은 부모의 높이를 기준으로 해. 부모 높이가 없으면 0% = 0px 이 되어버려.
해결 1: 부모에 h-64, h-screen 같은 고정 높이 지정.
해결 2: 부모에 min-h-screen 으로 최소 높이 지정.
해결 3: Flex 컨테이너 안에서 flex-1 로 나머지 공간 채우기.
📌 핵심 기억법: "h-full 이 안 되면 부모 높이 먼저 확인."

🐣 영철이의 퇴근 일기

"숫자 × 4 = px" 이 공식 하나가 오늘의 핵심이었다. 영숙 님 피그마 열어서 여백 수치 보면 이제 바로 Tailwind 클래스가 떠오른다. 24px → p-6, 32px → p-8, 이렇게.

그리고 mx-auto max-w-6xl px-4 가 페이지 레이아웃 표준 패턴이라는 것도 알게 됐다. 앞으로 새 페이지 만들 때마다 이 패턴 쓰면 되겠다.

💡 오늘의 교훈: "임의값(px-[20px])은 도피처가 아니라 마지막 수단이다. 먼저 스케일 안에서 찾아보자."

오늘 저녁에 영수네 커뮤니티 카드 컴포넌트 간격 전부 Tailwind 스케일로 통일해봐야겠다. 파파스 피자 시켜놓고 작업하면 딱이겠는걸? 🍕

📏 Tailwind 3장: 간격과 사이징 시스템

📋 목차

📌 이 문서를 읽기 전에

🤔 왜 알아야 하는가

🏗️ 비유로 먼저 이해하기

📐 Tailwind 의 간격 스케일 시스템

자주 쓰는 간격 값 대조표

특수 값

📦 Padding & Margin 완전 정복

방향 접미사 패턴

🎯 mx-auto 의 마법: 콘텐츠 가운데 정렬

Space Between 유틸리티 (자식 요소 간격)

📐 Width & Height 완전 정복

핵심 Width 클래스

핵심 Height 클래스

💻 Before / After: 영수네 커뮤니티 UI

❌ 순진한 코드: 임의값 남용

✅ 프로 코드: Tailwind 간격 스케일 활용

🚨 흔한 실수와 베스트 프랙티스

실수 1: p-* 와 px-*/py-* 혼용으로 덮어쓰기

실수 2: h-full 이 안 먹힐 때

실수 3: w-full 과 max-w-* 같이 쓰기

베스트 프랙티스: 스케일 밖의 값은 임의값으로

🏁 이번에 배운 내용 총정리

📝 마무리 퀴즈

🐣 영철이의 퇴근 일기

🔗 더 알아보기

🎯 `mx-auto` 의 마법: 콘텐츠 가운데 정렬

실수 1: `p-` 와 `px-/py-*` 혼용으로 덮어쓰기

실수 2: `h-full` 이 안 먹힐 때

실수 3: `w-full` 과 `max-w-*` 같이 쓰기