FE ‐ Tailwind CSS 찐하게 사용해보기
프론트엔드 개발자들에게는 Tailwind CSS의 장점은 널리 퍼져있다. 덕분에 뭐 안 써본 사람은 있어도 한 번만 써본 사람은 없다는 등의 이야기도 많이 들리기도 한다. UI 개발 속도와 생산성이 향상된다는 이야기는 듣기만해도 꼭 써보고 싶다는 생각이 든다. 특히, 그러면서도 쉽게 퀄리티 좋은 디자인을 뽑아낼 수 있다는 사실이 가장 매력적이다. 보통 디자이너가 없는데 무언가를 빠르게 만들어야한다 싶으면 이 Tailwind CSS는 대체로 가장 매력적인 선택지가 될 수 있다고 생각한다.
그래서 우리는 왜 Tailwind CSS를 사용하게 되었을까? 이 프로젝트는 4주라는 짧은 기간 내에 완성을 해야하는 프로젝트였고, 기능 개발을 위해서는 UI 구성을 빠르게 하면 좋겠다고 생각했다. 이런 상황에서 TailwindCSS는 탐스러운 사과 같이 느껴졌다. 웹 프론트엔드 팀원 3명 중 2명이 사용한 경험이 있고 나머지 1명은 Bootstrap을 사용해본 경험이 있었다. TailwindCSS의 유틸리티 클래스 특성상 Bootstrap과 같은 라이브러리를 사용해보았다면 쉽게 배울 수 있다는 점까지 마치 Tailwind CSS를 쓰라고 부추기고 있었고, 우리는 Tailwind CSS를 사용하게 되었다. 하지만 섣부른 선택이었을지도...?
먼저 Tailwind CSS를 사용하기 위해 설정을 진행해주었다. 우리 프로젝트는 React+Vite를 사용하는 프로젝트이므로 공식 문서의 Install Tailwind CSS with Vite를 참고하여 설치하였다. Tailwind CSS의 공식 문서에 다양한 프레임 워크와 환경에서 사용하는 방법에 대해 기술이되어 있으니 Getting Started의 Installation 파트를 참고하면 좋을 것이다.
사용하기 이전에 TailwindCSS를 편하게 사용하기 위해서 Tailwind CSS IntelliSense 와 Tailwind CSS의 순서를 정렬하기 위해서 Headwind 플러그인을 VSCode에 설치하였다.
설치가 완료되었다면 디자인에 명시되어 있는 파운데이션을 Tailwind CSS에서 사용할 수 있도록 설정파일을 수정해주어야 한다. 파운데이션은 다음과 같았다.
이를 tailwind.config.js로 가져와서 작성해주었다. 디자인을 살펴보니 Best 텍스트에 사용되는 빨강색이 있어 그 색상까지 추가해주었다.
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'main-blue': ' #0E2B5C',
'sub-blue': '#4CA7CE',
'icon-yellow': '#FFA724',
'tag-skyblue': '#DEEBFF',
'grey-001': '#F2F4F7',
'grey-002': '#DBDEE3',
'grey-003': '#AEB1B7',
'grey-004': '#595C61',
'grey-black': '#202732',
'best-red': '#FF4D4D',
},
},
fontFamily: {
'hsans-head': ['Hyundai Sans Head KR', 'sans-serif'],
'hsans-text': ['Hyundai Sans Text KR', 'sans-serif'],
},
},
};그런데 이런 방식으로는 매번 Title1에 해당하는 글자를 사용할 때마다 다음과 같이 작성해주어야 한다.
<h1 className="text-22px font-hsans-head font-medium tracking-[0.66px]"></h1> Tailwind CSS의 가장 큰 단점은 길어지는 클래스명으로 인해 가독성이 떨어지고, 이에 따라 컴포넌트 및 DOM 구조를 알기 어렵다는 점이다. 이것은 프로젝트를 진행하면서 여실히 느낄 수 있는 단점이었는데, 디자인 파운데이션으로 명시되어있는 타이포그래피를 사용하는데에도 매번 이렇게 긴 코드를 입력할 수는 없었다.
따라서 이 부분을 utility 클래스로 따로 빼서 사용하고자 했고, 글로벌 스타일시트 파일인 index.css 파일에 layer 문법을 사용하여 유틸리티 클래스를 추가했다. Title1과 Title2는 font-weight가 500으로 고정이었기 때문에 font-weight를 추가하고 나머지는 font-family, font-size, letter-spacing을 설정하여 유틸리티 클래스를 추가해주었다.
@layer utilities {
.title1 {
font-family: 'Hyundai Sans Head KR';
font-size: 22px;
font-weight: 500;
letter-spacing: -0.66px;
}
/*...*/
.body1 {
font-family: 'Hyundai Sans Text KR';
font-size: 16px;
letter-spacing: -0.48px;
}
/*...*/
}이걸 만들고 난 직후에 이렇게 layer 문법을 통해서 추가해준 유틸리티 클래스의 경우 VSCode의 플러그인으로 자동완성이 되지 않는다는 것을 알게되었다. DX를 높이기 위해서 이를 플러그인으로 파일을 분리해서 플러그인을 import해 사용하기로 했다.
공식 문서를 살펴보고 plugin을 사용하는 방법에 대해서 공부한 후에 다음과 같이 typography 플러그인을 만들었다.
// /client/plugin/typography.js
import plugin from 'tailwindcss/plugin';
const typography = plugin(function ({ addUtilities }) {
addUtilities({
'.title1': {
'font-family': 'Hyundai Sans Head KR',
'font-size': '22px',
'font-weight': 500,
'letter-spacing': '-0.66px',
},
// ...
'.body1': {
'font-family': 'Hyundai Sans Text KR',
'font-size': '16px',
'letter-spacing': '-0.48px',
},
// ...
});
});
export default typography;// client/tailwind.config.js
/** @type {import('tailwindcss').Config} */
import typography from './plugins/typography';
export default {
//...
plugins: [typography],
}아래 사진처럼 자동 완성이 아주 잘 나오는 것을 볼 수 있었다.
그런데 문제는 또 있었다. 이번 프로젝트는 반응형이 없는 px 단위의 디자인 파일이 제공되었지만, 테일윈드의 기본 단위는 rem인데다가 w-4 → width: 1rem;과 같이 컴파일되기 때문에 디자인을 기반으로 UI를 만들기 위해서는 복잡한 계산이 필요했다. 예컨대, 320px 너비의 요소가 있을 경우 w-320px → w-20rem → w-80과 같은 과정을 머릿속에서 거쳐야 한다. 물론 피그마에서 제공하는 플러그인을 사용한다면 rem 단위로 계산하거나 TailwindCSS의 단위로 변환된 단위를 제공받을 수도 있었지만 375px과 같은 단위는 매번 arbitrary value인 w-[375px]과 같이 사용해야 했다. 이것은 꽤나 불편한 일이었기 때문에 width, height, gap, border-radius 등의 속성을 px 단위로 사용하는 플러그인을 만들기로 했다.
그러나 그냥 px 단위를 사용하기에는 접근성 측면에서 아쉬운 부분이 있었다. 그래서 카카오 엔터테인먼트 FE블로그의 글을 참고해서 pxr 단위를 만들어서 사용하도록 플러그인을 만들었다. 하지만 만들고 보니 프로젝트에 픽셀을 써야하는데 TailwindCSS를 쓰고 싶은 사람들이 있지 않을까? 생각해서 npm에 플러그인을 배포하기로 결심했다.
원래 내가 설정한 값만 사용할 수 있었지만, npm에 배포하기 위해서 옵션을 받아서 필요한 부분에 새로운 설정을 추가할 수 있게 만들어주었다.
배포 링크 : tailwindcss-pixel
이렇게까지 설정하고 난 이후에는, 거의 제약 없이 Tailwind CSS를 사용할 수 있을지 알았다. 하지만 어림도 없지! 여전히 Tailwind CSS에는 제약이 있었다. 아래는 우리 팀 코드리뷰 중 나왔던 Tailwind CSS의 아쉬운 점이다. 동적값을 사용할 때에는 Tailwind CSS는 취약했다. 애니메이션이 많은 기획 특성상 아쉽게도 인라인 CSS를 써야 해결할 수 있는 부분들이 있어 아쉬웠다.
