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/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.
반응형 웹 디자인에 대해 관심이 많았는데 좋은 글을 보네요.
포스팅 감사합니다.
OKJSP 에서 본 적있는 낯익은 닉네임이시네요^^; 반가워요~
서칭하다 보니 형 블로그까지 들어왔네요 ㅋㅋ
잘 지내시죠 ~?
웅^^. 너두 요새 햄볶느라 정신없지?ㅋ
좋은 자료 감사합니다!!! ~
저는 디자이너인데..윗..분 처럼..반응형 웹에 관심갖고 자료를 찾다가 여기까지 왔네요^^.. 앞으로 자주 방문할 것 같아요~흐흐
감사합니다 🙂
[…] Bootstrap 2.0 에 대한 소개 – rkjun’s Blog […]
좋은 정보 감사합니다 `:)
도움이 되었다니 기쁘네요. 🙂
좋은정보감사합니다. 즐겨찾기 등록하고 가요 ^0^
감사합니다. ^^
ie 10에서는 작동이 안 되나요?
IE 10 에서는 테스트 해본 적이 없어서 정확히는 모르겠네요. Bootstrap 2.3 한글 (http://maczniak.github.io/bootstrap/index.html) 를 참조해 보시면 좋을 것 같습니다.
현재는 3 버전까지 나왔으니 최신버전을 보시는 것도 좋을 것 같구요. Bootstrap 3 영문 (http://getbootstrap.com/)
좋은 글 감사해요~~~~
[…] Bootstrap 2.0 에 대한 소개 | rkJun’s Blog […]