tailwind로 만드는 이력서

이 글은 개인적인 회고를 위해 작성된 글입니다.

tailwind-css 를 사용하여 이력서를 만들었습니다.

Github
Demo page
코드 훈수(리뷰^^) 환영

Utility-first 프레임워크를 처음 사용해보게 되어 어려웠는데 짧은 시간이지만 tailwind로 이력서를 만들며 느꼈던 장단점들을 간략하게 적어보겠습니다.

💡Tailwind CSS

‘HTML을 떠나지 않고 빠르게 빌드하는 모던 웹사이트’

CSS UI Framework(ex Bootstrap)와 달리 미리 설계된 구성 요소들이 없어서 전반적으로 가볍고 사용자가 입맛에 맞게 커스터마이징하기 쉽게 저 수준의 Utility class(자체적으로 설명 가능한 단일 목적의 CSS 클래스, 다시 말해 한 class는 하나의 의미만 갖는 것)를 제공합니다.

🤔 내가 느낀 장단점

장점

1. 클래스 네이밍을 고민하지 않아도 된다 -> 협업에 도움이 된다.
2. 자주 사용되는 속성들을 외우면 작업 속도가 아주 빨라진다.
3. 오직 HTML 파일만 보면 된다.
4. 생각보다 스타일적용에 제한이 없다. 반응형작업에 용이해보인다.

단점

1. 직접 네이밍한 클래스명이 없기때문에 수정할 부분을 찾기가 어렵다. (주석필수)
2. 가독성이 '매우' 떨어진다.
3. 충분한 CSS경험이 없으면 오히려 어렵게 느껴질 것 같다. 초반에는 구현에 들인 시간보다 속성검색에 들인 시간이 더 많은 것 같다...

이정도가 제가 tailwind를 사용하며 직접 느끼게된 장단점인데 대표적인
tailwind의 장점으로 협업과 유지보수에 있어서 용이함을 꼽는다고 합니다.
고작 하루정도의 얕은 학습 수준이라 그런지 아직 유지보수에 용이함이 와닿지는 않는...😅

개인적인 생각으로는 페이지내의 여러번 재사용되는 스타일은 전역으로 만든 후 호출하는 방식이나 그부분만 일반CSS처리를 하는게 어떨까? 싶습니다. 가독성문제가 해결되지 않으면 단점이 더 크게 다가오는 tailwind인 것 같습니다..!

계획

반응형에 대한 공부가 아직 부족한 상태이고 기한이 정해져있던 과제인지라 디자인구현에서 그쳤는데 반응형으로 리팩토링 해볼 예정입니다!