웹페이지 만들다가 갑자기 글자의 마진을 넣고 싶음 어떻게? 일단 심사숙고해.

CSS에서 클래스명 1 작명하시고요. CSS 파일 열어서 마진 어쩌구 그 작성하시고요.

그리고 다른 스타일과 충돌하진 않을지 걱정 같은 것도 한번 해주고요.

다시 HTML 파일로 들어오시면 되는데, 자 이런 허치꺼리 말고요.

다른 간편한 스타일링 방법이 있습니다. 유틸리티 클래스를 쓰는 거에요.

이게 뭐냐면 CSS 파일에다가 마진을, 자주 쓰는 걸 미리 다 이렇게 만들어 놓는 거예요.

그 다음에 내가 마진이 필요할 때마다 미리 만들어 놓았던 m-1만 이렇게 클래스명을 여기다 6병 더 하는 거에요.

그리고 또 예를 들어서 폰트 사이즈를 좀 주고 싶다. 그러면 폰트 사이즈를 자주 쓰는 걸 이렇게 미리 클래스 명으로 다 만들어두고, 그 다음에 여기다가 클래스 명만이 이렇게 딱 쓰는 거예요.

이것들을 유틸리티 클래스라고 합니다.

이런 식으로 유틸리티 클래스를 수백 개를 모아 놓은 라이브러리가 바로 테일윈드인데, 이거 설치해서 사용하시면 CSS 작성하는 속도가 딱 세 배 빨라집니다.

예를 들어서 간단한 내비게이션 메뉴 만들고 싶어.

그러면은 생 CSS는 이런 식으로 작성을 해야 되겠으나 테일윈드 쓰시면 이런 식으로 작성을 좀 매우 빠르게 끝낼 수 있고요.

뭐 예쁜 인풋과 버튼 같은 거 만들고 싶어.

그러면은 요런 식으로 CSS를 작성하는 게 아니라 그냥 이런 수기 코딩 끝이 쎄쎄쎄를 내가 직접 작성할 필요 없는 노 CSS2이라고 보시면 되고요.

물론 자주 쓰는 클래스 명 들을 좀 많이 외우고 있어야 이제 좀 작성 폭도 더 빠르겠지만 직관적이라 하루 이틀이면 금방 배우고 테일윈드와 비슷한 라이브러리들이 많습니다.

예를 들어서 역사와 전통의 부트스트랩 뭐 이런 것들이 있는데 기능은 똑같습니다.

완성된 컴포넌트 디자인 같은 것들도 다 제공을 하고요.

유틸리티 클래스도 둘 다 제공을 합니다. 근데 테일윈드가 제공하는 유틸리티 클래스명들이 더 많고 다양합니다.

뻑 라이브러리 용량이 크면 좀 문제 아닌가요? 맞고요. 로딩 속도가 좀 늦어질 수 있는데 테일윈드 설치법을 잘 따라 했으면 이제 필요 없는 CSS 부분은 알아서 다 제거를 해주기 때문에 라이브러리 실제 용량은 5kb부터 시작한다고 보시면 되겠습니다.

테일윈드에서 제공하는 클래스명들이 대충 어떤 것들이 있는지 살펴보면 타이포그래피 스페이싱 색상 플렉스 그리드 그리고 조건식 같은 것도 제공을 하는데 뭐 md라는 요런 걸 붙이면 브라우저 가로폭 768 픽셀 이상에서는 요거를 적용해 주고요.

그러면 반응형 디자인도 쉽게 만들 수 있겠죠. 그리고 이걸 붙이면 마우스 올렸을 때만 적용을 해 주고요.

어 이렇게 하면 또 다크 모드일 때만 또 요 스타일을 적용해 주고요.

그래서 써 보고 싶으면 테일윈드 홈페이지 가서 그대로 설치하시면 되고요 거기서 제공하는 클래스명들 외워 가지고 이제 개발 시작하시면 매우 빠르게 CSS 작성이 가능합니다.

작은데 단점들이 있습니다. 첫째 가독성인데요. 자 이거 보시면 HTML이 매우 더럽죠.

어쩔 수 없습니다. 솔루션이 하나가 있는데요. 길고 복잡한 클래스명들을 하나로 축약하는 문법을 테일윈드가 제공을 합니다.

자, 이거 갖다 쓰시면 되는 거에요. 아니면 직접 CSS 파일 열어서 그냥 옛날처럼 작성해도 무방하고요.

근데 생각보다 옛날 문법 쓸 일이 별로 없을 거에요.

둘째는 숙련도를 요구한다는 건데, 우리 팀의 신입 개발자들이 들어오면 이제 테일윈드 적응 기간 같은 게 필요하겠지.

보자. 근데 솔직히 멍청이만 아니면 하루 이틀이면 적응 끝날 것 같고요.

셋째, 문제는 스타일 재사용이 좀 어려울 수 있다는 건데요.

자, 예를 들어서 똑같은 디자인의 버튼이 여러 곳에 필요하면 어떻게 해?

일반 CSS를 사용하면 여기다가 버튼 디자인 하나 이렇게 클래스명으로 만들어두고요.

그다음에 요 버튼이 필요할 때마다 요 클래스명을 재사용하면 되는 거에.

작은데 테일윈드는 이 똑같은 디자인의 버튼이 여러 곳에 필요하면 이렇게 작성하면 됩니다.

이렇게 작성해 놓으면 나중에 버튼 디자인을 일괄적으로 변경하고 싶을 때 좀 어려울 수도 있고 그런 이슈들이 있겠지.

구조 작은데 요즘은 이렇게 작성하는 게 별로 상관이 없는 게 어차피 요즘은 뷰나 이런 거 쓰지 않습니까?

그런 거 쓰면 HTML 반복문을 이용해서 의 시킨 일을 막 재사용할 수도 뷰 컴포넌트 분 법을 이용해서 엑스포즈를 또 재사용할 수도 있기 때문에 코드가 많이 중복될 거라는 걱정은 별로 안 해도 됩니다.

그리고 이런 상황에서 테일윈드 쓴다고 코드가 이렇게 파일 용량이 매우 늘어나거나 그런 것도 아니고요.

자 그래가지고 카카오 프론트엔드 팀에서 테일윈드를 사용했던 후기 같은 것도 있고 그런데 이제 솔직히 말하면 단점들 때문에 호불호가 좀 갈릴 수 있습니다.

근데 내가 결과물을 좀 빠르게 만들어 내고 싶다, 그러면 이런 것들 쓰는 게 뭐 나쁘지 않을 수 있어요.

특히 외주 개발할 때 남의 사이트를 대충 만들어 주고 빨리 튀어야 되잖아요.

그럴 때는 이용할 것 같습니다.

아 저는 css 버리고 tailwind 씁니다