Bootstrap

1 개요

부트스트랩(Bootstrap)이란, 일반적으로 한 번 시작되면 알아서 진행되는 일련의 과정을 뜻한다.
원래의 부트스트랩은 Boot + strap으로, 긴 부츠의 뒷부분에 달린 고리를 뜻했다. 이것에서 'pull one's own by one's bootstrap'이라는, 불가능한 일을 해낸다는 관용어구가 생겼다. 그리고 그 의미가 변화하여, 도움받지 않고 스스로의 상황을 개선시킨다는 의미가 되었다.

혹자는 뮌히하우젠 남작 이야기에서 이 단어가 나왔다고 하지만 사실 그것과는 관련이 없다고 한다. 근거는 해당 출처 참고.

현재는 다양한 방면에서 부트스트랩이란 용어가 사용되고 있다.

2 컴퓨터 부팅 과정

부팅 과정을 부트스트랩이라고 하기도 하는데 이 단어가 줄어서 생긴 말이 부팅이다.
자세한 것은 부팅 문서 참조.

3 통계학에서의 부트스트랩

브래들리 에프론(Bradley Efron)이 1979년에 제안한 방법으로, 표본에 대해 더 자세히 알기 위해 사용한다.
아이디어는 모집단의 성질에 대해 표본을 통해 추정할 수 있는 것처럼, 표본의 성질에 대해서도 재표본을 통해 추정할 수 있다는 것이다. 즉 주어진 표본(샘플)에 대해서, 그 샘플에서 또 다시 샘플(재표본)을 여러번(1,000~10,000번, 혹은 그 이상)추출하여 표본의 평균이나 분산 등이 어떤 분포를 가지는가를 알아낼 수 있다. 단, 원래의 모집단이 IID가정을 충족해야 한다는 제약이 있다.

4 웹 디자인 프레임워크

이 문단은 Bootstrap Framework · 부트스트랩 프레임워크(으)로 검색해도 들어올 수 있습니다.

파일:Attachment/Bootstrap/bootstrap.png
Bootstrap

홈페이지
한국어 홈페이지(오역이 있을 수 있음)[1]
4.0.0 알파 버전 홈페이지[2]
1.4.0 옛날 버전 홈페이지
2.3.2 옛날 버전 홈페이지

4.1 개요

트위터에서 시작된 HTML5 기반의 오픈 소스 웹 디자인 프레임워크.

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

4.2 장점

트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 것이다. 웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻는 프레임워크이다.

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

거기다 이게 오픈소스다. GPL은 아니고 MIT 허가서를 사용하는데, 재배포 면에서는 GPL보다 휠씬 자유로운 라이선스이다. 단 같이 들어 있는 아이콘은 CCL BY 3.0을 사용하므로 출처를 밝혀야 한다[5]. 소스까지 오픈되어있다 보니 여기서 파생된 프로젝트만 해도 수백 개를 넘어간다.

4.3 단점

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

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

4.4 버전

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 버전이 나왔다.

4.5 관련 문서

4.6 부트스트랩이 적용된 사이트

나무위키에 문서가 있는 경우만 등재해 주세요.

  1. ↑ 버전 3.3.2 기준 번역이라 공홈에 비해 업데이트가 늦다. 한 때 버전 3.2까지 업데이트 되는 와중에도 번역이 3.0.0 기준으로 업데이트 없이 유지되어서 최신 버전과 안 맞는 것이 많았다.
  2. ↑ 현재 알파 4버전이다.
  3. ↑ 물론 인터넷 익스플로러 6은 너무 오래된 브라우저라서 지원하지 않는다. 최소 지원은 인터넷 익스플로러 7부터다. 그나마 새로 나온 3.0에서는 IE7 지원이 없어졌다.
  4. ↑ 화면을 가로로 12개의 그리드로 분할하여 거기에 맞춰 각 요소의 박스 크기를 정해 쓸 수 있다. 이 그리드의 크기는 웹 브라우저의 크기에 따라 바뀌거나 자동으로 알맞게 정렬된다.
  5. ↑ 근데 이 아이콘 잘 안 쓴다. 부트스트랩과 호환되는 Font Awesome을 더 많이 쓰기 때문인데, 아이콘 수가 500여개를 넘어가기 때문에 개수 면에서도 넘사벽이고 폰트 형식이기 때문에 크기 변환도 자유롭기 때문.
  6. ↑ 전에는 다음 도우 기반이였으나 2015 나무위키 레이아웃 변경이 일어나서 바뀌게 되었다. 현재 4.0.0 알파버전을 쓰고 있다.
  7. ↑ 2014년도에 홈페이지 폐쇄