트위터 부트스트랩(Twitter Bootstrap)은 웹사이트 제작에 사용되는 프레임워크입니다. 트위터 개발자들이 내놓은 이 툴은 처음에는 트위터 내부에서 인터페이스의 일관성을 위해 만들어졌지만 오픈소스로 공개하면서 큰 인기를 얻고 있습니다. 일정한 틀을 가진 저작도구를 프레임워크라고 하는데 티스토리나 워드프레스도 블로그나 웹사이트를 만들기 위한 프레임워크라고 할 수 있습니다. 이들은 블로그나 웹사이트의 콘텐츠를 만들 수 있는 도구이지만 부트스트랩은 웹사이트의 레이아웃인 스킨이나 테마 디자인을 하기 위한 도구입니다.
그동안 웹 프레임워크는 여러 종류가 개발됐지만 웹사이트의 모든 요소에 대해 스타일시트를 정의한 것은 부트스트랩이 처음입니다. 웹 페이지를 만들 때 어떤 요소가 필요할까요? 우선 제 블로그를 보면 상단에 메뉴바가 있고 메뉴바에는 아이콘이 있습니다. 우측에는 검색박스가 있고 검색 버튼이 있습니다. 본문으로 들어와서 상단에는 이미지 슬라이더가 있습니다. 본문 하단에는 댓글 박스가 있고 댓글 달기 버튼이 있습니다. 사이드바에서 카테고리 위젯의 제목에 마우스를 올리면 툴팁이 나타나고 제목을 클릭하면 카테고리 내용이 펼쳐집니다. 이미지 슬라이더를 제외하고 이들 모든 요소는 부트스트랩에 의해 작동하는 것입니다. 물론 부트스트랩에도 캐러젤이라는 이미지 슬라이더가 있지만 단순한 것이라서 다른 것으로 대체해서 사용했습니다.
티스토리와 같은 간단한 구조의 블로그 스킨에는 부트스트랩이 제공하는 수많은 기능 중에 몇가지만 사용되지만 큰 규모의 웹사이트 뿐만 아니라 모바일 웹사이트, 앱(어플, Application) 등 디자인이 필요한 곳에는 항상 사용할 수가 있습니다. 그만큼 포괄적으로 스타일시트를 만들어 놓은 것이죠. 또한 자바스크립트를 13종류 포함 시켜서 웬만한 기능은 부트스트랩으로 처리할 수 있습니다. 부족하다면 수백개의 부트스트랩 관련 프로젝트의 자바스크립트를 추가해서 사용하면 됩니다.
해외에서는 부트스트랩이 발표된 이후 관련된 프로젝트가 거의 매일 하나씩 생겨나고 있어서 현재 수백개의 프로젝트가 부트스트랩과 관련을 맺으려고 하고 있습니다. 처음 개발시에는 두명의 트위터 개발자가 만들었지만 현재 개발되고 있는 부트스트랩 3.0은 수십명이 참여하고 있고 모바일 우선지원 프로그램으로 진화하고 있습니다. 그렇다면 왜 부트스트랩이 인기가 있는지 알아보겠습니다.
1. 시간 절약
웹개발을 해본 분이라면 코드를 만들때 처음부터 하나씩 코딩하지 않죠. 자신이 이미 만들어 놓거나 다른 사람이 만들어 놓은 표준적인 코드를 복사해서 붙여넣은 것으로 시작합니다. 부트스트랩은 HTML 코드 뿐만 아니라 CSS 코드가 이미 만들어져 있으므로 이들 코드를 그대로 복사해서 사용하면 됩니다. 스타일시트는 링크해서 첨부하면 되고 HTML 코드는 복사해서 수정해 사용하면 됩니다. 내가 원하는 디자인을 위해서는 HTML 코드를 수정할 필요가 있고 스타일시트는 부트스트랩에 있는 것을 그대로 사용해도 되지만 일부 레이아웃 변경을 위해서는 사용자 스타일시트가 필요합니다. 부트스트랩이 강력한 힘을 발휘하는 곳이 폼(Form) 요소입니다. input 태그를 사용해서 각종 폼 요소를 만드는데 이들 요소의 배치가 여간 어려운게 아닙니다. 태그와 선택자만 삽입해도 모든 폼 요소가 제대로 배치됩니다.
2. 간단하고 강력한 그리드 시스템
모든 디자인은 그리드 시스템이 필요합니다. 포토샵이나 일러스트레이터로 그래픽 디자인을 하거나 하다못해 3D 그래픽을 하더라도 그리드 시스템을 꼭 필요하죠. 그리드는 효율적이고 아름다운 디자인 레이아웃을 위해 반드시 필요하기 때문입니다. 웹디자인에서 그리드를 제대로 만들려면 아주 많은 시간이 필요합니다. 나중에 가서 수정이 필요할 수도 있어서 한번 수정하게 되면 전체 디자인을 다 바꿔야 하죠. 그만큼 어려운 것이 그리드 시스템입니다. 부트스트랩은 사용하기 간단한 그리드 시스템을 갖춰놓았습니다.
3. 모바일은 자동 적용
모바일용 웹사이트를 만들기 위해서 별도의 작업이 필요없습니다. 부트스트랩은 2.0 버전부터 모바일용 스타일시트를 첨부하거나 제외해서 사용할 수 있게 됐습니다. 그래서 모바일 스타일시트를 추가하면 화면폭이 좁아질때 즉, 모바일 기기에서 웹사이트를 보면 자동으로 모든 콘텐츠가 맞춰집니다. 일반 웹사이트는 콘텐츠를 보기 위해서 화면을 크게 늘려야하죠. 이제 부트스트랩 3.0은 모바일 우선지원으로 만들어지고 있기 때문에 선택이 아니라 필수입니다. 모바일을 생각하고 디자인할 필요 없이 데스크탑용 디자인을 만들면 모바일 디자인은 그냥 얻어지는 것입니다.
4. 강력하고 유연한 사용자 정의
부트스트랩으로 디자인을 하면 정형화된 레이아웃과 디자인으로 인해 모양이 모두 비슷합니다. 버튼의 색상도 그렇고 둥근 모서리, 메뉴바, 팝오버, 툴팁, 등 모든 요소가 이미 만들어진 스타일시트를 사용하므로 같은 디자인이 나올 수 밖에 없습니다. 하지만 부트스트랩은 공장에서 찍어낸 듯한 디자인을 방지하기 위해 사용자 정의 스타일시트를 만들 수 있도록 해놓았습니다. 이것이 가능한 것은 부트스트랩이 LESS라는 프리프로세서로 만들어졌기 때문입니다. LESS는 체계적이고 중복되지 않게 CSS를 만들 수 있는 프로그램입니다. 변수, 함수 등을 사용하므로 하나의 변수 수치를 변경하면 모든 스타일시트에 적용이 되죠. 부트스트랩이 이미 만들어놓은 버튼 색상에서 벗어나려면 이러한 사용자 정의가 꼭 필요합니다.
5. 일관성
부트스트랩의 단점이자 장점입니다. 단점이라면 정형화된 틀로 인해 부트스트랩으로 디자인을 하면 모든 웹사이트가 똑같은 모양을 하게 되죠. 일관성이란 디자인의 정형화된 틀을 의미하지 않습니다. 웹사이트를 만들때 일관성을 유지하기란 아주 힘든일입니다. 왜냐하면 웹사이트에는 하나의 페이지만 있는 것이 아니라 수십개의 페이지가 있고 이들 모든 페이지가 모양이나 기능이 일관되도록 만들어야하기 때문입니다. 기획단계에서 어떤 디자인을 유지할 것인지 고려해야하는데 이에 대한 시간이 많이 소요되고 개발단계에서도 깨지기 쉬운 것이 일관성입니다. 부트스트랩으로 개발하게 되면 이러한 시간을 많이 줄일 수 있습니다.
6. 결합성
이미 만들어진 웹사이트를 부트스트랩으로 리폼하는 것도 쉽습니다. 부트스트랩의 레이아웃은 정해진 클래스 선택자를 일정한 곳에 반드시 넣어야 제대로된 디자인이 나오게 됩니다. 이미 만들어진 HTML 코드에 이러한 클래스 선택자만 삽입해도 부트스트랩 레이아웃이 만들어집니다. 제 블로그도 이미 만들어진 스킨의 HTML 코드에 이러한 선택자를 삽입한 것이죠. 워드프레스 테마도 마찬가지고 어떤 웹사이트라도 선택자의 삽입만으로 부트스트랩으로 전환할 수 있습니다.
7. 도움말 문서
부트스트랩의 도움말 문서는 그 사용법을 자세히 설명하고 있습니다. 단지 영어로 된 것이라서 흠이 되죠. 2.0 버전에서는 각종 요소를 사용하기 위해서는 페이지 별로 찾아 들어가야했지만 3.0 버전은 모든 내용이 하나의 페이지에 들어가 있어서 웹브라우저의 검색기능을 사용하면 모든 요소를 하나의 페이지에서 찾아서 참고할 수 있습니다.
8. 플러그인
위에서 언급했듯이 부트스트랩과 관련을 맺으려는 수많은 자바스크립트 플러그인은 부트스트랩의 기능을 더욱 확대해서 사용할 수 있습니다. 제 글에서 계속 업데이트하고 있는데 이러한 플러그인은 부트스트랩의 스타일시트를 사용하도록 만들어지고 있으므로 부트스트랩이 제공하는 기능이 부족하다면 이런 플러그인의 자바스크립트와 스타일시트를 첨부해 사용하면 됩니다.
http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
9. 업데이트
부트스트랩은 수시로 업데이트 되고 있습니다. 수많은 사람들이 사용하고 있으므로 문제점이 발견되면 피드백을 통해서 개발자들이 업데이트하고 있습니다. 두명의 초기 개발자들은 트위터에 근무하면서 가욋 시간을 이용해서 부트스트랩을 만들었지만 이제 이들은 트위터를 떠나서 일하고 있으며 풀타임으로 작업하고 있습니다. 또한 참여자도 계속 늘어나고 있습니다.
10. 웹개발 전문가가 만든 스타일시트
부트스트랩의 스타일시트를 만들자면 상당한 시간이 걸릴 겁니다. 웹 전문가가 만든 스타일시트를 그대로 사용하는 것이므로 웹표준에 적합한지 걱정할 필요하 없습니다. 웹표준을 그냥 따라오는 것이죠. 부트스트랩을 사용하므로서 내가 만든 웹페이지는 이미 전문가가 만든 웹페이지가 되는 것입니다.
부트스트랩을 사용하지 말아야할 이유 한가지 - 게으른 디자이너 양산
부트스트랩이 인기를 얻으면서 가장 우려되는 것이 디자이너를 게으르게 한다는 것입니다. 해외에서는 부트스트랩을 그만하라는 목소리가 나올 정도입니다. 남이 만든 디자인을 그대로 사용하는 것이니 창의적인 디자인이 되지 못하고 모든 웹사이트가 부트스트랩으로 만들어진다면 웹디자인이라고 할 수도 없습니다. 디자인이란 창의성을 전제로 한 것이라서 디자인이 없는 웹페이지가 되고 맙니다. 하지만 국내의 경우는 예외라고 생각됩니다. 옷이나 신발 하나라도 같은 것을 싫어하는 나라에서 부트스트랩으로 만든 사이트라는 티가 나게 만들 웹디자이너는 없을 것입니다. 디자인 의뢰인조차도 부트스트랩으로 디자인 한다고 하면 부트스트랩 티가 나지 않게 해달라고 요청하는 상황이니까요. 그런 요청이 없어도 그렇게 하는 것이 당연한 일입니다.
부트스트랩은 CSS를 잘 모르는 상태에서 스킨이나 테마를 만들고자 할 분들에게는 좋은 도구가 됩니다. 블로그 인구가 아주 많죠. 저마다 색다른 디자인으로 나만의 블로그 스킨을 만들고자 한다면 부트스트랩으로 레이아웃을 만들고 몇가지 색상만 수정해도 좋은 디자인이 나옵니다. 웹디자인의 대중성에 큰 기여를 할 것입니다.
