Tailwind CSS에서 클래스가 많아 보이는 이유
유틸리티 퍼스트 구조가 주는 첫인상
HTML 안에 모든 스타일이 드러나는 구조
Tailwind CSS는 스타일을 CSS 파일에 숨기지 않고, HTML 안에서 그대로 드러내는 방식을 취합니다. 이로 인해 클래스 문자열이 길어 보이는 경우가 많습니다.
이는 실제로 스타일이 많아진 것이 아니라, 기존에 분산되어 있던 정보가 한곳에 모인 결과로 이해할 수 있습니다.
Bootstrap과 비교했을 때의 시각적 차이
Bootstrap에서는 btn-primary 같은 의미 기반 클래스 하나로 여러 스타일이 묶여 있습니다. Tailwind CSS에서는 동일한 결과를 여러 유틸리티로 표현하게 됩니다.
이 차이가 처음에는 복잡하게 느껴질 수 있으나, 구조를 이해하면 의도 파악이 쉬워지는 방향으로 작용합니다.
클래스 수와 복잡도는 다르다
클래스가 많아 보인다고 해서 구조가 복잡한 것은 아닙니다. 각 클래스는 하나의 역할만 수행하며, 서로의 영향 범위가 명확합니다.
이 점은 유지보수 단계에서 오히려 장점으로 작용하는 경우가 많습니다.
가독성을 높이는 첫 번째 기준
레이아웃과 스타일을 분리해 생각하기
레이아웃 관련 클래스 먼저 정리하기
flex, grid, width, height, spacing처럼 레이아웃을 결정하는 클래스는 가장 먼저 눈에 들어옵니다. 이들을 한 덩어리로 인식하는 연습이 도움이 됩니다.
레이아웃이 잡히면 색상이나 텍스트 같은 스타일 요소는 상대적으로 덜 복잡하게 느껴집니다.
시각적 스타일 클래스는 뒤로 보기
bg, text, border 관련 클래스는 화면의 분위기를 담당합니다. 이들은 기능보다는 표현에 가까운 요소로 분류할 수 있습니다.
레이아웃과 분리해 바라보면 클래스 문자열의 구조가 조금 더 정돈되어 보입니다.
역할별로 묶어 읽는 습관
클래스를 한 글자씩 읽기보다, 역할 단위로 묶어 인식하는 방식이 도움이 됩니다.
이 습관이 생기면 클래스가 길어도 의미 파악 속도가 크게 떨어지지 않습니다.
반복되는 패턴을 정리하는 방법
자주 쓰는 조합을 기준으로 생각한다
반복되는 클래스 조합 찾기
버튼, 카드, 입력 폼처럼 반복되는 UI에는 거의 비슷한 클래스 조합이 사용됩니다. 이를 의식적으로 찾아보는 과정이 필요합니다.
이 단계에서 클래스가 많다는 느낌이 줄어드는 경우가 많습니다.
템플릿 단위로 관리하기
공통 UI는 HTML 템플릿이나 컴포넌트로 묶어 관리하는 방식이 효과적입니다. React, Vue 같은 프레임워크가 아니더라도 부분 템플릿으로 충분히 활용할 수 있습니다.
이렇게 하면 실제로 작성하는 클래스 양도 자연스럽게 줄어듭니다.
의미 없는 세분화는 피하기
모든 UI를 지나치게 세분화하면 오히려 구조 파악이 어려워질 수 있습니다. 반복 빈도가 낮은 요소는 그대로 두는 편이 나아 보입니다.
정리는 반복을 줄이기 위한 수단이지, 규칙 자체가 목적은 아닙니다.
실무에서 많이 사용하는 정리 기법
기능을 유지하면서 복잡도를 낮춘다
apply 지시자 활용
Tailwind CSS는 @apply 지시자를 통해 여러 유틸리티를 하나의 클래스처럼 묶을 수 있습니다. 이는 반복되는 스타일을 정리할 때 유용합니다.
다만 남용할 경우 다시 CSS 중심 구조로 되돌아갈 수 있으므로 제한적으로 사용하는 편이 좋습니다.
컴포넌트 레이어 활용
components 레이어에 공통 UI를 정의하면, 스타일 규칙을 한 곳에서 관리할 수 있습니다.
이는 클래스 문자열을 줄이기보다는, 책임 위치를 분리하는 데 의미가 있습니다.
줄바꿈과 정렬로 가독성 확보
클래스가 많은 경우 한 줄에 모두 나열하기보다, 줄바꿈을 활용해 구조를 드러내는 방법도 있습니다.
이는 시각적인 부담을 줄이는 데 즉각적인 효과가 있습니다.
사고방식을 바꾸면 보이는 정리 기준
클래스를 숨기지 않는다는 전제 받아들이기
CSS를 찾으러 이동하지 않아도 되는 장점
클래스가 HTML에 모여 있기 때문에, 스타일을 확인하기 위해 파일을 오갈 필요가 줄어듭니다.
이 점은 유지보수 과정에서 점차 체감되는 편입니다.
가독성과 추적성은 다른 문제
처음에는 가독성이 떨어진다고 느낄 수 있지만, 추적성은 오히려 높아집니다. 어디에서 어떤 스타일이 적용되는지가 명확하기 때문입니다.
이 차이를 구분해 인식하는 것이 중요해 보입니다.
정리의 기준을 바꾸는 시점
클래스를 줄이는 것이 목적이 아니라, 수정과 확장이 쉬운 구조를 만드는 것이 목적이라는 점을 인식하게 되면 기준이 달라집니다.
이 지점에서 Tailwind CSS가 주는 이점이 분명해지는 경우가 많습니다.
