본문 바로가기

리디 접속이 원활하지 않습니다.
강제 새로 고침(Ctrl + F5)이나 브라우저 캐시 삭제를 진행해주세요.
계속해서 문제가 발생한다면 리디 접속 테스트를 통해 원인을 파악하고 대응 방법을 안내드리겠습니다.
테스트 페이지로 이동하기

[리얼타임] 모바일 보일러플레이트 상세페이지

컴퓨터/IT 개발/프로그래밍

[리얼타임] 모바일 보일러플레이트

모바일 웹 개발 실무를 위한 어비의 노하우
소장전자책 정가9,900
판매가10%8,910
[리얼타임] 모바일 보일러플레이트 표지 이미지

리디 info

도서 이용 안내
서점에서 판매 중인 리얼타임 시리즈는 DRM-Free 도서가 아닙니다.
DRM-Free 도서는 한빛미디어 홈페이지에서 별도 구매하셔야 합니다.
도서 이용에 참고 부탁드립니다.


[리얼타임] 모바일 보일러플레이트작품 소개

<[리얼타임] 모바일 보일러플레이트> 쉽고 빠르게 모바일 웹 제작 방법을 배우는 실무 밀착형 가이드

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

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


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


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

추천평(추천사)

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

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


저자 프로필

송태민

  • 국적 대한민국
  • 출생 1980년 9월 25일
  • 학력 2010년 국민대학교 대학원 시각디자인 석사
    2006년 순천향대학교 국제문화 학사
  • 경력 어비팩토리 대표
    2013년 SK플래닛 New Interaction 사업팀 UX 디자이너
    2013년 현대엠엔소프트 TDX 디자이너
    2013년 이베이 코리아 UX 디자이너
    2013년 한국예술원 멀티미디어과 교수
  • 링크 공식 사이트트위터블로그

2014.12.09. 업데이트 작가 프로필 수정 요청


저자 소개

[지은이] 송태민
언제나 새로운 주제를 빠르게 탐구한 후 자신의 지식을 다른 사람들과 어떻게 나누는 것이 좋을지에 대해서 고민하고 책을 쓰는 소신 있는 웹 퍼블리셔이자 현업 UI/UX 디자이너입니다. 현재 SK플래닛에서 UI/UX 디자이너로 다양한 서비스를 개발하고 있으며, UX/UI를 연구하는 어비팩토리 공장장이자 KAC한국예술원 멀티미디어디자인과 외래 교수로 활동 중입니다. 또한 디자인 정글, 디노마드 등에서 강의를 진행하며, 웹 개발 트렌드와 관련한 각종 세미나에서 자주 볼 수 있는 스피커이기도 합니다

목차

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
css- index.css


리뷰

구매자 별점

0.0

점수비율
  • 5
  • 4
  • 3
  • 2
  • 1

0명이 평가함

리뷰 작성 영역

이 책을 평가해주세요!

내가 남긴 별점 0.0

별로예요

그저 그래요

보통이에요

좋아요

최고예요

별점 취소

구매자 표시 기준은 무엇인가요?

'구매자' 표시는 리디에서 유료도서 결제 후 다운로드 하시거나 리디셀렉트 도서를 다운로드하신 경우에만 표시됩니다.

무료 도서 (프로모션 등으로 무료로 전환된 도서 포함)
'구매자'로 표시되지 않습니다.
시리즈 도서 내 무료 도서
'구매자’로 표시되지 않습니다. 하지만 같은 시리즈의 유료 도서를 결제한 뒤 리뷰를 수정하거나 재등록하면 '구매자'로 표시됩니다.
영구 삭제
도서를 영구 삭제해도 ‘구매자’ 표시는 남아있습니다.
결제 취소
‘구매자’ 표시가 자동으로 사라집니다.

Realtime


[리얼타임]


이 책과 함께 구매한 책


이 책과 함께 둘러본 책



본문 끝 최상단으로 돌아가기

spinner
모바일 버전