반응형웹

반응형 웹(Responsive Web Design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기, 해상도, 레이아웃 등이 유동적으로 변환되는 웹페이지 접근 기법을 말한다.

개요

PC용과 모바일용을 각각 별개로 제작하는 비효율적인 과정을 생략하고, 하나의 웹페이지 주소로 모든 스마트 기기에 최적화된 웹페이지를 제공하는 것을 의미한다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있으며, 웹페이지 내용을 수정해야할 때에도 하나의 페이지에서만 적용해도 동일하게 반영되어 효율적이다. 하나의 소스 코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용의 절감 효과를 가져올 수 있다는 장점이 있다. 이와 반대로 디바이스별로 별도의 웹사이트를 제작하여 보여주는 적응형 웹(Adaptive Web) 방식도 있다.

등장배경

2001년 런칭한 Audi.com에서 브라우저 뷰포트 너비에 순응하는 레이아웃을 최초로 구현하였다.

특징

• 가변 그리드(Fluid Grid)

유동형 그리드라고 부르기도 한다. 그리드란 디자인에서 내용을 구성하는데 사용되는 일련의 직선 또는 곡선이 교차하는 구조를 의미한다. 설계자가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대이자 프레임워크의 역할을 한다. 전체 UI에 통일성을 부여하고 일관된 디자인을 유지하여 화면의 전체적인 균형을 맞출 수 있어 더욱 견고한 디자인을 제공할 수 있다. 이는 사용자에게 전문적이고 신뢰성과 안정감을 제공할 수 있다. px(픽셀)과 같이 고정된 단위가 아니라 상황에 맞게 변할 수 있는 단위인 em(엠)이나 %(퍼센티지)를 사용하여 브라우저 크기에 따라 유동적으로 변할 수 있게 한다.

• 유연한 이미지(Flexible Images)

모든 화면에서 볼 수 있도록 화면 폭보다 큰 이미지를 다운받고 이미지의 넓이값을 100%, 높이값을 자동(auto)로 설정하는 방법이다. 단순히 이미지를 화면 폭에 맞게 가로 및 세로의 길이를 줄였다 늘였다 할 수 있다. 다만 웹을 기준으로 할 경우 모바일에서는 해상도가 높은 이미지를 크기만 줄여 메모리를 낭비하는 상황이 발생할 수 있다.

• 미디어 쿼리(Media Query)

웹 문서 내 미디어 스타일 설정에 사용하는 미디어 쿼리를 이용하면 단말 화면의 폭이나 높이에 따라 레이아웃이 자동으로 구현된다. 대표적인 기술로 종속 스타일 시트 3 버전(CSS3:Cascading Style Sheets Version 3)이 있다.

• 표준

국제 웹표준화 기구인 W3C에서 지정한 HTML, CSS3으로 소스코드를 작성한다.

• 뷰포트(Viewprot)

웹페이지가 사용자에데 보여지는 영역을 의미하며, 최적의 환경을 제공하기 위해 화면 너비에 맞춰 웹페이지를 랜더링한다.

종류

• 유동형(Mostly Fluid Type)

가장 많이 사용되는 패턴이다. 유동형 그리드와 유동형 이미지를 사용하여 레이아웃을 유지하다가 가장 작은 화면에서는 수직으로 컬럼을 세우는 구조이다.

• 열 끌어놓기(Column Drop Type)

인기있는 패턴 중 하나이다. 창 너비가 콘텐츠에 비해 좁아지면 부차적인 컬럼을 아래로 떨어뜨리는 방법으로, 대부분의 컬럼 폭이 화면 크기가 달라져도 변함이 없다는 특징이 있다.

• 레이아웃 시프터(Layout Shifer Type)

다양한 기기에 따른 반응성이 가장 뛰어난 패턴이다. 다른 열 아래로 이동 및 재배치하는 방식이 아닌 콘텐츠의 자리가 이동하는 특징이 있다. 상대적으로 유지 관리가 복잡한 레이아웃이지만 혁신적인 디자인을 담을 수 있다는 장점이 있다.

• 미세 조정(Tiny Tweaks Type)

가장 간단한 형태의 레이아웃이다. 폰트 사이즈와 이미지 레이아웃만 고려할 경우에 사용된다. 1페이지 선형 웹사이트, 텍스트가 많은 문서 등에서 활용된다.

• 오프 캔버스(Off Canvas)

보여지지 않는 화면을 고려하여 콘텐츠를 유지하고 네비게이션할 수 있는 용도로 사용된다. 창 너비가 넓은 경우에는 바로 화면에 표시하고, 창 너비가 좁은 경우엔 사용 빈도가 낮은 콘텐츠를 화면 밖에 배치하였다가 클릭 이벤트가 발생했을 때에만 표시한다. 대표적으로 페이스북이 있다.

문제점과 대안

문제점

• 브라우저 호환성의 문제가 있을 수 있다.
• CSS3의 특성상 인터넷익스플로러(IE)8 이하에서는 사용이 불가능하다.
• 디자인의 자유도가 떨어진다.
• 100% 맞춤 디자인이 어렵다.
• 로딩 속도나 이미지 리사이징의 문제로 성능이 떨어질 수 있다.
• 콘텐츠가 많거나 유동적인 경우에 작업량이 많아질 수 있다.

대안

• 텍스트가 들어간 이미지의 경우에는 해상도와 레이아웃에 맞게 다른 사이즈의 이미지를 불러오게 할 수 있다.
• 해상도에 맞춰 유동적으로 레이아웃이 변화하는 반응형 웹이 아닌 미리 정해둔 비율에 맞춰 웹페이지를 구성하는 적응형 웹을 사용하여 빠른 속도로 페이지를 로딩하게 만들 수 있다. 하지만 적응형 웹은 기기에 맞게 코드나 URL을 분리해야하므로 비용 문제가 발생한다는 단점이 있다.
• 모바일 퍼스트 전략(Mobile First Strategy) : 최소 단위인 모바일을 기준으로 삼아 태블릿, 데스크톱(PC)과 같이 더 큰 해상도로 점차 웹페이지를 변형하고 확장하는 방법. 레이아웃 단순화를 핵심으로 한다.

평가와 전망

유지보수가 간편하며 마케팅에 유리하고, 검색 엔진 최적화(SEO, Search Engine Optimize) 작업을 통해 검색 결과에서 상위권에 나타나게 할 수 있다. 또한 다양한 기기가 출시되고 어떤 크기의 기기가 나올지 모르는 미래를 대비한 미래 지향적 기술이라고 평가되기도 한다.

참고자료

• 〈반응형 웹 디자인〉, 《위키백과》
• Jim Kalbach,〈The First Responsive Design Website: Audi (circa 2002)〉, 《EXPERIENCINGINFORMATION》, 2012-07-22
• 〈반응형 웹〉, 《네이버 지식백과》, 2018-10-19
• 〈반응형 웹〉, 《네이버 지식백과》
• 윈드 디자인,〈디자이너와 실무자가 알아야 할 '반응형 웹사이트 제작 가이드'〉, 《네이버 블로그》, 2019-08-28
• Ryush,〈RWD, Responsive Web Design 반응형 웹에 대해서〉, 《개인 블로그》, 2013-01-18
• 아리산, 〈반응형 웹의 장점과 단점〉, 《개인 블로그》, 2018-09-04
• Pete LePage, 〈반응형 웹 디자인 패턴〉, 《구글 디벨로퍼스》, 2019-05-29
• NexTree, 〈CSS:반응형 웹(Responsive Web)〉, 《NEXTREE》, 2014-03-31
• slowalk, 〈반응형 웹, 정말 효과적일까?〉, 《개인 블로그》, 2016-08-24
• 〈반응형 웹이란?〉, 《BEESFLOW》

같이보기

• 모바일