Skip to Content
FoundationsFoundationSpacing (간격)

Spacing (간격)

Foundation의 간격 시스템은 8px 기반 스케일을 사용하여 일관된 Padding, Margin, Gap을 제공합니다.

간격 철학

Foundation의 간격 시스템은 다음 원칙을 따릅니다:

  • 8px Grid System: 모든 간격은 8의 배수 기반
  • Predictable Scale: xs부터 3xl까지 예측 가능한 스케일
  • Consistency: 모든 컴포넌트가 동일한 간격 토큰 사용
  • Flexibility: 다양한 레이아웃 요구사항 충족

Spacing Scale

Foundation은 4px부터 64px까지 7단계 간격을 제공합니다.

실제 토큰 값 (core.css)

@theme {
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
}

사용 가이드

토큰크기사용 사례
xs4px아이콘과 텍스트 사이, 작은 Gap
sm8pxInput Padding, Button 내부 간격
md16pxCard Padding, Section 간격 (기본)
lg24pxSection 간격, Container Padding
xl32px큰 Section 간격
2xl48pxHero Section, Feature Section 간격
3xl64pxPage Section 간격

Padding (내부 여백)

CSS Variables로 사용

.card {
  padding: var(--spacing-md);
}
 
.button {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

Tailwind Utility Classes로 사용

<div className="p-md">
  <div className="px-lg py-sm">Content</div>
</div>

실전 예제

export default function Card() {
  return (
    <div className="p-md bg-white border border-gray-200 rounded-lg">
      <h3 className="text-xl font-semibold">Card Title</h3>
      <p className="mt-sm text-gray-600">Card description</p>
      <button className="mt-lg px-md py-sm bg-primary text-white rounded">
        Action
      </button>
    </div>
  );
}

Margin (외부 여백)

Tailwind Utility Classes로 사용

<div>
  <h1 className="mb-md">Title</h1>
  <p className="mb-sm">Paragraph</p>
  <button className="mt-lg">Button</button>
</div>

실전 예제 - 섹션 간격

export default function Page() {
  return (
    <div>
      <section className="mb-3xl">
        <h2 className="text-2xl font-bold mb-lg">Section 1</h2>
        <p>Content</p>
      </section>
 
      <section className="mb-2xl">
        <h2 className="text-2xl font-bold mb-lg">Section 2</h2>
        <p>Content</p>
      </section>
    </div>
  );
}

Gap (Flexbox/Grid 간격)

Flexbox Gap

<div className="flex gap-md">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

Grid Gap

<div className="grid grid-cols-3 gap-lg">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

실전 예제 - Form

export default function Form() {
  return (
    <form className="space-y-md">
      <div>
        <label className="block mb-xs text-sm font-medium">Name</label>
        <input className="w-full px-md py-sm border rounded" />
      </div>
 
      <div>
        <label className="block mb-xs text-sm font-medium">Email</label>
        <input className="w-full px-md py-sm border rounded" />
      </div>
 
      <div className="flex gap-sm mt-lg">
        <button className="px-md py-sm bg-primary text-white rounded">
          Submit
        </button>
        <button className="px-md py-sm bg-gray-100 rounded">Cancel</button>
      </div>
    </form>
  );
}

반응형 간격

Mobile First 접근

<div className="p-md lg:p-xl">
  Mobile: 16px padding Desktop (lg+): 32px padding
</div>

예제 - 섹션 Padding

export default function Section() {
  return (
    <section className="py-2xl lg:py-3xl px-md lg:px-xl">
      <div className="max-w-screen-xl mx-auto">
        <h2 className="text-3xl font-bold mb-lg">Title</h2>
        <p className="text-lg">Content</p>
      </div>
    </section>
  );
}

컴포넌트별 간격 가이드

Button

// Small Button
<button className="px-md py-sm text-sm">Small</button>
 
// Medium Button (기본)
<button className="px-md py-sm text-base">Medium</button>
 
// Large Button
<button className="px-lg py-md text-lg">Large</button>

Card

// Compact Card
<div className="p-sm">Compact</div>
 
// Default Card
<div className="p-md">Default</div>
 
// Spacious Card
<div className="p-lg">Spacious</div>

Input

// Small Input
<input className="px-sm py-xs" />
 
// Medium Input (기본)
<input className="px-md py-sm" />
 
// Large Input
<input className="px-lg py-md" />

실전 예제

Hero Section

export default function Hero() {
  return (
    <section className="py-3xl px-md bg-gray-50">
      <div className="max-w-screen-xl mx-auto text-center">
        <h1 className="text-3xl font-bold mb-md">Hero Title</h1>
        <p className="text-lg text-gray-600 mb-xl max-w-2xl mx-auto">
          Hero description with optimal spacing
        </p>
        <div className="flex gap-md justify-center">
          <button className="px-lg py-md bg-primary text-white rounded">
            Get Started
          </button>
          <button className="px-lg py-md bg-white border rounded">
            Learn More
          </button>
        </div>
      </div>
    </section>
  );
}

Feature Grid

export default function Features() {
  return (
    <section className="py-2xl px-md">
      <div className="max-w-screen-xl mx-auto">
        <h2 className="text-2xl font-bold mb-xl">Features</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-lg">
          <div className="p-lg bg-white border rounded">
            <h3 className="text-xl font-semibold mb-sm">Feature 1</h3>
            <p className="text-gray-600">Description</p>
          </div>
          <div className="p-lg bg-white border rounded">
            <h3 className="text-xl font-semibold mb-sm">Feature 2</h3>
            <p className="text-gray-600">Description</p>
          </div>
          <div className="p-lg bg-white border rounded">
            <h3 className="text-xl font-semibold mb-sm">Feature 3</h3>
            <p className="text-gray-600">Description</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Form with Consistent Spacing

export default function ContactForm() {
  return (
    <form className="max-w-md mx-auto p-lg bg-white border rounded-lg">
      <h2 className="text-2xl font-bold mb-lg">Contact Us</h2>
 
      <div className="space-y-md">
        <div>
          <label className="block mb-xs text-sm font-medium">Name</label>
          <input className="w-full px-md py-sm border rounded" />
        </div>
 
        <div>
          <label className="block mb-xs text-sm font-medium">Email</label>
          <input className="w-full px-md py-sm border rounded" />
        </div>
 
        <div>
          <label className="block mb-xs text-sm font-medium">Message</label>
          <textarea className="w-full px-md py-sm border rounded" rows={4} />
        </div>
      </div>
 
      <div className="mt-xl">
        <button className="w-full px-md py-md bg-primary text-white rounded">
          Send Message
        </button>
      </div>
    </form>
  );
}

접근성 고려사항

터치 타겟 크기

모바일 디바이스에서 터치 타겟은 최소 44x44px (iOS) 또는 48x48px (Android)이어야 합니다.

// 충분한 Padding으로 터치 타겟 확보
<button className="px-md py-md min-h-[44px]">Touch Target</button>

충분한 간격

인접한 인터랙티브 요소 사이에는 최소 8px 간격을 유지하세요.

<div className="flex gap-sm">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

다음 단계

Last updated on
Shadows (그림자)Typography (타이포그래피)