http://hyeonseok.com

반응형 웹디자인 관점에서의 웹표준 이슈

2013. 4. 4 비즈델리 웹표준월드신현석

http://hyeonseok.com

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

http://hyeonseok.com

모바일 환경에 대응단말별 최적화?

๏ 99.9% 고객 문의 이메일이 자신의 단말기가 지원되지 않는다는 내용이다. 우리는 현재 707개의 단말기를 지원하고 있다. 멘붕...

http://thenextweb.com/mobile/2012/03/30/the-shocking-toll-of-hardware-and-software-fragmentation-on-android-development/

http://hyeonseok.com

모바일 환경?Mobile context?๏ 77%의 모바일 검색은 집이나 사무실에서 한다.

http://googlemobileads.blogspot.kr/2013/03/mobiles-immediacy-effect-half-of-mobile.html

http://hyeonseok.com

모바일 환경?Mobile context?๏ 90%의 사용자가 과업을 수행하기 위해서 여러 화면(기기)을 연속해서 사용한다.

http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html

http://hyeonseok.com

반응형 웹디자인에 대한 관심Why You Need to Prioritize Responsive Design Right Now๏ "반응형 디자인의 우선순위를 높여야 할 때이다."

๏ "모바일 사이트에 원하는 정보가 없을 경우 당황하게 된다."

๏ "SEO나 마케팅을 간단하게 해주고 단일화 할 수 있다."

๏ "모바일 페이지와 데스크탑 페이지가 동일한 URL을 갖기 때문에 검색 순위에서 상위를 차지할 수 있다."

๏ "단말기별, 해상도별 코드를 만들 필요가 없다. 값비싼 백엔드 솔루션도 필요 없다."

http://www.forbes.com/sites/work-in-progress/2013/03/26/why-you-need-to-prioritize-responsive-design-right-now/

http://hyeonseok.com

반응형 웹디자인의 효과Impact of Responsive Designs๏ 반응형 웹디자인으로 개편 후 변화

http://www.lukew.com/ff/entry.asp?1691

O’Neill Clothing Skinny Ties

http://m.naver.com

http://engdic.daum.net/word/view.do?wordid=ekw000139806&q=responsive

http://movie.naver.com/movie/bi/mi/basic.nhn?code=74873

http://hyeonseok.com

가변폭 콘텐츠Flexible Contents๏ 컬럼의 너비가 변경되어도 웹 페이지 안의 미디어가 컬럼을 넘치지 않게 해야 한다.

๏ max-width를 지원하지 않는 인터넷 익스플로러를 위한 스크립트도 공개하고 있다.http://unstoppablerobotninja.com/entry/fluid-images

http://www.alistapart.com/articles/fluid-images/

img, embed, object, video { max-width: 100%;}

http://hyeonseok.com

가변폭 콘텐츠Image Text๏ 이미지 텍스트는 가변폭 이미지를 사용했을 때 작은 화면에서 가독성이 매우 떨어진다.

๏ 이미지 텍스트를 피하고, 기본 서체나 웹 폰트를 사용한다.

๏ 전송량이 매우 크고, 지원도 잘 안되기 때문에 모바일에서는 웹 폰트 사용을 피한다.

@font-face { font-family: Nanumpan; src: url('NanumPen.ttf');}span { font-family: Nanumpan, sans-serif;}

http://hyeonseok.com

가변폭 콘텐츠Responsive Box๏ 동영상이나 일반 박스의 가로세로 비율을 유지하는 방법이다.

๏ 패딩이나 마진을 퍼센트로 지정하면 비율을 유지할 수 있다.

#movie-player-wrapper { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.26%;}#movie-player-wrapper .wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

http://hyeonseok.com/soojung/css/2012/08/22/712.html

http://hyeonseok.com

가변폭 콘텐츠Responsive Data Tables๏ 좁은 화면에서 데이터 테이블의 가독성이 낮다는 문제를 해결하기 위한 방법이다.

๏ 테이블의 데이터를 선형화해 한줄로 푼다.

http://css-tricks.com/9096-responsive-data-tables/

linearization

table, thead, tbody, th, td, tr { display: block;}

http://hyeonseok.com

가변폭 콘텐츠Responsive Table๏ Responsive Data Tables의 단점을 보완한 방법이다.

๏ 테이블의 데이터를 스크롤 가능하게 만들어준다.

http://www.zurb.com/playground/responsive-tables

<link type="text/css" media="screen" rel="stylesheet" href="responsive-tables.css" /><script type="text/javascript" src="responsive-tables.js"></script>

http://hyeonseok.com

가변폭 콘텐츠반응형 테이블๏ CSS 추가 수정 없이 테이블 정보의 선형화에 초점을 둔 방법이다.

- JavaScript로 셀 헤더 정보를 data-cell-header 속성에 저장하고 이를 CSS를 통해서 화면에 출력하는 방법

http://hyeonseok.com/soojung/webstandards/2013/03/09/729.html

http://hyeonseok.com

가변폭 콘텐츠Using CSS3๏ 가변적으로 변하는 디자인 요소를 기존과 같이 이미지 만으로 구성하기는 힘들다.

- 페이지 전송량이 커지는 문제도 있고,

- 성능이 낮은 모바일 단말기에서 속도 문제도 발생하게 된다.

๏ 디자인도 점진적 향상 개념을 적용한다.

๏ 브라우저에서 기능을 자체적으로 지원하기 때문에 이미지를 사용할 때 보다 상대적으로 높은 성능을 기대할 수 있다.

text-shadow box-shadow border-radius

http://hyeonseok.com

성능Performance๏ 단일한 HTML로 모든 종류의 기기를 대응해야 한다.

๏ 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.

๏ 이미지 리사이징은 단말기의 CPU를 보다 더 많이 사용한다.

๏ 사용하지 않는 자원(이미지, CSS)을 전송 받을 수 있다.

๏ 미디어 쿼리를 지원하지 않는 브라우저의 사용자가 많다.

http://hyeonseok.com

성능Server side approach๏ User Agent Sniffing

- 브라우저의 사용자 에이전트 문자열로 단말기를 판별

๏ Device Description Repository

- 단말 정보 저장소의 정보로 단말기를 판별

๏ 장점- 비교적 정확하고 클라이언트 성능 문제가 없다.

๏ 단점- 다양한 단말기의 종류를 지속적으로 관리하고 성능을 파악하고 있어야 한다.

http://hyeonseok.com

성능RESS: Responsive Design + Server Side Components

๏ 콘텐츠 모듈을 서버에서 구분하여 전송하는 방법이다.

๏ User Agent Sniffing과 반응형 웹디자인 개념을 적절히 혼합한 개념이다.

๏ 사용자 에이전트 문자열 판별이 가장 큰 단점이다.

http://www.lukew.com/ff/entry.asp?1392

http://hyeonseok.com

성능Responsive Image๏ 이미지는 콘텐츠는 미디어 쿼리나 JS 등으로 지정하기 힘들다.

๏ 단말 해상도별 이미지를 마크업 레벨에서부터 최적화하고자 하는 다양한 시도가 진행중이다.

- Adaptive Images(http://adaptive-images.com)

- Apache 2 + PHP 5.x + GD lib * + JS

- HiSRC(https://github.com/teleject/hisrc)

- data-attribute + div.hisrc + jQuery plugin

- Picturefill(https://github.com/scottjehl/picturefill)

- div[data-picture], div[data-alt], div[data-src] + picturefill.js

- Responsive Enhance(https://github.com/joshje/Responsive-Enhance)

- img[data-fullsrc] + responsive-enhance.js

http://hyeonseok.com

성능Responsive Image Community Group๏ W3C 커뮤니티 그룹

- picture + img[srcset]

http://responsiveimages.org

http://hyeonseok.com

작업 프로세스Mobile First๏ 루크 로블레스키(Luke Wroblewski)가 주장하는 모바일 환경을 먼저 디자인하라는 전략이다.

- 모바일 환경을 먼저 디자인 하면 보다 효과적이고 창조적인 디자인을 할 수 있다.

- 이렇게 디자인된 결과물은 데스크탑 환경에 그대로 적용해도 뛰어난 사용자 경험을 제공할 수 있다.

๏ 구축도 좁은 화면을 먼저 제작하고 미디어쿼리를 통해 디자인을 확장해 나가는 전략을 취한다.

- 중복된 코드를 줄일 수 있다.

- 넓은 화면부터 제작할 경우 구현 코드가 굉장히 복잡해진다.

http://www.abookapart.com/products/mobile-first

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen, handheld" />

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen, handheld" /><link rel="stylesheet" href="tablet.css" type="text/css" media="only all and (min-width: 570px)" />

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen, handheld" /><link rel="stylesheet" href="tablet.css" type="text/css" media="only all and (min-width: 570px)" /><link rel="stylesheet" href="desktop.css" type="text/css" media="only all and (min-width: 870px)" />

<link rel="stylesheet" href="mobile.css" type="text/css" media="screen, handheld" /><link rel="stylesheet" href="tablet.css" type="text/css" media="only all and (min-width: 570px)" /><link rel="stylesheet" href="desktop.css" type="text/css" media="only all and (min-width: 870px)" /><!--[if IE 8]><link rel="stylesheet" href="tablet.css" type="text/css" media="screen" /><link rel="stylesheet" href="desktop" type="text/css" media="screen" /><![endif]-->

http://hyeonseok.com

작업 프로세스Content First

๏ 특정 기술을 넘어서서 사용자의 환경을 배려하는 모든 접근 방법을 포괄하는 의미로 생각해야 한다.

- Mobile first

- User first

- Content first

http://www.zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means/

Responsive Design. I don’t think that word means what you think it means.- Jeffrey Zeldman

http://hyeonseok.com

감사합니다http://hyeonseok.com/, hyeonseok@gmail.com