부트스트랩

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

개요

부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 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), 탭 등의 플러그인이 지원되기 시작하였다.

Bootstrap에서 해주고 있는 가장 기본적인 동작 중 하나는 바로 최대한 모든 브라우져들에서 동작할 수 있는 다른 스타일들을 하나로 통일 시켜주는 것이다. 예를 들면 태그가 있으면, 각 브라우져별로 이 태그안에 있는 텍스트를 어떠한 방식으로, 어떠한 크기와 어떠한 폰트, 그리고 어떠한 굵기로 보여줄지 각각 판단해서 보여주어야 한다. 이럴 때 서로 다른 브라우져에서 만약 다르게 이 태그를 표시해준다면 브라우져별로 보이는 내용이 달라질 수 있는 위험성이 있기 때문에 이러한 것들을 브라우져의 기본값을 사용하도록 하는 것이 아니라, 각 태그들에 대하여 기본적인 설정들을 명시하고 있다.

반응형 웹(Responsive Web)

디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말한다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹이죠. 오직 하나의 HTML소스 만으로 특정 장치에 최적화된 환경을 사용자에게 제공한다. 반응형 웹에 있어서 빼놓을 수 없는 개념이 모바일 퍼스트이다. 모바일 퍼스트는 웹 디자인을 할때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법이다. 이 개념은 앞서 말했 듯 태블릿 PC, 스마트 폰등 모바일 기기의 이용이 늘어나면서 일반 웹 사용자보다 모바일 웹 사용자가 더 많아지면서 생기게 됐다. 모바일 퍼스트의 핵심은 모바일의 제약을 집중의 기회로 본다는 것에 있다. 모바일의 제약은 크게 세가지로 나눌 수 있다.

• 모바일 기기의 스크린 크기
• 네트워크 속도 및 품질
• 사용하는 모드

위 세가지 제약을 통해 일반 웹은 모바일 웹에 있어서 불필요한 요소(기능/형식/꾸미기/이동)들을 가지고 있다고 판단한다. 불필요한 요소를 최소화 시킨 모바일 웹은 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 나타낸다다. 그리고 사용자들에게 사용하기 편하고 작업을 빠르게 처리할수 있는 웹을 제공 한다. 그 중 가장 대표적인 것으로 일반 웹 메뉴를 한 버튼으로 축소 시켜놓고 첫 화면부터 컨텐츠를 보여주는 것이다. 반응형 웹은 고 사양(고 해상도)웹이 저 사양(저 해상도) 모바일 기기에서도 불편함이 없이 구현이 되는데 초점이 맞춰져 있다. 주로 레이아웃과 스타일 변화에 초점을 맞추어서 진행이 된다. 하지만, 레이아웃과 스타일 보다는 웹 컨텐츠를 모바일 퍼스트 관점으로 재구성하는 반응형 웹도 있다. 이는 사용자가 사용하는 기능에 대해 연구하고 사용자가 필요로하는 기능을 중심으로 우선순위를 둬서 제공한다. 반응형 웹의 최종형은 위 두가지를 섞어놓아 모든 기기에서 사용사자 원하는 컨텐츠를 보기좋게 제공하는 것이다. 부트스트랩은 이런 반응형 웹 디자인 사이트를 개발하기 위해 만들어졌다.

그리드 시스템(Grid system)

Bootstrap이 가장 많이 사용되는 이유이자 반응형 웹페이지를 만들기 위해서 가장 많이 사용이 필요한 기능이다. 특히 Bootstrap의 가장 핵심적인 기능이므로 기본적으로 어떻게 동작하고 이러한 기능들을 어떻게 활용할 수 있을지 조금 더 고민해보는 것이 Bootstrap을 완벽하게 활용할 수 있는 기회가 될 것이다. 여러 클래스들이 복잡하게 있는 것이 조금 어려울수도 있는데, Bootstrap에서는 기본적으로 12칼럼으로 나누어서 기능을 제공하고 있다고 생각하면 쉬울 것이다. 이를 테이블의 형식대로 row 클래스와 각종 col-* 클래스들로 자유롭게 구성이 가능하며, 이렇게 구성한 페이지들은 Bootstrap에서 알아서 크기에 따라 반응형으로 동작하도록 만드는 것이다. Bootstrap에서는 아래의 규칙대로 이러한 그리드 시스템을 구축하라고 권고하고 있다.

• row 클래스는 container나 container-fluid 안에 있어야 정상적인 배열이나 패팅을 지원해준다.
• row 클래스는 가로로 그룹 지을 칼럼들의 집합이다.
• 내용은 col-* 클래스 안에 있어야 하며, row의 직속 자녀 요소로 배치해야 한다.
• 칼럼은 총 12칼럼이 있는 것으로 정의하여 각 배치할 %에 따라서 클래스를 결정하면 된다. 예를 들어, 같은 넓이의 3개의 칼럼을 쓰고자 한다면 3개의 .col-xs-4 칼럼을 쓰면 된다.
• 12칼럼이 넘어가면 새로운 줄로 칼럼이 배치된다.

이러한 그리드 시스템은 row-col을 사용하는 것은 가로x세로의 크기를 적당하게 나누어서 내용을 배치하던 것과 유사하게 편리하게 사용할 수 있도록 도와주고 있어서 매우 유용하게 사용할 수 있다. 옛날에는 이러한 가로x세로 크기를 나누기 위해서 table태그를 사용하는 것을 좋아했지만, table태그를 사용하는 것이 HTML 재사용성과 소스 관리, 그리고 다른 브라우져간에 보여지는 것이 다르게 보여지는 경우가 많아서 화면에 내용을 보여줄 때에는 div태그를 기본적으로 많이 사용하게 되었다. 그 이후로는 이러한 CSS를 다루는 것이 조금 어려워진면이 있어서 Bootstrap에서는 이러한 테이블 구조로 웹페이지를 디자인할 수 있도록 그리드 시스템의 기능을 제공해주고 있는 것이다. Bootstrap의 그리드 시스템에서 사용하고 있는 칼럼의 클래스 종류는 기본적으로 4가지가 있으며, 각각의 종류 뒤에는 12칼럼 중 몇개의 칼럼을 사용할지 명시하여 사용하면 된다.

• .col-xs-*: 항상 가로로 배치
• .col-sm-*768px: 이하에서 세로로 표시 시작
• .col-md-*992px: 이하에서 세로로 표시 시작
• .col-lg-*: 1200px 이하에서 세로로 표시 시작

프레임워크

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

프레임워크 예시

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

CSS[cascading style sheets]

웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS이다. 간단히 스타일 시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

Bootstrap 프레임워크의 CSS 기능은 웹페이지에 적용하게 되는 CSS 규칙들을 기본적으로 설정하고, 기본 HTML 요소들에 대한 스타일을 적용하는 기능들을 포함하고 있다. 특히, Bootstrap 프레임워크에서 제공해주고 있는 반응형 웹페이지의 가장 큰 기능인 그리드 형식으로 여러 칼럼으로 보여주다가 브라우져의 크기가 작아지면 세로로 나열시키는 기능을 이 CSS 기능에서 적용하면 된다. 양식이나 버튼들에 대해서도 다양한 CSS 설정을 기본적으로 해주니 기본 UI 디자인에서 조금 더 향상된 CSS를 체험할 수 있다.

CSS 기본설정

CSS 기능을 이용하기 위해서는 기본적으로 HTML5를 사용해야 한다. 그러기 위해서는 DOCTYPE에 대해서 HTML5로 정의해야 한다. 가장 위에 문서 양식은 아래와 같이 정의하면 된다.

<!DOCTYPE html>

그리고 Bootstrap 2에서는 모바일은 옵션으로 다루고 있었지만, Bootstrap 3에서는 모바일 우선(mobile first)인 프레임워크로 작성이 되었기 때문에 뷰포트에 대한 메타태그 설정을 하면 좋다. 물론 사이트에 따라서 이러한 뷰포트는 다르게 설정을 해도 되며, 기존의 사이트에 적용하는 경우에는 모바일에 대한 화면의 크기가 달라지기 때문에 예상하지 못하는 문제가 발생할 수 있으므로 조심해야 한다.

<meta name="viewport" content="width=device-width, initial-scale=1">

이후에 <head> 태그 안에서 CSS 파일을 link 시키면 기본적인 CSS 기능들은 사용할 수 있다. 아래는 CDN에 있는 Bootstrap CSS 파일을 사용하는 것으로, 필요하면 개별적으로 서버에서 다운 받아서 사용하면 된다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

이렇게 끝내면 기본적으로 Bootstrap의 CSS 기능을 사용하는 준비는 끝났다. 자바스크립트 기능이나 위젯을 사용하려면 추가로 자바스크립트 파일을 불러와야 한다. 이렇게 Bootstrap의 CSS를 가져오기만해도 Bootstrap에서는 기본적으로 브라우져에서 기본값을 가지고 서로 다르게 나타낼 수 있는 부분들의 스타일을 정의하여 동일하게 적용하도록 한다.

참고자료

• 두산백과,〈부트스트랩〉, 《네이버 지식백과》
• 〈부트스트랩〉, 《위키백과》
• 〈Bootstrap〉, 《나무위키》
• jokergt,〈프레임워크란?〉, 《티스토리》,2012-05-28
• TERMINOLOGY,〈라이브러리, 프레임워크, 아키텍처, 플래폼이란?〉, 《gaerae》,2016-11-30
• 두산백과,〈CSS〉, 《네이버 지식백과》
• unikys,〈Bootstrap시작하기, CSS 기능: 그리드 시스템(Grid system)〉, 《티스토리》,2016-06-23
• Nextree,〈CSS : 반응형 웹(Responsive Web)〉, 《nextree》,2014-3-31