사내 팀 회의에서 나온 의견에 대해서 포스팅합니다!
개요
최근 사내 개발팀 회의에서 Tailwind CSS를 프로젝트에 도입하면 좋을 거 같다는 의견이 나왔습니다. 사실 이런 의견은 예전에도 한 번씩 나왔지만 이번에는 모든 개발팀 인원이 모여 회의를 진행하게 되었습니다!
기존 프로젝트는 SCSS + BEM(Block Element Modifier) 방법론 조합을 사용하여 스타일링을 진행하고 있었습니다. 무슨 이유 때문에 Tailwind CSS를 도입하자는 의견이 나왔을까요? 일단 간단하게 각자 방법에 대해서 소개해보겠습니다.
Tailwind CSS
Tailwind CSS는 "유틸리티 퍼스트(Utility-First)" 접근 방식의 CSS 프레임워크입니다.
말 그대로, 미리 정의된 클래스들을 조합해서 직접 스타일링하는 방식이죠.
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
버튼
</button>위 예시처럼, 여백, 배경색, 텍스트 색상, 호버 효과까지 전부 클래스 하나하나로 처리할 수 있습니다.
SCSS처럼 별도로 CSS 파일을 만들지 않아도 되고, 빠르게 UI를 구성할 수 있다는 장점이 있습니다.
앞서 회의에서 Tailwind CSS를 도입하자는 의견도 간단한 스타일링을 편하게 할 수 있는 장점을 말한 것이라고 생각합니다.
장점
- 빠른 UI 프로토타이핑 가능
- 일관된 디자인 시스템 유지가 쉬움
- 클래스 이름만 봐도 스타일이 유추됨
단점
- 클래스가 길어져 가독성이 떨어질 수 있음
- 커스터마이징이 복잡한 경우가 있음
- HTML에 스타일 관련 정보가 많이 노출됨
SCSS + BEM 방법론
SCSS는 Sass의 문법 중 하나로, CSS를 더 효율적으로 작성할 수 있게 해주는 전처리기입니다.
여기에 BEM(Block Element Modifier) 방식의 클래스 네이밍을 결합하면, 컴포넌트 기반의 명확한 구조를 가진 스타일 설계가 가능합니다.
<div class="card card--highlighted">
<h2 class="card__title">제목</h2>
<button class="card__button">버튼</button>
</div>.card {
&__title {
font-size: 1.5rem;
}
&__button {
padding: 0.5rem 1rem;
background-color: blue;
&:hover {
background-color: darkblue;
}
}
&--highlighted {
border: 2px solid gold;
}
}장점
- 명확한 구조와 역할 구분
- 재사용성과 유지보수가 용이
- 스타일과 마크업이 분리되어 있음
단점
- 스타일 작성 및 관리에 시간이 다소 걸림
- 네이밍 규칙이 복잡하게 느껴질 수 있음
- 빠른 레이아웃 구성에는 불리할 수 있음
회의에서는?
이번 회의에서는 기존의 SCSS + BEM 방식을 유지할지, Tailwind CSS를 도입해볼지에 대해 다양한 의견이 오갔습니다. 특히 현재 진행 중인 프로젝트가 이미 어느 정도 규모가 있는 상태였기 때문에, 중간에 스타일링 방식 변경이 팀 전체에 미치는 영향에 대해 신중한 논의가 필요했습니다.
✅ Tailwind 도입에 대한 찬성 의견
- 버튼, 카드, 리스트 등 반복적인 컴포넌트에 빠르게 스타일을 입힐 수 있음
- 간단한 UI 작업은 Tailwind로 훨씬 빠르게 작업 가능
- 별도 SCSS 파일 없이 마크업에서 바로 스타일을 적용할 수 있어서 생산성이 높아짐
- 디자인 일관성 유지가 더 쉬움
❌ Tailwind 도입에 대한 반대 의견
- 이미 컴포넌트 단위로 SCSS가 설계되어 있고, BEM 네이밍도 적용되어 있기 때문에 혼용 시 오히려 복잡도가 증가할 수 있음
- HTML 클래스가 길고 난잡해질 수 있음
- 개발 시 특정 요소를 찾기 힘들고 유지보수가 어려워질 수 있음
- 자주 쓰이는 유틸 클래스만으로도 충분함
- 팀 내에서 사용 규칙을 명확히 정하지 않으면, 동일한 요소에 서로 다른 Tailwind 클래스가 적용되는 상황이 생길 수 있음
🔄 중간 절충안도 나옴
“Tailwind 전체를 도입하진 않더라도, 자주 사용하는 스타일 요소들만 유틸 클래스로 정의해서 쓰면 어떨까”라는 제안이 나왔습니다.
회의 결론은?
일단은 기존 방식 유지하고 추후에 다시 생각해보는 것으로 결론 났슴다 ㅎㅎ...
같이 참고하면 좋을 포스팅! Tailwind CSS vs. SCSS
