Best CSS Frameworks for Web Publisher

안녕하세요. 코딩웍스입니다.

이번에 블로그 주제는 Best CSS Frameworks for Web Publisher 입니다.
CSS Frameworks(프레임웍)이라는게 생소하신 분들도 있으시겠지만... 대표적으로 부트스트랩(Bootstrap)과 같은 종류를 말합니다.

물론 부트스트랩이 No.1이라는 말은 아닙니다. CSS Frameworks 중에서 제일 먼저 생긴거라 CSS Frameworks하면 부트스트랩을 연상하게 하는 것 뿐이에요. 예를들면 조미료의 종류는 여러가지지만 '미원' 이라고 습관적으로 말하는 것과 같습니다.

CSS Frameworks을 종류별로 많이 다뤄본 경험이 퍼블리셔로소 경쟁력이 되지는 않습니다. CSS Frameworks 마다 각자의 특징이 있고 1개나 2개를 선정해서 자신에게 맞는 것을 최대한 잘 활용하는 것이 중요합니다. 그리고 자신이 쓰는 프레임워크가 최고다라고 강요하는건 정말 바보같은 것이라고 생각합니다. 자신에 맞는 것을 잘 쓰는게 베스트입니다.

CSS Frameworks은 퍼블리셔로서 1개 정도는 잘 사용하는 것이 있으면 좋다고 생각합니다.

저같은 경우에 Bootstrap, Semantic UI, UIKit 이렇게 3가지를 써봤습니다. 개인적인 의견이지만...

Bootstrap은 사용이 복잡하고 html 계층구조가 너무 복잡하고 지원하는 컴포넌트가 적은 것이 단점이라고 생각합니다.

Semantic UI는 상대적으로 사용하기 쉽고 무난하다고 생각합니다. 지원하는 컴포넌트도 여러가지 있어서 좋습니다.

UIKit은 제가 가장 선호하고 국비 퍼블리싱 학원에서 학생들에게 일주일 정도 수업하고 개인 포트폴리오에 활용하게 할 정도로 가장 좋아하는 CSS Frameworks 입니다. 사용하기 너무 쉽고, html 구조 간결하고 무엇보다도 지원하는 컴포넌트가 쓸만한게 너무 많습니다. CSS Frameworks 이 초보 퍼블리셔에게 사용하기 쉽지 않습니다. 하지만 UIKit은 학원에서 2~3달 퍼블리싱 배운 학생들도 잘 이해하고 활용할 수 있을 정도록 사용법이 너무 직관적이고 쉽습니다. 해보시면 아시겠지만 옵션 변경하는 것이 CSS 구문 적는 것과 규칙이 같습니다. 특히 좋은 점은 컴포넌트를 실행하기 위해 자바스크립트 또는 제이쿼리 구문을 거의 사용할 일이 없다는게 좋습니다.

UIKit 프레임워크 대표적인 특징

미니멀리즘(Minimalism), 깨끗하고 세련된 UI 디자인
CSS 클래스네임으로 직관적이고 쉬운 사용
활용하기 좋은 다양한 종류의 컴포넌트
제이쿼리를 사용하지 않는 순수 자바스크립트(Vanila JavaScript) 기반
옵션 조절을 CSS 코딩 방식으로 컴포넌트 사용을 위한 자바스크립트 코딩을 최소화

[최고의 프론트엔드 CSS Frameworks, UIkit] 강의소개

🌏 https://www.inflearn.com/course/css-프레임워크-uikit-코딩웍스?inst=9675598d

UIkit 공식 웹사이트 컴포넌트 미리보기 : https://getuikit.com/docs/accordion

그럼 오늘 블로그는 여기까지 하겠습니다.
그리고 아래는 해외의 어떤 사이트에서 Best CSS Frameworks 랭킹을 해놨는데 2가지를 소개할게요.

※ 글쓴이의 주관이 당연히 들어가 있을거라 생각합니다.

🌏원문 링크 : https://geekflare.com/best-css-frameworks/

Bootstrap
Foundation
Bulma
UIkit
Semantic UI
Susy
Materialize
Pure
Skeleton
Milligram
Tailwind CSS
Tacit
Spectre
Primer