#2 부트스트랩의 특징

http://martian36.tistory.com/1143

베누시안님의 블로그에 있는 글입니다.

3월달에 나올 부트스트랩 관련 책의 일부라네요. :)

부트스트랩의 특징

웹페이지를 쉽게 만들 수 있다

부트스트랩의 홈페이지에서도 언급하고 있듯이 부트스트랩을 다루기 위해서는 html과 CSS에 대한 지식을 필요로 합니다. 그렇다고 깊은 지식이 필요한 것은 아니며 html 태그의 사용법, 역할을 알고 있으면 되고 CSS는 혼자서 레이아웃을 만들줄만 알면 됩니다. 웹페이지는 html 태그로 뼈대가 만들어지며 태그에 CSS 선택자를 추가하고 이 선택자에 대해서 스타일시트에서 속성과 값을 선언해서 레이아웃을 만들게 됩니다. 그런데 선택자는 이미 부트스트랩 스타일시트에서 만들어 놓았으니 태그에 선택자만 삽입하면 되는 것이죠. 다만 어떤 선택자를 어느곳에 삽입해야하는지를 알아야하는 것입니다.

html 코드의 재활용

부트스트랩은 이미 만들어진 스타일시트를 재활용하는 것이므로 일정한 형태의 html 코드가 전제조건이 돼야합니다. 즉 정해진 태그에 정해진 선택자를 사용해야 정해진 디자인이 나오는 것이기 때문에 어떤 한곳이라도 이러한 요소들이 빠지게 되면 정해진 디자인이 나오지 않게 됩니다. 그래서 html 페이지를 만들 때는 일정한 코드를 사용해야하므로 이미 만들어진 부트스트랩의 코드 형식을 그대로 복사해서 사용하고 일부 수정만 하면 됩니다. 예를 들어 다음과 같은 메뉴바를 만들기 위해서는 아래의 복잡한 구조의 코드를 사용해야하는데 이를 다 외어서 입력해야할까요? 아닙니다. 부트스트랩의 코드를 그대로 복사해서 입력하고 원하는 메뉴만 추가하거나 수정해주면 되는 것입니다. 

<div class="navbar-inner">

<a class="brand" href="#">Title</a>

<ul class="nav">

<li class="active"><a href="#">Home</a></li>

<li class="divider-vertical"></li>

<li><a href="#">Link</a></li>

<li class="divider-vertical"></li>

<li><a href="#">Link</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown

<b class="caret"></b>

</a>

<ul class="dropdown-menu">

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

</ul>

</li>

</ul>

<form class="navbar-form pull-right">

<input type="text" class="span2 search-query" placeholder="Search">

<button type="submit" class="btn">Submit</button>

</form>

<ul class="nav pull-right">

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown

<b class="caret"></b>

</a>

<ul class="dropdown-menu">

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

<li><a href="#">Link</a></li>

</ul>

</li>

</ul>

모바일 겸용이 아닌 모바일 전용으로 진화

부트스트랩이 처음 나왔을 때는 모바일 기기에 대한 지원이 없었지만 2.0 버전에 모바일 지원을 위한 별도의 스타일시트를 추가해서 반응형 디자인이 가능하게 됐습니다. 하지만 앞으로 나올 3.0 버전 부터는 모바일 우선 지원형태로 바뀌게 됩니다. 그래서 모바일용 스타일시트가 별도로 있는 것이 아니라 하나의 스타일시트로 통합됩니다. 그러면서 이전에는 비표준 웹브라우저인 IE7을 지원했지만 3.0 부터는 제외됩니다.  부트스트랩으로 디자인을 하면 3장에서 IE7 을 위한 핵에 대해서 알아보겠지만 수정이 아주 번거롭습니다. 우리나라는 아직도 IE 사용자가 많으니 어쩔 수 없이 사용자 스타일시트로 수정을 해줘야하는 상황입니다.

많은 자바스크립트 플러그인의 지원

부트스트랩은 기본적으로 13개의 자바스크립트 플러그인을 사용하고 있지만 위에서 알아본 수백개에 이르는 부트스트랩 관련 프로젝트는 대부분이 자바스크립트를 사용하고 있습니다. 그러니 이러한 프로젝트의 플러그인을 사용하면 원하는 기능은 모두 추가 할 수 있습니다. 부트스트랩으로 디자인하면서 필요한 자바스크립트 플러그인은 검색하면 대부분 찾을 수 있으며 부트스트랩을 위한 플러그인이 아니라도 어떤 플러그인이든 추가해서 사용할 수 있습니다. 3장의 부트스트랩으로 디자인하기 편에서는 이러한 다앙한 플러그인을 사용해서 부트스트랩의 기능을 확대할 것입니다.

정형화된 디자인에서 탈피

부트스트랩으로 디자인한 웹사이트는 한눈에 알아볼 수 있는 것이 또한 부트스트랩의 특징입니다. 버튼 색상이나 레이아웃 구조를 보면 알 수 있죠. 하지만 사용자 정의 스타일시트를 이용해서 기존의 디자인 색상이나 레이아웃을 얼마든지 변경할 수 있으며 이를 위한 프로젝트도 많이 나오고 있습니다. 예를 들면 부트스트랩의 기본색상은 몇가지로 정해져 있는데 버튼에도 사용되고 있습니다. 하지만 아래의 사이트와 같이 이들 색상을 얼마든지 원하는 색으로 변경해서 사용할 수 있어서 부트스트랩의 틀에서 벗어날 수 있습니다.

http://charliepark.org/bootstrap_buttons/

또한 부트스트랩 테마 형식으로 디자인을 제작해서 판매하고 있는 사이트도 있으며 일부 테마는 무료로 개방되고 있습니다. 아래의 사이트에서 내놓은 테마는 윈도우8 형태의 디자인을 따라서 만들어진 것이더군요.

http://aozora.github.com/bootmetro/

Less 프리프로세서로 만들어진 체계적인 스타일시트

부트스트랩의 스타일시트는 버전업될 때마다 늘어나서 현재 2.2.2 버전의 경우 기본 스타일시트인 bootstrap.css는 6039 라인, 모바일용 스타일시트인 bootstrap-responsive.css는 1092 라인으로 7000 라인이 넘는 방대한 양의 스타일시트입니다. 이런 스타일시트를 조직적이고 체계적으로 만들 수 있었던 것은 Less라는 스타일시트를 만들기위한 프리프로세서의 힘 덕분입니다. 스타일시트는 프로그램 언어라는 이름에 무색하게 간단한 구조로 형성되지만 less 프리프로세서는 변수, 함수, 조건문 등 일반 프로그래밍 언어와 같은 기능을 사용하고 있습니다. 프로그래밍 언어의 형태를 갖고 있지만 기본 틀은 스타일시트와 같아서 CSS를 잘 알면 배우기도 쉽고 중복되지 않는 체계적인 스타일시트를 만들 수 있습니다. 이에 대해서는 2장의 “Less 프리프로세서 사용하기” 편에서 자세히 알아볼 것입니다.

단점

마지막으로 단점에 대해 알아보자면 우리나라에서 많이 사용하는 웹브라우저인 IE에서 점점 멀어지고 있다는 점입니다. 앞에서도 언급했지만 국내의 IE 점유율은 계속 내려가고 있으나 아직도 세계적인 추세에 반 정도 밖에 안됩니다. 국내는 60% 이상을 차지하고 있죠. IE 점유율 중에서 웹표준을 지원하지 않는 IE8이하를 반으로 잡는다면 30%가 비표준 웹브라우저를 사용하고 있다는 것이 됩니다. 미디어쿼리를 지원하지 않는 이들 웹브라우저는 반응형 디자인으로 만들더라도 기본적으로 940픽셀의 폭으로 전환되며 이들 웹브라우저 사용자의 컴퓨터가 화면 폭이 좁을 것이라는 생각에서 이렇게 만든 것이라고 생각합니다. 

3장에서 이러한 비표준 웹브라우저에서 나타나는 이상 증상을 해결하기 위한 IE 핵을 사용하고 있지만 아주 번거로운 작업이 되고 어떤 경우는 아예 나타나지 않도록 설정해야하는 경우도 있습니다. 부트스트랩의 버전이 높아지면서 이들 웹브라우저의 지원이 사라질 예정입니다. 

또한 가장 큰 사이즈의 화면 폭은 1170 픽셀로 글을 위주로한 블로그 페이지로 사용하기에는 너무 크게 보여서 글을 읽기 불편하게 됩니다. 하지만 사용자 스타일시트로 얼마든지 폭을 줄여서 만들 수도 있습니다.