[Bootstrap] 소개

* 가장 먼저 보게 될 프레임워크는 바루 Bootstrap이다. 이 프레임워크를 가장 먼저 보게 되는 이유는 바로 지금 블로그에 반영한 티스토리의 반응형 스킨이 이 bootstrap을 사용하고 있기 때문이다. 따라서, 지금 블로그의 반응형 스킨을 개선하거나 변경하고자 한다면, 먼저 bootstrap에 대해서 알고 있어야지 문제 없이 변경할 수 있을 것이기 때문에 bootstrap을 먼저 선택하였다.

* 이전글

2016/05/19 - [자바스크립트 프레임워크] 시작 예고편

* Bootstrap 프레임워크? : http://getbootstrap.com

: Bootstrap은 어디선가 한번씩은 들어봤을 프레임워크라고 생각한다. 이 Bootstrap에 대해서 소개하고 있는 내용을 보면 위의 홈페이지에 들어가면 아래와 같이 소개하고 있다.

: 웹 개발을 빠르게 도와주는, 하나의 프레임워크로 모든 장비에서 동일하게 적용하고자 하는 것을 알 수 있다. 이미 사전에 반응형을 설정해줄 수 있는 CSS를 제공해주고 있으며, jQuery 플러그인을 통한 다양한 컴포넌트들도 제공해주고 있다. 그리고 오픈소스로 MIT 라이센스를 가지고 있으므로 오픈소스에 관심이 있으면 해당 github 프로젝트를 참고해보는 것도 좋을 것이다.

https://github.com/twbs/bootstrap

: 어찌되었든 쉽게 생각하자면, '반응형 웹' 개발을 도와주는 프레임워크이며, 반응형 웹은 브라우져의 크기나 장비의 크기에 따라서 웹페이지를 다르게 보여주는 것을 도와주기 때문에 모바일을 우선으로 하는 웹어플리케이션들을 대상으로도 활용할 수 있다고 하고 있다. 반응형 웹이기 때문에 다양한 컴포넌트들을 제공해주고 있는 것이 특징이라고 할 수 있다.

* 실제 사용 예

: 프레임워크의 가장 중요한 것은 역시 실제로 상용에서 어떻게 사용하고 있는지 확인하는 것이다. Bootstrap은 홈페이지에서 감사하게도 조사할 필요를 조금 덜어주고 아래의 URL에 들어가면 아주 다양한 활용 예를 확인할 수 있다.

http://expo.getbootstrap.com/

: 여기있는 사이트들을 전체적으로 둘러보면 약간 비슷한 사이트 이미지를 가지고 있다. 각 사이트들을 둘러보면서 느낀바로 대충 아래와 같은 특징들이 있는 것 같다.

- 폭이 큰(width:100%) 이미지를 사용하고 있다.

- 아래로 길게 원페이지로 내용을 소개하고 있다.

- 3개의 칼럼과 같이 여러 칼럼으로 되어있는 내용들이 많다.

- 그리고 브라우져를 작게 만들면 이 칼럼들이 세로로 펼쳐진다.

: 위의 expo에서 가장 마음에 드는 웹페이지는 바로 아래의 웹페이지이다. 넓었을 때에는 각각의 칼럼들이 그리드처럼 되어있다가 화면이 작아지면 세로로 펼쳐지는 것을 확인할 수 있다.

http://indicius.com/

: 브라우져를 작게 만들면 아래와 같이 세로로 배열이 바뀐다. 위의 Bootstrap 사용 예를 보여주는 대부분의 사이트들이 이러한 식의 배치를 사용하는 것을 보니 아마 이러한 것이 Bootstrap의 핵심 기능 중 하나가 아닐까 예상할 수 있게 만든다.

: 따라서 Bootstrap에서는 이러한 반응형의 특징을 가진 웹페이지를 만드는데 좋은 프레임워크라는 것을 예상할 수 있다. 그렇다면 대표적으로 어떠한 기능들을 Bootstrap에서 제공해주고 있는지 살펴보면 아래와 같이 뽑을 수 있다.

* Bootstrap 제공 기능

: Bootstrap의 기능은 홈페이지에서 나누고 있는 기준으로 크게 아래와 같이 나눌 수 있다.

1. CSS 기능

: CSS 기능은 위의 Bootstrap 웹페이지들이 가지고 있는 특징 중 페이지가 여러 칼럼의 내용을 가지고 있다가, 세로로 나열하게 되는 그러한 기능을 제공해주는 것이 CSS 기능이며, Bootstrap을 활용하는데 있어서 가장 어렵지 않게 참고하고 사용할 수 있는 기능이다. 여기에 다양한 HTML 태그들에 대한 스타일도 제공하고 있어서, 홈페이지를 꾸미는데 있어서 필요한 스타일들을 사용할 수 있다.

2. 컴포넌트 기능

: CSS 기능은 사용자가 정의해 놓은 내용 위에 Bootstrap의 디자인이나 스타일을 입히는 것이라면, 컴포넌트 기능은 Bootstrap에서 제공해주고 있는 디자인 또는 컴포넌트에 사용자가 내용을 입히는 것이라고 생각하면 편하다. 가장 대표적인 예로는 네비게이션바나 탭, 버튼, 드랍다운 목록 등과 같은 기능을 Bootstrap에서 쉽게 만들 수 있도록 제공해주고 있으며, Bootstrap에서 만든 틀 위에 내용을 간단하게 넣고 수정하는 방식이다.

3. 자바스크립트 기능

: 자바스크립트 기능은 단순한 반응형이 아닌 사용자의 액션과 상호작용해야 하는 기능들에 대하여 Bootstrap에서 쉽게 제공해주고 있는 부분들이며, 가장 쉽게 생각하면 좋은 부분은 바로 브라우져 안에 자체적인 모달 창을 띄운다던가 스크롤이 일어날 때 네비게이션바를 업데이트 하거나, 내용을 접고 펴기, 그리고 이미지 슬라이드쇼 등과 같은 기능을 제공해주고 있다. 

: 각 기능은 반응형 웹페이지를 만드는게 효율적으로 사용할 수 있도록 되어있고, Bootstrap 내에서 특정 class 또는 태그, 또는 자바스크립트 API로 사용되고 있기 때문에 각각에 대해서는 레퍼런스를 참고해가면서 익히는 것이 가장 확실할 것이다. 제공하고 있는 모든 케이스 대해서는 전체를 살펴보지는 않고, 티스토리 반응형 스킨에서 사용하고 있는 부분을 살펴보고 실제 사용예와 수정하는 방법들에 대해서 살펴보고, 반응형 스킨에 더 반영하면 좋을 것 같은 기능들도 사용할 수 있도록 반응형 스킨을 편집해가면서 소개할 것이다.

* Bootstrap 소스 커스터마이징

'유레카!!'

: 솔직히 말하면 Bootstrap에서 제공해주는 기능 중 가장(?) 마음에 드는 기능이다. 웹페이지의 성능과 속도를 민감하게 생각하는 개발자로서 이러한 기능이 있다니 유레카!를 외치고 싶은 기분이다. 이러한 기능을 넣다니 정말로 Bootstrap 개발자들에게 너무나 큰 박수를 보내고 싶다. 커스터마이징 기능은 바로 Bootstrap 프레임워크에서 쓰고자 하는 내용만 넣고, 사용하지 않는 부분은 빼고 새로운 자기만의 Bootstrap CSS 파일, JS 자바스크립트 파일을 만들어서 올릴 수 있도록 해주는 것이다. 이것이 너무나 놀랍다고 생각한 이유는 예를 들면, jquery 등과 같은 프레임워크에 대한 사용이 꺼려지기도 하는 이유는 바로 jquery 프레임워크의 5%만 사용하기 위해서 전체 100%의 모든 기능을 불러와서 다운로드 받고 초기화해야 한다는 문제가 있기 때문이다. 그런데 Bootstrap에서는 이러한 문제를 해결하기 위하여 먼저 자기가 사용할 기능들만 먼저 선택을 하고, 자기가 원하는 디자인을 설정할수 있수 있는 기능을 제공해주고 있다.

: 위와 같이 Bootstrap에서는 다양한 기능들을 제공하는데 솔직히 이 모든 기능들을 100% 사용하는 웹사이트는 정말로 손에 꼽을 것이다. 그래서 원하는 기능들을 선택하고, 아래와 같이 디자인, CSS를 입력한 다음 다운로드 버튼을 누르면 잠시 후에 compact된 정말로 필요한 기능들만 제공하는 Bootstrap 파일들을 서버에서 빌드하여 다운로드 받도록 해주는 것이다.

: 솔직히 자바스크립트 프레임워크를 사용하는데 꺼려지는 가장 큰 이유가 이러한 딱 필요한 기능만 제공하는 프레임워크는 없고 90% 이상 안 쓰는 기능들을 제공하는 프레임워크가 있기 때문인데, Bootstrap에서는 이것을 자체 커스터마이징 기능을 넣어줘서 원하는대로 최적화된 프레임워크를 구축할 수 있게 해주고 있다. 몇번을 보더라도 그야말로 유레카!

: 솔직히 개발자로서, 웹 성능과 UX에 관심있는 개발자로서 이 기능 때문에 여러분은 Bootstrap을 써야한다고 주장하고 싶다.

"여러분 Bootstrap 쓰세요. 커스터마이징해서 두번 쓰세요."

: 단, 반응형 웹을 만들고자 하는 경우에만... 물론 폼이나 아이콘이나 다양한 기능들을 제공해주고 있어서 반응형 웹페이지가 아닌 경우에도 해당 기능만 뽑아서 사용하는 것도 매우 편리할 것이다. 물론 커스터마이징을 얼마나 잘 하느냐도 별도의 분석 시간과 고생이 들어가므로 고민해봐야 할 것이다.

* 아쉬운 점?

: 이러한 커스터마이징도 가능한 너무나 놀라운 기능을 제공해주고 있는데, 단 한가지 아쉬운 점이 있다면 바로 jquery에 의존성이 있다는 점이다.

"커스터마이징을 해주면 뭐하나, 자기보다 더 큰 놈이 항상 뒤에 따라다니는데.." 

<bootstrap.min.js (37kb), jquery.min.js (97kb)....>

: 물론 요즘은 jquery는 기본으로 사용하는 경우가 많으니 크게 고민거리가 아니라고 생각해도, 커스터마이징을 직접 해보면 자바스크립트 파일의 크기는 37kb 전후로 크게 달라지지 않아서 자바스크립트에 대한 커스터마이징 성능은 크게 향상되지 않을수도 있다는 점이 조금은 아쉽다. 하지만 CSS는 전체를 선택하는 경우에는 minified 기준 120KB나 되는데 사용하는 기능 일부만 선택해도 크기가 확확 줄어드니 CSS에 대한 효과는 아주 좋다. CSS를 사용할 때에도 불필요한 CSS는 최대한 삭제해주는 것이 초기 CSS 파싱 및 실행 단계에서 성능을 향상시킬 수 있으니 함께 고려해주면 좋다.

: 또 다른 아쉬운 점이 있다면, 단순히 class 만으로 여러 컴포넌트나 반응형을 구현해주고 있기 때문에 기존에 Bootstrap 프레임워크에 대해서 이미 알고 있는 사람이 아니라면, 이러한 HTML 태그에 class를 부여한 것이 개발자가 임의로 한 것인지, 아니면 그냥 개발자가 따로 정의한 것인지 Bootstrap을 학습하기 전까지는 잘 모른다는 점이다. 물론 이러한 점은 초기에 다른 개발자가 개발해놓은 소스를 처음 접할 때에만 그렇고, 한번 Bootstrap에 대해서 접했던 사람이라면 쉽게 파악할 수 있을 것이다.

: 그런데 조금더 나아가서 아쉬운 점이라면 이러한 class를 정의하는 부분을 보면 일반적으로 사용하는 그러한 class 명을 사용하는 경우가 많다. 예를 들면 버튼에 대한 클래스 명을 아래와 같이 btn을 사용한다.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

: 또는 아래와 같이 네비게이션은 nav 클래스를 사용하기도 한다.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

: 여기서 보면 class로 사용하는 것이 "btn" 그리고 "nav"이다. 일반적인 개발자들이 CSS를 만들 때 사용할수도 있는 그러한 class 명을 사용하고 있어서, 다른 프레임워크가 다른 소스와의 충돌 가능성이 매우 높게 될수도 있다는 것을 알 수 있다. 일반적인 프레임워크들은 이러한 경우 자기만의 prefix는 붙이거나 하는데, 아마 bootstrap은 최초에 개발되었을 때 그러한 고려를 하지 않고 개발되어 하위 호환성을 위해서 계속 유지하고 있는 것이 아닌가 예상해본다. 예를 들면, "bs-nav" 라던가, "bs-btn" 등과 같은 prefix를 달고 있으면 어느 개발자가 와도 조금 이상한 것을 느끼고 이것이 bootstrap에서 사용하는 클래스구나 예측할 수 있을 것이다.

: 어찌되었든 이렇게 일반적인 "nav"나 "btn" 등과 클래스명을 이용하고 있다는 것은, 기존에 구축해 놓은 사이트에 별도로 추가로 반영하기가 어렵다는 점이 하나 있고, 그 다음은 다른 프론드엔드 프레임워크와 함께 사용하는 것이 어려울수도 있다는 점이다. 물론 상황마다 다르기 때문에 충돌이 있다고 단정 지을수는 없지만, 충돌이 일어날 수 있는 확률은 특정 prefix를 사용하는 것보다는 훨씬 높다는 것은 사실이다.

* 그래도 매력이 더 많은 Bootstrap 프레임워크

: 그럼에도 불구하고 커스터마이징 기능은 정말로 놀랍고, 반응형 웹페이지에서 요구하고 있는 몇몇 핵심적인 주요한 기능들을 편리하게 사용 가능하게 해주는 것이 이 Bootstrap 프레임워크라고 생각한다. 사실 아쉬운 점이라고는 했지만 Bootstrap을 사용하고 있는 90% 이상의 사이트들은 그러한 문제가 없을 것이 분명하다. (그런데 티스토리 반응형 스킨은 문제가 발생했다. 물론 Bootstrap자체의 문제라기 보다 jquery 의존성으로 인한 문제이기는 하다.)

: 그러면 다음에는 세부적으로 각 기능별로 세부적인 구현 예와 함께 살펴보도록 할 것이다. 살펴볼 기능들은 대부분 티스토리의 반응형 스킨에 구현되어있는 부분들 위주로 할 것이며, 추가적으로 매력적인 기능들은 티스토리 반응형 스킨에 직접 기능을 추가도 해보면서 분석할 예정이다.

끝.

* 다음글 예정

2016/06/23 - [Bootstrap] 시작하기, CSS 기능: 그리드 시스템(Grid system)

2016/06/xx - [Bootstrap] CSS 기능

2016/07/xx - [Bootstrap] 컴포넌트 기능

2016/07/xx - [Bootstrap] 자바스크립트 기능