웹 개발을 위해 기본적으로 사용되는 프론트엔드 소스 코드들을 몇년에 걸쳐 모으고, 버릴 건 버리고 취할 건 취해서 기본 템플릿의 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 으로 버전업 되면서 사이트 개편과 함께, 다국어 링크가 사라졌다.
rkJun's Blog 