[CSS 라이브러리] Tailwind CSS 🆚 Emotion(CSS in JS)

시작하며...

지금까지 다양한 CSS 라이브러리를 사용해 보았다. 그중에서 가장 많이 사용해 본 라이브러리는 Tailwind CSS와 Emotion이다.

 

이 두 라이브러리를 성격이 많이 다른 라이브러리이다. 그래서 각 라이브러리의 특징을 알아보고 비교해 보면 좋을 거 같아 글을 작성하게 되었다.

 

1. Tailwind CSS

🥇 마음속 1위

(1) 우주윗미 회고록, (2) wiki viki 회고록

우선 Tailwind CSS가 나에게는 1위이다.

Tailwind CSS를 사용한 프로젝트의 회고록을 보았더니 정말 찬양할 정도를 Tailwind CSS를 좋아했다...ㅋㅋㅋㅋ

 

그래서 해당 라이브러리를 사용하면서 느낀 장점과 단점을 정리해 보았다.

 

Tailwind CSS 장점

1. 빠르고 간편한 반응형 디자인

Tailwind는 미디어쿼리를 사용하지 않고 sm: md: lg: 이런 prefix를 사용해서 빠르고 간단하게 반응형 디자인을 할 수 있다.

<div className="px-4 md:px-8 lg:px-12">

요즘 모바일 사용자가 늘어나고 있는 만큼 Mobile First로 쉽고 빠르게 개발할 수 있다.

 

2. 간편한 타이포그라피

tailwind.config.ts 설정파일에서 fontSize를 확장해서 디자인 시스템에 알맞은 타이포그라피를 간편하게 적용할 수 있다.

아래처럼 확장을 하면 "text-38-700" 이렇게 바로 사용할 수 있다.

타이포그라피

 

3. 간편한 애니메이션

클래스 기반으로 간단한 애니메이션을 추가할 수 있다.

<div className="opacity-0 transition-opacity duration-300 ease-in-out">

 

심지어 사용자 정의 애니메이션을 만들어 사용할 수도 있다!

애니메이션이 어떤 상태로 변화할지 키프레임을 명시하고, 해당 키프레임 이름으로 애니메이션 유틸리티 클래스를 만들어 사용했다.

사용자 정의 애니메이션

 

3가지 장점 이외에도 다양한 장점들이 있었다. (특히 반응형이랑 타이포그라피가 너무 편리했음!!)

 

Tailwind CSS 단점

1. 초기 러닝 커브

처음 Tailwind CSS를 사용하다 보면 유틸리티 클래스를 외우고 익숙해지기까지 시간이 걸린다. 나도 처음에 어려워서 계속 공식문서 찾아서 적용하고 개발하는데 시간이 오래 걸렸다.

 

그래서 처음 접해보는 경우 러닝 커브가 있고 익숙하지 않다는 단점이 있다.

 

2. 좋지 않은 가독성

유틸리티 클래스 기반이기 때문에 HTML 요소에 많은 클래스가 추가된다.

그래서 복잡하고 긴 클래스 이름이 생길 수 있고, 클래스가 길어지면 CSS 코드 관리가 어려워진다.

 

위에 장점으로 "3. 간편한 애니메이션"에 있는 이미지의 생략한 클래스 이름을 실제로 보면 엄청 길고 가독성이 좋지 않다...😂

짱길다...

 

이 외에도 대규모 프로젝트에서 유지보수 어려움, 동적 스타일 적용 어려움, 복잡한 커스터마이징, 코드 중복 발생 등... 단점이 있다.

(해당 단점들을 극복할 수 있는 방법 있긴 함)

 

Tailwind CSS 단점 해결

1. @apply 지시어 사용

@apply 지시어를 사용해서 긴 클래스를 CSS로 추상화할 수 있다.

그래서 스타일을 한 번 작성하고, 필요할 때마다 재사용할 수 있게 해 준다. 그러면 중복된 스타일을 방지하고, 가독성을 높일 수 있다.

 

2. 조건부 클래스 라이브러리 사용

복잡한 동적 스타일을 적용할 때엔 classNames 또는 clsx를 사용해서 조건부 클래스를 동적으로 적용할 수 있다.

clsx

 

2. Emotion (CSS in JS)

🥈 마음속 2위

사실 사용한 지 오래되어서 기억은 안 나지만...(거의 1년...?) 최대한 내가 예전에 사용했던 코드들을 보면서 글을 작성해 보았다.

 

Emotion (CSS in JS) 장점

1. 동적 스타일링

CSS in JS 답게 JavaScript로 스타일을 정의하고, props를 통해 동적으로 스타일을 간편하게 변경할 수 있다.

동적 스타일링

 

2. 스타일 재사용 및 모듈화

아래 코드처럼 공통적으로 사용되는 기본 스타일을 정의하고, 각 스타일에서 기본 스타일을 가져와 중복되는 기본 스타일 코드를 재사용할 수 있다.

그러면 동일한 스타일을 여러 번 작성할 필요가 없고, 스타일 중복을 줄일 수 있다.

 

뿐만 아니라 스타일이 모듈화 되었기 때문에 유지보수가 편해진다는 장점 또한 생긴다.

재사용 및 모듈화

 

3. 중첩 선택자 지원

중첩 선택자를 지원해서 자식 요소들의 스타일을 세부적으로 정의할 수 있다.

그러면 컴포넌트의 레이아웃이 일관되게 유지되고 응집력이 높아진다.

중첩선택자

 

Emotion (CSS in JS) 단점

1. 스타일 중복

반복되는 스타일을 여러 번 작성하여도 아무런 오류가 없기 때문에, 최종적으로 생성된 스타일 시트에 중복된 코드가 포함될 수 있다.

중복된 스타일

2. 일관된 스타일 정의 어려움

JavaScript 안에서 스타일을 적용하는 방식이기 때문에 사람마다 스타일을 작성하는 방식이 달라질 수 있다.

예를 들어 Emotion은 styled 컴포넌트를 사용하거나 css 함수를 사용할 수 있고 스타일을 한 파일에 두거나 분리하는 등 명확하게 정의하지 않으면 일관성이 사라지게 된다.

 

또한 타이포그라피나 색상 같은 경우, 직접 스타일을 지정할 수도 있고 공통 객체를 가져와 사용할 수도 있다. 그리고 공통 객체를 가져오는 일도 번거로울 수 있다.

 

당장 아래 코드만 봐도 어떤 건 타이포그라피를 가져와서 사용했고 어떤 건 그냥 스타일을 직접 작성했다.

흠..

 

Emotion 단점 해결

사실 실제 프로젝트에서는 위에서 발생한 단점을 해결하지는 못했지만, 위에서 발생한 문제를 해결하기 위해서 어떻게 할 수 있을지 생각해 보았다.

 

1. 중복 스타일 감지하기

styleLint와 같은 자동화 도구를 사용해서 스타일 중복을 검사하는 방법이 있을 것 같다고 생각이 들었다.

그래서 Emotion을 사용한 프로젝트에서 바로 styleLint 코드를 작성해 보았다.

{
  // 생략
  "rules": {
    // 생략
    "declaration-block-no-duplicate-properties": true
  }
}

 

중복된 속성을 검사하는 "declaration-block-no-duplicate-properties" 를 추가했더니, 정상적으로 중복된 값을 검사해 주고 저장하면 자동으로 중복된 값을 없애준다. 👍

중복된 속성

 

2. 구체적인 디자인 시스템 구축

당시에 타이포그라피, 색상 공통 객체가 있었음에도 내가 잘 사용하지 않았던 이유를 생각해 보았다.

바로 직관적이지 않고 구체적이지 않은 디자인 시스템을 구축했기 때문이었다.

 

그래서 원하는 타이포그라피를 가져오고 싶어도 어떤 것을 사용해야 되는지 명확하지도 않았고, 공통 객체에 없는 타이포그라피도 있었다.

 

기술적인 내용은 아니지만 커뮤니케이션도 중요하다. 팀 내에서 스타일 작성 시 컨벤션을 정하고, 코드 리뷰에서 이에 대한 피드백을 주고받으면서 모두 일관된 스타일을 따를 수 있도록 해야 될 것 같다.

이름이 헷갈..

 

Tailwind CSS 🆚 Emotion (CSS in JS)

어떤 것이 성능이 더 좋을까?

각 라이브러리들을 사용해 보면서 느낀 장단점들을 정리해 보았다.

 

그렇다면 성능은 어떤 것이 더 좋을까?? 사실은 Tailwind CSS가 CSS in JS보다 성능이 좋다는 것은 이미 알고 있었다.

그런데 구체적으로 무슨 이유로 인해 Tailwind CSS가 더 좋은지는 모르고 있었기 때문에, 이번 글을 작성하면서 그 이유들을 찾아보게 되었다.

 

컴파일 타임 스타일링

Tailwind CSS는 개발 단계에서 유틸리티 클래스를 기반으로 미리 정적 CSS 파일을 생성한다. 

즉, text-red-500 같은 클래스는 이미 빌드 과정에서 CSS로 컴파일되기 때문에, 브라우저는 추가적인 계산 없이 이 CSS 파일을 해석하고 적용하면 된다.

 

반면 Emotion과 같은 CSS in JS는 스타일이 자바스크립트 코드와 함께 작성되기 때문에, 런타임에서 동적으로 CSS를 생성한다. 그래서 CPU와 메모리를 더 사용하게 되므로 동적인 스타일이 많으면 성능 문제가 생길 수 있다.

 

• Tailwind CSS: 미리 만들어진 CSS만 다운로드 → 브라우저가 바로 사용.
• Emotion: 자바스크립트 실행 후 CSS 생성 → 추가 작업 + 라이브러리 다운로드 필요.

네트워크 탭

이전에 Emotion을 사용했던 프로젝트를 보니 네트워크 탭에서 Emotion 파일이 보인다.

바로 런타임 동작 방식을 지원하기 때문에 Emotion 관련 자바스크립트 파일이 필요하기 때문이라고 한다.

 

런타임 비용

Tailwind CSS는 정적 CSS 파일을 사용해서 미리 준비된 스타일을 브라우저에게 전달하므로 런타임에 추가적인 스타일 생성 작업이 없다.

 

반면, Emotion과 같은 CSS in JS는 런타임에서 스타일을 생성하고 DOM에 삽입하는 과정에서 추가적인 작업이 필요하다. 특히, 동적으로 스타일을 생성하는 경우에 CPU와 메모리 소비가 증가한다.

 

이 밖에도 다양한 이유로 인해 Tailwind CSS가 Emotion보다 성능이 더 좋다.

 

어떤 것을 더 많이 사용할까?

npm trend

근 5년간 Tailwind CSS, Emotion, Styled Components의 다운로드 수를 비교해 보았다.

비교

Tailwind CSS의 다운로드 수가 점점 증가하여 현재에는 Tailwind CSS가 가장 많은 다운로드 수를 차지한 것을 확인할 수 있다.

 

채용 공고

채용공고

채용 공고 사이트에서 각 기술을 사용하는 회사의 개수를 살펴보았다. 결과는 Tailwind CSS가 제일 많았다.

 

요즘 Tailwind CSS의 인기가 빠르게 상승하고 있고, 아마 스타트업에서 자주 사용되는 것 같다.

 

어떤 상황에서 사용하면 좋을까?

Tailwind CSS가 많이 쓰이고 장점도 있지만 무조건 사용한다고 무조건적으로 장점이 있는 것은 아니다. 바로 상황에 따라 CSS in JS가 더 좋은 상황이 있고, Tailwind가 좋은 상황이 있다.

 

Tailwind CSS를 사용하면 좋은 상황

• 빠른 UI 프로토타이핑이 필요한 경우
• 일관된 디자인 시스템을 유지하고 싶은 경우
• 성능 최적화가 중요한 경우
• 복잡한 스타일링이 필요하지 않은 경우

 

CSS in JS를 사용하면 좋은 상황

• 동적 스타일링이 중요한 경우
• 컴포넌트 스타일을 캡슐화하고 싶은 경우
• 대규모 프로젝트인 경우
• CSS 유지보수가 중요한 경우

 

즉, Tailwind CSS 빠른 개발, 성능 최적화가 필요한 프로젝트에 적합하고 CSS in JS는 대규모 프로젝트, 컴포넌트 캡슐화가 중요한 프로젝트에 적합하다.

 

아직 대규모 프로젝트를 경험해 본 적이 없어 아직까진 Tailwind CSS가 편하지만 다음 프로젝트에서는 CSS in JS를 사용해보고 싶다.

 

마치며...

이번 글을 작성하면서 Tailwind CSS와 Emotion(CSS in JS)의 장단점을 비교하고, 각 라이브러리에 대해 다시 한번 정리해 볼 수 있었다.

 

Tailwind CSS는 빠른 개발과 성능 최적화가 필요한 프로젝트에서 유용한 도구라는 생각이 들었고, Emotion은 대규모 프로젝트나 동적 스타일링이 중요한 경우에 더 강점이 있다는 것을 깨달았다.

 

앞으로 프로젝트를 진행하면서 상황에 적합한 CSS 라이브러리를 선택하고, 그 라이브러리의 장점을 최대한 살릴 수 있도록 노력해야겠다고 다짐을 하게 되었다.

 

아직 대규모 프로젝트를 경험해 본 경험이 없어 Tailwind CSS가 편리하지만, 대규모 프로젝트에서도 CSS in JS를 제대로 활용할 수 있는 경험도 쌓아보고 싶다.

 

결론적으로 도구를 선택하는 것도 중요하지만, 어떻게 활용하느냐가 더 중요한 것 같긴 하다. 앞으로 각 라이브러리의 특징을 잘 고려하여 장점을 최대한 활용할 수 있는 방향으로 나아가야겠다.