안녕하세요. 린치핀소프트 한광희입니다.

이번 포스트는 반응형 웹 디자인과 자주 사용하는 5가지 대표 패턴에 대한 이야기입니다.

반응형 웹 디자인은 사실 IE9에서부터 Media Query가 지원되는 등, 비교적 최신의 기술입니다. 국내에서도 2013년즈음 부터 반응형 웹 페이지에 대한 이야기가 종종 나왔으며, 오늘날에는 스마트폰의 급속한 확대로 반응형 웹 디자인을 빼놓고 웹 사이트 디자인을 애기하기 힘들 정도로 보편화되어가고 있습니다.

이에 따라 과거 제작된 웹 사이트는 반응형 디자인이 차용되지 못하여 현재의 트렌드한 사이트에 비해 상대적으로 노후화되어 보이고 다양한 디바이스에서의 콘텐츠 가시성을 확보하지 못하고 있는 실정입니다. 그래서 웹 사이트 리뉴얼요청 중에서도 “반응형 웹 디자인 구성”을 필수사항으로 말씀해주시는 분도 있습니다.

그만큼 반응형 웹 디자인이 중요하다고 인식하는 분들이 많아 졌기 때문이라고 생각합니다.

 

반응형 웹 페이지 구성에 있어 3대 요소가 있습니다.

  • Media Query(미디어 쿼리)
  • Flexible Image(가변길이 이미지)
  • Fluid Grid(유동형 그리드 레이아웃)

위의 3가지 요소 모두 중요합니다. 무엇하나가 빠져서도 정상적인 반응형 웹 디자인을 구성하기 어렵습니다.

위의 3가지요소를 충분히 활용하면 이제 반응형 웹 디자인을 구성 할수 있고 오늘 소개하는 주요 5가지 패턴을 이용하여 레이아웃 디자인을 할 수 있습니다.

 

 반응형 웹 디자인 주요 5가지 패턴

 

관련사이트 링크를 참조하여 브라우저의 크기를 변경해보면서 레이아웃의 변화를 관찰해보시면 쉽게 이해할 수 있습니다!

-Mostly Fluid

: 웹페이지 요소의 렌더링 플로우의 시작은 좌측상단부터 우측하단까지입니다. 그러므로 해상도 변경간에 우측 하단의 요소부터 다음행으로 자연스럽게 이전시키는 방법입니다. 해상도가 작아져서 레이아웃이 이동이 필요한 경우 우측의 요소부터 하단의 행으로 이동합니다.

관련 사이트 : http://codepen.io/bradfrost/full/Iardn

-Column Drop

: Mostly Fluid에 비해 요소들이 하단의 행으로 이행되는 것은 맞지만 우측하단의 요소가 아닌 콘텐츠의 중요도에 따라 좌측상단의 요소가 하단으로 이행할수도 있습니다. 보통  하나의 행에 “여러 열”을 가지는 레이아웃의 경우 모바일의 해상도시에는 몇개 열을 행으로 전환해야 합니다. 이때 콘텐츠의 중요도에따라 같은 행의 여러열중 중요도에 따라 하단의 행으로 위치시키는 방법입니다.

관련 사이트 : http://codepen.io/bradfrost/full/zhCwd

-Shifter

: 헤더 부분에 자주 사용되며 레이아웃 변경간에 특정한 요소가 최상단,최하단으로 이동합니다. 보통 글로벌 네비게이션 메뉴 부분이 사이드바 영역에 위치할때 해상도 변경시 페이지의 최 상단으로 네비게이션이 이동하며 해당 빈자리를 메인 콘텐츠가 채우는 방식입니다.

관련 사이트 :  http://codepen.io/bradfrost/full/LtryA

-Tiny Tweaks

: 이는 데스크탑해상도에서부터 레이아웃 구성을 단순하게 또는 특수하게 해서 해상도 변동간에도 요소의 이동을 하지 않습니다. 일예로 Matro Style Design이 이런식으로 구성될때가 있습니다.

관련 사이트 : http://codepen.io/bradfrost/full/brjFH

-Off canvas

: 대형 포탈이나 SNS의 모바일 페이지를 사용해보셨으면 쉽게 이해하실수 있을겁니다. 이 방법은 좌/우측 사이드바의 경우 데스크탑에서는 보여지다가 특정해상도 이하로는 좌/우측 사이드바가 아예 사라지고 메인 콘텐츠만 보여집니다. 대신 버튼이나 요소등을 이용해 좌/우측 사이드 영역이 슬라이드되어 보여지도록 사용자경험을 구성합니다.

관련 사이트 :  http://codepen.io/bradfrost/full/GybaF

 

위 패턴은 중첩적으로 사용되기도 하는데 제 경험적으로는 웹 디자인 구성 및 개발시에 Column Drop과 Mostly Fluid, Off canvas 패턴을 중첩적으로 활용하여 모바일/태블릿PC해상도 페이지를 구성하는 경우가 많은것 같습니다.

이외에도 많은 패턴이 있고 상기 나열된 패턴들은 Bootstrap, Foundation,Skeleton 등같은 반응형 웹페이지를 구성하는 프레임워크에서 Class 선택자등을 통해 신속히 개발 구성할수 있을때가 있습니다.