HTML5 Boilerplate(보일러 플레이트) 소개

웹에서 가장 인기있는 프런트엔드 템플릿... 소개페이지에 그렇게 문구가 적혀있습니다. HTML5 관련 자료들을 찾다보면 자주 마주치는 템플릿이기도 하고 각종 추천되는 소스들이 총집합 되어있어 처음 시작하는 사람들은 물론 체계적인 구성이 필요한 분들이라면 꼭 한 번쯤 살펴보길 권하는 템플릿입니다.

그림 출처: http://www.frontend-dev.com/html5-boilerplate/

보일러 플레이트 소개

HTML5로 프로젝트를 이제 막 시작하거나 CSS의 다양한 지원을 원하는 개발자라면 HTML5 보일러 플레이트의 사용을 고려해 보자. 이것은 필수적인 스타일과 폴리필, 모더나이저 같은 툴을 포함하여 HTML5를 사용함에 있어 크로스브라우징을 좀더 쉽게 도와주는 템플릿이다. 또한, 자동으로 CSS와 JS 파일을 합치고 주석을 제거해 제품 출시가 가능한 코드를 만들어주는 툴도 포함하고 있다.

이 프로젝트는 수년에 걸친 반복적인 제품 개발과 커뮤니티 지식이 결합된 결과물이다. 특정 개발 철학 또는 프레임워크를 부여하지 않으며 원하는 방식으로 자유롭게 구조를 구축할 수 있다.

정보기술에서 말하는 보일러 플레이트는 변경 없이 계속하여 재 사용할 수 있는 저작품을 말한다. 확대 해석하면, 이 아이디어는 때로 "보일러 플레이트 코드"라고 부르는, 재사용 가능한 프로그램을 가리키는데 사용되기도 한다.

이 용어는 철강 제조 부문에서 유래되었으며, 보일러 플레이트는 원래 증기 보일러 내에 사용되는 커다란 압연 강판을 의미한다. 이 용어는 보일러 플레이트가 오랜 기간동안 시험되었으며, 강철처럼 튼튼하다, 또는 반복적으로 재사용하기에 충분할 정도로 강력한 어떤 물건으로 만들어졌다는 등의 여러 가지 함축적인 의미를 내포하고 있다.

소프트웨어와 하드웨어에 관한 계약 조건이 담겨 있는 법적 계약 등에서도 보일러 플레이트를 많이 사용한다. 이 용어는 또한 "보일러 플레이트 단락" 또는 "전체 문서는 보일러 플레이트였다" 등과 같이 형용사적으로 사용되기도 한다.

보일러 플레이트는 일종의 템플릿 등과 비교될 수 있는데, 이는 템플릿을 마치 빈칸을 채우도록 되어 있는 보일러 플레이트라고 생각할 수 있기 때문이다. 일부 대표적인 보일러 플레이트에는, 임무 기록서, 안전 표지, 일반적으로 사용되는 설치 절차서, 저작권 관련 문서, 그리고 책임 포기 성명서 등을 예로 들 수 있다.

1890년대에는, 실제로 신문을 인쇄하기 위해 금속으로 주조된 보일러 플레이트가 미국 전역의 신문사에 배포되기도 했다. 1950년대까지, 수천 개의 미국 신문들이 국내 최대 공급자인 Western Newspaper Union으로부터 이러한 종류의 보일러 플레이트를 받아 사용하였다.

HOME

HTML5 ★ BOILERPLATE

REPO

소스코드

보일러 플레이트 특징

• HTML5를 사용하는데 확신을 가지고 새로운 요소를 사용하도록 도와준다.
• 점진적 기능 향상을 염두에 두고 설계되었다.

• 포함하는 것:

  • CSS를 정상화하고 일반적인 버그를 개선하기 위해 Normalize.css를 사용한다.
  • 로컬 폴백과 함께 jQuery CDN을 사용한다.
  • 기능 검사를 위해 Modernizr의 커스텀 빌드를 이용한다.
  • 웹 사이트의 성능 및 보안을 향상시키기 위해 아파치 서버 설정을 이용한다.
• Placeholder CSS Media Queries.
• 유용한 CSS 헬퍼 클래스를 사용한다.
• 성능이 최적화된 기본 인쇄 스타일을 제공한다.
• 구글 유니버셜 애널리틱스 코드의 최적화된 버전을 제공한다.
• 구형 브라우저에서 자바스크립트 오류의 원인되는 console 문에 대한 보호장치가 제공된다.
• 필요없는 부분을 쉽게 삭제할 수 있도록 구성되어 있다.
• 광범위한 인라인 및 첨부 문서를 제공한다.

브라우저 지원

• Chrome (latest 2)
• Firefox (latest 2)
• Internet Explorer 8+
• Opera (latest 2)
• Safari (latest 2)

위에서 언급한 브라우저들에서 호환성을 유지하지만 그 밖의 구형 브라우저에 사용할 수 없다는 것을 의미하진 않는다. 만약 구형 브라우저의 지원(IE 6+, Firefox 3.6+, Safari 4+) 이 필요하다면 HTML5 Boilerplate v4를 사용할 수 있지만 더 이상 개발이 진행되진 않는다.

보일러 플레이트 사용법

홈페이지에서 HTML5 보일러 플레이트를 다운로드한 후에, 사이트나 애플리케이션에 포함시킨다:

• 사이트의 기본 구조를 설정한다.
• 일부 콘텐츠, 스타일과 기능을 추가한다.
• 어떻게 보이는지 로컬에서 사이트를 실행해 본다.
• 선택적으로 사이트의 최적화를 자동화하는 빌드 스크립트를 실행
• 사이트를 배포

딱히 사용법이랄것이 있는 것은 아니고 그것이 중요한 것도 아니다. 포함하고 있는 코드들이 중요하고 제작하게 될 사이트나 애플리케이션에 알맞은 구조와 스타일, 기능이 중요할 뿐...

보일러 플레이트 기본구조

기본 HTML5 보일러 플레이트 사이트 구조는 아래와 같으며, 웹 사이트나 애플리케이션을 제작할때 이 구조를 참고하여 작성하도록 하자.

.
├── css  (이 디렉토리는 모든 프로젝트들의 CSS 파일을 포함)
│   ├── main.css  (거의 모든 페이지에 삽입될 기본 CSS 파일을 이 곳에 작성)
│   └── normalize.css  (CSS 리셋을 위한 파일)
├── doc  (이 디렉토리에 모든 HTML5 보일러 플레이트 설명서가 있음)
├── img  (사이트 제작시에 필요한 이미지들을 이 곳에 저장)
├── js  (이 디렉토리는 모든 프로젝트들의 JS 파일을 포함)
│   ├── main.js  (사이트 및 애플리케이션의 자바스크립트 코드를 참조하거나 포함하는 용도로 사용)
│   ├── plugins.js  (jQuery 플러그인 및 제 3자 스크립트와 같은 다른 모든 플러그인을 포함하는 용도로 사용하며, console 오류를 방지하는 폴백을 포함)
│   └── vendor  (이 디렉토리는 모든 제 3자 라이브러리 코드를 포함하는 용도로 사용)
│       ├── jquery.min.js  (기본적으로 최신의 jQuery 라이브러리를 압축된 버전으로 포함)
│       └── modernizr.min.js  (기본적으로 최신의 Modernizr 라이브러리를 압축된 버전으로 포함)
├── .editorconfig  (다른 편집기와 IDE 사이에 일관된 코딩 스타일을 유지하기 위해 도움을 줌)
├── .htaccess  (아파치 서버 설정을 위한 기본 설정을 포함)
├── 404.html  (커스텀 404 페이지를 제공)
├── apple-touch-icon.png  (애플 터치 아이콘으로 사용될 아이콘)
├── browserconfig.xml  (IE11에 대한 커스텀 타일에 대한 설정을 포함)
├── index.html  (모든 페이지의 기초를 형성하는 기본 HTML 골격)
├── humans.txt  (해당 사이트 및 애플리케이션 제작자들의 기술적 자문을 구하기 위한 연락처와 같은 정보 기술)
├── robots.txt  (검색 엔진 크롤러가 액세스하지 않기를 바라는 구역을 설정)
├── crossdomain.xml  (크로스 도메인 요청 작업을 위한 템플릿)
├── favicon.ico  (파비콘)
├── tile-wide.png  (IE 타일 아이콘)
└── tile.png  (IE 타일 아이콘)

다음 장 부터는 주요 파일들을 자세히 들여다보고 이에 대한 해설을 덧 붙입니다.