Bootstrap 3.3.7 | Bootstrap 기본 | Bootstrap이란?

Web 사이트의 개발은 지난 몇년 동안 극적으로 바뀌었다. 크게 변화한 요인이 되고 있는 것 중 하나가 ‘스마트 폰’이다.

스마트 폰은 PC에 비해 화면이 작고 세로 길다. 따라서 PC 용으로 만들어진 Web 페이지를 그대로 보면 작고 보기 불편하다. 그래서, PC 용과는 별도로 스마트 폰용 페이지를 제공하기도 했다.

하지만 일부러 같은 내용의 Web 페이지를 여러개를 만드는 것은 비효율적이다. 또한 페이지 내용을 업데이트하게 되면, PC 용과 스마트 폰용 양쪽을 모두 변경해야 한다. 이는 매우 귀찮은 일이다.

Web 페이지를 로드할 때에, 그것이 컴퓨터 화면인지 스마트 폰인지를 확인하여 환경에 따라 자동으로 최적의 레이아웃에 표시하는 구조라면, 이러한 귀찮은 일은 없어질 것이다.

그런 생각에서 태어난 것이 “반응형 디자인(responsive design)“이라는 개념이다. 다양한 디바이스에 따라 최적화된 레이아웃을 생성하자는 것이 기본이다. 그리고 그것을 쉽게 실현할 수 있는 소프트웨어로 주목 받고 있는 것이 “Bootstrap"이다.

Bootstrap은 “프론트 엔드, Web 응용 프로그램 프레임워크"라는 프로그램이다. 일반적으로 Web 응용 프로그램을 개발하는데 “Web 응용 프로그램 프레임워크"라는 것이 사용되기도 하지만, 이것은 백엔드(서버 측)에서 동작하는 것이 기본이다. Bootstrap는 프런트엔드(Web 브라우저 측)에서 움직이는 프레임워크이다.

이 Bootstrap은 Mark Otto와 Jacob Thornton 2명이 중심이 되어 개발되는 오픈 소스 프로그램이다. Twitter 내부에서 개발하던 라이브러리로 각종 UI Component들을 모아 놓은 묶음이며, Bootstrap을 이용하면 간단한 스크립트와 CSS/HTML 만으로 깔끔한 형태의 UI/UX를 구성할 수 있다. 디자인에 익숙하지 않은 개발자들이 데모 또는 프로토타입을 만들기에 아주 유용하며, 구현하기 까다로운 여러 Javascript action들도 간단하게 라이브러리로 제공하고 있어 쉽게 사용할 수 있다. 현재 아래 사이트에서 공개되고 있다.

http://getbootstrap.com/

이 페이지에 있는 “Download Bootstrap"라는 버튼을 클릭하면 Getting Started 페이지의 다운로드 항목으로 이동한다. 여기에서 “Download Bootstrap"버튼을 클릭하면 Bootstrap 본체를 다운로드할 수 있다.

Bootstrap는 파일을 다운로드하여 직접 Web 사이트에 통합하여 사용하는 방법 이외에, CDN (Contents Delivery Network)을 이용하여 온라인상에서 파일을 다운로드하고 사용하는 방법 등이 있다. CDN을 이용한다면 파일을 다운로드할 필요가 없다. (이것에 대해서는 나중에 설명한다.)