반응형 웹디자인 관점에서의 웹표준 이슈 responsive web design.pdf · ๏ user agent...
TRANSCRIPT
http://hyeonseok.com
반응형 웹디자인 관점에서의 웹표준 이슈
2013. 4. 4 비즈델리 웹표준월드신현석
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://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="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/, [email protected]