[Tailwind CSS] gap vs space 유틸리티의 차이점 이해하기

Tailwind CSS를 사용하다 보면 요소들 간의 간격을 조절하기 위해 gap과 space 유틸리티를 자주 사용하게 됩니다. 저 역시 프로젝트를 진행하면서 두 유틸리티를 번갈아가며 사용했는데, 어느 순간 "이 상황에서는 어떤 유틸리티를 사용하는 게 더 적절할까?"라는 의문이 들었습니다.

 

관련 내용을 찾아보니 얼핏 비슷해 보이는 이 두 유틸리티가 실제로는 서로 다른 상황에 특화되어 있고, 각각의 장단점이 있다는 것을 알게 되었습니다. 이번 글에서는 제가 알게 된 두 유틸리티의 차이점과 적절한 사용 사례에 대해 함께 알아보도록 하겠습니다.

 

gap 유틸리티

gap 유틸리티는 Grid나 Flexbox 레이아웃에서 사용되는 CSS gap 속성을 기반으로 합니다.

주요 특징

1. Grid나 Flexbox 컨테이너에만 적용 가능
2. 행과 열 모두에 균일한 간격 적용 가능
3. 중첩된 마진이 발생하지 않음
4. 반응형 디자인에 적합

사용 예시

<!-- Grid 레이아웃 -->
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- Flexbox 레이아웃 -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

 

space 유틸리티

space-x와 space-y 유틸리티는 자식 요소들 사이에 마진을 추가하는 방식으로 작동합니다.

주요 특징

1. 모든 요소에 사용 가능 (Grid나 Flexbox가 아니어도 됨)
2. 가로(space-x)와 세로(space-y) 방향으로 개별적인 간격 설정 가능
3. 선택자를 사용하여 마진을 적용
4. 음수 값 사용 가능

사용 예시

<!-- 가로 방향 간격 -->
<div class="space-x-4">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

<!-- 세로 방향 간격 -->
<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

언제 무엇을 사용해야 할까?

gap을 사용하면 좋은 경우

1. Grid나 Flexbox 레이아웃을 사용하는 경우
2. 행과 열에 동일한 간격이 필요한 경우
3. 반응형 디자인을 구현할 때
4. 중첩된 마진을 피하고 싶을 때

<div class="grid grid-cols-3 gap-4 md:gap-6 lg:gap-8">
  <!-- 반응형 갭 적용 -->
</div>

space를 사용하면 좋은 경우

1. Grid나 Flexbox를 사용하지 않는 레이아웃
2. 가로와 세로 방향의 간격을 다르게 설정해야 할 때
3. 특정 방향으로만 간격이 필요할 때
4. 음수 마진이 필요한 경우

<div class="space-y-4 space-x-2">
  <!-- 세로는 1rem, 가로는 0.5rem 간격 -->
</div>

 

결론

• gap은 현대적인 레이아웃 시스템(Grid/Flexbox)에 최적화되어 있으며, 더 깔끔한 마크업을 제공합니다.
• space는 더 유연하고 광범위한 사용 사례에 적용할 수 있습니다.
• 프로젝트의 요구사항과 레이아웃 구조에 따라 적절한 유틸리티를 선택하면 됩니다.