"반응형웹"의 두 판 사이의 차이

해시넷
이동: 둘러보기, 검색
(→‎문제점과 대안)
(→‎특징)
10번째 줄: 10번째 줄:
 
* 가변 그리드(Fluid Grid)
 
* 가변 그리드(Fluid Grid)
 
유동형 그리드라고 부르기도 한다. 그리드란 디자인에서 내용을 구성하는데 사용되는 일련의 직선 또는 곡선이 교차하는 구조를 의미한다. 설계자가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대이자 [[프레임워크]]의 역할을 한다. 전체 UI에 통일성을 부여하고 일관된 디자인을 유지하여 화면의 전체적인 균형을 맞출 수 있어 더욱 견고한 디자인을 제공할 수 있다. 이는 사용자에게 전문적이로 신뢰성 및 안정감을 제공할 수 있다.<ref> 윈드 디자인,〈[https://blog.naver.com/web_sh/221630970742 디자이너와 실무자가 알아야 할 '반응형 웹사이트 제작 가이드']〉, 《네이버 블로그》, 2019-08-28 </ref> px(픽셀)과 같이 고정된 단위가 아니라 상황에 맞게 변할 수 있는 단위인 em(엠)이나 %(퍼센티지)를 사용하여 브라우저 크기에 따라 유동적으로 변할 수 있게 한다.
 
유동형 그리드라고 부르기도 한다. 그리드란 디자인에서 내용을 구성하는데 사용되는 일련의 직선 또는 곡선이 교차하는 구조를 의미한다. 설계자가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대이자 [[프레임워크]]의 역할을 한다. 전체 UI에 통일성을 부여하고 일관된 디자인을 유지하여 화면의 전체적인 균형을 맞출 수 있어 더욱 견고한 디자인을 제공할 수 있다. 이는 사용자에게 전문적이로 신뢰성 및 안정감을 제공할 수 있다.<ref> 윈드 디자인,〈[https://blog.naver.com/web_sh/221630970742 디자이너와 실무자가 알아야 할 '반응형 웹사이트 제작 가이드']〉, 《네이버 블로그》, 2019-08-28 </ref> px(픽셀)과 같이 고정된 단위가 아니라 상황에 맞게 변할 수 있는 단위인 em(엠)이나 %(퍼센티지)를 사용하여 브라우저 크기에 따라 유동적으로 변할 수 있게 한다.
−
 
 
* 유연한 이미지(Flexible Images)
 
* 유연한 이미지(Flexible Images)
 
모든 화면에서 볼 수 있도록 화면 폭보다 큰 이미지를 다운받고 이미지의 넓이값을 100%, 높이값을 자동(auto)로 설정하는 방법이다. 단순히 이미지를 화면 폭에 맞게 가로 및 세로의 길이를 줄였다 늘였다 할 수 있다. 다만 웹을 기준으로 할 경우 모바일에서는 해상도가 높은 이미지를 크기만 줄여 메모리를 낭비하는 상황이 발생할 수 있다.<ref name="tree"> NexTree, 〈[http://www.nextree.co.kr/p8622/ CSS:반응형 웹(Responsive Web)]〉, 《NEXTREE》, 2014-03-31 </ref>
 
모든 화면에서 볼 수 있도록 화면 폭보다 큰 이미지를 다운받고 이미지의 넓이값을 100%, 높이값을 자동(auto)로 설정하는 방법이다. 단순히 이미지를 화면 폭에 맞게 가로 및 세로의 길이를 줄였다 늘였다 할 수 있다. 다만 웹을 기준으로 할 경우 모바일에서는 해상도가 높은 이미지를 크기만 줄여 메모리를 낭비하는 상황이 발생할 수 있다.<ref name="tree"> NexTree, 〈[http://www.nextree.co.kr/p8622/ CSS:반응형 웹(Responsive Web)]〉, 《NEXTREE》, 2014-03-31 </ref>
−
 
 
* 미디어 쿼리(Media Query)
 
* 미디어 쿼리(Media Query)
 
웹 문서 내 미디어 스타일 설정에 사용하는 미디어 쿼리를 이용하면 단말 화면의 폭이나 높이에 따라 레이아웃이 자동으로 구현된다. 대표적인 기술로 종속 스타일 시트 3 버전(CSS3:Cascading Style Sheets Version 3)이 있다.
 
웹 문서 내 미디어 스타일 설정에 사용하는 미디어 쿼리를 이용하면 단말 화면의 폭이나 높이에 따라 레이아웃이 자동으로 구현된다. 대표적인 기술로 종속 스타일 시트 3 버전(CSS3:Cascading Style Sheets Version 3)이 있다.
 +
* 표준
 +
국제 웹표준화 기구인 W3C에서 지정한 HTML, CSS3으로 소스코드를 작성한다.
  
 
== 종류 ==
 
== 종류 ==

2019년 9월 4일 (수) 11:49 판

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

개요

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

등장배경

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

특징

  • 가변 그리드(Fluid Grid)

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

  • 유연한 이미지(Flexible Images)

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

  • 미디어 쿼리(Media Query)

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

  • 표준

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

종류

  • 유동형(Mostly Fluid Type)

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

  • 열 끌어놓기(Column Drop Type)

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

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

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

  • 미세 조정(Tiny Tweaks Type)

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

  • 오프 캔버스(Off Canvas)

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

문제점과 대안

문제점

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

대안

  • 텍스트가 들어간 이미지의 경우에는 해상도와 레이아웃에 맞게 다른 사이즈의 이미지를 불러오게 할 수 있다.
  • 해상도에 맞춰 유동적으로 레이아웃이 변화하는 반응형 웹이 아닌 미리 정해둔 비율에 맞춰 웹페이지를 구성하는 적응형 웹을 사용하여 빠른 속도로 페이지를 로딩하게 만들 수 있다. 하지만 적응형 웹은 기기에 맞게 코드나 URL을 분리해야하므로 비용 문제가 발생한다는 단점이 있다.

각주

  1. ↑ 1.0 1.1 〈반응형 웹 디자인〉, 《위키백과》
  2. ↑ 〈반응형 웹〉, 《네이버 지식백과》, 2018-10-19
  3. ↑ Jim Kalbach,〈The First Responsive Design Website: Audi (circa 2002)〉, 《EXPERIENCINGINFORMATION》, 2012-07-22
  4. ↑ 윈드 디자인,〈디자이너와 실무자가 알아야 할 '반응형 웹사이트 제작 가이드'〉, 《네이버 블로그》, 2019-08-28
  5. ↑ 5.0 5.1 NexTree, 〈CSS:반응형 웹(Responsive Web)〉, 《NEXTREE》, 2014-03-31
  6. ↑ Pete LePage, 〈반응형 웹 디자인 패턴〉, 《구글 디벨로퍼스》, 2019-05-29
  7. ↑ Ryush,〈RWD, Responsive Web Design 반응형 웹에 대해서〉, 《개인 블로그》, 2013-01-18
  8. ↑ 아리산, 〈반응형 웹의 장점과 단점〉, 《개인 블로그》, 2018-09-04

참고자료

같이보기

원본 주소 "http://wiki.hash.kr/index.php?title=반응형웹&oldid=142336"