쉽고 빠르게 모바일 웹 제작 방법을 배우는 실무 밀착형 가이드

모바일 웹 제작은 사실 UI나 UX 관점에서는 어려운 일이지만 그렇다고 아예 새로운 웹 페이지를 만드는 것만큼 낯선 것은 아니다. 즉, 중요한 것은 기술보다 생각의 관점이다. 기존 웹 페이지를 만들면서 익숙하게 사용해 온 글자나 이미지를 작은 화면에 맞게 다시 만드는 UI 설계, 마우스와 플래시에 기반을 둔 웹 환경을 플래시와 마우스 없이 사람의 손가락 움직임으로 옮긴다는 UX 설계를 고려하는 것에 시간을 쏟아야 한다.
그런데 실무 환경에서는 짧은 시간 안에 다수의 웹 페이지를 만들고 원하는 요구 조건에 맞게 빠르게 수정할 수 있어야 한다는 압박이 크다. 그렇다면 효율적으로 일하기 위해서는 어떻게 해야 할까? 실제 웹 페이지를 만드는 시간을 줄이고 UI나 UX를 고민할 수 있어야 한다.
이런 면에서 모바일 보일러플레이트는 실제 모바일 웹 페이지를 만드는 시간을 줄이는 데 많은 도움을 준다. 미리 모바일 웹과 데스크톱 웹 브라우저의 차이를 고려해 웹 페이지를 제작하면서 생길 수 있는 디자인상의 문제점을 없애주는 CSS 라이브러리와 자바스크립트 코드 등을 포함한 템플릿을 제공하기 때문이다.
이 책은 다양한 실무 경험과 집필 경험으로 무장한 웹 디자이너 어비가 모바일 보일러플레이트라는 템플릿을 자세히 분석하여 소개한다. 그리고 모바일 보일러플레이트를 국내 웹 환경에 맞게 수정하는 방법을 제시한다. 또한 실제 포털 서비스에 모바일 보일러플레이트를 적용한 경험을 바탕으로 실제 포털 사이트 웹 페이지와 유사한 예제를 중심으로 웹 퍼블리셔라면 누구나 실무에 바로 적용할 수 있는 모바일 웹 페이지 제작 노하우를 알린다.

크로스 브라우징과 반응형 웹도 알아보고 싶다면? 『HTML5 보일러플레이트』

대상 독자

• 마크업 기본을 아는 초/중급 웹 퍼블리셔
• 모바일 웹 템플릿 제작 방법이 궁금한 실무자

예제를 만들면서 배우는 HTML5 기반의 모바일 웹 사이트 만들기
『모바일 보일러플레이트』는 모바일 보일러플레이트를 충분히 이해한 후 실무에서 이를 적용해 모바일 웹 사이트를 만들어야 하는 초?중급 웹 퍼블리셔에게 적합한 책이다. 매얼에서도 자세히 설명하지 않는 모바일 보일러플레이트의 주요 구성 요소를 상세하게 분석했으며, 이를 바탕으로 자신의 실무 작업에 맞게 템플릿을 바꾸는 방법도 설명한다. 또한 예제 모바일 웹 페이지는 다양한 모바일 기기와 웹 브라우저에서 웹표준을 지킬 수 있도록 설계하고 디자인 구성 노하우까지 자세하게 설명해 짧은 분량이지만 HTML5 기반의 모바일 웹 사이트 제작 방법을 충분히 살펴볼 수 있도록 구성했다.

추천평(추천사)

'모바일 웹 제작의 실무자 가이드북'
이 책은 모바일 웹 제작의 거대한 세계를 폭넓게, 그리고 깊이 있게 전달하는 실무 매뉴얼의 하나라 생각합니다. 일반적으로 모바일 웹이라 불리는 것은 실제 여러 가지 사양의 집합체이므로 전체 내용은 엄청나게 방대합니다. 웹에서도 정보가 여러 곳에 흩어져 있어 전체 모습을 파악하는 것만도 꽤 고생스러운 일이라 할 수 있습니다.
최근 웹 브라우저 각각의 업그레이드가 매우 빠른 속도로 진행되므로 가까운 시일 안에 이러한 문제의 많은 부분이 해결될 것으로 예상되지만, 그때까지는 W3C의 HTML5 기술 문서 등을 참고하면서 공부하는 것이 더 확실할 것입니다. HTML5를 좀 더 쉽고 빠르게 습득할 수 있는 모델을 제시하고, 레이아웃을 만들 수 있는 템플릿을 제공해주는 이 책은 디자이너 및 웹 퍼블리셔 그리고 개발자, 기획자 및 실무자에게 모바일 보일러플레이트라는 새로운 템플릿 형태의 마크업 방법을 제시하는 데 충실한 역할을 하는 책입니다.
- 김세원_세종씨앤피/이노브 모바일사업부 팀장

다양한 모바일 기기 환경에서 사용자에게 맞는 웹 페이지를 구현하는 일은 이제 개인 및 기업의 정보 제공에 있어 필수적인 요소라 할 수 있을 것입니다. 그런데 다양한 모바일 웹 환경에 기존 웹 디자인을 그대로 적용하기에는 문제가 많습니다. 그런 의미에서 이 책은 HTML5에 기반을 두고 빠르게 모바일 웹을 만들 수 있게 도와주는 모바일 보일러플레이트를 국내 실정에 맞게 분석하고 템플릿 파일을 수정해서 실무에서 사용할 수 있는 노하우를 그대로 전수해준 책이라 생각합니다.
모바일 웹의 UI를 개선하고자 하는 웹 디자이너와 웹 프로그래머가 실무에 바로 적용할 수 있는 책으로, 실무자들의 가려운 부분을 긁어주는 날카로운 필력으로 유명한 저자의 경험과 커뮤니티를 통한 피드백은 또 하나의 강점이라고 생각합니다.
- 박근용_프리랜서 디자이너

1장. 모바일 보일러플레이트 소개
  1.1 모바일 보일러플레이트란?
  1.2 모바일 보일러플레이트의 주요 특징
    1.2.1 Zepto.js 라이브러리
    1.2.2 Modernizr 라이브러리
  1.3 모바일 보일러플레이트 다운로드
  1.4 모바일 보일러플레이트의 장단점

2장. 모바일 보일러플레이트 분석
  2.1 모바일 보일러플레이트 구조
    2.1.1 루트 디렉터리 구조
    2.1.2 추가 디렉터리 구조
  2.2 index.html 분석
  2.3 normalize.css 분석
    2.3.1 HTML5 요소 관련 설정
    2.3.2 기본 요소 관련 설정
    2.3.3 하이퍼링크 요소 관련 설정
    2.3.4 텍스트 요소 관련 설정
  2.4 main.css 분석
    2.4.1 모바일 보일러플레이트 고유 설정
    2.4.2 미디어 쿼리 관련 설정
  2.5 plugins.js 분석

3장. 국내 환경에 맞게 수정한 모바일 보일러플레이트 템플릿
  3.1 수정한 모바일 보일러플레이트 구조
  3.2 index.html의 변경점
  3.3 normalize.css의 변경점
    3.3.1 자주 사용하지 않는 normalize.css 코드의 예
    3.3.2 새롭게 추가하거나 수정한 부분
  3.4 main.css의 변경점

4장. 예제 웹 페이지 만들기
  4.1 웹 페이지 디자인 구성 노하우
  4.2 예제 모바일 웹 페이지 살펴보기
  4.3 레이아웃 구조 완성하기
    4.3.1 HTML 마크업
    4.3.2 CSS 코딩
  4.4 header 영역 만들기
    4.4.1 HTML 마크업
    4.4.2 CSS 코딩
  4.5 article 영역 만들기
    4.5.1 promotion 영역
    4.5.2 news_area 영역
    4.5.3 목록 플리킹
    4.5.4 last_list 영역
  4.6 footer 영역 만들기
    4.6.1 HTML 마크업
    4.6.2 CSS 코딩
  4.7 크로스 브라우징 확인

부록. 예제 웹 페이지 소스 코드
  index.html
  css- normalize.css
  css- main.css