Hanbit ebook Realtime 44 모바일웹개발실무를위한어비의노하우 모바일 보일러플레이트 송태민지음
모바일웹개발실무를위한어비의노하우모바일보일러플레이트
모바일웹개발실무를위한어비의노하우모바일보일러플레이트 초판발행 2013 년 10 월 20 일 지은이송태민 / 펴낸이김태헌펴낸곳한빛미디어 ( 주 ) / 주소서울시마포구양화로 7길 83 한빛미디어 ( 주 ) IT출판부전화 02-325-5544 / 팩스 02-336-7124 등록 1999년 6월 24일제10-1779호 ISBN 978-89-6848-648-7 15000 / 정가 9,900원 책임편집배용석 / 기획이중민 / 편집김연숙디자인표지여동일, 내지스튜디오 [ 밈 ], 조판이경숙마케팅박상용, 박주훈 이책에대한의견이나오탈자및잘못된내용에대한수정정보는한빛미디어 ( 주 ) 의홈페이지나아래이메일로알려주십시오. 한빛미디어홈페이지 www.hanb.co.kr / 이메일 ask@hanb.co.kr Published by HANBIT Media, Inc. Printed in Korea Copyright c 2013 HANBIT Media, Inc. 이책의저작권은송태민과한빛미디어 ( 주 ) 에있습니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 저작권법에의해보호를받는저작물이므로무단복제및무단전재를금합니다. 지금하지않으면할수없는일이있습니다. 책으로펴내고싶은아이디어나원고를메일 (ebookwriter@hanb.co.kr) 로보내주세요. 한빛미디어 ( 주 ) 는여러분의소중한경험과지식을기다리고있습니다.
지은이 _ 송태민 ( 어비, UhBee) 언제나새로운주제를찾아빠르게탐구하고자신의지식을다른사람들과어떻게나누는것이좋을지에대해고민한후에책을쓴다는, 소신있는웹퍼블리셔이자현업 UI/UX 디자이너입니다. 또한한달에한곡이상은꼭작사 / 작곡해서발표한다는신념아래자신을채찍질하는왑듀오의리더이자래퍼이기도합니다. 현재 SK플래닛에서 UI/UX 디자이너로다양한서비스를개발하고있으며, UX/UI를연구하는어비팩토리공장장입니다. 또한디자인정글, 디노마드등에서강의를진행하며웹개발트렌드와관련한각종세미나에서자주볼수있는스피커입니다. 저서로 크리에이티브디자이너를위한웹표준 ( 제우미디어, 2009), 어비의모바 일 HTML ( 에세이, 2011), 어비의모바일웹 ( 길벗, 2012), 반응형웹디자인 ( 위키북스, 2013), HTML5 보일러플레이트 ( 한빛미디어, 2013) 등이있습니다. 주요경력 現 SK플래닛 UX 디자이너現어비팩토리대표前 SK커뮤니케이션즈 UX/UI/GUI 前이베이코리아 UX 디자이너 前현대엠엔소프트 ( 주 ) TDX 디자이너前그래텍 - 곰플레이어디자이너국민대디자인대학원시각디자인석사수료 Adobe Creative Leader
저자서문 모바일보일러플레이트는많은사람에게모바일웹페이지를만드는가이드가될수있는중요한템플릿입니다. 하지만본래의모바일보일러플레이트는외국웹페이지에최적화된상태이므로각요소를자세히살펴보고자신만의것으로제작해야하는큰숙제를안고있습니다. 그런이유로필자는모바일보일러플레이트를국내에서많이사용하는마크업방식으로다시조합하고수정해 어비의모바일보일러플레이트 템플릿을만들었습니다. 실무에서빠르게모바일웹페이지를제작해야한다면꼭이책을읽고실무에바로이용해보기바랍니다. 다른템플릿보다더빠르고손쉽게모바일웹페이지를만들수있습니다. 또한당부하고싶은말은모바일웹이라고해서데스크톱용웹페이지에서사용하던 HTML5과다른것은아니라는점입니다. 모바일웹페이지를만드는데어려움을겪는분이라도절대두려워하지않을정도의실무노하우를여러분께알려드리고자합니다. 모바일보일러플레이는필자 ( 어비, 송태민 ) 의일곱번째서적입니다. 실무에필요한것이라면언제나필자의노하우를숨김없이전부담아끊임없이공유하고싶은마음으로집필하다보니어느덧일곱번째서적을집필하게되었습니다. 많은분에게큰도움은되지않더라도소소한도움은될것이라고확신하며, 특히실무에서바로사용할수있는황금같은방법이될수있기를바랍니다. 필자는이번집필기간회사에서담당했던 니어키즈 모바일웹서비스에이모바일보일러플레이트를도입해웹페이지를만들었는데, 그덕에이책의집필도성공적으로마감할수있었다고생각합니다. 회사업무로같이고생하면서용기를북돋워준황실근팀장님, 강진호부장님, 최근호부장님, 이재성차장님, 서광민매니저님께진심으로감사드리며앞으로도잘부탁한다는말을전하고싶습니다.
그리고바쁜업무에도최선을다해집필기간을지킬수있도록늘배려해주고도와준한빛미디어의이중민대리님께도항상감사하다는인사를드립니다. 책을집필할때마다, 가족들얼굴조차보기힘들정도로일에빠져있을때마다항상고맙고미안한우리가족, 와이프김재연, 두딸, 송채빈, 송나윤사랑합니다. 그럼어비는조만간여러분의실무에직접적으로도움을줄수있는여덟번째서적으로찾아뵙겠습니다. 마지막으로무엇보다독자여러분께항상감사드립니다. 집필을마치며송태민
추천사 김세원 _ 세종씨앤피 / 이노브모바일사업부팀장 모바일웹제작의실무자가이드북 이책은모바일웹제작의거대한세계를폭넓게, 그리고깊이있게전달하는실무 매뉴얼의하나라생각합니다. 일반적으로모바일웹이라불리는것은실제여러가지사양의집합체이므로전체 내용은엄청나게방대합니다. 웹에서도정보가여러곳에흩어져있어전체모습을 파악하는것만도꽤고생스러운일이라할수있습니다. 최근웹브라우저각각의업그레이드가매우빠른속도로진행되므로가까운시일안에이러한문제의많은부분이해결될것으로예상되지만, 그때까지는 W3C의 HTML5 기술문서등을참고하면서공부하는것이더확실할것입니다. HTML5 를좀더쉽고빠르게습득할수있는모델을제시하고, 레이아웃을만들수있는템플릿을제공해주는이책은디자이너및웹퍼블리셔그리고개발자, 기획자및실무자에게모바일보일러플레이트라는새로운템플릿형태의마크업방법을제시하는데충실한역할을하는책입니다.
베타리더 박근용 _ 프리랜서디자이너 다양한모바일기기환경에서사용자에게맞는웹페이지를구현하는일은이제개인및기업의정보제공에있어필수적인요소라할수있을것입니다. 그런데다양한모바일웹환경에기존웹디자인을그대로적용하기에는문제가많습니다. 그런의미에서이책은 HTML5에기반을두고빠르게모바일웹을만들수있게도와주는모바일보일러플레이트를국내실정에맞게분석하고템플릿파일을수정해서실무에서사용할수있는노하우를그대로전수해준책이라생각합니다. 모바일웹의 UI 를개선하고자하는웹디자이너와웹프로그래머가실무에바로적 용할수있는책으로, 실무자들의가려운부분을긁어주는날카로운필력으로유명 한저자의경험과커뮤니티를통한피드백은또하나의강점이라고생각합니다.
예제파일 예제파일 : http://www.hanb.co.kr/exam/2648 예제웹페이지 : http://uhb.kr/mbp 필자가운영하는질문 / 답변커뮤니티어비의웹표준커뮤니티 : http://www.standard.pe.kr
한빛 ebook 리얼타임 한빛 ebook 리얼타임은 IT 개발자를위한 ebook 입니다. 요즘 IT 업계에는하루가멀다하고수많은기술이나타나고사라져갑니다. 인터넷을아무리뒤져도조금이나마정리된정보를찾는것도쉽지않습니다. 또한잘정리되어책으로나오기까지는오랜시간이걸립니다. 어떻게하면조금이라도더유용한정보를빠르게얻을수있을까요? 어떻게하면남보다조금더빨리경험하고습득한지식을공유하고발전시켜나갈수있을까요? 세상에는수많은종이책이있습니다. 그리고그종이책을그대로옮긴전자책도많습니다. 전자책에는전자책에적합한콘텐츠와전자책의특성을살린형식이있다고생각합니다. 한빛이지금생각하고추구하는, 개발자를위한리얼타임전자책은이렇습니다. 1. ebook Only - 빠르게변화하는 IT 기술에대해핵심적인정보를신속하게제공합니다. 500페이지가까운분량의잘정리된도서 ( 종이책 ) 가아니라, 핵심적인내용을빠르게전달하기위해조금은거칠지만 100페이지내외의전자책전용으로개발한서비스입니다. 독자에게는새로운정보를빨리얻을수있는기회가되고, 자신이먼저경험한지식과정보를책으로펴내고싶지만너무바빠서엄두를못내시는선배, 전문가, 고수분에게는보다쉽게집필하실기회가되리라생각합니다. 또한새로운정보와지식을빠르게전달하기위해 O'Reilly의전자책번역서비스도하고있습니다. 2. 무료로업데이트되는, 전자책전용서비스입니다. 종이책으로는기술의변화속도를따라잡기가쉽지않습니다. 책이일정한분량이상으로집필되고정리되어나오는동안기술은이미변해있습니다. 전자책으로출간된이후에도버전업을통해중요한기술적변화가있거나, 저자 ( 역자 ) 와독자가소통하면서보완되고발전된노하우가정리되면구매하신분께무료로업데이트해드립니다.
3. 독자의편의를위하여, DRM-Free로제공합니다. 구매한전자책을다양한 IT기기에서자유롭게활용하실수있도록 DRM-Free PDF 포맷으로제공합니다. 이는독자여러분과한빛이생각하고추구하는전자책을만들어나가기위해, 독자여러분이언제어디서어떤기기를사용하시더라도편리하게전자책을보실수있도록하기위함입니다. 4. 전자책환경을고려한최적의형태와디자인에담고자노력했습니다. 종이책을그대로옮겨놓아가독성이떨어지고읽기힘든전자책이아니라, 전자책의환경에가능한최적화하여쾌적한경험을드리고자합니다. 링크등의기능을적극적으로이용할수있음은물론이고글자크기나행간, 여백등을전자책에가장최적화된형태로새롭게디자인하였습니다. 앞으로도독자여러분의충고에귀기울이며지속해서발전시켜나가도록하겠습니다. 지금보시는전자책에소유권한을표시한문구가없거나타인의소유권한을표시한 문구가있다면위법하게사용하고계실가능성이높습니다. 이경우저작권법에의해 불이익을받으실수있습니다. 다양한기기에사용할수있습니다. 또한한빛미디어사이트에서구입하신후에는횟수에 관계없이다운받으실수있습니다. 한빛미디어전자책은인쇄, 검색, 복사하여붙이기가가능합니다. 전자책은오탈자교정이나내용의수정보완이이뤄지면업데이트관련공지를이메일로 알려드리며, 구매하신전자책의수정본은무료로내려받으실수있습니다. 이런특별한권한은한빛미디어사이트에서구입하신독자에게만제공되며, 다른 사람에게양도나이전되지않습니다.
차례 01 모바일보일러플레이트소개 1 1.1 모바일보일러플레이트란? 1 1.2 모바일보일러플레이트의주요특징 4 1.2.1 Zepto.js 라이브러리 5 1.2.2 Modernizr 라이브러리 7 1.3 모바일보일러플레이트다운로드 8 1.4 모바일보일러플레이트의장단점 9 02 모바일보일러플레이트분석 10 2.1 모바일보일러플레이트구조 10 2.1.1 루트디렉터리구조 10 2.1.2 추가디렉터리구조 12 2.2 index.html 분석 16 2.3 normalize.css 분석 23 2.3.1 HTML5 요소관련설정 25 2.3.2 기본요소관련설정 27 2.3.3 하이퍼링크요소관련설정 28 2.3.4 텍스트요소관련설정 29 2.4 main.css 분석 40 2.4.1 모바일보일러플레이트고유설정 40 2.4.2 미디어쿼리관련설정 46 2.5 plugins.js 분석 47
03 국내환경에맞게수정한모바일보일러플레이트템플릿 50 3.1 수정한모바일보일러플레이트구조 50 3.2 index.html의변경점 52 3.3 normalize.css의변경점 56 3.3.1 자주사용하지않는 normalize.css 코드의예 57 3.3.2 새롭게추가하거나수정한부분 58 3.4 main.css의변경점 60 04 예제웹페이지만들기 63 4.1 웹페이지디자인구성노하우 63 4.2 예제모바일웹페이지살펴보기 65 4.3 레이아웃구조완성하기 68 4.3.1 HTML 마크업 69 4.3.2 CSS 코딩 70 4.4 header 영역만들기 71 4.4.1 HTML 마크업 71 4.4.2 CSS 코딩 72 4.5 article 영역만들기 72 4.5.1 promotion 영역 74 4.5.2 news_area 영역 76 4.5.3 목록플리킹 82 4.5.4 last_list 영역 84 4.6 footer 영역만들기 87
4.6.1 HTML 마크업 87 4.6.2 CSS 코딩 87 4.7 크로스브라우징확인 88 부록예제웹페이지소스코드 92 index.html 92 css- normalize.css 100 css- main.css 101 css- index.css 102
1 모바일보일러플레이트소개 모바일웹은이제시대의대세가아닐까요? 2007년아이폰이처음출시된이후, 그리고안드로이드와함께스마트폰의전성기가열리면서모바일웹은어떤웹페이지를만들때필수로고려해야하는환경의하나가되었죠. 하지만국내상황은아직모바일웹이보편화되었다고보기는어렵습니다. 여전히대부분의웹환경은데스크톱에기반을두는것이현실입니다. 이책에서는 2013년 6월에출간한 HTML5 보일러플레이트 ( 한빛미디어, 2013) 와마찬가지로모바일웹을만드는웹퍼블리셔를대상으로모바일웹을빠르게만들기위한모바일보일러플레이트를설명합니다. 1장에서는모바일보일러플레이트가무엇인지를설명하고모바일보일러플레이트의특징과장단점을설명합니다. 1.1 모바일보일러플레이트란? 모바일웹은데스크톱웹환경과비교했을때해상도에서는부족한부분이없더라도실제우리가접하는화면은상대적으로작습니다. 따라서이러한화면을고려해야하는데, 구체적으로살펴보면다음과같습니다. 모바일 / 태블릿기기환경에대응하기위해터치동작을고려한 UI가필요함 데스크톱웹과비교했을때해상도변화에민감하므로몇가지모바일 / 태블릿기기에대응하는해상도를염두에두고 UI를설계해야함 모바일 / 태블릿기기에맞춰서웹페이지를로딩할수있게마크업해야함 모바일기기의다양한하드웨어환경에대응해야함 1 장모바일보일러플레이트소개 1
그림 1-1 ios/ 안드로이드웹브라우저비교 특히두번째와세번째, 네번째부분은기존데스크톱환경에대응하는 HTML, XHTML, CSS, 자바스크립트로는처리할수없는부분입니다. 따라서당연한말이 지만 HTML5, CSS3, 자바스크립트를적극적으로받아들여야합니다. 앞서출간한 HTML5 보일러플레이트 를읽어본분이라면최근 HTML5 에관한 웹환경의이슈를살펴보았을것입니다. 모바일웹의이슈는다음과같은사항 01 을 생각해볼수있습니다. 01 모바일웹은모바일웹브라우저가대부분 HTML5를지원하기때문에구형웹브라우저와의호환성문제를크게걱정할필요가없습니다. 또한서버에서접속기기에따라서는 PC 기반의데스크톱웹과모바일웹을따로구분해서보여줄수있으므로큰문제가되지않을수있습니다. 1 장모바일보일러플레이트소개 2
기존웹퍼블리셔의 HTML5 적응문제 수많은자바스크립트기반라이브러리의적응문제 플랫폼과기기별해상도에맞춘 UI 디자인설계와마크업 이러한요구사항에대응하기위해서등장한것이바로모바일보일러플레이트입니다. 모바일보일러플레이트는 HTML5 보일러플레이트와마찬가지로니콜라스갤러거 Nicolas Gallagher, 폴아이리시 Paul Irish, 마티아스바이넨스 Mathias Bynens, 디비어매니언 Divya Manian, 한스크리스티안라이널 Hans Christian Reinl 등외국의웹퍼블리셔와디자이너들이오픈소스프로젝트형태로참여하여각자의의견을소신껏반영하고수정하면서점점완성된방향으로만든, 모바일웹제작을도와주는템플릿입니다. 즉, HTML5 기반으로제작해야하는모바일웹페이지에필요한기준마크업, CSS, 자바스크립트등을소스코드형태로배포하는것이죠. 그림 1-2 모바일보일러플레이트공식웹사이트 1 장모바일보일러플레이트소개 3
1.2 모바일보일러플레이트의주요특징 그럼모바일보일러플레이트는모바일웹을빠르게구현하기위해무엇을포함하 고있을까요? 여기서는모바일보일러플레이트의주요특징을살펴보겠습니다. HTML5 지원 HTML5 보일러플레이트와마찬가지로 HTML5 에최적화된웹표준을준수하는템 플릿입니다. Zepto.js 라이브러리이용 jquery의문법구조를그대로유지하면서꼭필요한기능만제공하여크기를최소화한 jquery 호환자바스크립트라이브러리인 Zepto.js를사용합니다. 기존 jquery 문법을사용하여스크립트를작성할수있습니다. ios와안드로이드모바일웹브라우저를위한 CSS 코드제공 ios 5 이상버전의 Safari 웹브라우저에서 <audio> 요소를사용할때세로폭을조정한다든가, 사용자가임의로웹페이지를확대하는것을막는다든가, 안드로이드 4.0 이상의웹킷 Webkit 브라우저에서발생하는 <audio> 및 <video> 요소의버그를피하는등의 CSS 코드를제공합니다. normalize.css에서제공하는기능입니다. 북마크플러그인 Mobile Bookmark Bubble 추가 모바일웹앱을모바일기기에서아이콘화하도록유도하는 Mobile Bookmark Bubble 플러그인을제공합니다. 모바일웹브라우저최적화 CSS3 의미디어쿼리 (@media) 를이용해서모바일웹브라우저의해상도에맞춰웹 페이지를로딩하도록도와줍니다. 해당코드는 main.css 에포함되어있습니다. 1 장모바일보일러플레이트소개 4
HTML5 테스트지원 Modernizr 라이브러리를간단하게설명하면 HTML5가웹브라우저에서정상적으로동작하는지를테스트해주는자바스크립트기반의프레임워크입니다. 모바일웹환경에서는구현대상으로삼은웹브라우저에서 HTML5 요소의지원여부를확인하는데사용합니다. 1.2.2 Modernizr 라이브러리 에서사용방법을확인할수있습니다. 그외모바일보일러플레이트의주요특징은 https://github.com/h5bp/ mobile-boilerplate/blob/master/doc/readme.md 혹은템플릿소스파일 의 doc 디렉터리안에있는 README.md 를열어서확인할수있습니다. 1.2.1 Zepto.js 라이브러리 Zepto.js 라이브러리는 jquery의문법구조를그대로유지하면서꼭필요한기능만제공하여크기를최소화한 jquery 호환자바스크립트라이브러리입니다. PC 와비교했을때상대적으로성능저하문제를고려해야하는모바일웹에서사용하려고 script.aculo.us, scripty2 등을개발한토마스퍽스 Thomas Fuchs 가만들었습니다. 현재는데스크톱도지원하며 GNU GPL 02 가아닌 MIT 라이선스 03 를따르는오픈소스입니다. 공식웹사이트는 http://www.zeptojs.com입니다. 02 GNU General Public License의약자로모든사람이해당프로그램을자유롭게이용할수있어야하며해당라이선스를사용하여새로운프로그램을만들게되면파생된프로그램역시해당라이선스를적용하여반드시모든사람에게공유해야한다는조건이따릅니다 ( 출처 : 위키백과 ). 03 MIT 라이선스는 MIT의소프트웨어공학도들을돕기위해개발한라이선스로 GNU GPL과비교했을때꼭저작물은반드시모든사람에게공유할필요가없다는차이가있습니다 ( 출처 : 위키백과 ). 1 장모바일보일러플레이트소개 5
그림 1-3 Zepto.js 라이브러리공식웹사이트 모바일보일러플레이트에서사용하는 Zepto.js 버전은 1.0 입니다. 크로스브라우 징문제로아직 jquery 2.0 과는호환되지않습니다. 주요특징 04 은다음과같습니 다. 트위터부트스트랩과호환 이식가능한, node.js 기반의새로운빌드시스템포함 PhantomJS 05 와 Travis CI 06 와완벽하게호환되는자동화테스트지원 touch 모듈제거 04 출처 : http://mir.aculo.us/2013/03/04/zepto-1-0/ 05 웹브라우저에서웹페이지를직접실행하지않고도웹앱의정상동작여부를확인할수있게설계한유틸리티입니다. 공식웹사이트는 http://phantomjs.org/ 이며 MS Visual C++, 애플의 Xcode, 리눅스터미널에서사용할수있게플러그인형식으로제공합니다. 06 오픈소스소프트웨어에서프로젝트관리를위한지속적인통합 (Continuous Integration) 을구현하는유틸리티입니다. 공식웹사이트는 https://travis-ci.org/ 입니다. 1 장모바일보일러플레이트소개 6
1.2.2 Modernizr 라이브러리 Modernizr는새롭게추가된 HTML5 요소들을웹브라우저가지원하는지검사하는오픈소스프로젝트기반의자바스크립트라이브러리입니다. 또한 CSS3나새로운웹기술이등장할때마다버전을업그레이드하면서웹브라우저가해당기술을지원하는지를검사할수있도록발전하고있습니다. 모바일보일러플레이트가 HTML5 지원을표방하는만큼 Modernizr는반드시필요합니다. 그림 1-4 Modernizr 공식웹사이트 기본적인코드작성법은다음과같습니다. if (Modernizr.html5/CSS3 요소. 속성 == true/false) { // 조건에따라원하는자바스크립트처리코드작성 } 1 장모바일보일러플레이트소개 7
이를통해모바일웹브라우저에따라필요한마크업코드를선택할수있어크로 스웹브라우징지원을가능케합니다. 1.3 모바일보일러플레이트다운로드 모바일보일러플레이트는그림 1-2에서소개한 http://html5boilerplate.com/ mobile/ 의 <Download v.4.1.0> 링크를눌러다운로드할수있습니다. 또한이제는웹퍼블리셔에게도친숙한 Github에서도다운로드할수있습니다. 특히최신버전을다운로드하려면 Github를추천합니다. Github에서는모바일보일러플레이트의가장최신버전을다운로드할수있습니다. 그림 1-5 Github 의모바일보일러플레이트 1 장모바일보일러플레이트소개 8
1.4 모바일보일러플레이트의장단점 만약여러분이처음모바일웹페이지를만든다면기존의습관때문에데스크톱웹페이지처럼마크업하려고할것입니다. 하지만화면크기가작아분명당황할것입니다 ( 당황하더라도다양한모바일웹페이지를보았던느낌이있으므로디자인까지는무난할것입니다 ). 그리고 모바일웹페이지를만드는마크업방법이따로있나? 라는의문을갖게될것입니다. 사실모바일웹은일반데스크톱웹페이지와마크업방법이다르지않습니다. 단, 모바일웹환경을위한각종요소가존재할뿐입니다. 여러분은모바일웹페이지를만들때마다모바일환경에맞는요소와스크립트를항상넣어야합니다. 이때모바일보일러플레이트는번거롭고복잡한작업을줄여주고실제마크업작업에만몰두할수있게도와준다는장점이있습니다. 템플릿에모바일웹에필요한각종요소가이미마크업되어있고웹브라우저에맞춰최적화할수있게돕는다양한라이브러리도포함되어있기때문이죠. 하지만사람마다마크업습관과노하우가각기다르기때문에이템플릿이모든사람에게적합한절대적인템플릿이아니라는것은당연하면서도어쩔수없는단점이되기도합니다. 따라서자신의마크업습관과노하우에맞춰조정하는작업이필요합니다. 이때처음부터이러한템플릿을만드는작업은사실굉장히많은시간을필요로하는데모바일보일러플레이트는큰힘을들이지않고도자신만의혹은자신이일하는회사만의가이드와템플릿을만들수있습니다. 이책에서는필자가국내에서자주사용하는요소만으로정리해 한국형모바일보일러플레이트 를제작하는가이드를제시해줌으로써누구나손쉽게자신만의템플릿을가질수있도록도와줄것입니다. 1 장모바일보일러플레이트소개 9
2 모바일보일러플레이트분석 이제본격적으로모바일보일러플레이트의템플릿구조를살펴보겠습니다. 모바일보일러플레이트는 1장에서설명한것처럼스마트폰플랫폼별로웹브라우저의호환성을최대한높일수있게설계되어있습니다. 따라서 index.html부터웹사이트디자인을위한 main.css, 웹브라우저혹은웹브라우저의버전별로 CSS 설정을다르게가져갈수있는 normalize.css, 동적인웹사이트제작의기본인 Zepto.js 라이브러리와웹브라우저별로 HTML5와 CSS3에추가된새로운요소의사용여부를확인하여대체코드를사용할수있게해주는 Modernizr 라이브러리등의다양한구성요소로이루어져있습니다. 2.1 모바일보일러플레이트구조 다운로드한템플릿소스파일의압축을풀면생각보다생소한파일을확인하고놀랄수도있습니다. 템플릿소스파일에서제공하는파일의상당수는국내에서자주사용하는것이아닌외국에서자주사용하는파일이기때문이죠. 보편성을생각하여모바일보일러플레이트를구성했으므로각자환경에맞게사용자화하는것이좋다는점을꼭기억했으면합니다. 그럼지금부터모바일보일러플레이트의기본구조를살펴보도록하겠습니다. 2.1.1 루트디렉터리구조 루트디렉터리의구조는그림 2-1 과같습니다. 2 장모바일보일러플레이트분석 10
그림 2-1 루트디렉터리구조 ❶ ❷ ❸ ❹ ❺ ❻ 1 은 HTML 마크업파일입니다. 404.html 과 index.html 파일이있습니다. 2는템플릿소스코드를공유할때필요한설정모음을저장한파일입니다..gitattributes는앞서설명한 Git 관련설정을저장하는파일인데기본적으로는특정파일형식을등록했을때해당하는모든파일들은모두바이너리로인식하게합니다..gitignore는반대로 Git에서관리할필요가없는파일형식을등록합니다..htaccess는웹서버를여러개로나누어구성했을때의관리를위해여러웹서버가지원하는디렉터리수준의설정파일을등록합니다. 이는소스코드를관리할때필요한설정으로, 소스코드관리를하지않거나다수의웹서버에서웹사이트를제작하지않는다면무시해도됩니다. 3 은모바일보일러플레이트를위한매뉴얼파일입니다. 소스코드의변경기록, 팁, 라이선스, 도움말등을담았습니다. 4 의 crossdomain.xml 은플래시기반웹애플리케이션이웹사이트에포함되어 있을때크로스도메인정책을요청하는파일입니다. 보안상의이유로플래시기반 웹애플리케이션은허가되지않은서버에데이터를요청할수없기때문에특정서 2 장모바일보일러플레이트분석 11
버에연결되었을때플래시플레이어는가장먼저해당서버에이파일을요청해야 합니다. 그러면플래시플레이어는이파일을분석한후보안정책을위반하지않 으면애플리케이션을실행합니다. 5 는기본으로사용하는파비콘파일입니다. 6의 human.txt에는모바일보일러플레이트기반의프로젝트에참가한프로젝트팀을소개하는파일입니다. 프로젝트가끝나고소스코드를관리하거나 Git 등에등록해서다른개발자가해당프로젝트를분석할때이파일을참고해문의할수있습니다. robots.txt에는구글검색엔진의봇이검색하면안되는웹페이지파일이름을저장합니다. 그러면해당웹페이지는구글검색엔진의검색결과에서제외됩니다. 2.1.2 추가디렉터리구조템플릿파일의추가디렉터리에는모바일보일러플레이트의디자인과동적인효과를위한 CSS나자바스크립트기반라이브러리가저장되어있습니다. 또한모바일보일러플레이트를이해하기위한문서파일도저장되어있으며, 그림 2-2와같은구조로이루어져있습니다. 2 장모바일보일러플레이트분석 12
그림 2-2 추가디렉터리구조 ❶ ❷ ❸ ❹ ❺ ❻ 2 장모바일보일러플레이트분석 13
1 은웹사이트의디자인을위한 CSS 폴더입니다. HTML5 의기본디자인을위한 main.css 와앞서소개한 normalize.css 파일이저장되어있습니다. 해당파일은 2.3 normalize.css 분석 과 2.4 main.css 분석 에서자세하게설명합니다. 2 는모바일보일러플레이트를이해하기위한문서파일모음입니다. 각각의파일 에담긴내용은다음과같습니다. contribute.md: 모바일보일러플레이트소스코드로웹페이지를만들면서느꼈던이슈사항에대한질문과재능기부에대한소개 crossdomain.md: 앞서설명한 crossdomain.xml의이용법소개 css.md: main.css와 normalize.css의이용법소개 extend.md: 제작한웹사이트를웹서버와연동할때필요한 DNS 프리페치설정법소개 ( 모바일기기별로필요한모바일웹최적화서버리디렉션스크립트, 모바일 MIME 등을.htaccess에설정하는방법등 ). faq.md: 모바일보일러플레이트를이용할때자주발생하는질문 / 답변모음 htaccess.nd: 빠르고안전한웹페이지를만들기위한최상의서버규칙설정법소개 html.md: index.html의코드구조소개. 모바일인터넷익스플로러버전에맞춰크로스브라우징을지원하는방법과각요소의의미를설명 js.md: js 디렉터리파일의이용법소개 misc.md: misc는 miscellaneous 의약자로 2.1.1 루트디렉터리구조 2 번항목의설정법과모바일북마크버블의사용법소개 README.md: 모바일보일러플레이트매뉴얼 (.md 파일 ) 의이용방법과모바일보일러플레이트사용에도움을주는관련프로젝트사이트주소소개 usage.md: 모바일보일러플레이트템플릿구조와기본이용법소개 2 장모바일보일러플레이트분석 14
해당매뉴얼을읽기전에먼저 README.md 와 usage.md 를읽어본후필요할때 마다원하는매뉴얼파일을열어서읽어볼것을권장합니다. 3에는웹사이트를만들면서필요한이미지파일이저장되어있습니다. 모바일웹혹은웹앱에서사용할기본바로가기아이콘과스플래시 splash 이미지가포함되어있습니다. 스플래시이미지는 (ios에서만사용가능 ) 웹앱으로설정했을때첫로딩으로나오는이미지로 startup 디렉터리에저장되어있습니다. 바로가기아이콘의경우즐겨찾기혹은홈화면에바로가기아이콘을저장했을때보여지는이미지며, 다양한모바일기기의아이콘크기에맞게사용할수있도록여러개이미지를저장했습니다. touch 디렉터리에저장되어있습니다. 4는자바스크립트코드를담은 js 파일을저장하는디렉터리입니다. main.js는아무런내용이없이비어있으며웹사이트를만들면서필요한자바스크립트코드를작성하면됩니다. plugins.js는 1.2 모바일보일러플레이트의주요특징 에서설명한자바스크립트프로파일링을위한 js 파일로 Zepto.js 라이브러리의플러그인을포함할수있습니다. helper.js는모바일기기의웹브라우저에서모바일보일러플레이트템플릿을사용할때기본적으로조정되어야할부분 (ios, 안드로이드, 블랙배리등에서나타나는버그수정, 주소바숨기기구현등 ) 을위한자바스크립트코드가포함되어있습니다. 5 의 vendor 디렉터리에는자바스크립트라이브러리파일을저장합니다. zepto. min.js 와앞서설명한 modernizr-2.6.2.min.js 가저장되어있습니다. 6 의 tools 에는 모바일북마크버블 라이브러리로북마크풍선말을구현하는데 필요한소스파일이포함되어있습니다. 만약다른도구형식의플러그인을포함한 다면 tools 디렉터리에추가하길권장합니다. 2 장모바일보일러플레이트분석 15