아직도 몰라? 웹혁명을 가져온 부트스트랩 이야기

요즘 부트스트랩이 하나의 화두로 떠오르고 있습니다. 웹개발을 부트스트랩을 이용해서 하고 있다는 이야기도 여기저기 들려오구요. 많은 티스토리 블로거들도 운영하고 있는 블로그의 스킨을 부트스트랩(bootstrap)으로 바꾸려고 알아보고 있거나 또는 스킨으로 바꿀 계획 중이신 것 같습니다.

 

이쯤되면 도대체 부트스트랩이라는 녀석이 무슨 녀석이길래 이렇게 많은 사람들의 입에서 오르내리고 있는지 궁금해지는데요. 이번 포스팅에서 부트스트랩에 대해 알아보도록 하겠습니다.

 

 

부트스트랩(bootstrap)이 등장한 이유?

 

부트스트랩(bootstrap)이 등장한 이유?
 
웹페이지 개발을 위해 하나의 프로젝트가 시작되는 경우 한두사람에 의해 진행되기 보다는 여러 사람이 한 곳에 모여 개발을 진행하거나 또는 온라인 상의 커뮤니티 등을 통해 진행이 되는데요.

개발이 진행될 때 개발자의 취향에 따라 도구도 다르고 자신만의 라이브러리를 사용하기도 해서 개발을 시작할 때 미리 어느 정도의 표준을 정해서 진행하는 경우가 많이 있습니다. 그러나 이런 작업이 진행되지 않은 경우 각 개발자의 소스코드 작성 형태 등이 제각각이기 때문에 디자인까지 달라질 수 있죠. 이런 경우 심지어는 다시 작업에 들어가기도 합니다.

트위터의 개발자인 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)은 이러한 다른 생각과 환경에서 오는 여러가지 어려운 점을 개선하기 위해서 정형화된 인터페이스를 만들었습니다. 처음에는 주말과 가외 시간을 이용해서 1년동안 작업한 후 다른 개발자들에게 선보였는데 반응이 좋아 많은 개발자들이 사용하기 시작했고 후에는 하나의 프레임워크 형태로 발전했습니다.
 
http://twitter.github.com/bootstrap/index.html

 

 

 

부트스트랩(bootstrap)이란?

 

 

 

부트스트랩(bootstrap)이란?

부트스트랩은 쉽게 말해 CSS와 자바스크립트로 이루어진 라이브러리라고 이야기할 수 있습니다.

일반적으로 웹 개발을 하는 경우 각자의 웹디자이너나 프로그래머가 css, 자바스크립트를 만들어서 사용하게 되는데요. 미리 CSS와 자바스크립트를 어느 정도 만들어 배포하는 거죠. CSS와 자바스크립트로 사전 디자인 작업이 되어 있기 때문에 HTML을 이용해서 웹페이지의 뼈대를 만들고 이 부트스트랩을 이용해서 미리 정의된 스타일시트를 이용하면 쉽게 화면 레이아웃 요소들을 정할 수 있게 됩니다.

부트스트랩의 스타일시트는 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있다는 장점이 있어 큰 인기를 얻고 있습니다.

이런 것을 보고 '그냥 가져다 쓰면 돼' 라고 해야 할까요? 부트스트랩의 스타일시트는 디자인 작업을 쉽게 할 수 있도록 선언해 놓은 속성과 값을 재활용하기 쉽게 만들어놓은 스타일시트 라이브러리입니다. 위와 같은 버튼 뿐만 아니라 form에 사용되는 각종 태그, 아이콘, 드랍다운 메뉴 등 웹페이지에 사용되는 모든 요소에 대해서 스타일시트를 미리 만들어 놓고 HTML 페이지의 태그에 적용한다면 부트스트랩에 지정된 디자인으로 웹페이지가 자동으로 만들어지도록 해놓은 것이죠. 정말 기발한 발상이 아닐 수 없습니다.

끊임없이 진화하고 있는 부트스트랩!

 
부트스트랩의 진화는 아직 끝나지 않았습니다. 부트스트랩은 버전이 높아지면서 여러가지 기능이 추가되고 있는데요. CSS의 추가뿐만이 아니라 자바스크립트를 이용한 팝업창, 드랍다운 메뉴, 툴팁, 이미지 슬라이더 등의 기능도 그 중 하나라고 할 수 있습니다.

 

부트스트랩은 2011년 8월에 트위터가 오픈소스로 공개했는데요. 부트스트랩이 공개된 이후 그 반응은 폭발적이었고 꾸준하게 인기를 얻고 있습니다. 지금도 부트스트랩은 오픈소스 웹하드 서비스인 깃허브(Github)에서 최고의 인기를 얻고 있으며 부트스트랩과 관련된 프로젝트는 현재 수백개에 이르고 있습니다.
 
http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
 

부트스트랩을 한번 경험해 본 분들은 정말 감탄을 아끼지 않으시더라구요. 저도 한번 부트스트랩이 적용된 티스토리 스킨을 사용해 보았는데 모바일 티스토리 스킨과는 놀라운 모습이었습니다. 여러분도 한번 부트스트랩을 경험해 보시길 바랍니다.
 

부트스트랩을 배울 수 있는 사이트

아래는 부트스트랩을 배울 수 있는 사이트입니다.

부트스트랩3 한글 번역페이지 - http://bootstrapk.com/BS3/
w3 Schools bootstrap - http://www.w3schools.com/bootstrap/default.asp