목차
Tailwind CSS를 쓰다 보면 의외로 자주 마주치는 고민 중 하나가 바로 ‘정사각형 박스를 어떻게 만들지?’ 예요. 버튼, 아이콘, 썸네일, 카드 등 정사각형 비율이 필요한 요소는 생각보다 정말 많거든요.
처음에 저는 당연하게 w-*와 h-*를 각각 작성했어요. 하지만 동료들과 코드 리뷰를 진행하면서 이 방식이 유지 보수성과 코드 직관성 측면에서 정말 최선인지 의문이 계속 들었죠.🤔
이런 문제를 해결할 수 있는 Tailwind CSS의 유용한 기능 중 하나가 바로 size-* 유틸리티예요. 이번 글에서는 w-* h-*, w-* aspect-square, size-*까지 정사각형을 만드는 세 가지 방식을 실제 사용 경험을 바탕으로 비교해 보고, 장단점이 무엇인지 알려드릴게요.
정사각형을 만드는 세 가지 방식
방식 1. w-* h-*
가장 많이 알고 있는 기본적인 방식이에요. width 와 height를 설정할 수 있는 w-*와 h-*를 활용하여 같은 값으로 설정해서 정사각형으로 만들 수 있죠.
<div className="w-10 h-10" />이 방식의 장점은 요구사항이 바뀌어 직사각형으로 비율을 수정해야 할 때 width와 height를 개별적으로 조정할 수 있다는 점이에요.
하지만 이런 장점이 단점이 되기도 해요. 정사각형의 크기를 10에서 20으로 변경해야 할 경우, 두 유틸리티 클래스를 모두 수정해야 하는 번거로움이 있죠. 또한 코드만 봤을 때 정사각형을 만들려는 의도가 명확히 드러나지 않는 것도 아쉬운 부분이에요. 이는 코드의 유지보수성과 명확성을 저하시켜요.
방식 2. w-* aspect-square
w-* aspect-square를 사용하면 너비만 지정하고 높이는 1:1 비율로 자동 설정할 수 있어요. 여기서 aspect-square는 aspect-ratio: 1 / 1; CSS 스타일을 적용해 정사각형 비율을 유지해요.
<div className="w-10 aspect-square" />이 방식의 장점은 너비만 조절하면 높이가 자동으로 조정된다는 점이에요. 앞서 언급한 w-* h-* 방식의 단점이었던 정사각형 크기 변경 시 두 클래스를 모두 수정해야 하는 문제도 w-* aspect-square 방식에서는 w-* 클래스만 수정하면 되어 유지 보수가 훨씬 간편해요.
반응형 레이아웃을 구현할 때도 아래와 같이 활용할 수 있어요.
<div className="w-full aspect-square" />이는 이미지 섬네일이나 카드와 같이 비율 유지가 중요한 UI 요소에 특히 유용해요.
하지만 이 방식도 여전히 두 개의 유틸리티 클래스를 사용해야 한다는 점에서 완전히 간결하다고 보기는 어려워요.
방식 3. size-*
size-*는 w-* h-*를 각각 쓰는 대신, size-*로 한 번에 width, height를 동시에 같은 값으로 설정해 주는 유틸리티 클래스에요.
<div className="size-10" />
size-10은w-10 h-10과 동일한 효과를 가져요.
이 방식의 장점은 size-*라는 단일 유틸리티 클래스만 사용해 코드가 간결하고, 정사각형을 만들려는 의도를 직관적으로 드러낼 수 있다는 점이에요. 또한 정사각형의 크기를 변경할 때도 size-*의 값만 한 번 수정하면 되어 유지 보수가 훨씬 용이해요.
다만 size-* 유틸리티 클래스의 단점은 UI 요소를 정사각형에서 직사각형으로 변경해야 할 때 유틸리티 클래스를 완전히 바꿔야 한다는 점이에요. 이는 정사각형 형태에만 특화된 유틸리티 클래스라는 의미죠.
세 가지 방식 정리
| 방식 | 코드 예시 | 특징 |
|---|---|---|
w-* h-* | w-24 h-24 | 직사각형으로 변경에 유연 |
w-* aspect-square | w-full aspect-square | 너비 기준 반응형 정사각형 |
size-* | size-24 | 가장 짧고 명확, 유지보수에 용이 |
마무리
이번 글에서는 Tailwind CSS로 정사각형을 만드는 세 가지 방식의 장단점을 비교해 보았어요. 정사각형 요소는 생각보다 다양한 곳에서 활용되므로, 상황에 맞는 방식을 알면 개발 속도, 코드 가독성, 그리고 유지 보수성을 모두 향상시킬 수 있어요.
저도 사실 올해부터 팀에서 Tailwind CSS를 처음 사용하면서 size-* 유틸리티 클래스의 존재를 몰랐어요. 서두에서 이야기했던 것처럼 기존에는 주로 w-* h-* 방식을 사용했는데, 코드 리뷰 중에 이 방식이 과연 유지 보수와 코드 직관성 측면에서 최선인가 의문이 계속 들더라고요. 대안을 찾던 중 size-* 유틸리티 클래스를 발견했고, 팀 동료들에게도 size-*라는 더 효율적인 대안을 공유하며 코드를 유지 보수에 용이하고, 직관적으로 작성될 수 있도록 개선했어요.
이 글을 통해 여러분도 Tailwind CSS로 정사각형을 만드는 다양한 방식과 각각의 장단점을 명확히 이해하고 실무에 효과적으로 활용하시길 바래요.👋