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

 

요즘들어 많은 분들이 워드프레스의 강점과 기존 사이트 리뉴얼시에 필수사항으로 요청하시는게 “반응형 웹 페이지” 제작입니다!

특히나 기존의 홈페이지를 운영하셨으나, 홈페이지를 3-4년 전 이전에 제작하셨거나 최근에 제작하셨더라도 “반응형 웹 페이지”로 제작이 안되어 있어서 다시 리뉴얼을 말씀하시는 분들도 종종 있을정도입니다.

국내에서는 많은 웹 에이전시가 있고  다양한 웹 페이지 제작 솔루션이 존재합니다. 그러나 근래에 홈페이지를 제작하셨더라도 실상 웹 개발사 측의 솔루션이 최근의 웹 표준이나 주요 사항을 반영하지 못하고 있거나 제작시 “반응형 페이지”제작을 명시적으로 요구하지 않을 경우 반응형 페이지로 제작을 해주지 않는 사례가 있습니다.

이런 상황에 처해 계신분들이 “반응형 페이지”를 위해 다시금 사이트를 리뉴얼 하는 사례가 있습니다.

 

오늘은 이 “반응형 웹 페이지”가 무엇인지 알아보겠습니다.

 

responsiveD

 

“반응형 웹 페이지 또는 반응형 웹 디자인(Responsive Web Design)”는 오늘날 우리가 인터넷 콘텐츠를 소비하는 데 이용하는 주요 매체와 밀접한 관련이 있습니다.

 

3-4년 전만 하더라도, 스마트폰이 이제 막 보급되어 활성화되고 있는 상황에서 웹 서핑 또는 인터넷 쇼핑은 노트북/데스크탑 같은 매체를 통해 주로 이루어졌습니다.

그러나 오늘처럼 스마트폰이 대중화되고, 어디서나 쉽게 WIFI를 통해 무선인터넷을 활용할수 있는 지금 과거와 달리 스마트폰을 통해 웹 콘텐츠를 구독합니다.

 

그런데 여기서 우리가 늘상 이용하던 데스크탑/노트북과 스마트폰 단말의 해상도는 극히 다르다는 점이 있습니다. 데스크탑,노트북의 경우는 일반적으로 해상도의 너비가 높이보다 크고 상대적으로  큰 해상도를 지원하는 반면, 오늘날의 태블릿PC, 스마트폰의 경우는 대부분 높이가 너비보다 더 크며 작은 해상도를 지원하는 경우가 대부분입니다.

 

그래서 데스크탑 또는 노트북의 해상도에 최적화된  웹 페이지를 스마트폰으로 구독하게 되면 , 전체적으로 페이지가 작아 눈에 들어오지 않거나 이미지가 너무 작아 콘텐츠의 “가시성”이 떨어지는 경우가 대부분입니다.

이런 상황에서 웹 페이지를 구성하는 프로그래밍 언어인 HTML5와 CSS3가 등장하여 데스크탑/노트북/태블릿PC/스마트폰 등 다양한 해상도의 기기에 웹 페이지를 최적화하여 어떤 매체로 콘텐츠를 구독하더라도 콘텐츠의 가시성이 안정적인 페이지로 유지가 될 수 있게 되었습니다.

특히나 쇼핑몰이나 블로그의 경우 모바일을 통해 홈페이지를 방문한 분들이 점점 더 많아 지는 추세에서 오늘날 “반응형 페이지”의 구성은 정말 중요한 웹 제작의 기본이라고 할 수 있습니다.

 

그리고 한가지 더, 제 개인적인 경험으로 모바일/태블릿PC 를 대상으로 반응형 페이지로 제작할 때는 사용자가 좌우 스크롤보다는 상하의 스크롤에 친숙함을 염두하여 콘텐츠 역시 수평으로 나열되는것보다 수직으로 나열되는 것이 더욱 가시성이 높은 웹 페이지의 레이아웃 구성이 됩니다-.

 

 

아래는 워드프레스 테마중 BoardWalk라는 테마의 예시입니다.

좌측의 경우 데스크탑에서 보여지는 레이아웃 구성이고, 우측이 모바일에서 보여지는 구성입니다.

이제 반응형 웹 디자인이 어떤지 조금 감이 오시지요?

그림1