[김민태] 03. 클라이언트 앱 - Tailwind CSS

옛날에 함께 일했던 사수는 신기술에 대한 관심이 엄청났는데, 어느정도냐면 사수를 통해 들은 기술 관련 이야기를 구글 등에 검색해보면 한국 블로그는 찾아 볼 수도 없을 뿐더러 외국에서도 이제 막 관심이 커지면서 커뮤니티가 생성되고 있을 정도로 빠른 정보력을 가지고 있었다. 덕분에 N년 전 Tailwind CSS에 대해서 들었었는데, 현재도 여전하지만 당시에도 부트스트랩만 있으면 스타일은 아무것도 두렵지 않아! 하던 시절이라 흘려 듣고 말았다. (물론 사수와 함께 진행한 프로젝트는 부트스트랩 말고, 더 최신에 나온 스타일을 사용했다.)

 

시간이 흐른 지금 강의를 듣다가 Tailwind CSS가 언급되는 걸 보고 처음 들었을 때 진작 알아보고 공부해볼걸 이라는 아쉬움이 들어 더 늦지 않게 간단하게 정리해보려고 한다.

 

https://namu.wiki/w/Tailwind%20CSS

---

Tailwind CSS는 CSS 프레임워크 중 하나인데, CSS 프레임워크가 잘 와닿지 않는다면 상단에 살짝 언급한 부트스트랩과 같은 것이라고 생각하면 된다. (CSS 프레임워크 중 부동의 1위는 부트스트랩이다.) 말 그대로 쉽고 빠르게 스타일을 사용하여 디자인 적 요소를 추가시켜주는 것인데, 현재 22년 기준 Tailwind CSS는 부트스트랩 다음으로 가장 많이 사용하고, 각광받는 프레임워크라고 한다.

 

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

사실 사용방법은 공식 홈페이지에서 도큐멘트를 한 번 읽어본 후 자신이 원하는 스타일의 클래스를 복사 붙여넣기 하면 되니까 (여타 다른 CSS 프레임워크와 사용법이 똑같다)설명은 거두절미하고, 장단점에 대해 알아보려 한다.

 

장점
tailwind CSS의 장점이지만, 전체적인 CSS 프레임워크의 장점이라고 해도 무방할 것 같다.

1. 낮은 러닝커브
   상단에 언급한 것 처럼 도큐멘트를 읽어본 후, 자신이 원하는 스타일의 클래스를 복사/붙여넣기만 하면 예쁜 스타일이 그려지기 때문에 따로 문법을 배우거나 하는 등의 학습이 필요하지 않다. 물론 클래스가 뭔지 정도는 알아야 하지만 이는 몰라도 느낌으로 이해할 수 있으리라.
2. 재사용성 및 통일성
   사실 tailwind CSS를 쓴다는 자체가 타인이 만들어둔 스타일을 가져다 사용한다는 의미인데, 그 클래스를 계속해서 사용할 수 있기 때문에 재사용에 용이할 뿐 만 아니라 전체적인 결과물에 통일성이 생긴다.
3. 편리한 관리성
   프로젝트를 진행하다 보면 html,css,js 등 파일이 한가득 나오게 되는데, CSS의 파일 관리적 측면에서 (관리할 파일이 없기 때문에) 매우 유용하다.
4. 커스터마이징
   타인이 만들어둔 스타일을 가져다 쓸 때, 가장 까다로운 점은 내 프로젝트에 녹여들게 만드는 것이다. 이 것은 다른 CSS 프레임워크들과 차별되는 부분인데, tailwind CSS는 꽤 디테일하게 구성되어 있어서 커스터마이징이 비교적 쉬운 편이다.

단점

tailwind CSS의 단점이지만, 전체적인 CSS 프레임워크의 단점이라고 해도 무방할 것 같다.

1. 규칙 등의 학습 필요
   문법을 따로 공부하지 않는 대신 tailwind CSS에서 정의한 class명들을 외우지는 않더라도 인지하고 있는 편이 작업할 때 훨씬 수월하다. 스타일을 추측할 수 있는 어떠한 규칙에 의해서 class명을 선언하였을테지만 규칙을 발견하고 이해하는 것에 대한 학습이 필요하다. 때론 내 class 선언 스타일과 다르더라도 따라야만 한다.
2. html의 가독성
   원하는 스타일의 세부사항을 모든 마크업에 넣어야 하기 때문에 한 div당 적용되는 class가 두 줄 이상 차지하는 경우가 발생할 수도 있어 가독성이 떨어진다.