요즘 반응형 웹이라는 이야기가 이전에 비해서 많이 들리는데, 아무래도 스마트폰으로 모바일 웹이 활성화되고 있고, 아이폰보다는 안드로이드계열에서 다양한 사이즈의 Smartphone이 출시되면서 파편화 현상으로 개발자나 디자이너가 어떤 폰이나 해상도로 웹페이지를 개발할지 정하기가 힘든데, 특정 해상도별로 web site가 다르게 보여지는 방식으로 제작하는것을 반응형 웹이라고 합니다.
위의 네이버 모바일 페이지에 들어가서 브라우저의 폭인 width를 줄여보시면 크기에 따라서 페이지의 모습이 달라집니다. 물론 네이버 PC용 메인 사이트는 크기와 상관없이 같은 모습인데, 일반 컴퓨터에서는 굳이 그렇게 만들 필요가 없기때문입니다.
아래 동영상을 보시면 반응형 웹이 어떤것인지 알수 있습니다.
네이버 모바일은 어느정도 되어 있지만, 네이버 메인 페이지야 컴퓨터에서 들어오면서 일반 모니터로 들어오기때문에 굳이 반응형으로 만들 필요는 없겠지요.
위 사이트에 가시면 반응형 웹으로 만들어진 다양한 사이트들을 볼수 있습니다.
그럼 왜 이런방식으로 반응형 웹사이트 홈페이지를 만들어야 할까요?
PC컴퓨터라면 요즘 안되어서 1024*768이상의 해상도의 모니터가 있기 때문에 굳이 반응형 웹을 만들필요는 없을겁니다. 하지만 스마트폰이나 테블릿 시장이 활성화되면서 이런 모바일 기기의 작은 해상도때문에 생기는 문제를 해결하기 위해서 반응형 웹 디자인이 필요합니다.
뭐 해상도가 PC, 아이패드, 아이폰 딱 3개정도만 있어도 굳이 반응형 웹을 만들기보다는 걍 일반 홈페이지와 모바일 페이지 2개정도만 만들어도 될텐데 최근에는 smartphone이 다양한 사이즈의 액정으로 출시가 되고 있고, 태블릿 시장도 다양한 사이즈가 출시되고 있습니다. 더군다나 애플까지도 iphone5, ipad mini 출시를 통해서 파편화가 시작되고 있으니 개발자나 디자이너는 다양한 사이즈의 화면별로 어떻게 화면을 구성해야 할지를 고민해야 합니다.
문제는 android와 같은 경우 이처럼 다양한 액정의 스크린이 존재하기때문에 전부를 고려할수는 없는 문제이고, 우선은 안드로이드는 갤럭시S와 같은 wvga, 아이폰은 아이폰4의 xga 등을 기준으로 GUI를 개발하고, 이외에는 액정의 크기에 따라 범위를 정해서 제작을 해야하는데, http://mediaqueri.es/ 사이트를 보시면 보통 3-4개정도의 사이즈별로 화면 구성을 하는데, 적정수준에서 범주를 정하면 될듯 합니다.
일반 뉴스와 같이 이미지와 텍스트로 이루어진 사이트라면 레이아웃을 분리해서 해상도별로 작성을 하면 되지만, html5로 만든 컨텐츠기반의 app같은 사이트라면 최대 해상도에 맞추어서 이미지와 콘텐츠를 제작해서 아이패드같은 테블릿에서 최적화를 시키고, 아이폰같은 화면에서는 re-sizing을 해야 합니다.
암튼 하나의 웹페이지도 제대로 만들기 힘든데, PC와 모바일을 나누고, 모바일은 해상도에 따라서 설계를 해야한다는것이 참 깝깝한데, 그러고보면 인터넷 브라우저가 처음 나왔을때 넷스케이프냐 익스플로어냐에 따라서 자바스크립트 등을 별도로 작성을 하던 시절이 생각나네요...-_-;;
스마트폰도 MS의 익스플로어처럼 하나나 두세개의 해상도의 액정이 통일을 하는 날이 올까요? 설마겠지요...-_-;;
 |
|
찾아보니 관련도서가 한권이 있기는 하니 참고하시길 바라겠고, 멋진 반응형 웹사이트들 만드시길 바라겠습니다!