반응형 웹 디자인

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요
2. 역사
- 2.1. 초기 개념 및 등장 (2001~2009)
- 2.2. 용어 정립 및 확산 (2010~현재)
3. 관련 개념
4. 과제 및 해결 방안
- 4.1. 배너 광고 및 비디오의 유동성 문제
- 4.2. RESS (Responsive Web Design with Server-Side Components)
5. 검증 및 테스트 도구
참조

1. 개요

반응형 웹 디자인은 웹 페이지가 사용자의 화면 크기에 맞춰 레이아웃을 유연하게 변경하여 다양한 기기에서 최적의 사용자 경험을 제공하는 웹 디자인 방식이다. W3C는 웹사이트가 사용자 설정에 따라 렌더링되어야 한다고 명시했으나, 초기에는 레이아웃 사용자 정의에 한계가 있었다. 2001년 razorfish의 팀이 Audi.com을 통해 최초로 브라우저 뷰포트 너비에 맞춰 레이아웃이 조정되는 사이트를 선보였고, 이후 유연한 레이아웃을 설명하는 다양한 용어들이 사용되었다. 2010년 이선 마코트가 "반응형 웹 디자인"이라는 용어를 처음 사용하고 핵심 기술을 제시했으며, 2012년에는 웹 디자인 트렌드 2위로 선정되기도 했다. 반응형 웹 디자인은 모바일 우선 디자인, 점진적 향상과 같은 관련 개념과 함께 발전해 왔으며, 배너 광고 및 비디오의 유동성 문제, RESS(서버 측 구성 요소를 활용한 반응형 웹 디자인)와 같은 과제와 해결 방안이 존재한다.

더 읽어볼만한 페이지

반응형 웹 디자인 - 어도비 뮤즈
어도비 뮤즈는 어도비에서 개발한 웹사이트 제작 소프트웨어이며, 테마와 위젯을 제공하여 정적 HTML 파일을 생성하고, 2012년에 출시되어 2020년에 기술 지원이 종료되었다.
반응형 웹 디자인 - JQuery Mobile
jQuery Mobile은 다양한 모바일 플랫폼과 데스크톱 브라우저를 지원하며 HTML5 기반 UI 구성과 AJAX 기반 탐색을 통해 모바일 웹 페이지 제작을 돕는 jQuery 기반의 사용자 인터페이스 라이브러리이다.
모바일 웹 - 모바일 인터넷 디바이스
모바일 인터넷 디바이스(MID)는 인텔이 아톰 프로세서를 탑재하고 무선 인터넷 기능을 강조하여 2007년부터 2014년까지 여러 플랫폼으로 출시한 UMPC의 일종이다.
모바일 웹 - I-모드
1999년 일본 NTT 도코모에서 시작된 i-모드는 피처폰 기반 모바일 데이터 서비스로, HTTP와 HTML을 사용하여 인터넷 접속, 이메일, 애플리케이션 등 다양한 기능을 제공하며 한때 세계적으로 확산되었으나 스마트폰의 등장으로 쇠퇴하여 2026년 서비스 종료 예정이다.
2010년대 신조어 - 브렉시트
브렉시트는 영국의 유럽 연합 탈퇴를 의미하며, 2016년 국민투표로 결정되어 2020년 1월 31일 공식 탈퇴 후 영국 경제, 정치, 사회 전반에 걸쳐 광범위하고 장기적인 영향을 미치고 있다.
2010년대 신조어 - 딥페이크
딥페이크는 인공지능 기술을 활용하여 영상이나 이미지를 조작, 합성하여 실제와 구별하기 어렵게 만드는 기술이며, 가짜 뉴스, 명예훼손, 신원 위장 등 다양한 문제점을 야기한다.

반응형 웹 디자인
반응형 웹 디자인
유형	웹 디자인
관련 항목	적응형 웹 디자인 모바일 우선 사용자 인터페이스 사용자 경험
기술
주요 기술	유동적 그리드 유연한 이미지 미디어 쿼리
추가 기술	HTML CSS 자바스크립트
장점
장점	다양한 장치에서 일관된 사용자 경험 제공 유지 보수 용이 SEO (검색 엔진 최적화) 향상 가능성
단점
단점	복잡한 디자인 구현 어려움 초기 개발 비용 증가 가능성 모든 브라우저에서 완벽하게 작동하지 않을 수 있음

2. 역사

W3C의 HTML+ 사양에서는 웹사이트가 사용자 기본 설정에 맞춰 렌더링되어야 한다고 명시했다.^[31] 그러나 당시 웹 페이지 레이아웃의 사용자 정의 기능은 부족했다. 많은 웹 개발자들은 레이아웃을 사용자 정의하고 기본적인 반응성을 웹사이트에 부여하기 위해 일반적인 HTML 테이블을 사용했다.

2001년, 브라우저 뷰포트 너비에 따라 레이아웃이 바뀌는 최초의 주요 사이트인 Audi.com이 출시되었다.^[94]

2. 1. 초기 개념 및 등장 (2001~2009)

2001년, 브라우저 뷰포트 너비에 맞춰 레이아웃이 조정되는 최초의 주요 사이트인 Audi.com이 출시되었다.^[94]^[32]^[87] 이 사이트는 razorfish의 위르겐 스팡글, 짐 칼바흐(정보 아키텍처 담당), 켄 올링(디자인 담당), 얀 호프만(인터페이스 개발 담당) 팀이 제작했다. 당시 기술적 제약으로 인해, 인터넷 익스플로러에서는 동적으로 조정되었지만, 넷스케이프에서는 페이지를 다시 로드해야 했다.^[32]^[87]

2004년, 카메론 아담스가 반응형 레이아웃 데모를 제작했다.^[33]^[88] 2008년경에는 "유연한(flexible)", "액체(liquid)",^[34]^[89] "유동적인(fluid)", "탄력적인(elastic)"^[89] 등의 용어가 사용되었다. CSS3 미디어 쿼리는 2008년 말 ~ 2009년 초에 등장했다.^[35]^[90]

2. 2. 용어 정립 및 확산 (2010~현재)

2010년 5월, 이선 마코트(Ethan Marcotte)는 《A List Apart》 기사에서 "반응형 웹 디자인(Responsive Web Design)"이라는 용어를 처음 사용하고 정의했다.^[1]^[45]^[91] 그는 유동 그리드, 유연한 이미지, 미디어 쿼리의 세 가지를 반응형 웹 디자인의 핵심 기술로 제시했다.^[1] 2011년, 이선 마코트는 《반응형 웹 디자인》이라는 책을 출판하여 반응형 웹 디자인의 이론과 실제를 설명했다.^[37]^[92]

2012년, 《.net magazine》은 반응형 웹 디자인을 2012년 최고의 웹 디자인 트렌드 2위로 선정했다.^[37]^[92] 2013년, Mashable은 2013년을 "반응형 웹 디자인의 해"로 선언했다.^[38]^[93]

3. 관련 개념

'''모바일 우선 디자인'''과 점진적 향상은 반응형 웹 디자인 (RWD)보다 먼저 나온 관련 개념이다.^[39] 기본적인 휴대폰 브라우저는 자바스크립트나 미디어 쿼리를 이해하지 못하므로, 기본적인 웹사이트를 만들고 스마트폰과 개인용 컴퓨터에 맞게 향상시키는 것이 권장되었다.^[40]^[41]^[42]^[43]

웹사이트에서 자바스크립트를 지원하지 않는 기본적인 모바일 기기를 지원해야 하는 경우, 브라우저(사용자 에이전트) 판별(별칭 "브라우저 스니핑")과 모바일 기기 판별^[64]^[67]의 두 가지 방법을 통해 HTML 및 CSS의 특정 기능이 지원되는지 여부를 추정한다. 그러나 이러한 방법의 신뢰성은 장치 기능 데이터베이스를 병용하지 않는 한 완전하지 않다.

Modernizr, jQuery, jQuery Mobile과 같은 자바스크립트 프레임워크를 사용하면, 고기능 휴대폰이나 PC에서 브라우저가 HTML 및 CSS 기능을 지원하는지 직접 확인할 수 있다. Polyfill을 사용하여 추가 기능을 지원하는 것도 가능하다. 기능 판별의 신뢰성도 완전하지 않을 수 있는데, 판별 항목에 따라 특정 기능이 구현되지 않았거나, 이용 가능하다고 보고되면서도 실제로는 이용 불가능할 정도로 불충분한 경우도 있을 수 있다.^[68]^[69]

3. 1. 모바일 우선 디자인

'''모바일 우선 디자인'''과 점진적 향상은 반응형 웹 디자인보다 먼저 나온 관련 개념이다.^[39] 기본적인 휴대폰 브라우저는 자바스크립트나 미디어 쿼리를 이해하지 못하므로, 복잡하고 이미지 위주의 사이트가 휴대폰에서 작동하도록 우아한 저하에 의존하기보다는, 기본적인 웹사이트를 만들고 스마트폰과 개인용 컴퓨터에 맞게 향상시키는 방법이 권장되었다.^[40]^[41]^[42]^[43]

웹사이트에서 자바스크립트를 지원하지 않는 기본적인 모바일 기기를 지원해야 하는 경우에는 브라우저(사용자 에이전트) 판별(별칭 "브라우저 스니핑")과 모바일 기기 판별^[64]^[67]의 두 가지 방법을 통해 HTML 및 CSS의 특정 기능이 지원되는지 여부를 추정한다(점진적 향상의 기초). 그러나 이러한 방법의 신뢰성은 장치 기능 데이터베이스를 병용하지 않는 한 완전하지 않다.

jQuery, jQuery Mobile, Modernizr^영어 같은 자바스크립트 프레임워크를 사용하면, 더욱 고기능의 휴대폰이나 PC에서 브라우저가 HTML 및 CSS 기능을 지원하는지 직접 확인하거나(혹은 장치 또는 사용자 에이전트 판별) 할 수 있다. Polyfill^영어을 사용하여 추가 기능을 지원하는 것도 가능하다. 예를 들어 Internet Explorer에서의 HTML5 지원 개선, RWD에 필요한 미디어 쿼리 지원 등이 있다.

3. 2. 점진적 향상 (Progressive Enhancement)

'''모바일 우선 디자인'''과 점진적 향상은 반응형 웹 디자인보다 먼저 나온 관련 개념이다.^[39] 기본적인 휴대폰 브라우저는 자바스크립트나 미디어 쿼리를 이해하지 못하므로, 기본적인 웹사이트를 먼저 만들고, 더 나은 기능을 지원하는 스마트폰과 개인용 컴퓨터에서는 추가적인 기능을 제공하는 방식이 권장된다.^[40]^[41]^[42]^[43]

웹사이트에서 자바스크립트를 지원하지 않는 기본적인 모바일 기기를 지원해야 하는 경우, 브라우저(사용자 에이전트) 판별(별칭 "브라우저 스니핑")과 모바일 기기 판별^[64]^[67]을 통해 HTML 및 CSS의 특정 기능이 지원되는지 여부를 추정한다. 그러나 이러한 방법은 장치 기능 데이터베이스를 병용하지 않는 한 신뢰성이 완전하지 않다.

Modernizr, jQuery, jQuery Mobile과 같은 자바스크립트 프레임워크를 사용하면, 더 고기능의 휴대폰이나 PC에서 브라우저가 HTML 및 CSS 기능을 지원하는지 직접 확인할 수 있다. Polyfill을 사용하여 추가 기능을 지원하는 것도 가능하다.

3. 3. 비침습 자바스크립트 (Unobtrusive JavaScript)

Unobtrusive JavaScript^영어는 HTML, CSS, 자바스크립트를 분리하여 유지보수성을 높이고 웹 접근성을 향상시키는 방식이다.^[63]^[64]^[65]^[66] 기본적인 휴대폰 브라우저는 자바스크립트나 미디어 쿼리를 이해하지 못하기 때문에, 기본적인 웹사이트를 먼저 제작한 후 스마트폰이나 PC용으로 기능을 확장하는 프로그레시브 향상 기법이 권장된다.

웹사이트에서 자바스크립트를 지원하지 않는 기본적인 모바일 기기를 지원해야 하는 경우, 브라우저(사용자 에이전트) 판별(별칭 "브라우저 스니핑")과 모바일 기기 판별^[64]^[67]이라는 두 가지 방법을 통해 HTML 및 CSS의 특정 기능이 지원되는지 여부를 추정한다. 그러나 이러한 방법은 장치 기능 데이터베이스를 함께 사용하지 않으면 완전히 신뢰하기 어렵다.

jQuery, jQuery Mobile과 같은 자바스크립트 프레임워크를 사용하여 브라우저가 HTML 및 CSS 기능을 지원하는지 직접 확인하는 방법도 일반적이다. Polyfill을 사용하여 미디어 쿼리 지원, Internet Explorer에서의 HTML5 지원 개선 등 추가 기능을 지원하는 것도 가능하다.

다만, 기능 판별의 신뢰성 역시 완전하지 않을 수 있다. 판별 항목에 따라 특정 기능이 구현되지 않았거나, 이용 가능하다고 보고되면서도 실제로는 이용 불가능할 정도로 불충분한 경우도 있을 수 있다.^[68]^[69]

4. 과제 및 해결 방안

루크 우로블스키는 반응형 웹 디자인(RWD) 및 모바일 디자인의 과제를 요약하고, 다중 장치 레이아웃 패턴 카탈로그를 만들었다.^[15]^[16]^[17] 그는 단순한 HWD 접근 방식보다 장치 경험 또는 RESS(서버 측 구성 요소가 있는 반응형 웹 디자인) 접근 방식이 모바일 장치에 더 최적화된 사용자 경험을 제공할 수 있다고 제안했다.^[18]^[19]^[20] 구글은 스마트폰 웹사이트에 다른 접근 방식보다 반응형 디자인을 권장했다.^[21]

반응형 웹 디자인(RWD) 검증 및 테스트 방법에는 Adobe Edge Inspect와 같은 동시 테스트 도구, 모바일 사이트 검증 도구 및 모바일 에뮬레이터가 있다.^[28] Chrome, Firefox, Safari 브라우저 및 개발자 도구는 타사 도구와 마찬가지로 반응형 디자인 뷰포트 크기 조정 도구를 제공한다.^[29]^[30]

4. 1. 배너 광고 및 비디오의 유동성 문제

많은 게시자가 반응형 디자인을 구현했지만, RWD를 채택하는데 있어 한 가지 과제는 일부 배너 광고와 비디오가 유동적이지 않다는 점이었다.^[22] 그러나 검색 광고 및 (배너) 디스플레이 광고는 데스크톱, 스마트폰 및 기본 모바일 장치에 대해 특정 장치 플랫폼 타겟팅 및 다양한 광고 크기 형식을 지원하게 되었다. 다양한 랜딩 페이지 URL이 서로 다른 플랫폼에 사용되거나,^[23] Ajax가 페이지에 서로 다른 광고 변형을 표시하는 데 사용되었다.^[24]^[16]^[25] CSS 테이블은 하이브리드 고정 및 유동 레이아웃을 허용했다.^[26]

4. 2. RESS (Responsive Web Design with Server-Side Components)

RESS(REsponsive web design with Server-Side components, 서버 측 컴포넌트를 사용한 반응형 웹 디자인)는 서버 측 구성 요소를 활용하여 반응형 웹 디자인을 구현하는 방식이다.^[18]^[19]^[20]^[73]^[74]^[75] 루크 우로블스키는 단순한 RWD 접근 방식과 비교하여 RESS 접근 방식이 모바일 기기에서 더욱 최적화된 사용자 경험을 제공할 수 있다고 제안했다.^[18]^[19]^[20]^[73]^[74]^[75]

Sass와 같은 스타일시트 언어를 구현하는 서버 측 CSS 생성기는 이러한 접근 방식의 일부가 될 수 있다. 또한 서버 측 동적 CSS 구현은 사용성 향상을 위해 디바이스 능력 데이터베이스와 연동하여 디바이스(일반적으로 휴대폰)의 차이를 처리하는 서버 기반 API에 액세스함으로써 이러한 접근 방식의 필수 요소가 될 수 있다.^[76]

RESS는 개발 비용이 더 많이 들고, 단순한 클라이언트 측 로직 이상의 비용이 필요하며, 따라서 더 큰 예산을 가진 조직에서 사용이 제한되는 경향이 있다.^[76] 구글은 스마트폰 웹사이트에 대해 다른 접근 방식보다 반응형 웹 디자인을 권장하고 있다.^[21]^[77]

5. 검증 및 테스트 도구

반응형 웹 디자인(RWD)을 검증하고 테스트하는 방법은 다양하다.^[82] 모바일 사이트 검증 도구, 모바일 에뮬레이터,^[83] Adobe Edge Inspect와 같은 동기화 테스트 도구가 여기에 포함된다.^[84] 또한, 크롬, 파이어폭스, 사파리 브라우저 및 개발자 도구는 타사 도구와 함께 반응형 디자인 뷰포트 크기 조정 도구를 제공한다.^[85]^[86]

5. 1. 모바일 사이트 검증 도구 및 에뮬레이터

Adobe Edge Inspect와 같은 동시 테스트 도구를 포함하여, 모바일 사이트 검증 도구 및 모바일 에뮬레이터 등 반응형 웹 디자인(RWD)을 검증하고 테스트하는 다양한 방법이 존재한다.^[28] Chrome, 파이어폭스, Safari 브라우저 및 개발자 도구는 타사 도구와 마찬가지로 반응형 디자인 뷰포트 크기 조정 도구를 제공한다.^[29]^[30]

5. 2. 동시 테스트 도구

모바일 사이트 검증 도구 및 모바일 에뮬레이터에서 Adobe Edge Inspect와 같은 동시 테스트 도구에 이르기까지 반응형 웹 디자인(RWD)을 검증하고 테스트하는 다양한 방법이 존재한다.^[28] Chrome, Firefox, Safari 브라우저 및 개발자 도구는 타사 도구와 마찬가지로 반응형 디자인 뷰포트 크기 조정 도구를 제공한다.^[29]^[30]

5. 3. 브라우저 개발자 도구

크롬, 파이어폭스, 사파리 브라우저 및 개발자 도구는 반응형 디자인 뷰포트 크기 조정 도구를 제공한다.^[29]^[30]

참조

_[1] 웹사이트 Responsive Web design http://www.alistapar[...] 2010-05-25
_[2] 웹사이트 Responsive Web Design (RWD) and User Experience https://www.nngroup.[...] 2014-05-04
_[3] 웹사이트 Core concepts of Responsive Web design http://msdn.microsof[...] 2014-09-08
_[4] 웹사이트 Fluid Grids http://www.alistapar[...] A List Apart 2009-03-03
_[5] 웹사이트 Fluid images http://www.alistapar[...] A List Apart 2011-06-07
_[6] 웹사이트 The road to responsive images http://www.creativeb[...] net Magazine 2012-09-07
_[7] 서적 Examples of flexible layouts with CSS3 media queries http://zomigi.com/bl[...] 2010-12-15
_[8] 웹사이트 Crafting quality media queries http://zomigi.com/bl[...] 2011-10-21
_[9] 웹사이트 Responsive design—harnessing the power of media queries http://googlewebmast[...] Google Webmaster Central 2012-04-30
_[10] 웹사이트 "@media rule" https://www.w3.org/T[...] W3C
_[11] 웹사이트 Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper http://www.cisco.com[...] 2015-01-30
_[12] 뉴스 Mobile share of U.S. organic search engine visits 2021 https://www.statista[...] 2021-10-29
_[13] 웹사이트 Official Google Webmaster Central Blog: Rolling out the mobile-friendly update http://googlewebmast[...] 2015-08-04
_[14] conference Plasticity of User Interfaces: Framework and Research Agenda
_[15] 웹사이트 Mobilism: jQuery Mobile http://www.lukew.com[...] 2011-05-17
_[16] 웹사이트 Rolling Up Our Responsive Sleeves http://www.lukew.com[...] 2012-02-06
_[17] 웹사이트 Multi-Device Layout Patterns http://www.lukew.com[...] 2012-03-14
_[18] 웹사이트 Responsive Design ... or RESS http://www.lukew.com[...] 2012-02-29
_[19] 웹사이트 RESS: Responsive Design + Server Side Components http://www.lukew.com[...] 2011-09-12
_[20] 웹사이트 Getting Started with RESS http://www.netmagazi[...] 2012-05-09
_[21] 웹사이트 Building Smartphone-Optimized Websites https://developers.g[...]
_[22] 웹사이트 The state of responsive advertising: the publishers' perspective http://www.creativeb[...] .net Magazine 2012-04-30
_[23] 웹사이트 Google Partners Help https://support.goog[...] 2015-05-21
_[24] 웹사이트 Server-Side Device Detection: History, Benefits And How-To http://mobile.smashi[...] Smashing magazine 2012-09-24
_[25] Javascript JavaScript and Responsive Web Design https://developers.g[...]
_[26] 웹사이트 The Role of Table Layouts in Responsive Web Design http://webdesign.tut[...] 2015-05-21
_[27] 웹사이트 Top responsive web design problems... testing http://www.netmagazi[...] .net Magazine 2012-08-13
_[28] 웹사이트 Browser testing... with Adobe Edge Inspect http://www.adobe.com[...] 2012-09-26
_[29] 웹사이트 Responsive Design View https://developer.mo[...] 2015-05-21
_[30] 웹사이트 Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar http://lab.maltewass[...] 2015-05-21
_[31] 웹사이트 An Overview of HTML+ https://www.w3.org/M[...] W3C
_[32] 웹사이트 The First Responsive Design Website: Audi (circa 2002). https://experiencing[...] 2012-07-22
_[33] 웹사이트 Resolution dependent layout: Varying layout according to browser width http://www.themaninb[...] 2004-09-21
_[34] 웹사이트 G146: Using liquid layout http://www.w3.org/TR[...] 2015-05-21
_[35] 웹사이트 Media Queries http://www.w3.org/TR[...] 2015-05-21
_[36] 웹사이트 OutSeller Group - Organize, Optimize, Maximize http://outseller.net[...] 2015-05-21
_[37] 웹사이트 15 top web design and development trends for 2012 https://www.netmagaz[...] .net Magazine 2021-10-29
_[38] 웹사이트 Why 2013 Is the Year of Responsive Web Design http://mashable.com/[...] 2012-12-11
_[39] 웹사이트 What is Responsive Web Design http://www.webhostde[...] 2012-07-23
_[40] 웹사이트 Mobile First http://www.lukew.com[...] 2009-11-03
_[41] 서적 Programming the Mobile Web https://archive.org/[...] O'Reilly Media 2011-07-30
_[42] 웹사이트 Graceful degradation versus progressive enhancement https://web.archive.[...] 2009-02-03
_[43] 서적 Designing with Progressive Enhancement http://filamentgroup[...] New Riders 2010-03-01
_[44] 간행물 Proximity-Based Adaptation of Web Content on Public Displays https://link.springe[...] Springer, Cham 2017-06-05
_[45] 웹사이트 Responsive Web design http://www.alistapar[...] 2017-07-27
_[46] 웹사이트 Ethan Marcotte's 20 favourite responsive sites http://www.creativeb[...] .net magazine 2017-07-27
_[47] 웹사이트 Responsive Web Design (RWD) and User Experience https://www.nngroup.[...] Nielson Norman Group 2017-07-27
_[48] 웹사이트 Beginner’s Guide to Responsive Web Design http://teamtreehouse[...] 2015-11-05
_[49] 웹사이트 Core concepts of Responsive Web design http://msdn.microsof[...] 2015-11-05
_[50] 웹사이트 Fluid Grids http://www.alistapar[...] A List Apart 2015-11-05
_[51] 웹사이트 Core concepts of Responsive Web design http://msdn.microsof[...] 2015-11-05
_[52] 웹사이트 Fluid Grids http://www.alistapar[...] A List Apart 2015-11-05
_[53] 웹사이트 Fluid images http://www.alistapar[...] A List Apart 2015-11-05
_[54] 웹사이트 The road to responsive images http://www.creativeb[...] net Magazine 2015-11-05
_[55] 웹사이트 50 fantastic tools for responsive web design http://www.creativeb[...] .net Magazine 2015-11-05
_[56] 웹사이트 Examples of flexible layouts with CSS3 media queries http://zomigi.com/bl[...] 2015-11-05
_[57] 웹사이트 Crafting quality media queries http://zomigi.com/bl[...] 2015-11-05
_[58] 웹사이트 Responsive design—harnessing the power of media queries http://googlewebmast[...] Google Webmaster Central 2015-11-05
_[59] 문서 "@media rule" https://www.w3.org/T[...] World Wide Web Consortium
_[60] 웹사이트 Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update 2014–2019 White Paper http://www.cisco.com[...] 2015-08-04
_[61] 웹사이트 Official Google Webmaster Central Blog: Rolling out the mobile-friendly update http://googlewebmast[...] 2015-08-04
_[62] conference Plasticity of User Interfaces: Framework and Research Agenda
_[63] 웹사이트 Mobile First http://www.lukew.com[...] 2015-11-05
_[64] 서적 Programming the Mobile Web http://www.mobilexwe[...] 2010-07-30
_[65] 웹사이트 Graceful degradation versus progressive enhancement http://docs.webplatf[...] 2015-11-05
_[66] 서적 Designing with Progressive Enhancement http://filamentgroup[...] 2010-03-01
_[67] 웹사이트 Server-Side Device Detection: History, Benefits And How-To http://mobile.smashi[...] Smashing magazine 2015-11-05
_[68] 웹사이트 BlackBerry Torch: The HTML5 Developer Scorecard | Blog http://www.sencha.co[...] Sencha 2012-09-11
_[69] 웹사이트 Motorola Xoom: The HTML5 Developer Scorecard | Blog http://www.sencha.co[...] Sencha 2012-09-11
_[70] 웹사이트 Mobilism: jQuery Mobile http://www.lukew.com[...] 2011-05-17
_[71] 웹사이트 Rolling Up Our Responsive Sleeves http://www.lukew.com[...] 2012-02-06
_[72] 웹사이트 Multi-Device Layout Patterns http://www.lukew.com[...] 2012-03-14
_[73] 웹사이트 Responsive Design ... or RESS http://www.lukew.com[...] 2012-02-29
_[74] 웹사이트 RESS: Responsive Design + Server Side Components http://www.lukew.com[...] 2011-09-12
_[75] 웹사이트 Getting Started with RESS http://www.netmagazi[...] 2012-05-09
_[76] 웹사이트 Responsive but not completely mobile optimised | Blog http://blog.incentiv[...] Incentivated
_[77] 웹사이트 Building Smartphone-Optimized Websites https://developers.g[...] Google
_[78] 웹사이트 Google:The Evolution of Responsive Websites http://www.notiontec[...]
_[79] 웹사이트 The state of responsive advertising: the publishers' perspective http://www.creativeb[...] .net Magazine 2012-04-30
_[80] 웹사이트 Google Partners Help http://support.googl[...] 2015-05-21
_[81] 웹사이트 JavaScript and Responsive Web Design https://developers.g[...] Google Developers
_[82] 웹사이트 The Role of Table Layouts in Responsive Web Design http://webdesign.tut[...] 2015-05-21
_[83] 웹사이트 Top responsive web design problems... testing http://www.netmagazi[...] .net Magazine 2012-08-13
_[84] 웹사이트 Best mobile emulators and RWD testing tools http://www.themobile[...] The Mobile Web Design Blog 2011-11-26
_[85] 웹사이트 Browser testing... with Adobe Edge Inspect http://www.adobe.com[...] 2012-09-26
_[86] 웹사이트 Responsive Design View https://developer.mo[...] 2015-05-21
_[87] 웹사이트 Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions - Best developer device testing toolbar http://lab.maltewass[...] 2015-05-21
_[88] 웹사이트 The First Responsive Design Website: Audi (circa 2002). https://experiencing[...] 2012-07-22
_[89] 웹사이트 Resolution dependent layout: Varying layout according to browser width http://www.themaninb[...] 2004-09-21
_[90] 웹사이트 G146: Using liquid layout https://www.w3.org/T[...] 2015-05-21
_[91] 웹사이트 Media Queries https://www.w3.org/T[...] 2015-05-21
_[92] 웹사이트 15 top web design and development trends for 2012 http://www.creativeb[...] .net magazine 2012-01-09
_[93] 웹사이트 Why 2013 Is the Year of Responsive Web Design http://mashable.com/[...] 2012-12-11
_[94] 웹사이트 The First Responsive Design Website: Audi (circa 2002). https://experiencing[...] 2012-07-22

본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.

문의하기 : help@durumis.com