템플릿을 이용해 15초 만에 랜딩 페이지 만들기

Start an HTML 5 project in 5 seconds!

http://www.initializr.com/ 이 사이트의 모토다.

말 그대로 클릭 몇 번이면 멋진 템플릿을 만들어 준다.

사실 새로운 프로젝트를 시작할 때 마다 비슷비슷한 랜딩 페이지를 반복적으로 만들어 재사용한다는 것도 참 피곤한 일이다.

그래서 이 사이트에서는 HTML5, Responsive, Bootstrap 등 3가지 종류의 템플릿을 만들 수 있다.

Responsive는 최근에 각광받고 있는 반응형 웹 디자인이라고 하겠다.

PC는 물론 모바일 기기에 대응해서 화면 크기에 따라 자동적으로 웹 페이지의 컨텐츠를 정열해서 보여준다고 보면 된다.

처음에 jQuery mobile을 하면서 이 말을 처음 접했을 때 사실 감이 잘 오지 않았다.

그도 그럴 것이 jQuery mobile은 모바일용 사이트를 만들 때 적합한 것이니 처음부터 작은 화면에 맞춰 디자인을 해서 반응형이란 말을 크게 실감하기가 어려웠다.

하지만 Bootstrap으로 작업을 하면서 PC 화면에서도 웹 브라우저 크기를 줄일 때마다 즉각적으로 반응하는 웹 디자인을 보면서 아...이런걸 반응형 웹사이트라고 하는구나하고 감을 잡았다.

물론 처음부터 이 반응형 웹사이트를 염두에 두고 만든다면 모를까 기존의 것을 반응형으로 고치려고 하니 여간 손이 많이 가는게 아니다...ㅠㅠ

어쨌거나, 반복적으로 재사용되는 웹 템플릿을 손쉽게 만들어주는 사이트이니 나중에 한번 써먹어야겠다.

어떤 템플릿을 사용할지 먼저 고른다.

그리고 선택하면 아래와 같이 세부사항들을 설정한 후 다운받을 수 있다.

이렇게 다운받은 파일들을 서버에 업로드해보았다.

위는 PC에서 본 화면이고 아래는 사이즈를 줄였을 때 나타나는 반응형 웹사이트이다.

로그인 입력창이 우측 상단의 버튼 안으로 숨겨졌고, 이걸 클릭하면 로그인 입력창이 나온다.

모바일 사이트를 새로 디자인 하지 않아도 반응형 웹으로 제작할 경우 PC와 모바일 모두에 대응이 가능한 것이다.