부트스트랩에 대해서

안녕하세요!
오늘은 반응형 홈페이지를 제작하기 위해서 부트스트랩에 대해 먼저 알아보겠습니다.

부트스트랩의 등장 이유는 개발이 진행될 때 개발자의 취향에 따라 도구도 다르고 자신만의 라이브러리를 사용하기도 해서 개발을 시작할 때 미리 어느 정도의 표준을 정해서 진행하는 경우가 많이 있습니다. 그러나 이런 작업이 진행되지 않은 경우 각 개발자의 소스코드 작성 형태 등이 제각각이기 때문에
디자인까지 달라질 수 있죠. 이런 경우 심지어는 다시 작업에 들어가기도 합니다.
트위터의 개발자인 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)은 이러한 다른 생각과 환경에서 오는 여러가지 어려운 점을 개선하기 위해서 정형화된 인터페이스를 만들었습니다. 처음에는 주말과 가외 시간을 이용해서 1년동안 작업한 후 다른 개발자들에게 선보였는데 반응이 좋아 많은 개발자들이 사용하기 시작했고 후에는 하나의 프레임워크 형태로 발전했습니다.

아래 사이트에서 정보를 자세하게 얻을 수 있습니다.
http://twitter.github.com/bootstrap/

Bootstrap

Follow @getbootstrap Tweet Heads up! These docs are for v2.3.2, which is no longer officially supported. Check out the latest version of Bootstrap! Introducing Bootstrap. Need reasons to love Bootstrap? Look no further. By nerds, for nerds. Built at Twitter by @mdo and @fat , Bootstrap utilizes LESS

twitter.github.com

http://getbootstrap.com/

부트스트랩이란 ??
부트스트랩은 쉽게 말해 CSS와 자바스크립트로 이루어진 라이브러리라고 할 수 있습니다.
보통 웹 개발을 할때 웹디자이너나 프로그래머가 css, 자바스크립트를 만들어서 사용하게 되는데요. 미리 CSS와 자바스크립트를 어느 정도 만들어 배포하는 거죠. CSS와 자바스크립트로 사전 디자인 작업이 되어 있기 때문에 HTML을 이용해서 웹페이지의 뼈대를 만들고 이 부트스트랩을 이용해서 미리 정의된 스타일시트를 이용하면 쉽게 화면 레이아웃 요소들을 정할 수 있게 됩니다.
부트스트랩의 스타일시트는 약 6500 ~ 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있다는 장점이 있어 큰 인기를 얻고 있습니다.
부트스트랩의 스타일시트는 디자인 작업을 쉽게 할 수 있도록 선언해 놓은 속성과 값을 재활용하기 쉽게 만들어놓은 스타일시트 라이브러리입니다. 위와 같은 버튼 뿐만 아니라 form에 사용되는 각종 태그, 아이콘, 드랍다운 메뉴 등 웹페이지에 사용되는 모든 요소에 대해서 스타일시트를 미리 만들어 놓고 HTML 페이지의 태그에 적용한다면 부트스트랩에 지정된 디자인으로 웹페이지가 자동으로 만들어지도록 해놓은 것이죠.

부트스트랩의 장점
글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있습니다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 엇비슷한 디자인이 뚝딱 만들어집니다. 거기다 PC용 디자인 뿐만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 지원합니다. 이 때문에 디자인을 할 시간이 크게 줄어들고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없습니다.
거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 "그리드 시스템"을 채용하고 있기 때문에 하나의 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있습니다. 즉 반응형 웹 디자인을 지원한다는 의미입니다. 거기다 이게 오픈소스 입니다.

부트스트랩의 단점
단점은 디자인이 정형화 되어 있다 보니 비슷한 디자인의 페이지가 양산될 수 있다는 것입니다. 그러나 이건 오픈소스의 힘으로 극복이 가능합니다. 오픈소스이다 보니 사용자가 커스터마이징 하는 것도 자유롭고, 이 커스터마이징 한 것을 재배포해도 됩니다. 심지어는 상업적으로 판매하는 것도 허용합니다.
하지만 우리나라에서는 심플한 디자인보다는 이미지를 많이 쓰는 화려한 디자인을 선호하는지라 부트스트랩으로 만드려면 소스를 처음부터 뜯어 고치다시피 코딩을 해야하다보니 아무래도 아직은 많이 선호하고 있지는 않은것 같습니다. 그리고 이외에도 HTML5에 맞춰져 있다 보니 구형 브라우저 지원이 미흡하다는 것입니다. 이 때문에 HTML5가 제대로 지원되지 않는 IE7,8의 경우에는 강제로 HTML5를 인식시키는 JavaScript 코드가 필요하고, 가뜩이나 JavaScript 해석이 느린 IE 구버전을 더 느려지게 하는 주범이 됩니다. 결국 이 때문인지 3.0에서는 IE8부터 정식 지원합니다.

아래 사이트는 부트스트랩을 배울수 있는 사이트입니다.
http://bootstrapk.com/