트위터 부트스트랩 3.0 버전이 이제 막바지에 이른 것 같습니다. 지난 5일 동안 스타일시트 부분의 수정은 거의 없고 일부 자바스크립트 부분에서 수정이 있었습니다. 또한 그동안 방치해뒀던 customize.html 부분을 재정리해서 말끔해졌습니다. 이전에 올렸던 파일은 제가 나름대로 편집한 것이었죠. 그리고 모든 파일을 jekyll(지킬)을 사용해서 컴파일했으니 원본과 동일한 파일이 됐습니다. 이전에는 윈도우에서 jekyll을 사용할 수 없어서 모든 파일을 일일히 수동으로 변환해야 했었습니다. 부트스트랩 문서가 jekyll로 만들어집니다.
jekyll은 정적인 웹사이트를 만드는 프로그램으로 각종 Ruby gem을 사용합니다. 이것이 Unix 기반이라서 윈도우에서는 작동하지 않죠. 윈도우에서도 사용할 수 있도록 Devkit이 있지만 Syntax highlight 부분을 담당하는 Pygments가 작동하지 않아서 파일을 변환할 수 없었습니다. 두달간 시도 끝에 결국에는 Unix 기반인 맥을 설치하고 맥에서 jekyll을 설치한 다음 변환하니 잘 나오더군요.
오늘 변경된 내용은 costomize.html입니다. 이전에는 아래처럼 단순히 구성요소를 선택해서 제외할 수 있었습니다.
이제는 보다 명확하게 LESS 파일을 선택하는 구조로 됐습니다. 레이아웃도 3컬럼에서 2 컬럼으로 바뀌었습니다.
jekyll로 변환하고 나니 각 파일들이 개별 폴더에 저장됩니다. jekyll은 로컬호스트에서 작동하기 때문에 파일 path 구조가 다릅니다. 그래서 파일을 클릭했을 때 웹브라우저에 바로 나타나도록 하려면 모든 링크를 수정해줘야 합니다. 아마도 부트스트랩 3.0이 정식 발표되더라도 이전 버전처럼 문서 파일을 아무곳에서나 열어볼 수 있도록 제공하지는 않을 것 같습니다. jekyll을 사용해서 보도록 할 예정입니다. 위와같은 번거로운 과정을 해주지는 않겠죠. 일례로 최근에 업그레이드된 Font-Awesome 3.1.1 버전이 이전에는 Github에서 파일을 내려받아서 웹브라우저에서 열면 바로 모든 것을 볼 수 있었지만 이 프로젝트도 jekyll을 사용하기로 해서 그럴 수가 없습니다. 파일을 제대로 보려면 사이트에서만 직접 볼 수 있죠. 아니면 jekyll을 사용하던가 해야죠.
jekyll은 사용해보니 상당히 흥미로운 도구입니다. 데이터베이스를 전혀 사용하지 않으면서도 동적인(Dynamic) 웹사이트처럼 만들 수 있습니다. 데이터베이스를 사용하지 않으니 실제로는 정적인(Static) 웹사이트이지만 php 처럼 공통적으로 사용하는 부분은 include 기능이 있습니다. 즉 웹페이지에서 헤더나 푸터 같은 동일한 부분은 include 할 수 있죠. 여러가지 레이아웃을 만들어놓고 어떤 레이아웃을 적용할지 선택하면 디자인도 자유롭게 변경됩니다. 요즘 해외의 개발자들 사이에서는 워드프레스에서 jekyll로 만든 웹사이트로 이전하는 것이 유행입니다. Disqus라는 댓글 사이트를 사용하면 댓글도 가능합니다.
정적인 웹사이트의 장점은 데이터베이스나 웹서버 프로그램을 사용하지 않으니 속도가 빠릅니다. 워드프레스도 속도를 높이기 위해서 WP-Cache라는 플러그인을 사용하죠. 이 플러그인은 워드프레스의 각 페이지나 포스트를 정적인 페이지로 만드는 기능을 합니다. 또하나의 장점은 로그인 기능이라는 것이 없으니 해킹의 위험이 없습니다. 스팸에서도 자유롭죠. 가장 큰 장점인 정적인 웹사이트라는 빠른 속도로 인해서 앞으로 인기가 있을 것으로 생각합니다.
jekyll을 사용하면 소스 폴더인 docs 폴더의 내용을 변환해서 대상 폴더인 _gh_pages 폴더에 저장합니다. 일반 웹사이트에는 이 폴더의 파일을 웹호스트에 업로드하죠. 그래서 부트스트랩 파일을 볼려면 이 폴더에서 파일을 클릭해야되고 docs 폴더의 파일을 열면 정리되지 않은 콘텐츠가 나타납니다. Github는 jekyll을 사용한 파일을 바로 지원하므로 주로 이 사이트에서 jekyll로 만든 블로그나 웹사이트가 운영되고 있습니다.
파일 내려받기 -->
bootstrap-3.0.0-wip0523.zip미리보기 --> http://twitter-bootstrap.kr/bootstrap3/index.html
