tailwind CSS

yoodeit·2023년 5월 7일

멋사 11기

목록 보기

1/2

Tailwind CSS에 대해 개인적으로 좀 찾아봤습니다.

요거는 대충 다 css 작성을 편리하게 해주는 것들입니다.
tailwindcss의 대안으로 windi css가 나온 것 같고
차크라 ui, xstyled는 리액트랑 어케어케 엮어 쓰는거라고 합디다.

테일윈드 관련한 영상(제가 좋아하는 코딩애플님 영상입니다.)
https://www.youtube.com/watch?v=--D4WMPEIZI

어차피 외워서 사용하는 경우보다는 그때그때 찾아쓰고, 전에 썼던 거 복붙해다가 쓰는 경우가 많을 것.
그러니 공식 문서를 적극 참고하고, 활용가능한 측면에서 좀 설명하자면...

1) Tailwind란 무엇인가

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

2) Tailwind의 장점

기본적으로 css 개발은 어떻게 하는가.
html에 클래스명 고민해서 지어주고, 그에 맞게 style.css 파일에서 이런저런 효과들을 넣어주는 식으로 진행한다. 이러면 매번 겹치지 않으면서도 어떠한 부분을 특정할 수 있는 이름을 짓기도 귀찮고, html과 css 파일을 띄워두고 왔다갔다 하면서 개발해야 하기 때문에 상당히 번거롭다.

그래서 utility class를 활용한 개발이 있다.
그걸 엄청 모아둔게 tailwind이다.
비슷한 걸로는 부트스트랩이 있고, 그걸 쓰는 경우도 있으나 테일윈드가 제공하는 유틸리티 클래스가 더 많다는 차이가 존재한다.

그러면 느려질 수 있는 거 아니냐 할 수도 있다.
맞긴 맞다. 근데 어차피 tailwind 설치방법을 잘 따라했으면 build 시에 안쓰는 유틸리티 클래스는 지워주기 때문에 최소 5kb부터 시작한다. 이러면 용량 문제도 딱히 이슈가 되지 않는다.

스타일코드도 html 안에 있기 때문에 css 파일과 html 파일을 왔다갔다하면서 개발해야 하는 불편함이 사라진다. 게다가 클래스명 짓는 것도 하다보면 일인데, 그런 걸 안해도 된다는 점에서 아주 편리함.
실제로 테일윈드를 사용해서 개발하면서 개발속도가 2배 이상 빨라졌다는 이야기가 있을 정도.

Intelli Sense 플러그인
Tailwind 자동완성을 지원하는 플러그인. 이걸 활용하면 공식 문서 없이도 금방 개발이 편리해진다.

3) Tailwind의 단점

직관적이고 편리하기는 하지만 못생겼다.
테일윈드로 디자인한다고 못생겨지는게 아니라, 코드 자체가 못생겼다.
뭔 말이냐면 가독성이 겁나게 떨어진단 소리다.

<div
  class="bg-primary-darken text-bold text-white inline-flex items-center p-4 rounded shadow-md"
>

평범한 div태그가 이따구로 길어진다...
전통적인 사용법으로 하면 class명만 대충 지어주고 나머지 잡다한 효과들은 style.css 에서 넣어주면 그만이었다.
근데 테일윈드로 개발하게 되면 모든 효과들을 다 태그 안에 때려박아야 하므로 자연스럽게 가독성은 개판이 된다.

그치만 우리가 서비스 출시할 것도 아니고, 해커톤 같은 걸 하는데 리팩토링이 필요할 일이 없지 않습니까. 남이 내 코드 읽을 일이 잘 없고, 뭐 물어볼 때는 내가 붙어서 설명해주면 되기 때문에 코드 가독성 이슈는 큰 문제가 되지 않을 것 같습니다. 서비스 출시할 거여도 얼른 만들어서 MVP 테스트 해보고 반응 좋으면 가독성까지 신경쓰고, 가볍고 빠르게 동작하는 프론트 코드 어차피 다시 짜야되지 않을까요 ?? 그러므로 그다지 큰 단점은 아니라고 생각합니다.

정 걱정이 된다면, 이런 식으로 card-text라는 클래스를 사용할 때마다 유틸리티 클래스 여러 개가 한번에 적용되도록, 다시 말하면 템플릿 같은 방법으로 사용해서 가독성도 해결도 가능하다.

그렇습니다. 카카오도 써요.

프론트엔드를 해본 적이 없어서 잘은 모르겠지만, 하나하나 사용법을 정리하는 건 큰 의미가 없을 것 같다. 어차피 정리해둬봤자 나중에 다시 사용법을 찾아봐야 하므로. 더군다나 chatGPT한테 물어보면 기깔나게 짜주기 때문에 그런 것까지 생각해보면 컨셉만 빠르게 이해하고, 하나라도 손으로 만들어보는 것이 이득이다.
그래서 뭘 하나 만들어봤음 좋겠다고 생각하고 있고, 개인적으로 가장 좋은 거는 블로근데(노션과 벨로그 말고 본인의 블로그를 직접 코딩해서 사용하는 멋진 사람이 되면 좋으니까), 그치만 블로그는 빡세니까 사전과제에 있던 자기소개서라던가 이력서라던가 하는 것만 조금 예쁘게 본인 입맛대로 만들어보는 게 어떨까 싶습니다. 실현가능한지 틈틈이 먼저 해보고, 리액트도 적용할 부분이 있는지 확인해보고 연락드리겠습니다.~~(회사일이랑 병행하는게 쉽지가 않네요...)~~

강의에서 소개된 것들만 간단히 정리.

(1) Responsive Design - Breakpoint

반응형 디자인이라는 말을 들어봤을 겁니다. 간단히 뭐 어떤 폼팩터로 사용하느냐에 따라서 그에 맞게 디자인되는 걸 의미하는 걸로 알고 있는데, 그런 걸 할 때 필요한 것은 조건문입니다.
A 사이즈라면 이렇게 표현해라.
B 사이즈라면 저렇게 표현해라.
이런 식으로 정해주어야 하기 때문이지요.

그걸 가능케 하는 기능이 breakpoint 부분인 것 같습니다.
이게 필요하시다면 공식문서 Core Concepts 부분의 Responsive Design을 참고하시면 되겠습니다.