반응형 웹 디자인

반응형 웹 디자인(Responsive web design, RWD) 또는 반응형 디자인은 최소 크기부터 최대 크기까지 다양한 장치와 창 또는 화면 크기에서 웹 페이지가 잘 렌더링되도록 하여 사용성과 만족도를 보장하는 것을 목표로 하는 웹 디자인 접근 방식이다.

반응형 디자인은 가변 그리드(fluid proportion-based grids), 유연한 이미지, 그리고 @media 규칙을 확장한 CSS3 미디어 쿼리 등의 기술을 사용하여 웹 페이지 레이아웃을 열람 환경에 맞게 조정한다. 구체적인 방식은 다음과 같다:

 가변 그리드 개념은 페이지 요소의 크기를 픽셀이나 포인트 같은 절대 단위가 아닌 백분율(%)과 같은 상대 단위로 설정할 것을 요구한다.
 유연한 이미지 또한 상대 단위로 크기가 조정되어, 이미지를 포함하는 HTML 요소 밖으로 표시되는 것을 방지한다.
 미디어 쿼리는 사이트가 표시되는 장치의 특성(예: 브라우저 창의 너비나 물리적 화면 크기)에 따라 페이지가 서로 다른 CSS 스타일 규칙을 사용할 수 있게 한다.
 반응형 레이아웃은 데스크톱, 노트북, 태블릿, 스마트폰 등 어떤 장치의 화면 크기에도 자동으로 조정되고 적응한다.

반응형 웹 디자인은 모바일 장치 사용자가 웹사이트 방문자의 대다수를 차지하게 되면서 더욱 중요해졌다. 예를 들어 2015년에 구글은 모바일겟돈을 발표하고 모바일 장치에서 검색할 때 모바일 친화적인 사이트의 페이지 순위를 높이기 시작했다. 모바일 사용량이 증가함에 따라 향상된 로딩 속도, 터치 친화적인 내비게이션, 모바일 중심 SEO와 같은 최적화 관행은 사용성을 보장하고 검색 가시성을 유지하는 데 필수적이 되었다.

반응형 웹 디자인은 사용자 인터페이스 가소성의 한 예이다.

 과제 및 기타 접근 방식 

루크 브로블스키는 반응형 및 모바일 디자인의 몇 가지 과제를 요약하고 다중 장치 레이아웃 패턴 카탈로그를 만들었다. 그는 단순한 반응형 웹 디자인 접근 방식과 비교하여, 장치 경험 또는 RESS(서버 측 구성 요소를 결합한 반응형 웹 디자인) 접근 방식이 모바일 장치에 더 최적화된 사용자 경험을 제공할 수 있다고 제안했다. Sass와 같은 스타일시트 언어의 서버 측 CSS 생성기 구현이 이러한 접근 방식의 일부가 될 수 있다. 구글은 스마트폰 웹사이트에 대해 다른 접근 방식보다 반응형 디자인을 권장해 왔다.

많은 출판사가 반응형 디자인을 구현했지만, 반응형 디자인 채택의 한 가지 과제는 일부 배너 광고와 비디오가 가변적이지 않다는 점이었다. 그러나 검색 광고와 (배너형) 디스플레이 광고는 특정 장치 플랫폼 타겟팅과 데스크톱, 스마트폰 및 일반 휴대폰을 위한 다양한 광고 크기 형식을 지원하게 되었다. 플랫폼마다 서로 다른 랜딩 페이지 URL이 사용되거나, 페이지에 다양한 광고 변체를 표시하기 위해 Ajax가 사용되기도 했다.JavaScript and Responsive Web Design Google Developers CSS 테이블은 고정 레이아웃과 가변 레이아웃이 혼합된 하이브리드 구성을 가능하게 했다.

모바일 사이트 검증기 및 모바일 에뮬레이터부터 Adobe Edge Inspect와 같은 동시 테스트 도구에 이르기까지 반응형 웹 디자인을 검증하고 테스트하는 많은 방법이 있어 왔다. 크롬, 파이어폭스, 사파리 브라우저와 개발자 도구는 서드파티 도구와 마찬가지로 반응형 디자인 뷰포트 크기 조정 도구를 제공한다.

 역사 

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

브라우저 뷰포트 너비에 따라 의미 있는 방식으로 적응하는 레이아웃을 특징으로 하는 최초의 주요 사이트는 2001년 말에 출시된 Audi.com이었다.Kalbach, Jim (July 22, 2012). "The First Responsive Design Website: Audi (circa 2002)." 이 사이트는 위르겐 슈팡글(Jürgen Spangl)과 짐 칼바흐(정보 설계), 켄 올링(Ken Olling, 디자인), 얀 호프만(Jan Hoffmann, 인터페이스 개발)으로 구성된 razorfish 팀에 의해 제작되었다. 당시의 제한된 브라우저 성능으로 인해 인터넷 익스플로러에서는 브라우저 내에서 레이아웃이 동적으로 적응할 수 있었던 반면, 넷스케이프에서는 크기가 조정될 때 서버에서 페이지를 다시 로드해야 했다.

캐머런 애덤스(Cameron Adams)는 2004년에 데모를 제작했다. 2008년까지 레이아웃을 설명하기 위해 "유연한(flexible)", "액체형(liquid)", "가변형(fluid)", "탄력적(elastic)"과 같은 여러 관련 용어들이 사용되었다. CSS3 미디어 쿼리는 2008년 말과 2009년 초 사이에 본격적으로 사용될 준비가 거의 완료되었다. 이선 마코트(Ethan Marcotte)는 2010년 5월 A List Apart에 게재한 기사에서 반응형 웹 디자인(responsive web design)이라는 용어를 만들고, 이를 가변 그리드 / 유연한 이미지 / 미디어 쿼리를 의미하는 것으로 정의했다. 그는 2011년에 쓴 짧은 저서 《반응형 웹 디자인》(Responsive Web Design)에서 그 이론과 실무를 설명했다. 반응형 디자인은 .net 잡지가 선정한 2012년 최고의 웹 디자인 트렌드에서 점진적 향상에 이어 2위를 차지했다.

매셔블은 2013년을 '반응형 웹 디자인의 해'라고 불렀다.

 관련 개념 

모바일 우선 디자인(Mobile-first design)과 점진적 향상은 반응형 웹 디자인보다 먼저 등장한 관련 개념이다. 기본적인 휴대폰의 브라우저는 자바스크립트나 미디어 쿼리를 이해하지 못했기 때문에, 복잡하고 이미지가 많은 사이트를 휴대폰에서 작동하게 하려고 기능 및 디자인을 깎아나가는 방식(우아한 성능 저하)보다는, 기본적인 웹사이트를 먼저 만들고 이를 스마트폰과 개인용 컴퓨터에 맞춰 향상시키는 관행이 권장되었다.

사용자 인터페이스 가소성은 시스템의 물리적 특성과 환경의 변화를 견디면서 사용성을 유지하는 사용자 인터페이스의 능력을 말한다.

 같이 보기 
 적응형 웹 디자인
 부트스트랩 (프론트엔드 프레임워크)

 각주 

 외부 링크 



분류:웹 디자인
분류:모바일 웹
분류:인간-컴퓨터 상호 작용
분류:사용자 인터페이스
분류:2010년대 신조어
분류:2001년 개설된 인터넷 자산