[CSS] "CSS 설계의 혁명! 유틸리티 퍼스트 방식이 뜨는 이유"

Tailwind CSS 방식을 공부하면서 해당 방식이 '유틸리티 퍼스트 방식의 CSS 프레임워크'라는 것을 알게 되었다.

 

그러나, 유틸리티 퍼스트 방식의 CSS 프레임워크가 무엇인지 궁금해지기 시작했다.

 

 

 

유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크란

 

미리 정의된 작은 단위(유틸리티) 클래스들을 조합하여 스타일을 적용하는 방식을 말한다.

🚨잠깐!!🚨 '미리 정의된 작은 단위 클래스' 에 대해서는 아래 글을 참고하자!
https://pangil-log.tistory.com/230

[CSS] "Tailwind CSS 핵심 정리! 유틸리티 클래스로 스타일링 끝내기"

 

1) 기존의 CSS 방식

 

기존의 CSS 방식에서는 특정 스타일을 .css 파일에 작성하거나 class를 만들어 사용해야 했었다.

 

예를 들어, 버튼 스타일을 적용하려면 이렇게 작성했을 것이다.

.btn {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

<button class="btn">버튼</button>

 

2) 유틸리티 퍼스트 방식

 

하지만 Tailwind CSS는 .btn 같은 클래스를 만들지 않고, 미리 제공된 유틸리티 클래스를 조합하여 스타일을 직접 HTML에서 지정하게 된다.

 

Tailwind CSS에서 미리 제공된 유틸리티 클래스의 경우 아래의 글을 참고하자.

<button class="bg-blue-500 text-white px-4 py-2 rounded">버튼</button>

 

각 클래스가 하나의 스타일 속성을 담당하고 있어서,

• bg-blue-500 → 배경색을 파란색으로
• text-white → 글자색을 흰색으로
• px-4 py-2 → 좌우, 상하 패딩 설정
• rounded → 모서리를 둥글게

이런 식으로 개별 유틸리티 클래스를 조합해서 원하는 디자인을 만들 수 있다.

 

즉, 유틸리티 퍼스트 방식은 CSS를 직접 작성하지 않고, HTML에서 필요한 스타일을 즉시 적용할 수 있도록 하는 방식이다.

 

덕분에 빠른 스타일링이 가능하고, 유지보수도 쉬워지는 장점이 있다.

 

 

 

유틸리티 퍼스트 방식의 단점

 

물론, Tailwind CSS의 단점도 분명히 있고, 대표적인 단점은 다음과 같다.

 

1) HTML이 길어질 수 있다.

• 모든 스타일을 HTML 태그 안에 유틸리티 클래스로 직접 지정해야 하다 보니 코드가 길어지고 복잡해질 수 있어.
• 예를 들어, 버튼 하나를 만들 때도 클래스가 여러 개 들어가야 해.
•  
• <button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:bg-blue-600"> 버튼 </button>
• 반면, 기존 CSS 방식에서는 .btn 같은 클래스를 만들어 재사용할 수 있었지.

2) 초반 학습이 필요하다.

• 기존 CSS 프레임워크와 다르게, Tailwind CSS는 유틸리티 클래스 이름을 익혀야 해.
• 예를 들어 text-xl, p-4, shadow-md 같은 Tailwind 전용 클래스를 알고 있어야 빠르게 사용할 수 있어.

3) JSX/HTML이 스타일 코드로 가득 차 유지보수가 어려울 수도 있음

• HTML 파일에서 디자인을 바로 적용할 수 있어 편리하지만, 반대로 유지보수할 때 스타일을 한눈에 보기 어려울 수도 있어.
• 스타일을 한 곳에서 관리하는 기존 CSS 방식과 다르게, Tailwind는 모든 스타일이 HTML 태그 안에 있어서 수정할 때 일일이 찾아서 바꿔야 할 수도 있어.

 

 

 

단점을 해결하는 방법

 

Tailwind CSS는 강력한 유틸리티 클래스 기반의 스타일링을 제공하지만, 클래스가 너무 길어지거나 가독성이 떨어지는 단점이 있다. 이런 문제를 해결하기 위한 몇 가지 방법이 있다.

 

1) @apply 사용

→ Tailwind의 @apply를 이용하면 CSS 파일에서 반복되는 유틸리티 클래스를 그룹화할 수 있다.

/* styles.css */
.btn-primary { 
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:bg-blue-600; 
}

<button class="btn-primary">버튼</button>

 

(1) 주의할 점:

- @apply를 사용하면 Tailwind의 원래 철학인 유틸리티 퍼스트 스타일링을 약간 벗어날 수 있다.

- 너무 많은 @apply 사용은 오히려 유지보수를 어렵게 만들 수 있다.

 

2) Tailwind Prettier 플러그인 사용

Tailwind의 유틸리티 클래스는 한 줄에 길게 나열될 경우 가독성이 떨어질 수 있다.
이를 해결하기 위해 Tailwind Prettier 플러그인을 사용하면, 클래스를 자동으로 정렬하여 깔끔하게 정리할 수 있다.

 

(1) 설치 방법:

npm install -D prettier prettier-plugin-tailwindcss

 

(2) 설정 추가 (prettier.config.js)

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
};

 

(3-1) 적용 전:

<button class="text-white px-4 bg-blue-500 rounded-lg py-2 font-bold shadow-md hover:bg-blue-600">버튼</button>

 

(3-2) 적용 후 (자동 정렬됨):

<button class="bg-blue-500 px-4 py-2 font-bold text-white shadow-md hover:bg-blue-600 rounded-lg">버튼</button>

 

장점:

• 클래스 순서를 자동 정렬하여 코드 일관성을 유지할 수 있다.
• 협업 시 스타일 코드 가독성이 향상된다.

3) Tailwind UI 사용

Tailwind UI는 공식적으로 제공되는 프리미엄 컴포넌트 라이브러리로, 미리 디자인된 UI 컴포넌트를 활용하여 빠르게 UI를 구성할 수 있다.

사용 방법:

• Tailwind UI 공식 사이트에서 원하는 UI 컴포넌트를 선택하여 사용한다.
• 이미 스타일이 적용된 컴포넌트를 그대로 가져와서 수정할 수 있다.

 

 

 

 

---

단점이 있음에도 불구하고, 빠른 개발 속도, 일관된 디자인 시스템, 최적화된 성능, 다양한 프레임워크와의 호환성 덕분에 Tailwind CSS는 많은 개발자들이 선호하는 스타일링 방식이 되었다. 특히, 반복되는 CSS 작업을 줄이고, 생산성을 높이려는 개발자들에게 최고의 선택지가 될 수 있다.