Styled Components, Sass, Tailwind CSS — Next.js에서 어떤 스타일링이 가장 어울릴까?
서론
Next.js로 프론트엔드 프로젝트를 진행하면서 가장 먼저 마주치는 선택지 중 하나는 스타일링 방식입니다. 우리는 보통 다음 중 하나를 선택하게 됩니다.
Styled Components: 런타임 기반 CSS-in-JSSass/SCSS: 전통적인 CSS 확장 문법Tailwind CSS: Utility-first CSS 프레임워크
이 중 어떤 방식이 Next.js와 가장 궁합이 잘 맞고, 생산성과 유지보수성, 성능 면에서 우위에 있을까요?
이번 글에서는 위 세 가지 스타일링 방법을 비교하고, Next.js에 가장 적합한 스타일링 기법이 무엇인지 판단해보겠습니다.
1. Styled Components
개요
Styled Components는 JavaScript 안에서 CSS를 정의하는 CSS-in-JS 라이브러리입니다. 컴포넌트 단위로 스타일을 정의할 수 있어 모듈성과 재사용성이 뛰어납니다.
1
2
3
4
5
6
7
import styled from 'styled-components';
const Button = styled.button`
background: blue;
color: white;
padding: 8px 16px;
`;
장점
- ✅ 컴포넌트 단위의 스타일링 → 재사용성과 유지보수에 강함
- ✅ 조건부 스타일링, props 연동이 매우 자연스러움
- ✅ 코드와 스타일이 한 파일에 있어 개발자 경험(DX)이 좋음
단점
- ❌ 런타임에 스타일을 생성하므로 성능 오버헤드 발생
- ❌ 서버사이드 렌더링(SSR)을 위해 별도의 설정(
babel-plugin-styled-components,ServerStyleSheet)이 필요함 - ❌ 트리쉐이킹에 불리함 → 불필요한 스타일이 번들에 남을 수 있음
2. Sass / SCSS
개요
Sass는 CSS의 상위 문법으로, 변수, 중첩, 믹스인 등을 사용할 수 있습니다. Next.js에서는 sass 패키지만 설치하면 SCSS를 손쉽게 사용할 수 있습니다.
1
2
3
4
5
6
7
8
9
// styles/button.module.scss
.button {
background: green;
color: white;
&:hover {
background: darkgreen;
}
}
1
2
3
import styles from './button.module.scss';
<button className={styles.button}>Click</button>
장점
- ✅ 전통적인 방식으로 진입장벽이 낮고, 예측 가능함
- ✅ 정적 파일로 처리되기 때문에 런타임 오버헤드 없음
- ✅ CSS 모듈과 조합하면 로컬 스코프 스타일링 가능
단점
- ❌ 컴포넌트와 스타일이 분리되므로 문맥 파악이 어려울 수 있음
- ❌ 동적 스타일링(조건부 렌더링 등)에 불편함
- ❌ 클래스명 충돌 방지를 위해 CSS Modules 사용이 필수적
3. Tailwind CSS
개요
Tailwind는 CSS 클래스 조합으로 UI를 구성하는 utility-first CSS 프레임워크입니다. Next.js에서도 매우 널리 사용되며, 설정도 비교적 간단합니다.
1
2
3
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Click me
</button>
장점
- ✅ 빠른 UI 프로토타이핑에 탁월
- ✅ 클래스 기반이므로 스타일 중복 제거 및 정적 최적화에 강함
- ✅
@apply,variants,plugins등으로 확장성도 뛰어남 - ✅ JIT 컴파일로 사용된 클래스만 CSS로 번들됨 → 매우 가볍고 빠름
단점
- ❌ class 속성이 너무 길어져 가독성이 떨어질 수 있음
- ❌ 초기 러닝커브 존재 (클래스 이름 암기, 커스터마이징 등)
- ❌ 커스텀 디자인 시스템을 만들 때 추상화 부족 (컴포넌트화 직접 필요)
실제 사용 예: Button 컴포넌트 비교
| 방식 | 스타일 분리 여부 | 조건부 스타일링 | 초기 학습 난이도 | 성능 | 확장성 |
|---|---|---|---|---|---|
| Styled Components | ❌ (JSX 내 선언) | 매우 쉬움 | 보통 | ❌ 런타임 오버헤드 | 중간 |
| Sass / SCSS | ⭕ (분리된 파일) | 제한적 | 낮음 | ⭕ 빠름 | 중간 |
| Tailwind CSS | ❌ (class 속성) | 쉬움 | 보통 | ⭕ 매우 빠름 | ⭕ 매우 높음 |
Next.js에 가장 잘 어울리는 방식은?
✅ Tailwind CSS
Next.js의 빠른 SSR, 정적 최적화, 경량 번들링 등과 매우 잘 맞습니다.
app/디렉토리 기반의 모듈 단위 개발에 Tailwind의 utility-first 접근이 잘 어울림JIT 모드로 인해 사용하지 않는 스타일은 번들에서 제거되어 불필요한 CSS가 없음- Headless UI, ShadCN, Radix UI 등과도 높은 호환성
그럼 Styled Components는 쓸 수 없을까?
물론 사용할 수 있습니다. 특히 다음과 같은 경우에는 적합합니다.
- 컴포넌트 단위로 조건부 스타일이 많이 필요한 복잡한 UI
- 디자인 시스템을 기반으로 한 Theme 기반 스타일링
- Gatsby, CRA 기반 프로젝트에서 이전된 코드베이스
하지만 Next.js에서는 SSR 처리와 번들링 최적화를 고려해 Tailwind를 선택하는 것이 유지보수와 성능 면에서 더 유리한 선택이 될 수 있습니다.
결론
각 스타일링 방식은 고유한 장단점이 있습니다. Next.js와의 궁합을 고려할 때는 다음처럼 요약할 수 있습니다.
| 선택 기준 | 추천 방식 |
|---|---|
| 빠른 개발, 가벼운 번들 | Tailwind CSS |
| 기존 Sass 기반 코드 유지 | Sass/SCSS |
| 컴포넌트 기반 스타일 제어 | Styled Components |
결론적으로, Tailwind CSS는 Next.js와 가장 시너지가 좋은 스타일링 방식이며, 디자인 시스템을 갖춘 대규모 프로젝트가 아니라면 Tailwind만으로도 충분한 확장성과 유지보수성을 확보할 수 있습니다.
✅ 간결함, 성능, 생산성 — 이 세 가지를 동시에 잡고 싶다면 Tailwind CSS가 현재 Next.js 프로젝트에 가장 적합한 선택입니다.