반응형 웹의 장단점

  반응형 웹이 등장하면서 웹사이트를 사용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고, PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도 됨에 따라 비용과 시간, 인력을 반으로 줄일 수 있게 되었습니다. 그러면 왜 반응형 웹으로 만들어야 하는지 구체적으로 알아보겠습니다.

 

반응형 웹 예시

왜 반응형 웹을 쓰는가?

유지보수 간편

  반응형 웹은 유지보수가 간편합니다. 모바일 버전과 데스크톱 버전 같은 두 개의 웹사이트를 만들게 되면 웹사이트에 새로운 내용을 추가하거나 수정할 때 모바일 버전과 데스크톱 버전을 개별적으로 수정해야 하므로 같은 내용의 작업을 반복해야 했기 때문에 손이 많이 가고 복잡합니다. 하지만 반응형 웹은 모바일 버전, 태블릿 버전, 데스크톱 버전 등 모든 디자인을 하나의 HTML 파일과 CSS파일에서 작업하기 때문에 유지보수가 쉽습니다.

 

모바일 점유율의 증가

  세계적으로 인터넷 보급률은 90%, 스마트 기기의 보급률은 70%를 넘습니다. 특히 대한민국은 스마트 기기 인터넷 보급률 및 사용률이 90%가 넘는 인터넷 강국입니다. 만약 스마트 기기 사용자가 버스 안에서 웹서핑을 하기 위해 사이트에서 검색을 한다고 가정해 보겠습니다. 그런데 검색사이트가 PC 웹사이트로 만들어져 글씨 크기들이 작게 보이고 검색 버튼이 작다면 어떨까요? 아마 사용자는 다른 검색사이트를 이용하거나 웹사이트를 닫아버릴 것입니다. 이처럼 모바일로 인터넷을 사용하는 것이 당연시된 상황에서 PC용 웹 이외에 모바일 전용, 혹은 반응형 웹으로 만드는 것이 기본입니다.

 

마케팅 유리

  요즘은 마케팅 활동의 최적의 장소로 웹이 빠지지 않습니다. 웹은 언제, 어디서든 스마트 기기로 쉽게 접근할 수 있기 때문에 다양한 마케팅 활동을 펼칠 수 있는 곳이기 때문이죠. 마케팅이 진행되는 사이트가 만약 데스트톱 버전으로만 제작되었을 경우 모바일 화면으로 접속하였을 때 화면이 작게 보여 원하는 내용을 전달하기 어려울 것입니다. 이때 반응형 웹을 이용하게 되면 모바일 버전과 데스크톱을 포함해 여러 가지 버전의 웹사이트를 만들지 않아도 되기 때문에 언제 어디서든 접근이 용이해야 하는 웹 마케팅에서 가장 효과적인 방법인 반응형 웹이라는 기술을 이용하여 웹사이트를 개발하는 것입니다.

 

검색엔진 최적화 가능

  자신의 웹사이트를 사람들에게 최대한 많이 알리고 싶다면 검색 엔진 최적화 작업을 해야 합니다.. 검색 엔진 최적화란 SEO(Search Engine Optimize)라고도 하며, 포털 사이트 또는 검색 사이트에서 사용자가 특정 키워드로 검색을 했을 때 나오는 웹사이트 검색 결과에서 상위권에 나타나도록 관리하는 작업을 말합니다.

  반응형 웹사이트와 검색엔진 최적화는 어떤 관계가 있을까요? 만약 모바일 버전과 데스크톱 버전 같은 두 가지 웹사이트가 있다면 주소도 다음처럼 두 가지로 나눠지게 됩니다.

모바일 웹사이트의 예	데스트톱 웹사이트 주소의 예
m.xxx.com	xxx.com

 

  이렇게 주소가 두 가지로 나눠지면 동일한 내용의 웹사이트라도 검색엔진이 판단할 때는 둘 중에 어떠한 주소의 정보가 정확한 정보인지 확인하기 힘들어 검색 결과에서 제외시킵니다. 따라서 검색 결과를 상위권에 배치하는 것이 상대적으로 불리해집니다. 특히 홍보나 마케팅을 목적으로 만들어진 웹사이트라면 검색 결과에 노출되지 않으면 치명적인 결과를 초래할 수도 있습니다. 그리고 주소가 2개이기 때문에 광고 비용도 2배 늘어갈 것입니다.

 

 

 

그렇다면 반드시 반응형 웹으로 개발해야 하는가?

  상황에 따라 모바일 웹처럼 적응형 웹을 만드는 것이 더 효율적일 수 도 있습니다. 기존의 웹사이트 또는 새로운 웹사이트를 무리하게 반응형 웹을 개편하기보다는 다음 사항을 고려하여 충분히 고민해본 후 자신의 상황에 맞게 개발하는 것이 좋습니다.

 

기획력과 디자인은 필수

  반응형 웹으로 제작할 때는 기기 혹은 환경마다 자연스럽게 변화할 수 있는 웹사이트 구조로 설계해야 합니다. 즉, 사용자 경험(UX)을 고려한 설계가 필수입니다. 반응형 웹은 기술만 좋다고 쉽게 완성되는 것이 아니라 기획력과 디자인을 완벽하게 갖추고 개발하여야 합니다. 그렇지 않다면 모바일 웹보다는 반응형 웹의 경우 디자인의 자유도가 떨어지게 되는데 이때 오히려 100% 맞춤 디자인한 모바일 웹이 유리할 수 있습니다.

 

기술적인 부분

  반응형 웹은 하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점을 가지지만, 사용자는 단 하나의 기기만으로 접속함에도 불구하고 모든 기기를 위한 CSS를 전부 다운로드해야 해 데이터를 낭비하고 로딩 시간이 늘어납니다.

 

비용 고려

반응형 웹으로 제작할 때 브라우저와의 호환성 문제가 발생되면 모바일 웹을 따로 제작하는 것보다 훨씬 많은 비용이 필요할 수도 있으며, 유지보수도 쉽지 않습니다.  모바일 웹이든 반응형 웹이든 개발비부터 유지보수비까지 꼼꼼히 따져보고 결정해야 합니다.

 

 

반응형 웹 VS 모바일 웹

	반응형 웹	모바일 웹
기기 감지	미디어 쿼리로 감지	서버 또는 브라우저에서 기기 감지
콘텐츠 최적화	모든 콘텐츠 다운로드	필요한 콘텐츠만 다운로드
기기 특성별 처리방법	하나의 템플릿이 기기에 상관없이 적용	기기마다 다른 템플릿 적용
로드 속도	느림	빠름
개발 / 배포	기존 사이트를 전면 리뉴얼하여 개발	기존 사이트 변경 없이 개발 가능하지만, 추가 비용 발생