부트스트랩 (Bootstrap, from Twitter)

1. 부트스트랩 (Bootstrap, from Twitter) 은 무엇인가?

부트스트랩 (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark Otto와 Jacob Thornton)가 개발한 가볍고 간단한 오픈소스기반 (아파치2.0라이센스) 의 HTML5, CSS3 UI 프레임워크입니다. HTML5, CSS3, Javascript 로 구성되어 있고, 가볍게 트위터 디자인 비슷한 UI 를 빠르게 구현해낼 수 있는 각종 콤포넌트들을 제공해 주고 있습니다.

2. 부트스트랩 다운로드

부트스트랩 홈페이지 (http://twitter.github.com/bootstrap/) 에서 릴리즈된 버전을 다운로드 할 수 있습니다. 현재 2.0 까지 릴리즈됐고, 부트스트랩 저장소 (http://github.com/twitter/bootstrap)를 살펴보면, 현재 2.0.1 버전으로 작업이 진행중이네요.

3. 내 홈페이지에 bootstrap 적용하기

HTML, CSS, Javascript 에 선수지식이 있으면 조예가 깊지 않아도, 부트스트랩을 가져다가 나만의 사이트를 만들 수 있습니다. 이미 샘플로 구성된 부트 스트랩 예제 화면을 참조하면 어렵지 않게 따라 만들 수 있습니다. 또한 부트스트랩 홈페이지에서 자세한 설명까지 설명되어 있으니, 조금만 시간을 내어 읽어보면 원하는 입맛대로 만들어 낼 수 있습니다. 기본적으로 CSS 에 대한 깊은 지식이 없어도 class 를 이용하는 것으로 충분히 원하는 의도대로 만들어 낼 수 있다는 점에서, 디자인에 약한 개발자에게는 나홀로 이쁜 사이트 만들기에 최적화된 아이템임에 틀림없습니다.

저도 간단하게, 샘플 가져다 만들어 봤습니다. (rkJun’s bootstrap) -_-;

4. 커스터마이징

어느정도까지는 내 입맛대로 바꿔서 쓸 수 있어야, 써볼 맛이 납니다. 부트스트랩 페이지에서도 이미 커스터마이즈 기능을 기본으로 제공해 주고 있습니다. 추가로 부츠왓치(http://bootswatch.com/) 사이트를 통해서도 간단하게 색상 변경을 통해 원하는 CSS 를 얻어낼 수도 있습니다. 랩부트스트랩 (http://wrapbootstrap.com/) 에서는 부트스트랩용 테마를 판매하고 있기도 합니다.

5. 웹 개발자의 놀이가 되어 줄 부트스트랩.

사이트의 틀을 부트스트랩이 잡아주니, 나머지는 웹 개발자 혼자서도 어떻게든, 그럭저럭 이쁜 사이트를 만들어 낼 수 있을 듯 합니다. 나머지 코딩은 개발자 몫인 거죠. 부트스트랩에 최적화된 JQuery Plugin 들도 꽤 흥미롭습니다. 특히나 캐러셀 (carousel : 화면을 회전하듯 부드럽게 전환시키는 방식.) 같은 기능들은 왠지 무조건 넣고 봐야 하는 거죠.^^;

6. 더 많은 정보들.

http://www.initializr.com/
15 초안에, HTML5 프로젝트를 시작할 수 있게 해준다는 이니셜라이져(initializr.com) 사이트인데, HTML5 템플릿을 생성해 줍니다. 최근 부트스트랩2 지원되고 있습니다.

http://bootswatch.com/
위에서 언급했던 부트스트랩 커스터마이징해주는 사이트입니다.

http://wrapbootstrap.com/
여기도 위 커스터마이징 얘기할 때 언급하기는 했는데, 부트스트랩용 테마를 판매하고 있습니다.

http://stylebootstrap.info
위에서는 언급하지 않았지만, Bootswatch 처럼 커스터마이징할 수 있는 곳입니다. 똑같은 디자인은 싫어. 라고 하신다면 스타일부트스트랩에서 나만의 디자인으로 간단하게 부트스트랩을 커스터마이징할 수 있습니다.

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme#readme
부트스트랩은 반응형 디자인 (Responsive Design)으로 되어 있지만, 아예 모바일에 특화하길 원한다면 jQuery Mobile Bootstrap Theme 를 이용하는 방법도 있습니다.

7. 국내 부트스트랩 적용된 사이트들

http://dogfeet.github.com/
좋은 글들이 많이 올라오는 블로그입니다. Pro Git 한글 번역도 하셨고, 도움이 많이 되는 곳이네요. (아, 부트스트랩 얘기하다 갑자기 샛길로;;)

http://feed9.com/
역시 부트스트랩기반. 소스공개도 되어 있습니다. (https://github.com/sungchi/feed9)

8. 잡담

디자인에 약한 웹 개발자들(특히나 서버사이드개발자) 에게 꽤 흥미로운 물건이다. 쉽고 재밌게 가져다 쓸 수 있는 것도 큰 장점이고. 암튼 이 bootstrap 의 기반에는 less (http://lesscss.org/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.

출처 : https://rkjun.wordpress.com/2012/02/28/bootstrap-2-0-intro/

부트스트랩 ( http://twitter.github.com/bootstrap/index.html ) 은 html5, css3, javascript 로 홈페이지 제작을 도와주는 오픈소스기반의 프레임워크입니다.
자세한 내용은 위의 주소에 가면 나와있구요. 한글로 차근 차근 설명한 분이 있는데 nhn 개발팀에 박경일님으로 설명을 대신합니다.
제가 부트스트랩을 접했을때는 무엇보다도 자바스크립트에 대한 지식이 없어도 어느정도 응용이 가능하다는 점이였습니다.

또한 테마 또한 여러가지를 제공하고 있고 무엇보다도 격자(Grid) 레이아웃을 지원하기 때문에 반응형 웹사이트를 제작할 수 있는 미디어쿼리 작성이 쉽다는 점입니다.

커스터마이징(Customizing)

부트스트랩은 css 나 js 등 원하는 구성요소만 가저다가 사용할 수 있습니다.
선택을 한 후 맨 아래에 다운로드 버튼을 클릭하면 됩니다.

부트스트랩 사이트에서도 원하는 부분만을 구성해서 다운로드 할수도 있지만 직접 색상을 수정하는것을 미리보기하면서 설정할 수도 있습니다.
http://stylebootstrap.info/
http://bootswatch.com/

개인적으로 두가지 정도의 테마가 맘에 드는것이 있는데 http://bootswatch.com/ 사이트에 가서 다운로드를 클릭하면 css 파일을 다운로드 받을수 있습니다.

다양한 샘플과 데모사이트도 있습니다. 커스터마이징을 하기 전에 둘러보시는것이 좋습니다.
아래는 부트스트랩에 있는 샘플페이지 입니다.
샘플 => http://twitter.github.com/bootstrap/examples.html
데모 페이지 => https://wrapbootstrap.com/

데모 페이지 중에서 맘에 드는 몇가지를 추려 봤습니다.

그중에서 개인적으로 http://wrapbootstrap.com/preview/WB0LX21H9 가 미리보기 하기도 좋고 색상도 좋습니다.
아쉬운점은 배경이 맘에 안드는군요..ㅎㅎㅎㅎㅎ
여하튼 데모 페이지 에 보시면 여러 사이트가 있으니 참고하시기 바랍니다.

jQuery UI Bootstrap

사이트를 둘러보고 제작해보니 아쉬운점이 있었습니다. jquery는 부드러운 화면이동이라든가 jquery ui 에서 제공하는 아이콘이 있습니다.
부트스트랩도 아이콘을 제공하고 사용하는데요…..이런 부트스트랩의 아쉬운 부분을 jquery 를 이용해서 좀더 업그레이드시키는 노력이 있습니다.
http://addyosmani.github.com/jquery-ui-bootstrap/

여기서도 다운로드를 할 수 있습니다. 다운로드 받아보니 각각 분리되어 있어서 원하는 부분만 취할 수도 있습니다.
부트스트랩의 메인메뉴의 드롭다운을 보면 클릭하면 보여지고 감쳐지는데 반해 jquery에서는 부드럽게 내려오는 슬라이딩 효과를 준것 같습니다.
역시 부드러운 이동이나 jquery 의 달력등이 강점인것 같습니다.