Tailwind, ShadCN 개념 정리

💻 Frontend/CSS, Tailwind

Tailwind, ShadCN 개념 정리

hjinn0813 2024. 9. 27. 11:00

728x90

올해 7~8월 뉴딜 수업을 들을 때, 다른 동기님들이 Tailwind로 프로젝트 진행하는걸 봤다. 당시에도 요즘 Tailwind가 떠오르고 있다는 얘기를 들어서 배워야겠다고 생각했는데, 며칠전 회사 동료분이 같은 얘기를 하면서 본인의 개인 프로젝트에서 어떻게 적용했는지 코드를 보여주셨다. 그리고 추가적으로 ShadCN 이라는 UI 라이브러리를 알려주셨는데, 이게 React와 Tailwind를 기반으로 하는 기술이었다. 동료분이 코드를 보여주시며 본인도 유튜브로 몇 시간 만에 배웠다고 하셔서, 이제는 진짜 Tailwind를 공부해볼 생각으로 본격적인 학습 전에 개념 정리부터 해본다.

Tailwind CSS

유틸리티 기반 CSS 프레임워크.

CSS 클래스 이름을 미리 제공해주어 웹 페이지의 스타일을 빠르게 적용할 수 있게 도와주는 도구.

Tailwind는 HTML 요소에 직접 클래스를 추가해 스타일을 지정하고, 원하는 스타일을 맞출 수 있도록 만들어졌다.

Tailwind 특징

유틸리티 클래스: Tailwind는 아주 작은 단위의 CSS 속성을 나타내는 클래스를 제공한다. 예를 들어, p-4는 padding을 1rem(16px)으로 설정하는 클래스, bg-blue-500는 배경색을 파란색으로 설정하는 클래스이다.
모듈화된 스타일링: CSS를 미리 설계할 필요 없이, HTML에서 바로 스타일을 지정할 수 있어서, 유지보수와 확장이 쉽다.
커스터마이즈 가능: Tailwind 설정 파일(tailwind.config.js)을 사용해 기본 스타일이나 색상 팔레트를 쉽게 변경할 수 있다.

/* 유틸리티 클래스: 짧고 간단한 CSS 속성을 가진 클래스 */

/* 배경색 */
.bg-blue { background-color: blue; }
.bg-green {  background-color: green; }

/* 텍스트 색상 */
.text-white { color: white; }
.text-black { color: black; }

/* 폰트 크기 */
.text-sm { font-size: 12px; }
.text-lg { font-size: 18px; }
.text-xl { font-size: 24px; }

/* 폰트 굵기 */
.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.font-light { font-weight: 300; }

/* 패딩 */
.p-2 { padding: 8px; }
.p-4 { padding: 16px; }

/* 텍스트 정렬 */
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 모서리 둥글게 */
.rounded { border-radius: 8px; }
.rounded-full { border-radius: 50%; }

<!-- 유틸리티 클래스 사용 예시 -->
<body>
  <div class="p-4 bg-blue text-white text-center rounded">
    <h1 class="text-xl font-bold">안녕하세요!</h1>
    <p class="text-lg font-light">이 버튼을 클릭해 보세요:</p>
    <button class="bg-green text-black p-2 font-normal rounded-full">
      클릭하세요
    </button>
  </div>
</body>
</html>

Tailwind 장/단점

장점

- 빠른 개발: 기존 CSS처럼 스타일 시트를 따로 작성하지 않고 HTML 파일에 바로 클래스를 추가하면 되니까 빠른 스타일링이 가능하다.
- 재사용성: 모든 스타일이 작은 유틸리티 클래스로 쪼개져 있어, 같은 클래스를 여러 곳에서 재사용할 수 있다.
- 커스터마이즈가 쉬움: Tailwind 설정 파일(tailwind.config.js)로 자신만의 디자인 시스템을 만들 수 있다.
- 불필요한 CSS 최소화: 실제로 사용된 클래스들만 CSS 파일에 포함되기 때문에, 배포 시 CSS 파일의 크기가 매우 작다.

단점

- HTML 코드의 복잡성: 많은 클래스를 HTML에 직접 써야 하기 때문에, 클래스가 많아지면 HTML 코드가 길고 복잡하게 보일 수 있다.
- CSS 개념 약화: Tailwind만 사용하다 보면 기본 CSS 설계 능력이 약해질 수 있다는 우려도 있다.
- 반복 작업: 특정 스타일을 여러 곳에서 반복적으로 사용하면 클래스도 계속 반복해서 작성해야 한다. 이를 보완하기 위해 컴포넌트 스타일링 도구나 Tailwind의 기능을 잘 활용해야 한다.

쉽게 말해, Tailwind는 스타일 작업을 훨씬 빠르고 효율적으로 만들지만, 구조를 잘 잡아야 코드가 지저분해지지 않는 CSS 프레임워크이다.

Tailwind와 Sass 장/단점 비교

사실 나는 Tailwind가 HTML 코드에 클래스명을 추가해서 스타일링하는 CSS 프레임워크라는 것은 알고 있었다. VS code의 화면을 분할하지 않고, HTML에서 바로 스타일링하고 결과를 확인할 수 있다는 부분은 장점이지만, 개인적으로 Tailwind의 클래스명이 많아질수록 HTML 코드가 길어져서 가독성이 떨어지는 느낌인게 가장 큰 단점이라고 생각했다. 그리하여 내가 직접 사용해보며 장점을 많이 느꼈던 Sass와 비교해달라고 chatGPT에게 요청했다.😝

/	Tailwind	Sass
장점	- 빠른 개발: 기존 CSS처럼 스타일 시트를 따로 작성하지 않고 HTML 파일에 바로 클래스를 추가하면 되니까 빠른 스타일링이 가능하다. - 재사용성: 모든 스타일이 작은 유틸리티 클래스로 쪼개져 있어서, 같은 클래스를 여러 곳에서 재사용할 수 있다. - 커스터마이즈가 쉬움: Tailwind 설정 파일(tailwind.config.js)을 사용해 자신만의 디자인 시스템을 만들 수 있다. - 불필요한 CSS 최소화: 실제로 사용된 클래스들만 CSS 파일에 포함되기 때문에, 배포 시 CSS 파일의 크기가 매우 작다.	- 변수와 믹스인: 변수와 믹스인으로 스타일을 쉽게 재사용하고 관리할 수 있다. 루트 파일에서 설정하면 여러 파일에서 활용 가능하다. - 중첩 규칙: CSS 규칙을 중첩해서 작성할 수 있어 구조적으로 더 읽기 쉬운 코드 작성이 가능하다. - 일관된 스타일링: 변수와 믹스인을 통해 전반적인 스타일을 통일성 있게 관리할 수 있다. - 기존 CSS에 통합: 기존의 CSS와 쉽게 통합할 수 있어, 기존 프로젝트에 도입하기 용이하다.
단점	- HTML 코드의 복잡성: 많은 클래스를 HTML에 직접 써야 하기 때문에, 클래스가 많아지면 HTML 코드가 길고 복잡하게 보일 수 있다. - CSS 개념 약화: Tailwind만 사용하다 보면 기본 CSS 설계 능력이 약해질 수 있다는 우려도 있다. - 반복 작업: 특정 스타일을 여러 곳에서 반복적으로 사용하면 클래스도 계속 반복해서 작성해야 한다. 이를 보완하기 위해 컴포넌트 스타일링 도구나 Tailwind의 기능을 잘 활용해야 한다.	- 학습 곡선: Sass의 고급 기능들을 잘 활용하기 위해서는 학습이 필요하다. - 빌드 과정 필요: Sass 파일을 CSS로 컴파일해야 하므로, 개발 환경 세팅이 다소 복잡할 수 있다. - CSS 파일 크기 증가: 모든 스타일이 작성되므로, 결과적으로 CSS 파일 크기가 커질 수 있다.

Tailwind CSS → 빠른 개발과 작은 CSS 파일 크기를 중시하는 프로젝트에 적합.
Sass → 유연성, 재사용성, 일관성을 중시하는 대규모 프로젝트에 적합.
=====
두 기술의 장/단점 비교에서 'CSS 파일 크기'가 언급되었는데, 프로젝트의 크기에 따라서 둘 다 파일 크기가 몇 백 kb가 될 수 있다. 결국 각각의 프로젝트 요구사항에 맞게 적합한 도구를 선택하는 것이 중요하다.

※ Sass 학습 기록: https://hjinn0813.tistory.com/46

[코딩온] 프론트엔드 입문 Day 45~46 (React SASS)

지난 포스팅에 이어서, 이번 포스팅에서는 Sass에 대해 설명하려고 한다.SASS Syntactically Awesome Style Sheets.이전 포스팅에서 잠깐 설명한 것처럼, CSS 전처리기 종류 중 하나로서 기존의 복잡했던 CSS 작

hjinn0813.tistory.com

Tailwind CSS 코드 관리 방법

그리고, Tailwind를 사용하면 HTML 코드가 길어져서 가독성이 떨어지는 부분의 해결방안도 chatGPT에게 물어봤다.

컴포넌트화: Tailwind를 사용할 때, 일반적으로 여러 클래스를 조합하여 재사용 가능한 컴포넌트를 만들게 된다. 예를 들어, 버튼이나 카드 같은 컴포넌트를 만들어 여러 곳에서 사용할 수 있다.
HTML 템플릿 언어 사용: Next.js, Vue.js, React와 같은 현대적인 프레임워크와 함께 사용하면, JSX 또는 템플릿 언어를 통해 더 간결한 코드 구조를 유지할 수 있다. 클래스 이름이 길어져도 컴포넌트를 통해 코드의 가독성을 높일 수 있다.
JIT 모드 사용: Tailwind의 JIT(Just-In-Time) 모드를 사용하면, 사용자가 작성하는 클래스에 기반해 필요한 CSS만 생성하므로, 코드의 양을 줄일 수 있다. 이를 통해 더 긴 클래스 이름을 관리하는 데 도움이 될 수 있다.
클래스 그룹화: 여러 클래스를 조합하여 특정 스타일을 가진 클래스를 그룹화하면, HTML 코드가 길어지지 않고도 가독성을 유지할 수 있다.

Tailwind CSS는 장기적으로 볼 때 효율적이고 일관된 스타일링을 제공하는 프레임워크이다. 사용 방법에 따라 HTML 코드의 복잡성을 관리할 수 있는 방법이 많다.

ShadCN

Tailwind CSS와 React 컴포넌트 기반의 UI 라이브러리 또는 프레임워크. Next.js와 TypeScript 사용을 권장한다.

Shadcn.dev라는 웹사이트에서 제공되며, 사용자들이 빠르고 일관된 UI를 구축할 수 있도록 돕기 위해 만들어졌다. 기존 UI 라이브러리와 다르게, Tailwind와 React를 중심으로 컴포넌트를 제공해 간편하게 사용할 수 있도록 설계되었다.

ShadCN 특징

Tailwind CSS와 React 기반: ShadCN은 Tailwind CSS의 유틸리티 클래스들을 활용해 컴포넌트를 디자인하고, React 컴포넌트를 통해 유연한 사용자 인터페이스를 구축하는 방식을 활용한다.
모듈화된 컴포넌트: 다양한 컴포넌트들이 모듈화되어 있어, 프로젝트 요구사항에 맞게 조합하여 사용할 수 있다. 버튼, 입력 필드, 모달 등 다양한 UI 요소를 제공한다.
커스터마이즈 가능: Tailwind의 설정 파일을 통해 ShadCN 컴포넌트의 스타일을 쉽게 수정할 수 있다. 기본 제공 스타일을 필요에 맞게 변경할 수 있다는 의미.
업무 생산성 증가: 일관된 디자인 시스템과 기본 컴포넌트들이 제공되기 때문에, 개발자들이 스타일이나 UI 디자인에 신경 쓰는 시간을 줄이고 기능 개발에 집중할 수 있다.

ShadCN 장/단점

장점

- 빠른 개발: 제공되는 다양한 컴포넌트들을 활용해 프로젝트를 빠르게 시작할 수 있다. Tailwind와 React의 장점을 극대화하여 빠른 UI 구축이 가능하다.
- 유연한 디자인: 기본 컴포넌트들이 있지만, 필요에 따라 Tailwind를 활용해 쉽게 디자인을 수정하고 커스터마이즈할 수 있다.
- 확장성: 모듈화된 컴포넌트 구조로 원하는 컴포넌트만 선택해 사용 가능하고, Tailwind 설정을 통해 자유롭게 커스터마이즈가 가능해 확장성이 뛰어나다.

단점

- Tailwind 의존성: Tailwind를 모르거나 익숙하지 않은 사람들에게는 진입 장벽이 있을 수 있다. Tailwind CSS에 대한 기본적인 이해가 필요하다.
- 스타일 복잡성 증가: Tailwind와 함께 사용하면 HTML 코드에 많은 클래스가 추가되어 코드가 복잡해질 수 있다. 그러므로 CSS와 Tailwind의 구조를 잘 이해해야 한다.
- 커스터마이즈의 부담: Tailwind와 함께 사용하면서 모든 스타일을 직접 제어해야 하므로, 대규모 프로젝트에서는 커스터마이즈 작업이 부담될 수 있다.

ShadCN 사용방법

설치: 프로젝트에 ShadCN을 설치하고 필요한 컴포넌트를 불러와 사용한다. Tailwind가 설치된 환경에서 React 컴포넌트를 import하여 원하는 UI를 빠르게 구성할 수 있다.
Tailwind 설정: Tailwind 설정 파일을 통해 ShadCN에서 제공하는 컴포넌트들의 스타일을 맞춤 설정할 수 있다.
컴포넌트 사용: React 프로젝트 내에서 ShadCN의 UI 컴포넌트를 불러와 그대로 사용하거나, Tailwind CSS를 사용해 쉽게 수정할 수 있다.

ShadCN 커스터마이즈 방법

Tailwind 설정 파일 수정: tailwind.config.js 파일에서 색상, 폰트, 간격 등의 기본 스타일을 변경하여 ShadCN 컴포넌트의 전반적인 스타일을 맞춤 설정 가능하다.
컴포넌트 스타일링: ShadCN에서 제공하는 컴포넌트에 Tailwind 유틸리티 클래스를 추가하거나 변경하여 직접 스타일을 수정할 수 있다. 기본 제공되는 클래스를 그대로 사용해도 되고, 원하는 스타일을 추가할 수도 있다.
테마 변경: 필요한 경우, 컴포넌트의 props나 Tailwind 클래스를 통해 다크 모드와 같은 다양한 테마를 쉽게 적용할 수 있다.
상속 및 오버라이드: 기본 컴포넌트를 상속하거나 오버라이드하여 새로운 스타일의 컴포넌트를 만들어 사용할 수 있다.

728x90

저작자표시 비영리 변경금지