정글홈 | 매거진정글 | UCC정글 | PLAY정글 | SITE갤러리 | 디자인북 | 공모전 | 전시행사 캠퍼스정글
정글홈 정글매거진 홈
스페셜 디자인담론 포커스앤리뷰 이슈앤칼럼 피플 DStudio 월드 디자인나우 오픈리포터
프로덕트 그래픽 브랜드 디지털미디어 스페이스 아트앤패션 북리뷰 지금업계는 B캐스트
개인 기업    
   
전체보기
UX & GUI
애니메이션 & CG스토리
Tool & Tip
기업 뉴스 관리
에브리데이몬데이, 네덜란..

Help
문의함 | FAQ | 서비스안내


페이스북에 퍼가기 트위터에 퍼가기 미투데이에 퍼가기  기사프린트하기  URL복사하기
최근 스마트폰과 태블릿 PC가 늘어나면서 그에 대한 활용도도 높아지고 있다. 그러나 기기 마다 다른 화면 비율 때문에 웹사이트 접속 시 페이지가 잘리거나 인터넷 창이 제대로 열리지 않는 불편함을 겪는 사람도 증가하고 있다. 이는 기기마다 다른 OS, 브라우저의 해상도 때문이다. 그렇다면 해상도에 맞게 유동적으로 사이트가 변할 수는 없을까? (2012-03-07)  
웹사이트의 진화를 꿈꾸다

최근 스마트폰과 태블릿 PC가 늘어나면서 그에 대한 활용도도 높아지고 있다. 그러나 기기 마다 다른 화면 비율 때문에 웹사이트 접속 시 페이지가 잘리거나 인터넷 창이 제대로 열리지 않는 불편함을 겪는 사람도 증가하고 있다. 이는 기기마다 다른 OS, 브라우저의 해상도 때문이다. 그렇다면 해상도에 맞게 유동적으로 사이트가 변할 수는 없을까? 이런 문제점을 해결하고자 나온 것이 ‘반응형 웹디자인’이다. 이것은 사용자의 환경에 따라 하나의 웹이 PC와 모바일 환경에 따라 변화하는 것을 말한다.

글 | 이은정 객원기자( eunjungb1115@naver.com)


요즘 우리는 아침에 일어나 잠드는 순간까지 스마트폰과 테블릿 PC를 이용해 뉴스와 정보 검색, 메일 확인 등 일상 생활의 많은 부분을 함께 한다. 이렇게 모바일 기기의 형태는 진화하고 있지만 웹사이트의 경우 그에 맞는 개발이 잘 이뤄지지 않고 있다.


반응형 웹디자인?

반응형 웹디자인이 나오기 전에는 기기에 맞는 모바일 버전을 따로 만들었기 때문에 개발에 드는 시간과 비용 문제 등이 있었다. 그러나 하나의 웹페이지가 모든 기기의 장소값에 따라 유동적인 레이아웃으로 최적화 돼 구성되는 반응형 웹디자인의 등장은 그런 불편함을 줄여줄 대안으로 자리 잡고 있다.



반응형 웹디자인의 핵심은 CSS의 설정을 통해서 화면크기 등에 따라 다른 형태로 보여줄 수 있는 미디어쿼리를 사용한다는 점이다. 인터넷 익스플로러는 IE9부터 미디어쿼리를 지원하기 때문에 오페라나 크롬과 같은 브라우저를 사용해야 한다.

반응형 웹디자인이 적용된 사이트의 사례를 보면 훨씬 이해하기가 쉬울 것이다.

반응형 웹사이트

(1)현대 자동차 기업 문화 홍보 홈페이지 (http://pr.hyundai.com/#/pages/main.aspx )


지난 2월 20일 현대자동차의 기업 문화 홍보 사이트가 오픈했다. 이 사이트는 하나의 소스로 여러 해상도를 대응(one source multi use)할 수 있는 ‘플렉시블 유저 인터페이스’를 국내 최초로 적응한 것이 특징이다. 단계적 형식의 그리드 레이아웃으로 메뉴를 간단하게 보여줌으로써, 사용자가 편리하게 원하는 탭을 선택할 수 있도록 구성되었다. 또한, 현대의 H와 자동차를 형상화한 비주얼 이미지를 클릭하하면 메뉴를 선택할 수 있는 점도 인상적이다.

(2) 라이코스 홈페이지(http://www.lycos.com/ )


포털사이트 라이코스는 하늘색 배경에 검정 로고와 강아지 이미지를 심플하게 배치했다. 간단한 픽토그램과 함께 메일과 뉴스/ 날씨/ 연예 등으로 탭을 나누어 사용자가 원하는 정보로 쉽게 클릭 할 수 있도록 분류되어 있다. 디자인이 간결하기 때문에 어느 화면을 통해서 봐도 조잡하거나 깨지지 않고 웹에 있는 콘텐츠를 그대로 즐길 수 있도록 한다. 해상도를 낮추면 상단에 4개씩 배치됐던 메뉴가 3개로 바뀌는 것을 알 수 있다.

(3) 소니 홈페이지(http://www.sony.com/index.php )


소니의 홈페이지 역시 반응형 웹디자인이 적용된 사이트이다. 사이트 상단을 블랙으로 표현한 다음, 가로형식으로 구성해 메인 상품을 돋보이게 만들었다. 해상도가 다른 기기에서 보면 상단에 있던 메뉴들은 사라지고 검색 창이 중심이 된다. 이는 웹 사이트의 깔끔함을 살리면서 검색에 비중을 두었다는 것을 알 수 있다.

반응형 웹디자인은 많은 자원과 시간이 소요되기 때문에 아직은 활성화 되지 않았다. 그리고 다양한 화면에서의 레이아웃을 고려해야 하므로 자바스크립트 등 실행요소를 고려해야 하고, 마우스로 클릭했을 때와 손으로 직접 터치를 했을 때의 차이 등 생각해야 할 부분이 많다. 하지만 스마트 기기의 수요가 증가하는 만큼 그 필요성은 점점 커질 것이다. 앞으로 반응형 웹디자인이 확장되어 더 많은 페이지를 어떤 화면에서도 자유롭게 볼 수 있게 되길 바란다.

그밖에 다양한 반응형 웹디자인을 살펴보고 싶다면 http://mediaqueri.es/에서 확인해 볼 수 있다.


  
<저작권자 ⓒ 디자인정글 무단전재-재배포 금지>
개인 블로그 및 홈페이지 등에 게재시, 디자인정글의 승인 후 해당 기사의 링크를 표시해야 합니다.
상업적 용도(법인 및 단체 블로그, SNS 등 포함)는 어떠한 경우에도 전재 및 배포를 금지합니다.

위에 명시된 가이드에 따르지 않을 경우, 이에 따른 불이익은 책임지지 않습니다.
기타 기사 게재에 관하여 정글 관리자에게 문의 주시기 바랍니다.

※ 외부필자에 의해 작성된 기고문의 내용은 본지의 편집 방향과 다를 수도 있습니다.

구 댓글 확인

디자인정글㈜ | 주소: 서울시 서초구 반포대로 101(도원빌딩 5층) | Tel 02-2143-5800 | Fax 02-585-6001 | 잡정글 02-2143-5858
대표이사 : 황문상 | 개인정보관리책임자 : 신명석 | 청소년보호책임자 : 이현주
인터넷신문등록번호 : 서울, 아 01247 | 등록일/발행일 : 2010년 5월 28일 | 제호 : jungle(정글) | 발행인/편집인 : 황문상
사업자등록번호 119-86-15169 | 통신판매업 신고번호 제 2012-서울강남-03289 | 직업정보제공사업 신고번호 : J1200320140043
Copyright Design Jungle Co.,Ltd. All Rights Reserved.