- 번역 : 스키머
- 글쓴이 : Ivaylo Gerchev
- 원문 : The 5 Most Popular Frontend Frameworks of 2014 Compared
요즘 CSS 프론트엔드 프레임워크의 홍수 시대입니다. 하지만 실제로 몇개의 프레임워크만이 사용하기 좋습니다.
이 글에서는 필자가 생각하는 가장좋은 5개의 프레임워크를 비교하겠습니다. 특정 프로젝트의 필요에 따라 선택할 수 있도록, 각각의 프레임워크가 가지고 있는 장점과 단점, 어플리케이션의 특정영역이 있습니다. 예를 들어 간단한 프로젝트의 경우 복잡한 프레임워크를 사용할 필요가 없습니다. 또한, 대부분의 옵션은 필요한 경우 컴포넌트를 사용할 수 있게되어있고, 심지어 다른 프레임워크에서 사용 할 수 있게 컴포넌트가 모듈화 되어있습니다.
프레임워크의 깃허브 내용을 토대로 작성하였고 가장 인기있는 부트스트랩 부터 시작하겠습니다.
(참고: 버젼 및 프레임워크 사이즈의 경우 달라질수 있습니다. )
1. Bootstrap(부트스트랩)
Bootstrap은 현재 가장 많이 사용되고 있는 프레임워크 입니다. 큰 인기를 바탕으로 여전히 성장하고 있습니다. 성공적인 웹사이트를 구축하는데 분명히 도움이 될것입니다.
- 개발자: Mark Otto and Jacob Thornton.
- 발표년도: 2011
- 현재 버젼: 3.3.1
- 인기도: 75,000+ stars on GitHub
- 설명: “부트스트랩은 웹에서의 모바일 우선 프로젝트 반응형 개발을 위한 가장 인기있는 HTML, CSS, 자바스크립트 프레임워크 입니다.”
- 핵심 개념 / 원칙: 반응형 웹디자인, 모바일 우선.
- 프레임워크 크기: 145 KB
- CSS 전처리: Less, Sass
- 반응형: 지원
- 모듈: 지원
- 템플릿 / 레이아웃 시작: 지원
- 아이콘 세트: Glyphicons Halflings 지원
- 기타 / 부가 기능: 제공되는 번들은 없지만 많은 서드파티 플러그인 사용가능.
- 특별한 컴포넌트: Jumbotron
- 기록문서: 좋음
- 사용자 정의: 기본 GUI 제공. 안타깝게도 생상 선택기를 사용할수 없기 때문에 직접 생상을 입력해야 함.
- 지원 브라우저: Firefox, Chrome, Safari, IE8+ (you need Respond.js for IE8)
- 라이센스: MIT
Bootstrap 주요사항
부트스트랩의 주요 장점은 큰 인기 입니다. 기술적으로 목록에 있는 다른 네가지 프레임워크 보다 더 나은것은 아니지만 더많은 리소스(규약, 튜토리얼, 확장 서드파티 플러그인, 테마빌더 등등)를 제공합니다. 즉 부트스트랩은 어디서나 가능합니다. 이점이 부트스트랩을 선택하는 이유 입니다. (참고: “특별한 컴포넌트” 란 목록에서 언급한 프레임워크를 비교했을 때 유일한 것을 의미합니다.)
2. ZURB의 Foundation
Foundation 는 두번째로 많은 사용자가 있습니다. 탄탄한 ZURB 회사에서 만든것으로 이 프레임워크는 강력합니다. 이로 인해 Foundation은 페이스북, 모질라, 이베이, 야후와 내셔널지오그레픽 과 같은 이름있는 큰 웹사이트에 사용되었습니다.
- 개발자: ZURB
- 발표년도: 2011
- 현재 버젼: 5.4.7
- 인기도: 18,000+ stars on GitHub
- 설명: “세계에서 가장 발전된 프론트엔드 프레임워크”
- 핵심 개념 / 원칙: 반응형웹디자인, 모바일 우선, 시멘틱
- 프레임워크 크기: 326 KB
- CSS 전처리: Sass
- 반응형: 지원
- 모듈: 지원
- 템플릿 / 레이아웃 시작: 지원
- 아이콘 세트: Foundation Icon Fonts
- 기타 / 부가 기능: 지원
- 특별한 컴포넌트: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
- 기록문서: 좋음. 많은 추가 리소스 사용가능.
- 사용자 정의: GUI 없음, 오직 수동으로 만 정의.
- 지원 브라우저: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
- 라이센스: MIT
Foundation 주요사항
Foundation은 비지니스 지원, 교육 그리고 컨설팅을 지원하는 진정한 전문적인 프레임워크 입니다. 그것은 또한 빠르고 쉽게 프레임 워크를 배우고 사용하는 데 도움이되는 많은 리소스를 제공합니다.
3. Semantic UI
Semantic UI 지속적으로 더 시멘틱하기 웹사이트를 구축할수 있도록 해줍니다. 따라서 코드가 훨씬 더 읽고 이해하기 쉽게 순수한 언어 원리를 이용합니다.
- 개발자: Jack Lukic
- 발표년도: 2013
- 현재 버젼: 1.2.0
- 인기도: 12,900+ stars on GitHub
- 설명: “순수한 언어의 유용한 원리를 기반으로 하는 UI 컴포넌트 프레임 워크.”
- 핵심 개념 / 원칙: 시멘틱, tag ambivalence, 반응형
- 프레임워크 크기: 552 KB
- CSS 전처리: Less
- 반응형: 지원
- 모듈: 지원
- 템플릿 / 레이아웃 시작: 아니요
- 아이콘 세트: Font Awesome
- 기타 / 부가 기능: 지원
- 특별한 컴포넌트: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
- 기록문서: 매우 좋음. Semantic은 매우 잘 정리된 문서에 테마 생성과 사용자 정의 시작을위한 가이드를 제공하는 별도의 웹 사이트를 제공합니다.
- 사용자 정의: GUI 없음, 오직 수동으로만 정의.
- 지원 브라우저: Firefox, Chrome, Safari, IE10+ (IE9는 오직 browser prefix), Android 4, Blackberry 10
- 라이센스: MIT
Semantic UI 주요사항
Semantic는 이글에서 다루는 프레임워크중에 가장 혁신적이고 최대의 기능을 갖춘 프레임워크 입니다. 명확한 논리와 그 클래스의 의미론의 관점에서의 네이밍 규칙과 프레임워크의 전체적인 구조는 다른 것 보다 우수합니다.
4. Yahoo의 Pure
Pure는 순수한 CSS로 작성된 경량의 모듈 프레임워크 입니다. - 즉, 사용자의 필요에 따라 함께 또는 개별적으로 사용할 수있는 구성 요소가 포함되어 있습니다.
- 개발자: Yahoo
- 발표년도: 2013
- 현재 버젼: 0.5.0
- 인기도: 9,900+ stars on GitHub
- 설명: “모든 웹 프로젝트에서 사용 가능한 반응형 CSS 모듈의 작은 세트.”
- 핵심 개념 / 원칙: SMACSS, minimalism.
- 프레임워크 크기: 18 KB
- CSS 전처리: 없음
- 반응형: 지원
- 모듈: 지원
- 템플릿 / 레이아웃 시작: 지원
- 아이콘 세트: 없음. 대신 Font Awesome 사용가능.
- 기타 / 부가 기능: 없음
- 특별한 컴포넌트: 없음
- 기록문서: 좋음
- 사용자 정의: 기본 GUI 스킨 빌더
- 지원 브라우저: 최신버전의 Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
- 라이센스: Yahoo! Inc. BSD
Pure 주요사항
Pure는 프로젝트의 시작에 기본골격 스타일만을 제공합니다. Pure는 모든 기능이 필요하지 않는 특정한 컴포넌트를 포함시켜서 사용 할 사람들에게 이상적입니다.
5. YOOtheme의 UIkit
UIkit는 사용하기 쉽고 사용자 정의하기 쉬운 컴포넌트의 축약된 모음입니다. UIkit은 경쟁하는 것들보다 인기가 있지는 않지만 동일한 기능 및 품질을 제공합니다.
- 개발자: YOOtheme
- 발표년도: 2013
- 현재 버젼: 2.13.1
- 인기도: 3,800+ stars on GitHub
- 설명: “빠르고 강력한 웹 인터페이스를 개발하기 위한 경량 및 모듈 형 프론트엔드 프레임 워크입니다.”
- 핵심 개념 / 원칙: 반응형웹디자인, 모바일 우선
- 프레임워크 크기: 118 KB
- CSS 전처리: Less, Sass
- 반응형: 지원
- 모듈: 지원
- 템플릿 / 레이아웃 시작: 지원
- 아이콘 세트: Font Awesome
- 기타 / 부가 기능: 지원
- 특별한 컴포넌트: Article, Flex, Cover, HTML Editor
- 기록문서: 좋음
- 사용자 정의: 고급 GUI 제공.
- 지원 브라우저: Chrome, Firefox, Safari, IE9+
- 라이센스: MIT
UIkit 주요사항
UIkit은 많은 워드프레스 테마에서 성공적으로 사용됩니다. UIkit은 수동 또는 GUI 사용자 정의 프로그램을 통해 유연하고 강력한 사용자 정의 메커니즘을 제공합니다.
여러분께 적합한 프레임워크는 무엇입니까?
결국, 여러분에게 맞는 프레임워크를 선택하기 위한 몇 가지 가이드 라인을 제공 할 수 있습니다. 여기에 주의 해야하는 몇가지 중요한것이 있습니다. :
프레임워크가 충분히 인기가 있습니까? 더 많은 인기가 많은 사람들이 프로젝트에서 사용하고 있다는 것을 의미하므로 커뮤니티에 더많은 튜토리얼과 글, 실제 사례와 / 웹 사이트, 서드파티 확장 및 관련 웹 개발 제품과 더 나은 통합을 이룰수 있습니다. 또한 프레임워크의 거대한 커뮤니티로 인하여 미래에도 더 발전할 가능성이 높습니다.
활발하게 개발중인 프레임워크 입니까? 좋은 프레임워크는 특히 모바일 관련하여, 최신 웹 기술을 지속적으로 레벨 업 할 필요가 있습니다.
프레임워크의 완성도가 높습니까? 특정 프레임 워크는 아직 실제 프로젝트에서 사용되고 테스트되지 않은 경우, 여러분은 자유롭게 사용할 수 있지만, 전문적인 프로젝트를 의존하는것은 현명하지 않습니다.
프레임워크가 좋은 기록문서를 제공합니까? 좋은 기록문서는 배우는 과정을 용이하게 하기 위해서 언제나 바람직 합니다.
프레임워크의 전문성의 레벨은 어떠합니까? 여기에서 중요한 점은 더욱 일반적인 프레임워크가 높은 레벨의 프레임워크와 비교해서 작업하기 더 쉽다는 것입니다. 대부분의 경우 사용자 정의를 쉽게 적용할 수 있기 때문에 최소한의 스타일 프레임워크를 선택하는 것이 좋습니다. 새로운 CSS규칙을 추가하는것은 기존 것에 덮어 쓰거나 재정의하는것에 비교하여 더 효율적이고 편리한 작업입니다. 게다가, 여러분이 상단에 새로운 규칙을 추가 할 경우, 불필요하게 사용하지 않는 규칙에 의해서 CSS의 크기를 증가하지 않을 것입니다.
여전히 확신이 없다면 mix-and-match 접근법을 채택할수 있습니다. 특정 프레임워크가 요구 조건을 만족하지 않는 경우라면, 프로젝트에서 두개 이상의 컴포넌트를 혼합 할 수 있습니다. 예를들어 하나의 프레임워크에 선호하는 다른 프레임워크의 그리드 시스템을, 그리고 더 복잡한 컴포넌트를 또다른 프레임워크로부터 작은 CSS기반 스타일을 얻을수 있습니다. 이것이 모듈 방식! :)
