부트스트랩

부투스트랩은 웹 사이트나 웹 응용 프로그램을 작성하기 위해 사용하는 무료 소프트웨어 도구 모음이다.

개요

부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다. 하나의 CSS 로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하고 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다. 부트스트랩은 트위터의 두 개발자인 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)에 의해 처음으로 개발되었다. 트위터 내부적으로 개발을 일관성 있게 통합하고 유지하기 위해 개발된 프레임워크로 초기에는 트위터 블루프린트(Twitter Blueprint)라 불리웠다. 그 후 몇 달의 개발 기간을 거쳐 이름을 부트스트랩으로 바꾸고 2011년 8월에 최초로 공개되었다.

역사

트위터에서 시작된 jQuery 기반의 오픈 소스 웹 프레임워크로 시작은 디자이너 하나와 트위터의 한 개발자였다. 부트스트랩의 원래 이름은 Twitter Blueprint로 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)이 만들었다. 기존에 여러 인터페이스에 대응하기 위한 다양한 라이브러리들이 존재했지만 정형화되지 않아 유지, 보수에 어려움이 있었다. 트위터의 개발자였던 Mark Otto는 이를 통합하기 위해 부트스트랩을 만들었고 트위터의 다른 개발자들이 개발에 기여하기 시작했다. 부트스트랩이라는 이름은 2011년 8월 19일 오픈 소스가 발표되면서 지어졌다. 2012년 1월 31일 부트스트랩 2가 발표되었다. 이 버전에서는 12컬럼 그리드 레이아웃과 반응형 디자인이 포함되었다. 2013년 8월 19일 3.0 정식 버전이 나왔다. 2.x대 버전보다 구조를 단순화하고 모바일 지원을 강화했다고 한다. 이러다보니 디자인이 2.x보다 상당히 심플해졌는데, 2.x 시절의 디자인을 지원하는 테마 CSS 파일을 별도로 제공한다. 테마 CSS를 적용하면 2.x 시절의 디자인을 볼 수 있다. 2015년 8월 19일, 부트스트랩 탄생 4주년을 기념해 버전 4의 알파 테스트가 시작되었다. 컴파일러가 less에서 sass로 변경되었고, 그리드 시스템을 개선하고, Flexbox 지원, well, thumbnail, panel 컴퍼넌트를 card로 통합 등등의 많은 변경점이 예정되어 있다. 이러다보니 IE8 지원도 끊기고 최소 지원이 IE9로 올라갈 예정이다. 그래서 자연스럽게 Windows XP의 부트스트랩 지원도 버전 3에서 끊긴다. 버전 3 때 버전 2의 지원을 바로 끊어버려서 많은 혼란이 있었던 것에 비해 버전 4때는 발표 이후에도 버전 3의 지원을 당분간 계속할 것이라고 한다. 그러나 개발이 상당히 더디다. 2016년 9월 알파 테스트를 시작한지 1년이 넘도록 알파 테스트만 했었다. 버전 3이 거의 6개월만에 알파 베타 테스트를 다 하고 정식을 내놓은 것에 비하면 상당히 느린 행보다. 2015년 12월 8일에 알파 2 버전이 나온 이후로는 7개월간 아무런 소식이 없었고, 공식 블로그도 침묵에 빠졌다. 그러다 2016년 7월 27일 알파 3 버전이, 9월 5일에 알파 4 버전이 나왔다. 윈도우 XP 지원 종료로 인해 IE8 이하 버전이 버려지고, 최신 버전이자 마지막 버전인 IE11의 점유율이 증가하면서 호환성보다는 성능을 고려하여 부트스트랩 4 버전부터는 IE10 이상만 지원하게 되었다. 구버전 브라우저에서도 레이아웃 깨짐 없이 잘 보여야 하는 사이트는 부트스트랩 3을 쓰라고 권고하고 있다. 현재 2019년 가장 최신버전은 4.3버전이다.

특징

타이포그래피 및 각종 메뉴를 포함한 웹 페이지에서 사용되는 거의 모든 요소를 내장하고 있기 때문에 부트스트랩의 CSS와 자바스크립트, 관련 이미지만 있으면 대부분의 웹 페이지를 손쉽게 제작할 수 있도록 지원한다. 모듈화 되어 있으며 LESS(CSS의 기능을 보완해주는 전처리기이자 스타일시트 언어)의 다양한 요소를 구현하고 있다. 웹 브라우저의 종류 및 크기에 따라 디자인 요소가 자동으로 정렬되는 그리드 레이아웃을 표준 설계로 사용하며 동일한 하나의 웹 페이지를 수정 없이 데스크탑, 태블릿, 스마트 폰에서모두 볼 수 있도록 지원한다. 버전 2.0에서는 팝 오버(pop over) 경고, 버튼, 툴 팁(tool tip), 탭 등의 플러그인이 지원되기 시작하였다.

프레임워크

"소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것" 프레임워크는 구체적이며 확장 가능한 기반 코드를 가지고 있으며, 설계자가 의도하는 여러 디자인 패턴의 집합으로 구성되어 있다. 원하는 기능 구현에만 집중하여 빠르게 개발 할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것으로 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 라이브러리가 포함되어 있다. 프레임워크만으로는 실행되지 않으며 기능 추가를 해야 되고 프레임워크에 의존하여 개발해야 되며 프레임워크가 정의한 규칙을 준수해야 한다.

프레임워크 예시

• Java 개발자라면 Spring
• Python 개발자라면 Django
• JavaScript 개발자라면 Angularjs
• PHP 개발자라면 Laravel

참고자료

• 두산백과,〈부트스트랩〉, 《네이버 지식백과》
• 〈부트스트랩〉, 《위키백과》
• 〈Bootstrap〉, 《나무위키》
• jokergt,〈프레임워크란?〉, 《티스토리》,2012-05-28
• TERMINOLOGY,〈라이브러리, 프레임워크, 아키텍처, 플래폼이란?〉, 《gaerae》,2016-11-30