Tailwind CSS로 만드는 멋진 웹 UI 스타일링

CSS Frameworks Ranking in 2023

CSS Frameworks Ranking에서 현재까지 꾸준히 인기를 누리고 있고, 만족도 1위를 하고 있는 Tailwind CSS는 요즘 전 세계적으로 가장 핫한 CSS 프레임워크입니다. 핫한 이유 중에 가장 대표적인 것이 바로 유틸리티 클래스를 사용한 창의적인 스타일링을 할 수 있고 또한, 좋은 퀄리티의 디자인을 만들기 위한 작업 시간이 꽤 빠르다는 점이라 생각됩니다.

🎯Tailwind CSS 공식 웹사이트 : https://tailwindcss.com/

이미지 출처 : OSS Insight (https://ossinsight.io/collections/css-framework/)

Tailwind CSS(테일윈드 CSS)란?

Utility-First를 지향하는 CSS 프레임워크로 CSS 속성들을 클래스에 직관적으로 표시해서 빠르고 효율적으로 사용할 수 있습니다.

웹 UI 스타일링에 필요한 거의 모든 CSS 속성들이 built-in 클래스 형태로 미리 정해져 있어서 사용할 때 정해진 클래스을 잘 조합해요 사용하면 됩니다.

그래서 CSS 파일을 따로 보지 않고 HTML 파일만 보면서 스타일링 하기 때문에 집중도가 좋아지고 또 빠르게 작업할 수 있는 장점이 두드러집니다.

• Utility-First : 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링

• 예시로 div에 마진 4(1rem), 패딩 2(0.5rem), 글자들 중앙 정렬과 밑줄 그리기를 하려고 하면 클래스에 직관적으로 테일윈드가 미리 정해 놓은 클래스 이름 곧, 유틸리티 클래스를 넣으면 됩니다. <div class="m-4 p-2 text-center underline">...</div>

• 기존의 CSS 방식에서는 아래처럼 해왔습니다.

• div { margin: 1rem; padding: 0.5rem; text-align: center; text-decoration: underline; }

Tailwind CSS vs 일반 CSS 코드 비교

▲ 위의 UI를 만든다고 가정할 때

▲ 일반 CSS 방식의 코드

▲ Tailwind CSS 방식의 코드

Tailwind CSS 방식 스타일링은...

기존 CSS 방식은 HTML 파일과 CSS 파일을 번갈아 보면서 스타일링을 해야 하는 번거로움이 있지만 Tailwind CSS 방식으로 할 경우 위의 예시 코드처럼 HTML 코드만 보면서 스타일링을 합니다.

Tailwind CSS 방식은 같은 결과의 스타일링을 하면서도 기존 CSS 방식에 비해서 HTML 코드만 보기 때문에 집중도가 좋고 속도 역시 빠른 큰 장점을 가지고 있습니다.

코딩웍스가 강의 준비하기 전에 Tailwind CSS의 최대 단점으로 생각했던 것

코딩웍스가 Tailwind CSS 강의를 준비하기 1년 전 쯤 Tailwind CSS가 어떤 것인지 유튜브 영상들 몇개 보고 이런거구나 하면서 퍼블리셔로서 2가지 걱정을 했었습니다.

첫번째 걱정은 좋긴 한데 똑같은 클래스 네임들을 반복적으로 넣어주는 게 너무 비생산적이고 HTML도 지저분해지네.. 게다가 같은 클래스 네임들을 반복적으로 쓰니까 수정할 때 한번에 수정 못 하고 사용한 개수만큼 수정해야 하네... 실무에서 쓰기 좀 그렇지 않나... 라고 생각했습니다.

하지만 본격적으로 강의 준비하면서 공식사이트도 샅샅이 뒤지고 한글 자료는 거의 없어서 해외 자료, 해외 유튜버 강의를 보면서 좀 더 깊이 있게 학습하면서 위의 걱정들이 괜한 걱정이고 깊이 공부하지 않은 상태에서 섣불리 판단한 것으로 생각하게 되었습니다. 아래처럼 자식선택자를 사용해서 반복적인 클래스 네임들 사용을 최소화할 수 있습니다. Tailwind CSS 자식선택자 방식으로 수정할 경우 버튼들의 부모요소에서 한번만 수정하면 됩니다.

두번째 걱정은 일반 CSS는 스타일 하나 잘 만들어서 필요한 곳에 클래스 네임만 넣어서 쉽게 재사용할 수 있는데 Tailwind CSS는 그렇게 못하는 거 아닌가.. 그러면 실무에서 퍼블리싱 할 때 진짜 불편하겠는데 하는 걱정이었습니다. 곧, 스타일 재사용을 못하는 거라고 생각했습니다. 하지만 아래 예시처럼 Tailwind CSS의 컴포넌트를 사용해서 일반 CSS 스타일 재사용과 똑같이 사용할 수 있습니다.

저도 그랬지만 블로그나 짧은 유튜브 영상들에서 Tailwind CSS 단점들만 보시고 저처럼 외면하지 마시고 좀 더 깊게 공부하시면 꽤 괜찮은 CSS Frameworks 라는 것.. 세부적이고 창의적인 CSS 스타일링을 할 수 있다는 것 그리고 Tailwind CSS 사용 능력이 취업 이직에 아주 좋은 경쟁력이 된다는 것을 아셨으면 합니다.

다른 CSS 프레임워크와 차이점

Bootstrap이나 Semantic UI과 같은 기존의 CSS 프레임워크에서 디자인을 변경하려 해도 세부적인 수정이 어렵고 효율도 매우 떨어집니다. 간단한 디자인을 수정하려고 해도 개발자 도구를 통해서 어렵게 수정해야 합니다. 하지만 Tailwind CSS는 처음부터 자유도 높은 웹 UI 스타일링이 가능하도록 설계되어 있습니다.

곧, 기존의 CSS 프레임워크는 웹사이트가 다르지만 비슷한 디자인으로 보이지만, Tailwind CSS로 만들면 제작자에 따라 전혀 다른 웹사이트 스타일링이 가능합니다.

Tailwind CSS를 짧게 말하면..

'창의적인 스타일링 하면서

제작 시간을 단축하는 No.1 CSS 프레임워크'

몇 가지 단점에도 불구하고 너무나 큰 장점과 매력을 가진 Tailwind CSS

😊Tailwind CSS의 장점

• 신속한 개발로 개발 시간을 단축할 수 있다.

• 클래스 네임을 고민할 필요가 없다.

• HTML만 보면서 집중하면서 작업할 수 있다.

• 일관성 있는 디자인 시스템을 적용하기 좋음.

• 반응형 레이아웃 작업이 매우 간편하다.

• 컴포넌트 활용으로 지저분한 HTML 코드를 보완할 수 있다.

• 유지 관리하기 좋음.

• 프레임워크의 독립성(다른 프레임워크와 병용) ex) Bootstrap + Tailwind CSS

😞Tailwind CSS의 단점

• 일정 수준에 오르기 위해 시간과 노력이 필요해 Learning Curve가 있음.(특히 개발자들)

• 한국어로 제작된 학습 강의가 매우 부족해 정보를 찾기가 어려움.

  
  

• HTML 코드에 같은 클레스 네임들이 반복적으로 사용된다.
  - 이 부분은 강의를 통해 Tailwind CSS 방식 자식 & 자손 선택자로 해당 단점을 대폭 해소할 수 있음.

• 익숙해지기 전까지 초반 공식 문서 의존도 높은 편임.

• 편리하고 빠르지만 길어지는 HTML 코드로 코드 가독성이 많이 떨어짐.

• CLI 설치 환경을 만들고 컴파일해야 하는 번거로움이 있다.

Tailwind CSS 강의를 듣고 나면 이런 결과물을 만들 수 있어요

▲ 카드 UI 디자인(0) - Dark Mode 만들기(ft. SVG)

▲ table 태그와 div 태그를 사용한 예쁜 표 만들기(ft. 순서를 체크하는 가상클래스 이론)

📖 코딩웍스가 제작한 Tailwind CSS 교재(PDF)

Tailwind CSS 교재(PDF)는 총 45페이지로 구성되어 있습니다. Tailwind CSS 공식사이트에서 방대한 내용에서 꼭! 필요한 핵심만 알기 쉽게 정리했습니다. 이론 수업 내용 뿐만 아니라 초기 세팅부터 실전 프로젝트를 위한 CLI 설치 및 환경설정 그리고 HTML 와이어프레임 구조까지 Tailwind CSS Styling의 상세한 내용이 담겨 있습니다.

Tailwind CSS 공식사이트는 영문으로 되어 있고 특히 꼭 필요하지 않은 내용이 방대하게 있어서 Tailwind CSS 공식사이트를 통해 이론을 공부하게 되면 집중도가 떨어지고 학습 의욕이 꺽기기 쉽습니다.

📖 완성본 및 참고 자료 제공

이론 수업에서 핵심적인 항목과 실전 예제 완성본 그리고 발자 경력 이력서 & 포트폴리오 소개 반응형 웹 완성본을 제공합니다. 또한, 퍼블리싱을 위해 도움이 되는 웹사이트들도 정리해서 제공됩니다. 이론 수업은 코딩웍스가 자체 제작한 Tailwind CSS 교재(PDF)를 기준으로 수업합니다.

모든 자료는 [섹션 5. 수강생 참고자료 다운로드] 에서 다운로드 받으실 수 있습니다.