소개
프론트엔드 개발자 커뮤니티는 기본적인 전통적인 CSS를 활용하고자 하는 그룹과 프로젝트에서 불필요한 코드를 제거하기 위해 테일윈드를 사용하고자 하는 그룹으로 나뉩니다. 그래서 테일윈드 CSS로 전환하는 것이 미래인지, 아니면 전통적인 CSS를 고수해야 하는지에 관해 논의해 보도록 하겠습니다.
다루는 주제들
– 테일윈드 CSS란 무엇인가
– 필수 사항
– 테일윈드 CSS의 장단점
– 기본 CSS와의 차이점
– 어떤 프로젝트에 사용해야 하는가
– 결론
테일윈드 CSS란?
테일윈드 CSS는 유틸리티 기반의 CSS 프레임워크로, 디자인 제작에 제한 없이 사용할 수 있는 저수준 CSS 유틸리티 클래스들을 제공합니다. 이를 통해 사용자가 커스텀 CSS를 작성하지 않고도 커스텀 디자인을 만들 수 있도록 지원합니다.
테일윈드 CSS 사용을 위한 필수 사항
테일윈드 CSS 사용 전에, 해당 프레임워크의 기능을 원활히 사용할 수 있도록 여러 필수 사항들이 있습니다. 몇 가지는 다음과 같습니다:
– HTML, 그 구조 및 작동 방식에 대한 좋은 지식
– CSS의 튼튼한 기반 지식 — 미디어 쿼리, 플렉스박스, 그리드 시스템
아래 예제는 두 접근법의 기본 차이를 보여 줍니다:
기본 CSS 사용:
<div className="flex-container">
<div>Container 1</div>
<div>Container 2</div>
<div>Container 3</div>
</div>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
color: red;
}테일윈드 CSS 사용:
<div className="flex justify-center items-center text-red">
<div>Container 1</div>
<div>Container 2</div>
<div>Container 3</div>
</div>보시다시피, 두 코드 세그먼트는 동일한 스타일링을 달성하지만 테일윈드 CSS는 더 적은 코드를 사용하며, 무엇보다 별도의 CSS 파일을 추가하여 스타일을 적용할 필요가 없습니다. 이는 개발자 경험을 개선하고 코드를 줄입니다.
테일윈드 CSS의 장점
속도단축: 테일윈드 CSS는 복잡한 레이아웃에 대해 CSS 작성을 더 빠르게 할 수 있습니다.
TailwindCSS
<div class="flex justify-center items-center">
<h1 class="text-3xl font-bold">This is a heading</h1>
</div>기존 CSS
<div style="display: flex; justify-content: center; align-items: center;">
<h1 style="font-size: 3rem; font-weight: bold;">This is a heading</h1>
</div>이전 예시에서 볼 수 있듯, TailwindCSS에서 더 적은 코드를 작성하는 것은 개발 시간을 대폭 줄일 수 있음을 명백하게 보여줍니다. 또한, 개발자가 CSS 클래스에 대한 변수 이름을 고안해 내야 하는 필요성을 제거하며, 이것은 개발 후반기에 구형 코드를 다시 접할 때 악몽이 될 수 있습니다.
일관성: 테일윈드 CSS는 디자인의 일관성을 팀 전체적으로 유지할 수 있게 도와줍니다.
기본 CSS는 코드 개발 접근 방식 측면에서 다양한 변동성을 가지고 있습니다. 예를 들어, 일부 개발자들은 폰트 크기에 px 대신 rem을 사용하는 것을 선호하는 반면, 어떤 개발자들은 16진수 코드 대신 RGB를 사용하기를 좋아합니다. 이러한 것들은 TailwindCSS에서 테마 색상과 폰트를 별도의 global.css 파일로 만들 수 있으며 필요할 경우 전통적인 CSS처럼 참조될 수 있어 극복할 수 있습니다.
/* tailwind.config.js */
theme: {
colors: {
primary: '#007bff',
secondary: '#6c757d',
},
fonts: {
sans: ['Roboto', 'sans-serif'],
},
}
/* global.css */
body {
font-family: var(--font-sans);
}
.btn {
background-color: var(--color-primary);
color: #fff;
}
<button class="btn">Click Me</button>이 예에서는 우리가 사용하고자 하는 색상과 폰트를 정의한 Tailwind CSS 테마 파일을 만들었습니다. 그런 다음 이 변수들을 우리의 글로벌 CSS 파일과 HTML 코드에서 참조할 수 있습니다. 이는 우리의 디자인이 전체 애플리케이션에 걸쳐 일관되게 유지되도록 돕습니다.
유연성: 테일윈드 CSS는 아주 유연하여, 단순하거나 복잡하거나 간에 다양한 종류의 디자인을 만들 수 있습니다.
Tailwind CSS의 또 다른 장점은 전통적인 CSS와 Bootstrap 패키지의 아무런 제어 없음과 너무 많은 제어 사이의 완벽한 중간 지점에 있다는 것입니다. 즉, 맞춤형 CSS의 제어력과 Bootstrap의 테마 및 보일러플레이트 코드의 완벽한 조화를 가지고 있어 UI가 템플릿 주도적인 모습보다 신선한 느낌을 줍니다.
<div class="flex flex-col items-center justify-between h-full">
<header class="flex flex-row items-center justify-between px-6 py-4">
<h1 class="text-xl font-bold">My App</h1>
<nav class="flex flex-row items-center justify-between">
<a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
<a href="#" class="text-gray-700 hover:text-gray-900">About</a>
<a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
</nav>
</header>
<main class="flex-1 overflow-y-auto">
<section class="px-6 py-4">
<h2 class="text-xl font-bold">This is my main content</h2>
<p>This is a paragraph of text.</p>
</section>
</main>
<footer class="flex flex-row items-center justify-between px-6 py-4">
<p class="text-gray-700">Copyright © 2023 My App</p>
<a href="#" class="text-gray-700 hover:text-gray-900">Privacy Policy</a>
</footer>
</div>이 예시는 Tailwind CSS를 사용하여 다양한 요소를 가진 복잡한 레이아웃을 만드는 방법을 보여줍니다. Tailwind CSS는 원하는대로 요소를 스타일링할 수 있는 다양한 CSS 클래스를 제공하므로, 애플리케이션의 디자인에 있어 많은 유연성을 제공합니다.
유지보수성: 테일윈드 CSS 코드는 일반적으로 전통적인 CSS 코드보다 유지보수하고 업데이트하기가 더 쉽습니다.
Tailwind 클래스는 미리 정의된 키워드를 사용하기 때문에 코드는 유지보수가 가능하며 개발자는 이전 코드를 방문해서도 바로 스타일링을 시각적으로 이해할 수 있습니다.
<div class="flex justify-center items-center">
<h1 class="text-3xl font-bold">This is a heading</h1>
</div>
/* global.css */
.text-3xl {
font-size: 3rem;
}
.font-bold {
font-weight: bold;
}Tailwind CSS의 코드는 전통적인 CSS 코드보다 일반적으로 유지보수 및 업데이트하기가 더 쉽습니다. 이는 Tailwind CSS 클래스가 기술적이고 자체 문서화됐기 때문입니다. 예를 들어, `text-3xl` 클래스는 요소의 폰트 크기가 3rem에 해당한다는 것을 알려줍니다. 이를 통해 코드가 무엇을 하는지, 이전에 보지 못했더라도 이해하기 쉽습니다.
테일윈드 CSS의 단점
학습 곡선: 테일윈드 CSS는 특히 새로 접하는 개발자들에게 학습 곡선이 있습니다.
/* Tailwind CSS */
.flex.justify-center.items-center {
display: flex;
justify-content: center;
align-items: center;
}
/* Fundamental CSS */
.container {
display: flex;
justify-content: center;
align-items: center;
}Tailwind CSS 코드는 기본 CSS 코드보다 약간 더 장황합니다. 이는 Tailwind CSS 클래스가 더 특정하기 때문입니다. 예를 들어, `.flex.justify-center.items-center` 클래스는 요소가 어떻게 표시되어야 하는지 정확하게 알려줍니다. `.container` 클래스는 더 일반적입니다.
파일 크기: 테일윈드 CSS는 CSS 파일 크기를 증가시킬 수 있지만, 축소 및 gzip 압축으로 완화할 수 있습니다.
/* Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
font-family: sans-serif;
}
.btn {
background-color: blue;
color: white;
padding: 10px;
}
/* Fundamental CSS */
body {
font-family: sans-serif;
}
.btn {
background-color: blue;
color: white;
padding: 10px;
}Tailwind CSS 코드는 기본 CSS 코드보다 약간 크기가 큽니다. 이는 Tailwind CSS가 다수의 사전 구축된 CSS 클래스를 포함하기 때문입니다. 그러나 파일 크기 차이는 그다지 크지 않으며, 축소하고 gzip 압축을 통해 완화할 수 있습니다.
벤더 종속성: 테일윈드 CSS 사용을 시작하면 다른 CSS 프레임워크나 라이브러리로 전환하기 어려울 수 있습니다.
이는 Tailwind CSS가 매우 포괄적인 프레임워크이기 때문입니다. 요소의 모든 측면을 스타일링하기 위한 클래스를 제공합니다. 다른 프레임워크로 전환하면 모든 CSS 코드를 다시 작성해야 할 것입니다.
코드 가독성: 테일윈드CSS는 클래스 이름이 길어 HTML과 JSX 파일의 가독성을 해칩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<h1>My App</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<section>
<h2>This is my main content</h2>
<p>This is a paragraph of text.</p>
</section>
</main>
<footer>
<p>Copyright © 2023 My App</p>
<a href="#">Privacy Policy</a>
</footer>
</div>
</body>
</html>
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
header,
footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 6px;
}
header {
padding-top: 4px;
}
footer {
padding-bottom: 4px;
}
nav {
display: flex;
align-items: center;
}
nav a {
text-decoration: none;
color: #777;
&:hover {
color: #333;
}
}
h1,
h2 {
font-weight: bold;
}
section {
padding: 6px;
}<div class="flex flex-col items-center justify-between h-full">
<header class="flex flex-row items-center justify-between px-6 py-4">
<h1 class="text-xl font-bold">My App</h1>
<nav class="flex flex-row items-center justify-between">
<a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
<a href="#" class="text-gray-700 hover:text-gray-900">About</a>
<a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
</nav>
</header>
<main class="flex-1 overflow-y-auto">
<section class="px-6 py-4">
<h2 class="text-xl font-bold">This is my main content</h2>
<p>This is a paragraph of text.</p>
</section>
</main>
<footer class="flex flex-row items-center justify-between px-6 py-4">
<p class="text-gray-700">Copyright © 2023 My App</p>
<a href="#" class="text-gray-700 hover:text-gray-900">Privacy Policy</a>
</footer>
</div>TailwindCSS는 HTML과 JSX 파일의 코드 읽기 용이성을 해칩니다. 긴 클래스 이름은 HTML과 CSS 파일이 분리된 경우에 있던 깔끔한 코드를 방해합니다.
TailwindCSS와 기본 CSS의 차이점
전통적인 CSS는 페이지의 각 요소를 스타일링하기 위해 맞춤 CSS 규칙을 작성하는 보다 근본적인 접근 방식입니다. 반면에 Tailwind CSS는 유틸리티-우선 접근 방식으로, 사전 구축된 CSS 클래스를 사용하여 요소를 스타일링합니다.
또 다른 주요 차이점은 Tailwind CSS가 매우 반응하는 반면, 전통적인 CSS는 디자인을 반응형으로 만들려면 추가 CSS를 작성해야 한다는 것입니다. Tailwind CSS는 전화기부터 데스크탑에 이르기까지 모든 기기에서 디자인이 좋아 보일 것을 의미합니다.
어떤 프로젝트에 Tailwind를 사용해야 할까요?
Tailwind CSS는 다음과 같은 다양한 프로젝트에 적합한 선택입니다:
– 소규모 정적 웹사이트: Tailwind CSS는 작은 정적 웹사이트를 빠르고 쉽게 구축하는 데 도움을 줄 수 있습니다.
– 대규모 동적 웹사이트: Tailwind CSS는 또한 대규모 동적 웹사이트의 구축에 사용될 수 있지만, 복잡한 프로젝트의 경우 학습 곡선이 높다는 점을 유의해야 합니다.
– 웹 애플리케이션: 맞춤형 디자인이 필요한 경우 웹 애플리케이션을 구축하기 위한 좋은 선택입니다.
주목할 점은, 프론트엔드 프레임워크를 사용하지 않고 전체 스택 프로젝트에 Tailwind를 사용하는 경우, TailwindCSS가 가장 적합하지 않을 수도 있다는 것입니다. 프론트엔드가 순수한 HTML, CSS, JS라면 컴포넌트의 재사용성이 없어 불필요하게 반복되는 코드가 생성되고 긴 클래스 이름으로 인해 유지보수가 어려워지고 개발 경험 및 개발 속도에 타격을 줄 수 있습니다.
프론트엔드 프레임워크를 사용하지 않는 전체 스택 프로젝트를 진행 중이라면 Bootstrap이나 Foundation과 같은 다른 CSS 프레임워크 사용을 고려하고 싶을 수 있습니다. 이러한 프레임워크들은 애플리케이션 전체에 재사용할 수 있는 사전 제작된 컴포넌트 세트를 제공합니다. 이것은 더 적은 코드를 작성하는 데 도움을 주고 더 일관된 디자인을 만드는 데 도움이 될 수 있습니다.
결론
Tailwind CSS는 CSS를 더 빠르게 작성하고 더 일관되고 유지보수하기 쉬운 디자인을 만드는 데 도움이 되는 강력한 도구입니다. 그러나 프로젝트에 사용 여부를 결정하기 전에 장단점을 신중히 고려해야 합니다.
추가 생각
Tailwind CSS는 비교적 새로운 프레임워크지만, 프론트엔드 개발자들 사이에서 빠르게 인기를 얻고 있습니다. 아직 진화하고 있지만 밝은 미래가 있습니다.
Tailwind CSS 사용을 고려하고 있다면, 작은 프로젝트로 시작하여 느낌을 얻는 것이 좋습니다. 기본 사항을 익히면 더 크고 복잡한 프로젝트에 사용할 수 있습니다.
또한 Tailwind CSS 문서와 커뮤니티 포럼을 확인하는 것을 추천합니다. Tailwind CSS를 배우고 사용하는 데 도움이 되는 많은 리소스가 있습니다.