모바일 웹과 반응형 웹 비교

2014년 9월 기준, 국내 스마트폰 보급률이 이미84%에 이르렀다고 합니다. 스마트폰 이용 시간도 일 평균 3시간 44분이나 된다고 하는데요. 이처럼 스마트폰이나 태블릿PC와 같은 모바일 기기의 사용이 확산됨에 따라, 모바일 환경에서 보기 편한 웹사이트를 구축하는 것은 기업의 주요 업무 중 하나가 되었습니다.

모바일 환경에서 볼 수 있는 웹사이트는 크게 모바일 웹과 반응형 웹 이렇게 두 가지 방법이 있는데요. 클라이언트 여러분의 현재 상황에 맞는 방법이 어떤 것인지 잘 모르시겠다고요?

오늘은 모바일 웹과 반응형 웹에 대한 간단한 정리와 여러분의 상황에서는 어떤 방법을 이용하는 것이 효율적인지에 대해 설명해드리도록 하겠습니다.

먼저 모바일 웹과 반응형 웹이 어떤 것인지에 대해 알아봐야겠지요? 간단히 설명해드리겠습니다.

모바일 웹(Mobile Web)이란?

데스크톱 PC용 웹사이트와 별개로 모바일 브라우저에서 이용자들이 편하게 이용할 수 있도록PC용 웹사이트를 모바일 스크린 크기에 맞춰 줄여 놓은 것을 뜻합니다. 주로 원래 PC용 웹사이트가 존재하던 상태에서 모바일용 웹사이트의 필요성을 느끼고 추가로 개발하는 경우가 많은데요.

예를 들면, 네이버나 다음과 같은 포털 사이트를 스마트폰으로 접속하면 URL 주소가 m.naver.com 혹은m.daum.net 라고 표시되는 것을 확인하셨나요? 이것이 바로 모바일 웹입니다. 즉, 같은 사이트인데 PC용 웹사이트와 모바일용 웹사이트, 이렇게 다른 두 가지 버전의 웹사이트가 존재하는 것이지요. 그렇기 때문에 같은 컨텐츠를 담고 있는 웹사이트이지만, 두 가지의 URL을 갖게 됩니다.

(네이버가 데스크탑용 URL인 www.naver.com 와 모바일용 URL인m.naver.com, 이렇게 두 가지를 갖고 있는 것처럼 말이지요.)

[이미지1: 네이버의 데스크탑용 웹사이트와 모바일 웹의 화면 비교]

반응형 웹(Responsive Web)이란?

한 가지의 웹사이트로 다양한 종류의 기기에 최적화된 화면을 보여주는 것을 뜻합니다. 반응형 웹은 동작하는 기기의 화면과 해상도에 맞춰 저절로 반응하여 변합니다. 모바일 웹이 PC버전의 홈페이지와 모바일 홈페이지를 따로 제작하는 것이라면, 반응형 웹은 하나의 홈페이지를 구축하면  데스크탑, 태블릿, 그리고 모바일에서도 최적화된 화면으로 볼 수 있다는 것이지요.

위시켓 블로그를 예시로 들어보겠습니다.
위시켓 블로그를 PC로 접속할 때와 태블릿 PC나 모바일로 접속할 때, 각각 다른 화면으로 저절로 변하여 뜨는 것을 확인할 수 있습니다.

[이미지2: 반응형 웹인 위시켓 블로그의 데스크탑, 태블릿, 모바일에서의 화면 비교]

위시켓 블로그는 워드프레스로 제작되었는데요.
워드프레스 테마 중에‘Responsive(반응형)’이라고 적혀 있는 테마를 구입하면, 쉽게 반응형 웹을 구축할 수 있습니다.

반응형 웹은 다양한 기기에서 이용하는 웹사이트를 하나로 운영할 수 있기 때문에 관리하기 편하고, 제작 및 관리비가 저렴합니다. 또한 모바일 웹과 달리, 하나의 URL을 사용하기 때문에 검색과 노출에 용이하지요.

이렇게 설명해드리면, 모든 웹사이트를 반응형 웹으로 구축하는 것이 좋을 것 같지만, 그렇지 않습니다.

반응형 웹도 단점이 존재합니다

먼저 하나의 화면에 많은 컨텐츠를 표현해야 할 때에는 적합하지 않습니다. 예를 들어, 네이버와 같은 대형 포털 사이트나 인터넷 쇼핑몰처럼 한 화면에 많은 컨텐츠를 보여줘야 하는 사이트를 반응형 웹으로 구축하면, 개발하기도 복잡하고 한 번에 많은 양의 컨텐츠를 불러와야 하기 때문에 로딩 속도도 느려지는 단점이 있습니다.

그렇기 때문에 반응형 웹은 작은 규모의 사이트를 만들 때 더 효율적입니다. 커뮤니티나 회사소개 페이지, 블로그 등 방문자에게 보여지는 컨텐츠의 형태가 일정한 웹사이트에 적합한 것이지요. 또한 반응형 웹은 일반 사이트에 비해 처음 잡았던 레이아웃과 컨셉을 바꾸는 것이 상당히 어렵습니다. 반응형 웹에 적합한 사이트와 그렇지 않은 사이트를 이렇게 나눠볼 수 있겠네요.

[표1: 반응형 웹이 적합한 사이트와 그렇지 않은 사이트 비교]

이와 더불어, 여러분이 이미 데스크탑 PC용 웹사이트를 보유하고 있는지의 여부에 따라서도 달라질 수 있습니다.

---

Q. 데스크탑용 웹사이트를 이미 보유하고 있는데, 모바일용 웹사이트를 추가적으로 개발하고 싶습니다.

---

이런 경우에는 모바일 웹을 개발하는 것이 훨씬 이득입니다. 위에서도 설명해드렸다시피, 이미 존재하는 웹사이트를 반응형으로 만드는 것은 상당히 복잡한 일입니다. 반응형으로 다시 만든다면, 모바일 웹을 하나 더 구축하는 것보다 오히려 기간이나 비용 측면에서 손해를 볼 수도 있습니다.

---

Q. 데스크탑용 웹사이트와 모바일용 웹사이트를 모두 개발하고 싶습니다.

---

이 상황에서는 반응형 웹을 구축하는 것이 효율적입니다. 데스크탑 용/모바일 용 웹사이트 두 가지를 개발하는 것보다 당연히 반응형 웹사이트 한 가지를 개발하여 모든 기기를 커버하는 것이 비용적인 측면에서 훨씬 저렴하겠지요?

하지만, 고려해야 할 사항이 있습니다. 위에서 설명해드렸던 것처럼 반응형 웹이 적합한 형태의 웹사이트와 적합하지 않은 웹사이트가 분명히 존재합니다. 여러분이 원하는 웹사이트의 형태가 어떤지 고려하여 정하셔야 합니다. 웹사이트를 만드는 본질적인 이유는 기술이나 개발 비용의 문제가 아닌, 여러분의 웹사이트를 방문자가 얼마나 편하게 이용하느냐의 문제이니까요.

지금까지 모바일 웹과 반응형 웹이 무엇인지, 그리고 상황 별로 어떠한 방법이 효율적인지에 대해 알아봤습니다. 여러분이 프로젝트를 맡기면서 가장 중요하게 여겨야 할 점은 여러분이 제공하는 서비스에 맞춰진 방법으로 웹사이트를 구현하는 것이라고 말씀 드리고 싶네요. 2015년 웹 디자인의 트렌드 중 하나가 ‘반응형 웹’이라고는 하지만, 그렇다고 해서 무조건 반응형 웹만을 고집하는 것은 현명하지 못한 선택입니다. 웹사이트를 이용하는 것은 여러분의 고객이기 때문에 꼭 여러분의 서비스에 대해 먼저 깊이 생각해보시길 권합니다.

어떠한 방법이 사용자가 더 만족하는 서비스와 컨텐츠를 제공하는 데에 효과적일지 고려한 다음, 최선의 선택을 하여 클라이언트여러분과 사용자 모두가 만족하는 결과물을 얻길 바라겠습니다!

---

‘모바일 웹과 반응형 웹 비교’와 관련된 인기글

 – Q. 웹사이트 템플릿 이란?

 – 웹사이트 전환율 높이는 4가지 방법

 – 가장 쉬운 쇼핑몰 개발 방법! 워드프레스가 답이다

---