개인적으로 Bootstrap을 대체할만한 CSS 프레임워크를 알아보다 정리해봤습니다.
객관성이 결여된 매우 주관적인 코멘트가 함유되어있으며 순위의 기준은 없습니다
맨아래 레퍼런스 사이트를 링크해뒀으니 더 많은 종류와 객관적 평가를 알고 싶으신분들은 참고하세요
이미지를 누르면 해당 사이트로 이동합니다.
1. Bootstrap
가장 많은 사람들이 쓰고 가장 널리 알려진 부트스트랩입니다. LESS를 사용하였으며 12컬럼 반응형 그리드 시스템, 수많은 위젯, 컴포넌트, 자바스크립트 플러그인을 지원하며 다운받을때 원하는 기능만 커스터마이즈 할수있습니다.
두말할것없는 최고의 프레임워크이나 2013년부터 Mobile First를 내세운 새 프레임워크들에게 도전받고있으며, 너무 흔해져버린 부트스트랩 기반의 웹사이트들에 사람들의 거부감도 있는 편입니다 하지만 2013년 7월 기준 조만간 Mobile first 기준으로 업데이트될 Bootstrap3가 릴리즈되면 더욱 인기를 끌겠죠.. 다른 프레임워크들은.. 아마 안될거야..
2. Foundation
2013년 2월에 최초의 Mobile first 프레임워크라는 캐치로 릴리즈된 Foundation4. Sass와 Compass를 사용하였습니다
사실 부트스트랩보다 더 오래된 프레임워크로 현재 부트스트랩 아성에 버티는 거의 유일한 프레임워크로 골수팬들이 많이 있습니다. 구글링해보면 CSS 프레임워크 비교보다는 부트스트랩 vs 파운데이션 뭐가 더 낫나? 이런 글이 더 많을 정도지요 핵심이 되는 그리드 시스템은 거의 대동소이합니다. 클래스 명명법이 부트스트랩 span9, 파운데이션 nine columns 이런식으로 좀 다르죠. 부트스트랩이 질렸거나 지금 당장 Mobile first시도하고 싶으시면 괜찮을것같습니다.
아래는 가장 최근의 부트스트랩과 파운데이션 릴리즈를 기준으로 비교해놓은 사이트입니다.
이 사이트는 업데이트가 있을때마다 지속적으로 갱신하므로 계속 주시할만한 곳입니다.
3. Pure: CSS Framework
올해 2월에 혜성같이 등장한 야후의 CSS Framwork Pure 입니다. 부트스트랩같은 여타 프레임워크들이 Modernizr를 싸용하는 반면 Pure는 nomalize.css를 사용하여 기본 레이아웃에 자바스크립트를 배제한것이 특징입니다
아주 작은 사이즈의 css 파일단위로 쪼개서 레이아웃이나 버튼, 테이블같은 컴포넌트들을 원하는것만 골라 쓸수있다는 장점이 있습니다. 아직 0.2 버전의 초기단계이긴하지만 충분히 쓸만하다고 생각합니다.
4. Skeleton
반응형, 모바일 친화적인 개발이 가능한 작은 보일러플레이트입니다. 가벼운 960 그리드기반으로 사이트의 기초를 빠르게 설계할수있습니다. 작년까지 어느정도 인지도가 있었는데 2012년 6월이후 1년넘게 업데이트가 없어서 개인적으로는 추천하고싶지않습니다.
5. Base Framework
LESS로 개발된 12컬럼 960px 그리드 기반의 CSS 프레임워크입니다. 컴포넌트, 위젯등이 올인원 패키지로 배포됩니다.
6. Gumby Framework
SASS와 Compass로 개발된 반응형 960 그리드 기반의 프레임워크입니다 부트스트랩과 같이 버튼, 폼, 네비게이션과 같은 UI 키트를 제공해주며 다운받을때 Customize를 통해 원하는것만 취할수있습니다. 2013년 5월 버전 2가 릴리즈 되고 꾸준히 업데이트 되고있는 프레임워크입니다.
7. Responsive Grid System
이름이 반응형 그리드 시스템입니다. 공식홈에 '반응형 그리드시스템은 프레임워크가 아닙니다. 보일러플레이트도 아닙니다 반응형 웹사이트를 만드는 빠르고 쉽고 유동적인 방식입니다.' 리거 써있습니다.
개발시 커스터마이즈해서 사용해야할것같은데 예제사이트들을 보면 매우 정교하지만 그와 같이 사용하려면 미디어 쿼리같은 충분한 내공이 있어야할것같습니다.
8. Columnal
1140px 기반의 반응형 CSS 프레임워크입니다. 스케치와 플랜짜는 용도의 그리드 시스템에 관한 PDF문서와 빠른 개발을 위한 wireframe 템플릿이 패키지에 들어있습니다. 대부분 최신 브라우저를 위한 미디어 쿼리와 IE6와 7용 다운그레이드돤 12컬럼 984 또는 960px 와이드 버젼이 제공됩니다. 이미지나 미디어의 폭이나 높이를 정의하지않아도 자동으로 줄여서 맞춰줍니다. Creative Commons Attribution-ShareAlike 3.0 United States 라이센스입니다 확인후에 사용하세요
9. InK
부트스트랩같은 빠른 개발이 가능한 HTML, CSS Javascript UI를 위한 프론트엔트 프레임워크입니다. 부트스트랩과 비슷하게 LESS와 FontAwesome을 사용하였습니다. 하지만 Ink는 DOM 조작, 편리한 통신단, 페이지 효과등을 위한 InK JS Core라 부르는 코어 자바스크립은 엔진을 가지고 있습니다.
10. blueprint
블루프린트는 견고한 기틀을 제공해주는 CSS 프레임워크입니다. 사용이 쉽고 민감한 타이포그래피, 유용한 플러그인, 프린트용 스타일시트등을 제공해줍니다. 2011년 이후 업데이트가 없으므로 추천하지않습니다.
11. Bourbon NEAT
NEAT는 오픈소스 유동형 그리드 프레임워크입니다. Sass와 믹스인 라이브러이인 Bourbon을 사용하여 몇분안에 충분히 강력한 반응형 레이아웃을 만들어낼수있습니다. 뭔가 이거다 싶은게 없음..
12. Ingrid
인그리드는 각각의 유닛에 클래스 사용을 줄이는 것을 목표로 하고있는 가볍고 유동적인 CSS 레이아웃 시스템입니다. 간섭이 적고 반응형 레이아웃을 재설계하기 쉬우며 확장성과 커스터마이징도 쉽다고 합니다. 예제가 거의 없어 별로 쉬워보이지 않습니다.
13. Susy
Compass CSS 프레임워크의 플러그으로 자신만의 그리드 프레임워크를 만들수있습니다. Static, Fluid 그리고 Magic 세가지 서로 다른 타입의 그리드를 만들수있습니다. 홈페이지에 있는 튜토리얼은 허접하기 그지없어서 화가 날 지경인데 여기 잘 정리해놓은 튜토리얼 사이트가 있으니 관심있으신 분들은 참고하세요
14. YAML
2005년부터 지금까지 계속 개발되고있는 반응형 모듈화 CSS 프로임워크입니다. 잘 구성된 HTML5, CSS3 파일들과 4.6kb밖에 안되는 풋프린트, 독립적인 컨트롤이 가능한 그리드 컬럼 폭, 홈. 반응형의 유동성, 고정폭, 내장그리드. 하나의 완전한 웹사이트를 위한 완전한 세트의 구성들은 모든게 확장하나는건 둘째치고 개인홈에 링크달고 무료로 쓰던가 상업용으로는 돈내고 써야합니다. 왜죠?
15. Less Framework 4
유동적인 다중컬럼 웹사이트 레이아웃을 만들수 있는 CSS 프레임워크입니다. 24px 행간에 최적화된 8컬럼 그리드와 그리드의 수직리듬과 평행하는 황금비율에 기초한 타이포그래피 세트를 포함하고있습니다. (하나의 그리드기준으로 4개의 레이아웃과 3개의 타이포그래피 세트)
16. Maxmert
부트스트랩처럼 보기좋고 신선하지만 더 새로운것들을 제공해주는 SASS기반의 프레임워크입니다. 그리드, 타이포그래피, 폼, 테이블, 버튼 같은 주요 UI뿐만 아니라 드랍다운 툴팁, 메뉴, 알림, 모달등의 위젯과 컴포넌트를 제공해줍니다.
클릭이벤트에따른 자바스크립트 애니메이션 효과가 아주 참신하고 인상적입니다. 여러 유명 JQuery라이브러리들을 잘 엮어놓은것같습니다. 다만 버전 0.0.2에서 멈춰있고 활성화되어있는 커뮤니티를 찾을수없는게 흠이라면 흠같습니다.
17. Metro UI CSS
마이크로소프트에서 제공하는 메트로UI 디자인가이드를 따라 만든 독립적인 CSS 솔루션입니다. 메트로 타일즈, 알림, 버튼등 참신하지만 정교함이 떨어집니다 다만 대부분의 쓸만한 메트로 CSS가 유료인받면 부트스트랩기반의 BootMetro와 비교해봐도 오픈소스 프로젝트로서 높은 완성도를 가지고있습니다. 메트로 테마자체가 참신하지만 개인적으론 추천하고싶진않습니다.
18. Fries
아시다시피 국내상황과 반대로 해외에서 모바일 개발의 기준은 여전히 아이폰입니다. 아이폰앱부터 만들고 아이폰에서의 퍼포먼스부터 챙깁니다. 따라서 Jquery Mobile같이 아이폰에서 정상동작하나 안드로이드에서 극악의 성능이 나오는 프레임워크들이 많이 있습니다. 자바스크립트 라이브러리도 아이폰 룩을 가진 소스들이 많기때문에 Fries는 아이폰룩을 벗어내고 안드로이드UI를 골라입혔다는 차원에서 반대로 참신한게 아닐까 생각됩니다. 폰갭과의 연동성도 좋아서 안드로이드 UI기준의 모바일 웹/앱을 한번에 지원하기 좋을듯싶습니다
기타 프레임워크들:
Reference sites:
'구글링' 카테고리의 다른 글
| 부트스트랩 Modal을 대체할만한 플러그인 7개 (0) | 2014.04.12 |
|---|---|
| 어서와 JSP, 타임리프는 처음이지? (부제: JSP는 무덤으로) (2) | 2013.07.16 |
| 바람직한 UI #1-15 (A Good User Interface) (13) | 2013.07.11 |
| SQL 일대일관계 (One-to-One SQL Relationship) (0) | 2012.11.16 |
| Vaadin 첫인상: GWT를 대체한다는 것 이상의 메리트는 없어보여 (0) | 2011.12.29 |
