"Responsive web design" ( 우리회사웹사이트반응형으로리모델링하기 ) 정찬명

Episode1: 우리사장님

http://www.nhncorp.com/nhn/index.nhn PC Mobile

http://recruit.nhncorp.com/main/recruit_ing.jsp PC Mobile

기존모바일웹의문제 PC 웹과모바일웹을따로제작. 모바일브라우저로접속시모바일웹페이지로 redirection. 새로운모바일단말기또는브라우저가나올때마다서버측개발자는새단말기정보를추가한다음이를분기처리.

http://naradesign.net/nhn/ PC Mobile

http://naradesign.net/nhn/recruit.html PC Mobile

Episode2: 개념탑재

" 반응형웹디자인이란?" 사용자환경에따라 유익하게반응하는디자인 사용자환경 = PC, 모바일, OS, 화면크기

HTML5 Forms + CSS3 Media Queries Image Replacement Image Sprites

" 반응형웹디자인의장점 " 다양한해상도와단말기에서두루 잘보임 신형단말기가등장해도추가대응 필요없음 서버사이드개발이슈가적어투자 대비효율높음

" 반응형웹디자인의한계 " PC 와모바일환경을모두고려해야 하기때문에디자이너는성능과타협 할필요가있음 포털사이트와같이복잡하고무거운 사이트는구현이쉽지않음

" 반응형으로적합한곳 " 가볍고단순한사이트 블로그, SNS 이벤트페이지 기업홍보사이트

" 반응형으로적합하지않은곳 " 무겁고복잡한사이트 대형포털 한국형쇼핑몰 테이블레이아웃

Episode4: 현실은달라

반응형을고려하여 기초부터튼튼하게 다시짓고싶겠지만

" 우리의현실 " 반응형을고려한다고해서처음부터사이트를다시제작하는경우는드물고보통은 PC에최적화된사이트를반응형으로개선

Episode5: 가느냐마느냐

" 정팀장은분석중..." 우리회사웹사이트는... 가볍고단순한가? 테이블레이아웃인가? 유지보수가유연한구조인가?

우리회사웹사이트는... 가볍고단순 테이블레이아웃아님 Image Replacement Image Sprite 반응형으로개선하기쉬운체질

" 결론, Let's do it!"

향후반응형을고려하고있다면... 1. PC 용웹사이트체질개선이선행 2. 테이블레이아웃걷어내기 3. Image Replacement 4. Image Sprite 5. HTML5

Episode6: 무엇부터하지?

" 그냥미디어쿼리사용하면되 는거아닌가?"

" 반응형웹을위한실행순서 " 1. 성능개선 CSS, JS, IMG 파일병합, 모바일용저용량이미지생성 2. HTML HTML5 로전환, 시멘틱마크업, forms 활용 3. CSS 모바일대응위한 CSS3 Media Queries 활용

Episode7: 성능개선

"JS 파일은병합후문서하단으로 " <head> 에서 JS 파일을참조하면 JS 해석이끝날때까지 <img> 파일을로드하지않으므로 JS 파일은 <body> 끝으로옮긴다. http 요청횟수를줄이기위해여러개의 JS 파일을하나로병합한다.

"JS 파일은병합후문서하단으로 " 개선전 <head> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.4.custom.js"></script> <script type="text/javascript" src="nhn.js"></script> <script type="text/javascript" src="default.js"></script> <script type="text/javascript" src="lcslog.js"></script> </head> 개선후 <body>... 어쩌구저쩌구... <script type="text/javascript" src="default.js"></script> </body>

" 이미지조각모음 " btn_on.gif btn_off.gif btn_over.gif 이렇게조각낸이미지는 http 요청수를 줄이기위해하나로병합한다.

" 이미지조각모음 " 개선전 btn_on.gif btn_off.gif btn_over.gif 개선후 btn.gif

" 모바일용저용량이미지생성 "

" 동일한이미지로큰것과작은것을준비 한다음 IR 기법으로배경처리하고미디어 쿼리로해상도에따라분기하면모바일에 서큰이미지는전송요청하지않는다. 반 대의경우도마찬가지." ( 화면상으로만숨기는것이아니라실제로 http 요청을하지않음 )

Episode8: HTML 고치기

"HTML 도반응형?"

"HTML5 forms 는반응형 "

input type="search" input type="tel" input type="url" input type="email" input type="number"

"HTML5 로 DTD 바꾸기 " ( 어렵지않아요 ~)

수정전 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> 수정후 <!DOCTYPE html>

수정전 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 수정후 <meta charset="utf-8" />

수정전 <link rel="stylesheet" type="text/css" href="nhn.css"/> <style type="text/css">...</style> 수정후 <link rel="stylesheet" href="nhn.css"/> <style>...</style>

수정전 <script type="text/javascript" src="nhn.js"></script> 수정후 <script src="nhn.js"></script>

" 구조를더의미있게 "

Before

After

Before

After

Episode9: 그런데누구세요?

IE6

IE7

IE8

" 누구세요?" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption

낡은브라우저는 HTML5 에새 로등장한태그를인식하지못해 제대로렌더링하지않음.

" 철지난브라우저구하기 " HTML5 IE 6~8 enabling script http://html5shim.googlecode.com/svn/trunk/html5.js

"HTML5 shim" <head>  </head>

"IE 조건부주석 "  표준계열브라우저는이부분을주석으로처리하고 IE9 미만버전의브라우저는포함된내용을해석함. HTML 요소를읽기전에참조해야하므로 <head>...</head> 사이에넣는다.

Episode10: 산넘어산

"HTML5 shim 적용결과 "

IE6

IE7

IE8

" 여전히깨지는이유 " HTML5 enabling script로 HTML 요소를해석했지만새로추가된태그는 'display:inline' 상태로렌더링한다.

새로운태그를바르게 표시하는방법

"CSS Reset" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block }

IE6

IE7

IE8

HTML5 shim과 CSS reset을통해더이상낡은브라우저에서깨지지않음

Episode11: 너무작거나큰

모바일기기에서어떻 게보일까?

" 너무작아서보이지않음 "

" 화면을크게만들자 "

" 너무커서보이지않음 "

" 화면을크게만든다음 CSS 를걷어내자 "

Episode12: 크게만들기

" 모바일뷰포트적용 " <head>...</head>

" 모바일뷰포트적용?" 휴대폰해상도와웹페이지 해상도를일치시키는작업.

" 모바일뷰포트적용 " <head>...</head>

예를들면, 휴대폰해상도는 640px 인데 1024px 웹페이지화면을구 겨넣어보여주려니자글자글 어색함. ( 휴대폰해상도와웹페이지해상도가다름 )

그래서, 휴대폰해상도가 640px이면한화면에딱 640px 크기만보여주도록설정하자.

" 모바일뷰포트적용?" 휴대폰해상도와웹페이지 해상도를일치시키는작업.

Viewport width = "640px" Page width = "320px" " 일단화면을크게만드는데성공 " iphone4 경우 640px 해상도를갖고있어페이지는 640px 크기만큼보일것으로기대했으나실제로는 320px 크기로확대되었음. 기대치보다 2 배확대된것인데이는다른기종에비해해상력 ( 픽셀을더잘게쪼개는능력 ) 이 2 배좋기때문에충분한크기를표시하기위해절충한결과.

Episode13: CSS 조건분기

좁은화면에서는 CSS 를해석 하지않도록질의설정 CSS Media Queries

미디어쿼리문법 @media only all and ( 조건문 ){ 실행문 } @media all and ( 조건문 ){ 실행문 } @media ( 조건문 ){ 실행문 } 위는모두같은표현.

"641px 이상입니까?" @media (min-width:641px){ /* 뷰포트너비가 641px 이상이면해석 */... body { margin:0 } img { border:0 }... /* 기존의 PC 용 CSS 를이곳에몽땅 */ }

" 적용결과 " " 섹시하지만예쁘지는않다 "

"CSS 를 완전히벗겨낼수는없다 "

"640px 이하 해상도를위한 CSS 를작성하자 "

nhn.css @charset "utf-8"; /* 해상도 640px 이하라면이부분을해석 */ /* 모바일용 CSS 코드를이곳에작성 */ @media (min-width:641px){ /* 해상도 641px 이상이면이부분을해석 */ /* 기존의 PC 용 CSS 코드를이곳에몽땅 */ }

nhn.css @charset "utf-8"; img { max-width:100% } @media (min-width:641px){ img { max-width:auto } }

http://naradesign.net/nhn/ before after

http://naradesign.net/nhn/recruit.html before after

Episode14: Mobile First

Quiz: 작은해상도에대응하는모바일용 CSS 코드를조건문안에넣지않은이유는?

Smartphone global market share 2011 2Q. http://www.gartner.com/it/page.jsp?id=1764714

Answer: 모바일용코드를조건문안에포함하지않는이유는미디어쿼리 (CSS3) 를지원하지않는모바일브라우저에서잘볼수있도록고려하기때문. 미디어쿼리를지원하지않는브라우저는모바일화면이디폴트로표시된다.

Mobile First http://goo.gl/vqje

Episode15: IE6~8?

IE6~8 브라우저는 CSS3 미 디어쿼리지원안함 ( 앗, 그렇다면 IE6~8 브라우저는???)

respond.min.js https://github.com/scottjehl/respond

HTML5 shim + respond.min.js <head>  </head> 주의 : 이파일은 IE 브라우저에서오류가있을수있음

Summary: RWD

" 반응형웹디자인이란?" 사용자환경에따라 유익하게반응하는디자인

" 반응형으로적합한곳 " 가볍고단순한사이트

" 향후반응형을고려하고있다면 " PC 용웹사이트체질개선이선행

" 반응형웹을위한실행순서 " 1. 성능개선 ( 제일중요 ) 2. HTML5 3. CSS3 Media Queries

"HTML5 shim" <head>  </head> HTML5 Markup IE 6~8 지원

"CSS Reset" header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption { display: block }

CSS Media Queries @charset "utf-8"; Mobile... @media (min-width:641px){ PC... }

Thank you. blog: me2day: twitter: facebook: http://naradesign.net/ naradesign naradesign naradesign