검수요청.png검수요청.png

반응형웹

해시넷
이동: 둘러보기, 검색
반응형웹 페이지

반응형웹(responsive web)이란 PC, 스마트폰, 태블릿PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지를 말한다.[1] 웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다. 반응형웹의 핵심 기술은 가변 그리드(Fluid Grid), 유연한 이미지(Flexible Images), 미디어쿼리(Media Query)이다. 반응형 웹 디자인(RWD; Responsive Web Design)이라고도 한다.

개요

반응형웹은 2010년 웹 디자이너 이딴 마르코트(Ethan Marcotte)가 처음으로 그 개념을 창시했다.[2] PC용과 모바일용을 별개로 제작하는 비효율적인 과정을 생략하고, 하나의 주소로 모든 스마트 기기에 최적화된 웹페이지를 제공하는 것을 의미한다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있으며, 웹페이지 내용을 수정해야할 때에도 하나의 페이지에서만 적용해도 동일하게 반영되어 효율적이다. 하나의 소스 코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용의 절감 효과를 가져올 수 있는 장점이 있다. 이는 원 소스 멀티 디바이스(OSMD, One Source Multi Device) 혹은 원 소스 멀티 유즈(OSMU, One Source Multi Use)라고 하며 N 스크린(N-Screen) 대응책으로 사용된다.[3] 반응형웹과는 반대로 디바이스별로 별도의 웹사이트를 제작하여 보여주는 방식을 적응형웹(adaptive web)이라고 한다.[1][4] 반응형웹은 유지보수가 간편하며 마케팅에 유리하고, 검색 엔진 최적화(SEO, Search Engine Optimize) 작업을 통해 검색 결과에서 상위권에 나타나게 할 수 있다. 또한 다양한 기기가 출시되고 어떤 크기의 기기가 나올지 모르는 미래를 대비한 미래 지향적 기술이라고 평가되기도 한다.[5]

특징

  • 가변 그리드 : 유동형 그리드라고 부르기도 한다. 그리드란 디자인에서 내용을 구성하는데 사용되는 일련의 직선 또는 곡선이 교차하는 구조를 의미한다. 설계자가 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대이자 프레임워크의 역할을 한다. 전체 UI에 통일성을 부여하고 일관된 디자인을 유지하여 화면의 전체적인 균형을 맞출 수 있어 더욱 견고한 디자인을 제공할 수 있다. 이는 사용자에게 전문적이고 신뢰성과 안정감을 제공할 수 있다.[6] px(픽셀)과 같이 고정된 단위가 아니라 상황에 맞게 변할 수 있는 단위인 em(엠)이나 %(퍼센티지)를 사용하여 브라우저 크기에 따라 유동적으로 변할 수 있게 한다.
  • 유연한 이미지 : 모든 화면에서 볼 수 있도록 화면 폭보다 큰 이미지를 다운받고 이미지의 넓이값을 100%, 높이값을 자동(auto)로 설정하는 방법이다. 단순히 이미지를 화면 폭에 맞게 가로 및 세로의 길이를 줄였다 늘였다 할 수 있다. 다만 웹을 기준으로 할 경우 모바일에서는 해상도가 높은 이미지를 크기만 줄여 메모리를 낭비하는 상황이 발생할 수 있다.[7] 이미지 외에 비디오 등을 포함시켜 유동형 미디어(Flexible Media)라고 하기도 한다.[8]
  • 미디어쿼리(media query) : 디바이스 관련 다양한 정보를 이용하여 최적화된 화면을 제공한다. 웹 문서 내 미디어 스타일 설정에 사용하는 미디어 쿼리를 이용하면 단말 화면의 폭이나 높이에 따라 레이아웃이 자동으로 구현된다. 대표적인 기술로 종속 스타일 시트 3 버전(CSS3:Cascading Style Sheets Version 3)이 있다. @media 태그를 CSS 내부 혹은 링크로 연결하여 사용한다.
  • 표준 : 국제 웹표준화 기구인 W3C에서 지정한 HTML, CSS3로 소스코드를 작성한다.
  • 뷰포트 : 웹페이지가 사용자에게 보여지는 영역을 의미하며, 최적의 환경을 제공하기 위해 화면 너비에 맞춰 웹페이지를 랜더링한다.

종류

야후의 수석 디자인 설계사를 지내고 세계 웹디자인 업계에서 앞서나가고 있는 <모바일 우선주의>의 저자이자 모바일 산업계 최고의 전문가인 루크 로블루스키(Luke Wroblewski)가 반응형웹을 다음과 같은 5개의 패턴으로 정리했다.

  • 유동형(Mostly Fluid Type) : 가장 많이 사용되는 패턴이며 유동형 그리드와 유동형 이미지를 사용하여 레이아웃을 유지하다가 점점 너비가 좁아지는 브레이크 포인트(Break point, 중단점)마다 컬럼이 수직으로 세워지는 구조이다.
  • 열 끌어놓기(Column Drop Type) : 반응형웹에서 인기있는 패턴 중 하나이다. 창 너비가 콘텐츠에 비해 좁아지면 부차적인 컬럼을 아래로 떨어뜨리는 방법으로, 대부분의 컬럼 폭이 화면 크기가 달라져도 변함이 없다는 특징이 있다.
  • 레이아웃 시프터(Layout Shifter Type) : 반응형웹 중에서 다양한 기기에 따른 반응성이 가장 뛰어난 패턴이다. 다른 열 아래로 이동 및 재배치하는 방식이 아닌 콘텐츠의 자리가 이동하는 특징이 있다. 상대적으로 유지 관리가 복잡한 레이아웃이지만 혁신적인 디자인을 담을 수 있다는 장점이 있다.
  • 미세 조정(Tiny Tweaks Type) : 가장 간단한 형태의 레이아웃이므로 폰트 사이즈와 이미지 레이아웃만 고려할 경우에 사용된다. 1페이지 선형 웹사이트, 텍스트가 많은 문서 등에서 활용된다.
  • 오프 캔버스(Off Canvas) : 보여지지 않는 화면을 고려하여 콘텐츠를 유지하고 내비게이션할 수 있는 용도로 사용된다. 창 너비가 넓은 경우에는 바로 화면에 표시하고, 창 너비가 좁은 경우엔 사용 빈도가 낮은 콘텐츠를 화면 밖에 배치하였다가 클릭 이벤트가 발생했을 때에만 표시한다. 대표적으로 페이스북이 있다.[7][9]

이와 같은 반응형웹을 구현하기 위해 고려해야 할 사항은 아래와 같다.

  1. 사용자의 모바일 경험을 고려해야 한다.
  2. 완성된 비주얼 디자인보다 프로토타입 테스트를 우선시해야 한다.
  3. 효율적인 내비게이션 제공 방법을 고민해야 한다.
  4. 사이트 속도를 향상시키기 위해 이미지를 최적화해야 한다.
  5. 모바일 기기를 우선하여 레이아웃을 설계해야 한다.
  6. 미디어쿼리를 적절히 사용해야 한다.
  7. 작은 모바일 화면에서도 쉽게 클릭/터치할 수 있어야 하며, 버튼 등을 쉽게 구별할 수 있어야 한다.
  8. 마이크로 익터렉션(Micro Interaction) 기능을 활용하여 사용자의 흥미를 즉각적으로 유도해야 한다.
  9. 미니멀리스트 디자인을 이용하면 적은 요소의 사용으로 웹사이트의 속도를 향상시킬 수 있다.[10]

문제점과 대안

문제점
  • 웹브라우저 호환성의 문제가 있을 수 있다.
  • CSS3의 특성상 인터넷 익스플로러(IE) 8 버전 이하에서는 사용이 불가능하다.
  • 디자인의 자유도가 떨어진다.
  • 100% 맞춤 디자인이 어렵다.
  • 로딩 속도나 이미지 리사이징의 문제로 성능이 떨어질 수 있다.
  • 실제로 사용하지 않은 자원(이미지, CSS)를 전송받을 수 있다.
  • 실제로 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.
  • 콘텐츠가 많거나 유동적인 경우에 작업량이 많아질 수 있다.[11][12]
대안
  • 텍스트가 들어간 이미지의 경우에는 해상도와 레이아웃에 맞게 다른 사이즈의 이미지를 불러오도록 한다.
  • 해상도에 맞춰 유동적으로 레이아웃이 변화하는 반응형웹이 아닌 미리 정해둔 비율에 맞춰 웹페이지를 구성하는 적응형웹을 사용하여 빠른 속도로 페이지를 로딩하게 한다. 그러나 적응형웹은 기기에 맞게 코드나 URL을 분리해야 하므로 비용 문제가 발생한다는 단점이 있다.
  • 모바일 퍼스트 전략(Mobile First Strategy) : 루크 로블레스키가 주장하였다. 최소 단위인 모바일을 기준으로 삼아 태블릿, 데스크톱(PC)과 같이 더 큰 해상도에 맞춰 웹페이지를 변형하고 확장하는 방법으로, 레이아웃 단순화를 핵심으로 한다.[13] 그러나 모바일 퍼스트의 경우, 모바일 페이지의 수정 사항이 데스크탑 페이지에 영향을 미칠 수 있다는 단점이 있다. [14]
  • 로딩하는 데 시간이 걸리는 요소들은 최대한 화면에서 배제시킨다.
  • 전송량 제어(Traffic Optimization) : 서버측의 기술을 같이 사용해서 전송량을 제어하는 방법이다.
  • 사용자 에이전트 스니핑(User Agent Sniffing) : 브라우저의 에이전트 문자열로 단말기를 판별하는 방법이다.
  • 장치 설명 저장소(Device Description Repository) : 단말 정보 저장소의 정보로 단말기를 판별하는 방법이다.
  • RESS (Responsive Design + Server Side Components) : 콘텐츠 모듈을 사용하여 단말기별 최적화된 모듈을 전송하는 방법이다.
  • 동적 스크립트 불러오기(Dynamic Script Loading) : 콘텐츠를 미리 로딩하지 않고 사용자의 인터랙션이 있을 때에 추가적으로 로딩하는 방법이다.
  • 반응형 이미지(Responsive Image) : 단말 해상도별 이미지를 최적화해서 전송하는 방법이다. 현재 이를 표준화하려는 다양한 방법과 시도가 진행중이다.[15]

각주

  1. ↑ 1.0 1.1 〈반응형웹 디자인〉, 《위키백과》
  2. ↑ 케이쿄 붉은바람, 〈홈페이지 웹디자인의 역사, 웹사이트 디자인의 역사 및 변화〉, 《비즈플로우》, 2017-12-14
  3. ↑ Insanehong, 〈과연 반응형웹 디자인만이 해답일까?〉, 《개인 블로그》
  4. ↑ 〈반응형웹〉, 《네이버 지식백과》, 2018-10-19
  5. ↑ 〈반응형웹이란?〉, 《비즈플로우》
  6. ↑ 윈드 디자인,〈디자이너와 실무자가 알아야 할 '반응형웹사이트 제작 가이드'〉, 《네이버 블로그》, 2019-08-28
  7. ↑ 7.0 7.1 NexTree, 〈CSS:반응형웹(Responsive Web)〉, 《넥스트리》, 2014-03-31
  8. ↑ Toby Yun,〈RWD #1. Prologue : 모든 크기의 화면에 대응되는 디자인〉, 《텀블러 블로그》, 2013-07-18
  9. ↑ Pete LePage, 〈반응형웹 디자인 패턴〉, 《구글 디벨로퍼스》, 2019-05-29
  10. ↑ yamoo9, 〈반응형웹 디자인 구현 방법〉, 《깃허브》, 2018-05-17
  11. ↑ Ryush,〈RWD, Responsive Web Design 반응형웹에 대해서〉, 《개인 블로그》, 2013-01-18
  12. ↑ 아리산, 〈반응형웹의 장점과 단점〉, 《개인 블로그》, 2018-09-04
  13. ↑ Luke Wroblewski,〈Mobile First〉, 《루크더블유》, 2009-11-03
  14. ↑ Toby Yun,〈RWD #3. 모바일 퍼스트(모바일 우선주의)〉, 《텀블러 블로그》, 2013-08-14
  15. ↑ 신현석,〈반응형웹 디자인은 만능인가?〉, 《슬라이드쉐어》, 2013-03-22

참고자료

같이 보기


  검수요청.png검수요청.png 이 반응형웹 문서는 모바일에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.  

개발 : 프로그래밍, 소프트웨어, 데이터, 솔루션, 보안, 하드웨어, 컴퓨터, 사무자동화, 인터넷, 모바일 □■⊕, 사물인터넷, 게임, 메타버스, 디자인
모바일 기술 N스크린 • 네이티브앱 • 모바일 • 모바일앱 • 모바일 온리 • 모바일웹 • 모바일 퍼스트 • 미디어쿼리 • 반응형웹 • 백엔드 서비스 • 웹앱 • 적응형웹 • 하이브리드앱
앱스토어 구글 플레이 • 아마존 앱스토어 • 애플 앱스토어 • 앱스토어 • 원스토어
모바일기기 IC카드 • 갤럭시 • 갤럭시노트 • 스마트워치 • 스마트폰 • 아이팟 • 아이패드 • 아이폰 • 유심(USIM) • 태블릿PC • 피디에이(PDA)
모바일 서비스 골프메신저 • 네이버 밴드 • 딩톡 • 라이즈 • 라인 • 라인택시 • 리멤버 • 마셔바 • 메이퇀 • 바이트댄스 • 배달의민족 • 뱅크샐러드 • 샤잠 • 소다플레이 • 슬랙 • 시럽테이블 • 아자르 • 에코트리 • 원투 • 위챗 • 직톡 • 카카오T(카카오택시) • 카카오지하철 • 카카오톡 • 캐시리플렛 • 쿠브 • 클럽하우스 • 틱톡 • 패밀리링크 • 페이스북 메신저 • 하이퍼커넥트 • 하쿠나라이브
위키 : 자동차, 교통, 지역, 산업, 기업, 단체, 업무, 쇼핑, 블록체인, 암호화폐, 인공지능, 개발, 인물, 행사, 일반
원본 주소 "http://wiki.hash.kr/index.php?title=반응형웹&oldid=457119"