카테고리 보관물: HTML5

HTML5 를 위한 기본 템플릿 HTML5Boilerplate

웹 개발을 위해 기본적으로 사용되는 프론트엔드 소스 코드들을 몇년에 걸쳐 모으고, 버릴 건 버리고 취할 건 취해서 기본 템플릿의 Best Practice 를 만들어냈다. 이름하여, HTML5Boilerplate (줄여서 H5BP)

이름에서 알 수 있듯이 HTML5 요소들을 사용하며, IE6+ 호환을 모두 고려하여 작성된 코드들이고, 모바일에도 최적화되어 있다.

간단한 코드들이지만, 한땀한땀 장인들 (많은 오픈소스 공헌자들) 에 의해 새롭게 추가되거나 변경/삭제되었다. 처음에는 @paul_irish 혼자 시작했지만 현재까지 많은 사람들이 코드 개선에 참여했다. 물론 코드 개선은 지금도 현재진행중이다. (https://github.com/h5bp/html5-boilerplate)

소스들을 살펴 보면 index.html 을 비롯해 견고하게 완성된 기본 style.css 를 제공하고, favicon 이나 모바일 기기의 홈 아이콘인 apple-touch-icon.png 파일도 사이즈별로 구성하고 있다.
(코드에 출처에 대한 링크가 코멘트되어 있어서 더 자세히 공부해 볼 수 있다)

살짝 index.html 만 가져다 살펴보면, 대략 아래와 같다.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-2.5.3.min.js"></script>
</head>
<body>
<header>

</header>
<div role="main">

</div>
<footer>

</footer>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

</body>
</html>

단순히 HTML/CSS/JS 만 모아 놓았지만, 처음 프로젝트 만들 때 간단하게 복사해서 필요한 부분만 쓰기에도 편하고 좋다. 추가적으로 웹서버 설정 (아파치 .htaccess 등) 파일등도 최적화 되어 있고 robots.txt , humans.txt (옵션) 등도 제공해주고 있다.

한글화에도 참여해 봤다. gnutext 라는 GNU기반 유틸리티에 의해 messages.po 파일만 한글화 작업을 해놓고 스크립트로 빌드를 돌리면, 자동으로 빌드해서 사이트를 만들어 준다. (물론 H5BP 의 템플릿 주석까지도 모두 한글화된다. 하지만 기본적으로 H5BP 는 영문 주석판만 공개하고 있다. 해당언어의 주석이 들어간 버전을 받고 싶다면, template 경로로 접근하면 된다. 한글 코멘트된 index.html 예 view-source:http://ko.html5boilerplate.com/template/index.html //다만 현재버전으로 생성된 게 아니라서 현재 버전에는 삭제된 코드들도 남아있다. -_-;;)

이 messages.po 파일도 msgId (영어원문) 와 msgStr (한글화될 문장) 으로 구분되어 한글화 하기에는 꽤 편하게 되어 있었다. 빌드를 하면 .mo 파일이 생성되고, 바로 빌드까지 해주니 결과물을 즉각적으로 볼 수 있어 좋았다.

HTML5Boilerplate 한국어 링크 : http://ko.html5boilerplate.com/
(2012년 8월 31일 확인결과 H5BP 4.0 업데이트와 함께, 현재 한국어 링크는 제공되고 있지 않음)

사이트에 들어가 보면 보다 자세한 내용들이 있고, 소스를 다운받아 하나씩 보면 더 자세하게 알 수 있다. (대부분 코드가 간단하게 코드 설명을 위한 코멘트가 되어 있고 보다 자세한 설명을 위해 링크까지 제공해준다. 링크를 따라가 보면, 코드 출처에 대한 자세한 설명을 얻을 수 있다.)

[2012년 8월 31일 현재]
H5BP 4.0 으로 버전업 되면서 사이트 개편과 함께, 다국어 링크가 사라졌다.

Advertisements
태그 지정됨 ,

ajax 와 hashbang 그리고 pjax

ajax 기술은 이미, JavaScript 를 이용한 대중적인 웹기술로, 많은 웹사이트에서 적용하고 있는, 이제는 새로울 것 없는 기술 중 하나입니다. 간단하게 언급해 보면, 페이지의 새로고침없이 데이터를 가져와 화면에 뿌려주는 기능을 합니다.

사실, ajax 출현 전에는 iframe 기술을 이용해서 비슷한 처리를 하곤 했습니다.  iframe 태그를 숨겨놓고, 서브밋을 날릴 때 iframe 태그에 서브밋을 날려서, 데이터를 가져온 다음에 현재의 페이지에 보여주는 방식을 이용하면 ajax 와 비슷하게, 페이지 이동없이 데이터를 가져와 뿌려줄 수 있었습니다. ajax 기술이 사용되기전에 한 때 많은 사이트에서 이용했던 방식중 하나입니다.

ajax 기술의 등장은 사실, XMLHTTPRequest() 에서 출발합니다. 누구나 ajax 방식의 처리를 구현해서 만들어 사용할 수 있지만, prototype.js 을 비롯한 jQuery 등의 등장으로 ajax 처리를 구현할 필요없이 쉽게 가져다 간단하게 API를 호출해서 사용할 수 있게 만들어 놓아, 더욱 더 많은 인기를 끌게 되었습니다. 그리고 ajax 는 웹을 빠르게, 그리고 멋지게 만들어 주었고요!

그런데 ajax 를 이용하면, 뒤로 가기 버튼을 이용할 수 없습니다. 게다가, HTML 소스를 열어봐도, ajax 에서 가져온 데이터가 어디에 있는지 찾을 길이 없습니다. 당연히, 검색사이트에서도 ajax 로 가져오는 데이터나 페이지들은 인덱싱을 해주지 못하므로, ajax 로 처리한 결과들은, 검색사이트에서 검색해도 검색결과를 얻을 수 없습니다.

그래서 이를 보완하기 위해 등장한 방식이 hashbang (hash:# 와 bang:! 의 합성) 기술인데, location.hash 를 이용해서, URL 의 #(hash) 뒤에 붙는 값을 이용해 ajax 처리를 합니다. 뒤로가기를 처리할 수는 있지만, 일종의 URL Hack 방식이어서, 정당성도 없고 논란의 중심에 있기도 한데, 검색인덱싱이 안되는 건 물론이고(구글에서는 검색을 할 수 있게 escape처리를 해놓음), JavaScript 기술에 의존하고 있기 때문에, JavaScript 오류 하나만으로도 사이트를 하나도 이용할 수 없게 되어버립니다. 즉 JavaScirpt 없이는 컨텐츠를 보여주지 못합니다.  hashbang 과 관련해서는 아웃사이더님 블로그에 잘 정리되어 있습니다.

해시뱅(#!)에 대해서… (http://blog.outsider.ne.kr/698)

마지막으로 이 모든 문제를 해결한, 비동기통신의 대안 pjax 를 소개합니다. 좀 거창하게 소개했는데 그렇게 거창할 건 없습니다. ^^; 우선 pjax 는 pushState + ajax 를 합쳐서 pjax 라 합니다. 여기서 pushState 는 HTML5 에서 추가된 메소드로 브라우저의 히스토리를 조작할 수 있고, 뒤로가기/앞으로가기 버튼을 이용할 수 있습니다. (현재는 github 과 facebook 등에서 쓰이고 있는 걸로 알고 있습니다.)

클리어보스에서 번역한 HTML5 명세의 window.history.pushState  http://html5.clearboth.org/history.html#dom-history-pushstate

pjax 는 pushState 를 이용한 ajax 처리방식으로 jQuery 라이브러리로 제공되고 있고, github 의 창립자이자, CEO 인 defunkt (Chris Wanstrath) 가 개발했습니다. pushState 를 지원하는 브라우저에서는 pushState 를 사용해서 동작하고, pushState 비지원 브라우저(IE9 이하) 에서는 지원하지 않는 대로 일반적인 페이지 이동형태로 처리가 이루어지기 때문에 URL 은 동일하게 전환하게 됩니다.

pushState + ajax = pjax https://github.com/defunkt/jquery-pjax

사용방법도 쉽습니다. 위의 링크에 몇가지 방식으로 나와 있는데 간단하게는 링크를 잡고, 그 링크를 어느 컨테이너로 처리할 지 잡아서, pjax 처리를 해주면 됩니다.

가령, js-pjax 클래스를 가진 a 링크만을 pjax 처리한다면 아래 코드와 같습니다.

<a href=’/explore’ class=’js-pjax’>Explore</a>
$(‘.js-pjax’).pjax(‘#main’)

샘플을 보면 쉽게 이해할 수 있습니다. pjax 체크박스를 체크하고 링크를 누르면, 시간이 변하지 않습니다. 즉 해당영역만 링크를 다시 가져오는 것을 볼 수 있습니다. pjax 체크박스를 풀고 링크를 누르면 페이지가 리로드되는 일반적인 방식으로 페이지를 로드합니다.  (내친김에 IE9 이하 에서도 pjax 처리는 하지 않고, 일반적인 방식으로 페이지를 로드합니다)

pjax 샘플 http://pjax.heroku.com/

흥미로운 점이 많아서, 혹시 단점은 없나 찾아봤는데, HTML5 라 IE9 이하 하위버전에서 지원하지 않는 점만 빼면, 앞으로의 비동기 통신기술의 대안이 아닐까 싶습니다.

참조링크 :
http://firejune.com/1743
https://github.com/defunkt/jquery-pjax
http://blog.outsider.ne.kr/698
http://html5.clearboth.org/history.html#dom-history-pushstate

태그 지정됨 , ,

HTML5 Now Conference 후기

4월 26일 (목) HTML5 Now 컨퍼런스에 다녀왔습니다.
( 컨퍼런스 관련 링크는 요기입니다 http://w3labs.kr/html5now/agenda.html )

컨퍼런스에 다녀왔으면, 후기를 쓰는 게 인지상정, 기록을 남겨두고, 공유를 위해 후기를 남깁니다.

컨퍼런스 장에 도착···

아침에, 도착하자마자 등록 절차를 마치고 나니, 컨퍼런스가 정리된 책자를 줍니다. 컨퍼런스의 요약본이라 생각하심 됩니다. 책이 꽤 크고, 커서 그런지 안에 내용들이 공간의 여유가 있어 보입니다. 안에 설문지도 포함되어 있는데 컨퍼런스 종료후에 작성해서 제출하면 소정의 기념품을 주는데요. 기념품은 HTML5 로고가 새겨진 흰색 티셔츠입니다.

HTML5 Conference Img

컨퍼런스장에 들어왔습니다. 컨퍼런스 시작하기 전에 왔는데도 이미 1층은 만석에 가깝더군요. 다행히 2층에도 좌석이 마련되어 있어서 2층에 앉았습니다. 불편할까 싶었는데, 오히려 2층에서 프리젠테이션도 더 잘 보이고, 편했습니다. (다만 동시통역기가 2층에는 없었던 지라, 아쉬웠던···)

컨퍼런스를 주최한 미래웹기술연구소의 조만영 대표님 나오셔서, HTML 의 과거, 현재에 대해 얘기해 주셨습니다.

컨퍼런스장은 무지 컸습니다. 삼성역에서 하는 걸로만 얼핏 알고 있어서 왠지 COEX 일거라고 생각했는데 섬유센터 건물 이벤트 홀에서 진행됐습니다. 다만, 홀내에서는 WiFi 가 되지 않아서 못내 아쉬웠습니다. 사진 찍으면서 실시간 SNS 올리기를 할 수 없으니까요. (물론 3G 나, Egg 로 하면 되긴 하지만요 ^^;)

Kaazing CTO John Follows 의 HTML5 WebSocket 에 관련한 발표가 시작되었습니다. 웹에 생명을 불어넣어, Living Web 을 만드는, 결국 웹 생태계에서 웹소켓의 역할이 중요해 지지 않을 수 없다는 생각을 했습니다.

이때 우리나라의 높은 IE 점유율에 대해서도 언급을 했는데, 우리나라의 웹 환경을 알고 있다는 사실에 대해 놀랐습니다.ㅋㅋ

그리고 Adobe 의 Phone Gap 개발자 Tim Kim 이 나와서, Phone Gap 에 대한 발표를 했습니다. 사진은 찍지 못했지만, 흥미로웠습니다. https://build.phonegap.com/ 시연하는 부분도 흥미로웠는데, 웹소스를 묶어서 업로드하고 나면 알아서 컴파일되고, 아이폰에서 QR 코드를 찍어 바로 어플 설치 & 동작을 시켜버리더군요. App Store 에 올릴 필요도 없이 그냥 QR 코드만 찍어서요. 꽤 흥미로워서 이건 나중에 꼭 좀 찾아봐야겠다 싶은 생각이 들었습니다. 그리고 몇가지 사족을 더하자면, 라이브 코딩하는데 크롬 브라우저에 탭을 수십개씩 뛰어 놓은 걸 보고 놀랬습니다. 그리고 아이폰으로 시연할 때 reflection 이라는 맥용 앱을 사용했는데, 아이폰 화면을 맥에서 그대로 보여주는 어플인 듯 하더군요. 또 한가지 흥미로웠던 건 라이브코딩할 때 자바스크립트를 TextWrangler (맥용 무료 텍스트에디트) 에서 코딩하더군요. 뭔가  PhoneGap 개발자라면 TextMate 나, Emacs 쯤 사용할 것 같았던 저에게는 신선한 충격이었습니다. (센차 엔지니어는 TextMate 쓰는 걸로 알고 있는데 말이죠.)

점심 먹고, 이어진 MS 황리건 차장님의 IE10 발표도 꽤 도움이 되었습니다.
compat inspector (http://ie.microsoft.com/testdrive/html5/compatinspector/) 에 대해서 언급을 했는데 IE10 에서 대응여부를 쉽게 판단하고, 오류를 확인·디버깅 할 수 있 수 해주는 자바스크립트 라이브러리인데, 단순히 소스에 임포트 해두는 것만으로 알아서 오류나 경고를 띄어 주고 이녀석을 피들러에 추가해놓으면 소스에 넣어놓을 필요없이 간단하게 오류를 확인할 수 있어서 참 편리할 것 같습니다.ㅋ 게다가, IE10 에서 지원하고 있고, 아직 크롬에서는 지원하지 않고 있는 몇몇 HTML5 기능도 있다고 하면서 언급을 했는데 (잘 기억은 안나고..) 아무튼 MS 의 행보가 밉지만은 않습니다.

이원석 박사님은 webOS 관련해서 모질라의 부트투겍코 이야기 (웹기반 모바일폰), 그리고 추가 논의중인   HTML5 API 에 대해서도 언급을 했는데 역시 주목할만한 부분이 아니었나 싶습니다. 다만, 컨퍼런스장 밖에 나와 있어야 해서, 중간 부분 내용을 듣지 못해서 아쉽네요.

Bluega 라는 회사의 HTML5 기반 프레임워크에 대한 발표도 있었는데 기술력이 대단하단 생각을 했습니다. 왠지 앞으로 잘 나갈 것 같습니다. 흥미롭게 들었네요. 참고로 www.pieOS.com 에서 pieOS 라는 웹서비스도 체험해 볼 수 있습니다. 다음으로 스마트 노무. 사실 스마트 노무는 거의 듣지 못했고 후반부부터 겨우 들었고, 마지막 김종광 님의 Sencha Touch 2 발표가 컨퍼런스의 휘날레였습니다. 마지막 Sencha Touch 2 발표 재밌었고, 다시 한번 더 Sencha Touch 는 거들 뿐이란 생각을 했습니다. Sencha Touch 로 거들고 (베이스만 만들어 놓고) 나머지 컨텐츠 영역은 더 이쁜 UI 로 구현하기···.

간략하게 정리해 볼려고 했는데 잡설이 약간 길어진 것 같아서, 여기서 줄입니다.ㅎ

태그 지정됨

모질라에서 HTML5 로 개발한 고전게임틱한, MMORPG “BrowserQuest”

모질라에서 최근에 신기술로 무장한 2D MMORPG 가 나왔습니다. (물론 데모/실험작입니다만)

소개글 (영문): BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment (http://hacks.mozilla.org/2012/03/browserquest/)

일단, BrowserQuest 는 이름부터 DragonQuest 가 연상될 만큼, 과거의 고전 2D RPG 형태의 게임입니다. 그래픽도 과거 비디오 게임기 시절의 획을 그었던 그 느낌을 연상시킵니다.

대략 살펴보면, 일종의 데모용인데 멀티플레이어도 지원하고, 게임을 만들기 위해 들어간 기술들도 주목해볼 만 합니다.

첫번째로 WebSocket 을 이용해서 하나의 웹페이지에서 어떻게 다중 사용자를 위한 실시간 게임을 만들 수 있었는지를 보여주고 있습니다. Server Side 는 Node.Js 기반으로 소스 코드까지 공개하고 있습니다. 오오. 소스코드는 github 에 올라와 있습니다. (요기 링크)

두번째로 웹플랫폼 기반의 HTML5 기술이 들어가 있습니다.
2D 그래픽연출을 위한 HTML5 Canvas, 넓은 지도를 처리하기 위한 Web workers, 캐릭터 정보를 담기 위해 localStorage 를 사용하고, 다양한 기기에 대응하기 위한 CSS3 처리, 그리고 HTML5 audio 까지.

신기술의 집합입니다. 흠 좀 짱이네요.ㅋ

게다가, 소스까지 오픈하고 있으니, 관심있으신 분들이라면 한번쯤 파볼 만 하겠네요.
https://github.com/mozilla/BrowserQuest

해보시면 아시겠지만, 게임도 전혀 느리지 않아요 🙂
게임하기 : http://browserquest.mozilla.org/

태그 지정됨 , , ,

basket.js – LocalStorage 에 script 캐싱/로딩해주는 자바스크립트

HTML5 에서 제공하는 웹 저장 기술중 하나인 localStorage 를 사용하여, 자바스크립트를 캐싱하고, 로딩해주는 자바스크립트로 basket.js 라는 간단하지만 (개념 증명정도의) 흥미로운 자바스크립트 오픈소스.

먼저 localStorage 를 간단히 언급하자면, HTML5 에서 추가된 저장기술 중 하나인데 브라우저마다 차이는 있지만 대략 5MB ?? 정도 제공을 해 주고요.  구글크롬을 쓰신다면 CTRL+SHIFT+I (도구-개발자도구) 에서 Resources 란에 보면 Databases 와 Session Storage 사이에, Local Storage 항목이 존재합니다. 그 영역에 저장되는 거죠.

자바스크립트 콘솔에서 직접 localStorage 를 접근해 보면, 아래 처럼 작동하구요.
> localStorage.setItem(“Name”, “rkJun”)
> localStorage.getItem(“Name”)
“rkJun”

basket.js 는 LocalStorage 를 활용하여, jQuery 같은 자바스크립트 라이브러리를 통째로 LocalStorage 영역에 저장하고 호출해서 이용하도록 자바스크립트로 구현해 놨습니다. 물론, 당연히 성능의 극대화를 끌어올리기 위해서구요. (시작은 트위터 -영문- 에서…) basket.js 소개페이지에는 jQuery , backboneJs, underScoreJs 를 담아놨습니다.
사용법은 간단합니다.

basket.require(‘js파일경로’) : 호출 (해당 js파일이 있는지 체크해서 localStorage 에 있으면 무시, 없으면 ajax 방식으로 가져와 localStorage 에 넣습니다. )

basket.remove(‘js파일경로’) : localStorage 에 제거
basket.add(‘js파일경로’) : localStorage 에 추가

물론 체인방식도 제공하고요.
basket.require(‘jquery.js’).require(‘underscore.js’).require(‘backbone.js’);

basket.require(‘jquery.js’).wait().require(‘jquery.plugin.js’)  를 통해, jquery.js 호출이 끝나고 나서 다음을 실행하도록 wait() 를 걸 수도 있습니다. jQuery plugin 을 실행하기 전에 jQuery 가 먼저 호출이 돼 있어야 하니까요.

다만, 이  basket.js 에서 캐싱을 위해 선택한 localStorage 가 고민끝에 선택한 건 아니라고 언급해 두며,  WE NEED TO KILL OFF THE LOCALSTORAGE API 라는 글도 링크걸려 있구요. (대략 localStorage 는 형편없고 후지다. IndexedDB 만이 대안이다 라고···.)

암튼 basket.js 의 성능 실험 자체가 꽤 흥미로워서, 소개해 봤습니다.

태그 지정됨 , , ,

Bootstrap 2.0 에 대한 소개

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

부트스트랩  (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark OttoJacob 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/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.

태그 지정됨 , , , , ,