반응형 웹

I. 최적화 된 UI 구현을 위한 반응형 웹의 개요

 

가. 반응형 웹(Responsive Web)의 정의

- HTML5의 “미디어 쿼리”를 이용하여 하나의 소스로 제작된 컨텐츠가 모바일 기기를 포함한 다양한 디바이스 환경에서

각각의 특성(해상도, 화면 비율, 지원 색상수 등)에 맞는 UI로 레이아웃을 동적으로 변형하여 최적화된 웹 기반 사용자

환경을 제공하기 위한 기술

- 웹 디자인의 한 접근방법으로, 데스크탑 모니터부터 모바일 폰까지 많은 종류의 기기에서 최적의 사용환경

- 최소한의 리사이징, 스크롤링으로도 읽기 쉽고 접근하기 쉬운 환경을 제공하는 사이트를 만드는 것

 

나. 반응형 웹의 부각 이유

서비스 사용자 측면	서비스제공자 측면
N-Screen 환경에서 다양한 디바이스 환경에서 동일한 사용자 환경의 품질 요구	- 웹 표준 준수를 통한 오픈 웹 지향 - One Source Multi Use를 통한 서비스 구축 및 유지보수 비용 절감

 

다. 반응형 웹의 강점

User Friendly	사용자 친화적, 데스크탑, 노트북, 넷북, 태블릿, 스마트폰 등 모든 기기에 사용자 친화적인 화면을 제공
Mobile Segment	분리된 모바일 사이트에 비해 사이트 유입 트래픽, 이용자 통계를 통합적으로 관리 가능
Accumulated Sharing	Twitter, Facebook, Google+ 등 소셜쉐어 지수를 하나의 페이지에 집중 시키고 관리를 일원화 가능
Search Engine Optimization	하나의 URL(주소)로 운영되므로 검색엔진 최적화는 물론, 키워드 광고 전략을 통합적 실행 가능
Less Maintenance	One Source Multi Use! S콘텐츠(소스)를 하나로 관리하므로 관리의 편의를 증대시키고 사용자  혼란 제거
Future Tech	Mobile기기는 끊임없이 진화함에 맞추어 고해상도의 Retina, AMOLED 디스플레이에는 선명한 화질을 제공하는 등, 미래기술에 대비한  웹사이트 제작 가능

 

II. 반응형 웹 구현을 위한 기술요소

 

가. 반응형 웹 구현을 위한 기술요소

 

 

 

기술 요소	설명
미디어쿼리 (Media Query)	- 디바이스 관련 다양한 정보를 이용하여 최적화된 화면을 제공 - 반응형 웹을 구현하기 위한 CSS3의 핵심 기능 - CSS2 미디어 타입에 미디어 상태(media feature)를 추가하여 다양한 단말기에서의 표현을 제어할 수 있게 고안됨 - 미디어상태(media feature): max-width, device-width, device-height, device-aspect-ratio, orientation, color, color-index, resolution
유동형 그리드 (Fluid Grid)	- 디자인 그리드를 가변폭으로 변환하는 기법 - 고정된 픽셀 값이 아닌 %을 이용하여 그리드를 구현
유동형 이미지 (Flexible Image)	- 칼럼의 너비가 변경되어도 웹페이지 안의 미디어가 칼럼을 넘치지  않게 하는 기법 - 고정된 픽셀 값이 아닌 %을 이용하여 스크린의 크기에 맞는  이미지 제공 - 현재 HTML5의 스펙으로도 개발 중임

 

나. 반응형웹을 구축하기 위해 고려해야 할 사항

구분	내용
정보설계	콘텐츠의 양과 구성 설계
가변단계의 정의	- 화면 가변정의를 2단계 또는 3단계로 할지 정의 - 구성정보가 많을수록 가변단계가 많으면 좋음 - 출시된 모든 디바이스뿐만 아니라 향 후 출시될 디바이스를  최적화 할 수 있는 방안 필요
레이아웃 기획순서	- 큰 화면부터 작은 화면 순서로 기획 (화면에 담을 콘텐츠가 적어 PC기반의 UI에서 컨텐츠 부족현황 초래)
UI요소 기획	- 가장 상세하게 기획  . 이미지 사이즈 규정 : 확대/축소, 행/열 조정  . 폰트 사이즈 규정 : 퍼센트  . 링크규정 : 테스트 링크/큐브 링크
터치에 대한 고려	어떤 화면 사이즈에도 터치 고려

 

III. 반응형 웹 구현 시 문제점 및 개선 방안

 

구분	문제점	개선 방안
성능 측면	- 필요한 것보다 더 큰 이미지 다운로드 - 불필요한 컨텐츠/자원의 다운로드 - 이미지 크기 조정을 위한 필요 이상의 CPU 사용	- 전송량 제어 기술의 적용 1) User Agent Sniffing 2) Device Description Repository 3) RESS(Responsive Design + Server Side Components) 4) Dynamic Script Loading: 컨텐츠를 사용자 인터랙션이 있을 때에 추가로 로딩
브라우저 지원 측면	- 미디어 쿼리를 지원하지 않는 브라우저의 사용자가 많음	- 점진적 향상: 미디어 쿼리를 적용하지 않은 기본 디자인을 토대로 디자인을 발전시킴 - Mobile First: 모바일 환경을 먼저 디자인하고 미디어쿼리를 통해 디자인을 확장