트위터 부트스트랩으로 쉽게 만드는 웹사이트 UI

Twitter Bootstrap

트위터에서 공개한 Twitter Bootstrap (트위터 부트스트랩) 이라는 Frontend Framework(?) 입니다.

Bootstrap이 요즘 개발할 때 많이 쓰이죠.

특히 빠르게 프로토타이핑 할 때 쓰기도 하고 진짜 서비스를 개발할 때도 쓰입니다.

이유는 흔히 많이 쓰일만한 요소나 폼 같은 것들이 이쁜 모양으로 만들어져있고 제공하는 jQuery Plugin들이나 반응형 그리드 같은 기능들이 탑재되어있기 때문입니다.

시작

Bootstrap이 제공하는 css 파일과 js파일만 추가해주면

Bootstrap을 시작할 수 있습니다.

head 태그 안에 아래 두줄을 추가해주면 됩니다.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">

둘러보기

Bootstrap 공식사이트 에 가보면

워낙 문서화나 예제가 잘되어 있어서 사이트를 돌아다니면서 필요한 요소나 그런 부분들을 [복사 - 붙여넣기] 해서 코드로 가져와서 본인이 쓰고 싶은 대로 조금 수정을 해주어가며 쓰면 됩니다.

다른 자잘한 요소들 (버튼, 폼, 테이블, 아이콘, 라벨 등) 은 그냥 보면서 해도 되지만 기존에 그리드(Grid)시스템으로 웹페이지 레이아웃을 잡아본적이 없으신 분들은 조금 헷갈리실수도 있기 때문에 그리드 시스템, 특히 Bootstrap 기준으로 설명하겠습니다.

그리드란?

여러 브라우저, 버전 마다 다른 브라우저에서 다르게 보이는 CSS를 normalize(일종의 대패질)해주고 레이아웃을 그리드 단위로 해주어 좀더 균형잡힌 레이아웃을 만들도록 해주는 것입니다.

쉽게 말해서 길이가 다른 레고블럭을 이용해서 사이트의 레이아웃을 잡는 그런 것입니다.

Bootstrap말고도 다른 그리드들 같은 경우에는 여러개의 사이즈가 있지만 Bootstrap의 경우에는 그리드 한줄의 길이는 12입니다.

이 얘기는

[ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] [ 1 ] 

[    2    ] [    2    ] [          4          ] [       3       ] [ 1 ]

[                6                ] [                6                ]

[                                  12                                 ]

                  [                 6               ]

전체적인 페이지를 위에 나온 것처럼

1 ~ 12 사이즈의 그리드를 한줄당 총합 12에 맞춰서 레이아웃을 그리는 겁니다.

엄청나게 실험적이고 예술적인 레이아웃을 구상하지 않는 이상 그리드로 안정감있고 균형잡히게 레이아웃을 잡을 수 있습니다.

위 그리드를 Bootstrap 코드로 보여드리면

<div class="row">
  <div class="col-md-1">1</div><div class="col-md-1">1</div><div class="col-md-1">1</div>
  <div class="col-md-1">1</div><div class="col-md-1">1</div><div class="col-md-1">1</div>
  <div class="col-md-1">1</div><div class="col-md-1">1</div><div class="col-md-1">1</div>
  <div class="col-md-1">1</div><div class="col-md-1">1</div><div class="col-md-1">1</div>
</div>

<div class="row">
  <div class="col-md-2">2</div><div class="col-md-2">2</div>
  <div class="col-md-4">4</div><div class="col-md-3">3</div><div class="col-md-1">1</div>
</div>

<div class="row">
  <div class="col-md-6">6</div><div class="col-md-6">6</div>
</div>

<div class="row">
  <div class="col-md-12">12</div>
</div>

<div class="row">
  <div class="col-md-6 col-md-offset-3">6</div>
</div>

이렇게 됩니다.

여기서 저는 .col-md-숫자 를 사용했지만 기기나 브라우저 창 가로 크기에 따라 동작을 다르게 하도록 하는 반응형 그리드 종류로써

스마트폰	태블릿	일반 화면	큰 화면
768px 미만	768px 이상	970px 이상	1200px 이상
.col-xs-	.col-sm-	.col-md-	.col-lg-

이렇게 4종류가 있으며 반응형 그리드를 얼마나 다채롭게 사용하고 싶느냐에 따라 활용도는 달라집니다.

그리드가 전부가 아닙니다

그리드를 시작으로 공식사이트에 있는 CSS, Components, JavaScript 를 둘러보시고 코드를 따라해보면서 사용을 해보세요.

자연스럽게 익히면서 사용이 가능합니다.

왠만한 자주 쓰이는 UI는 이미 많이 만들어져 있기 때문에 Bootstrap의 이런 UI Component를 사용하면 웹사이트 UI를 쉽고 빠르게 만들 수 있습니다.

호환성

Bootstrap 3는 IE8 이상을 (Bootstrap 2는 IE7) 을 지원합니다.

어떤 사이트가 Bootstrap으로 만들어져있나요?

Bootstrap 공식 사이트 자체도 Bootstap을 통해서 만들어져 있고 제가 운영하고 있는 어그로 끄는 이야기 도 Bootstrap으로 만들어져있습니다.

두 사이트 둘다 둘러보시고, 확인 차, 브라우저의 창크기를 늘렸다 줄였다 조절해보세요.

데스크톱 화면

모바일 화면

창 크기에 따라 메뉴 모양이나 전체적인 레이아웃이 반응형으로 바뀌는 모습을 확인해 보실 수 있습니다.

다른 Bootstrap으로 만들어진 여러 사이트를 둘러보시려면 Built with Bootstrap 에 가보세요.