Utility-First-CSS

안녕하세요, WEB OB 이윤지입니다. 😊

 

1주차 세미나에서는 HTML과 CSS의 기본 개념에 대해 중점적으로 다뤘죠.

그래서 이번 글에서는 그중에서도 CSS에 대해 조금 더 자세히 이야기해보려 합니다.

 

최근 웹 개발 트렌드를 살펴보면, Utility-First CSS가 큰 주목을 받고 있다고 합니다.

그렇다면, Utility-First CSS란 무엇이고, 왜 많은 개발자들이 이 친구를 택했을까요?

 

---

💡 CSS를 적용하는 대표적인 방식들

 

1. 기본 CSS (Vanilla CSS)

가장 기초적인 방식이죠. .css 파일을 만들어 선택자로 스타일을 적용하는 전통적인 스타일링 방식입니다.

/* style.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

 

이 친구의 장점은 직관적이고 단순하지만, 규모가 커질수록 중복 코드나 유지 보수에 어려움이 생기기 쉽단 거죠.

 

2. 전처리기 (Sass, SCSS)

기본 Vanilla CSS보다 한 단계 업그레이드 되었습니다.

변수, 중첩, mixin 등을 활용할 수 있어 유지보수에 유리합니다.

$primary: blue;

.button {
  background-color: $primary;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

 

통상적으로 SASS보다 SCSS를 사용을 많이 하는데 SCSS의 경우 CSS문법과 완벽하게 호환이 되는 장점 또한 가지고 있습니다. 또한 코드의 가속성과 재사용성을 높여주며 심플한 표기법으로 CSS 구조를 평준화할 수 있습니다.

 

3. CSS-in-JS

기존 React, Vue 같은 컴포넌트 기반 프레임워크를 사용해 보셨다면 익숙하시죠.

JS파일 내에 스타일을 함께 정의해서 컴포넌트와 스타일을 함께 관리할 수 있습니다.

대표 라이브러리에는 styled-component, Emotion 이 있었으나 2025년 3월 기준 styled-component 가 deprecated 되었습니다.

정확히 말하자면 공식적으로 더 이상 추천하지 않는다는 거죠 (사용하면 바보~)

왜 styled-component 를 더 이상 추천하지 않을까?

 

❌ 런타임 성능 이슈	컴포넌트가 렌더링될 때 스타일도 JS로 처리되므로 초기 렌더링에 부하가 생김
❌ 번들 사이즈 증가	styled-components 자체의 용량도 작지 않음
❌ 추적 어려움	HTML에서 어떤 클래스가 적용되었는지 디버깅이 어려움
✅ 반대로 Tailwind나 일반 CSS는	컴파일 타임에 해결되고, HTML 구조도 명확함

 

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

 

하지만, 런타임 성능이나 스타일 렌더링에 대한 이슈가 있어서 호불호가 있습니다.

 

그럼, Utility-First-CSS?

Utility-First CSS는 말 그대로 유틸리티(단위 기능) 클래스 중심으로 스타일링을 해나가는 방식입니다.

즉, 의미 있는 클래스명을 직접 정의하는 게 아니라, 이미 만들어진 스타일 클래스를 조합해서 사용해요.

 

📌 예시: Tailwind CSS

<!-- 유틸리티 클래스만으로 구성된 버튼 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded">
  클릭
</button>

위 코드는 따로 .css 파일을 만들지 않아도, Tailwind에서 제공하는 클래스들을 조합해서 바로 스타일을 완성할 수 있단 점입니다.

 

장점

✅ 빠른 개발 속도	매번 클래스명 정의 없이 조합만으로 스타일 완성 가능
✅ 일관된 디자인	디자인 시스템이 정해져 있어 팀 내 스타일이 통일됨
✅ 불필요한 CSS 제거	사용하지 않는 클래스는 빌드 시 제거(PurgeCSS)
✅ JS 없이도 반응형, 다크모드 등 처리 가능	미디어쿼리, 상태 클래스가 모두 내장되어 있음

 

 

단점

📌 클래스명이 길어짐	HTML이 복잡해 보여 가독성이 떨어질 수 있음
📌 커스터마이징 시 설정 파일 필요	tailwind.config.js 등 설정 파일 관리 필요
📌 익숙하지 않으면 진입장벽 존재	처음엔 문법이나 네이밍이 낯설 수 있음

 

---

 

이번 1주차에서는 CSS의 여러 스타일링 방식들과 함께 최근 트렌드로 자리잡고 있는 Utility-First CSS에 대해 알아봤습니다.

기존 방식보다 빠르고 일관된 스타일링이 가능하다는 점에서 많은 개발자들과 팀에서 Tailwind CSS 같은 유틸리티 퍼스트 프레임워크를 도입하고 있다고 합니다.

 

다양한 CSS 방식들을 접해보고, 본인에게 가장 잘 맞는 스타일링 방식을 고민해보는 기회가 되었으면 좋겠습니다 😊

 

참고:

https://insight.infograb.net/blog/2025/02/05/2025-devtrends/

2025년 웹 개발 핵심 트렌드 5가지