죠셉의 세상이야기

-부트스트랩 프레임워크(Bootstrap Framework)에 대해서 알아보겠습니다.

요즘 웹에서 유행하고 있는 부트스트랩 프레임워크에 대해서 한번 알아보겠습니다. 

일단 부트스트랩 프레임워크는 트위터에서 시작된 HTML5 기반의 오픈 소스 웹 디자인 프레임워크입니다. 

시작은 디자이너 하나와 트위터의 한 개발자였지만 지금은 트위터에서 주도적으로 개발하고 있지는 않다고 합니다.

일단 부트스트랩의 장점들을 한번 알아보겠습니다.

트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 것이라고합니다. 

웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻는 프레임워크입니다.

그 이유는, 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것 뿐만이 아니라, 드롭다운 메뉴, 버튼, 탭, 리스트, 메뉴바, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있기 때문입니다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript, 관련 이미지만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 엇비슷한 디자인이 뚝딱 만들어집니다. 거기다 PC용 디자인 뿐만 아니라 태블릿이나 스마트폰 같은 모바일용 디자인도 지원합니다. 

이 때문에 디자인을 할 시간이 크게 줄어들고, 여러 웹 브라우저를 지원하기 위한 크로스 브라우징에 골머리를 썩일 필요가 없습니다. 

크로스 브라우징을 위한 각종 핵도 들어 있기 때문이라고 합니다. 거기다 웹 브라우저 크기에 따라 자동으로 정렬되는 "그리드 시스템"을 채용하고 있기 때문에 하나의 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있습니다. 즉 반응형 웹 디자인을 지원한다는 의미입니다.

다들 아시겠지만 반응형 웹이란 웹 디자인 기법 중 하나로 웹(Web)에 접속하는 디바이스에 반응하는(Responsive) 디자인(Design)을 말합니다. 모바일 페이지를 따로 만들필요없이, 웹페이지 하나로 다 나온다는 이야기군요.

거기다 이게 오픈소스입니다. GPL은 아니고 MIT 허가서를 사용하는데, 재배포 면에서는 GPL보다 휠씬 자유로운 라이선스입니다. 

단 같이 들어 있는 아이콘은 CCL BY 3.0을 사용하므로 출처를 밝혀야 한다고 합니다. 소스까지 오픈되어있다 보니 여기서 파생된 프로젝트만 해도 수백 개를 넘어가더군요.

그렇다면 부트스트랩의 단점들은 어떤것이 있는지 알아보겠습니다.

단점은 디자인이 정형화 되어 있다 보니 비슷한 디자인의 페이지가 양산될 수 있다는 것입니다. 대게 부트스트랩으로 만든 사이트들은 모양이 고만고만합니다. 그러나 이건 오픈소스의 힘으로 극복이 가능하다고 합니다. 오픈소스이다 보니 사용자가 커스터마이징 하는 것도 자유롭고, 이 커스터마이징 한 것을 재배포해도 됩니다. 심지어는 상업적으로 판매하는 것도 허용한다고 합니다. 

하지만 우리나라에서는 심플한 디자인보다는 이미지를 많이 쓰는 화려한 디자인을 선호하는지라 부트스트랩으로 만드려면 소스를 처음부터 뜯어 고치다시피 코딩을 해야하다보니 인기가 없다고 합니다. 이것 이외에는 HTML5에 맞춰져 있다 보니 구형 브라우저 지원이 미흡하다고 합니다. 이 때문에 HTML5가 제대로 지원되지 않는 IE7,8의 경우에는 강제로 HTML5를 인식시키는 JavaScript 코드가 필요하고, 가뜩이나 JavaScript 해석이 느린 IE 구버전을 더 느려지게 하는 주범이 됩니다. 결국 이 때문인지 3.0에서는 IE8부터 정식 지원합니다.

부트스트랩이 적용된 사이트로는 나무위키, 리그베다위키, 리브레 위키, 티비플, 위키닷, XpressEngine 공식홈페이지 등이 있다고 합니다.

디자인에 크게 신경쓰지 않고 사이트를 뚝딱만들수 있어서 참 유용했는데, 웹디자인 프레임워크 치고는 좀 불편하다는 이야기도 있더군요.

출처 : 나무위키, 본인생각