Twitter Boostrap

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 처럼 커스터마이징할 수 있는 곳입니다. 똑같은 디자인은 싫어. 라고 하신다면 스타일부트스트랩에서 나만의 디자인으로 간단하게 부트스트랩을 커스터마이징할 수 있습니다.