반응형 웹 디자인

1. 개요

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

2. 역사

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

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

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

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

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

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

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

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

3. 관련 개념

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

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

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

3.1. 모바일 우선 디자인

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

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

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

3.2. 점진적 향상 (Progressive Enhancement)

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

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

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

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

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

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

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

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

4. 과제 및 해결 방안

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

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

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

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

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

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

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

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

5. 검증 및 테스트 도구

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

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

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

5.2. 동시 테스트 도구

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

5.3. 브라우저 개발자 도구

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