요즘 떠오르는 반응형 웹이 어떤걸까요?

2013. 12. 3. 14:21
저자 : Kurien

모바일 웹과 반응형 웹의 차이점


요새 홈페이지를 반응형 웹으로 바꾸는 홈페이지들이 늘어나고 있는 추세입니다.

기본적으로 대부분의 대형 사이트들은 모바일 웹을 사용합니다.

티스토리 또한 http://kurien.tistory.com/m과 같은 형태로 모바일 웹을 제공하고 있습니다.


하지만 티스토리의 모바일 웹은 수정이 불가능하기 때문에 반응형 스킨을 통해 반응형 웹으로 바꾸는 분들이 많아졌죠.

티스토리 뿐만 아니라, 모든 웹 사이트들이 어떤 해상도에서든지 읽기 편하게 끔 반응형 웹으로 바꾸고 있습니다.

저도 반응형 웹으로 바꿔봤는데요, 반응형 웹이 어떤건지 모르시는 분들도 계실꺼에요.

그런분들을 위해 설명을 해드리겠습니다.


모바일 웹과 반응형 웹이란?


1. 기존의 웹 페이지

기존에 있던 웹 페이지들은 데스크탑의 해상도에 맞춰 대부분의 사이트가 1024*768 이상의 해상도에서만 읽기 편하게 끔 만들어 졌었죠.

예)Naver, Daum



예전에는 지금처럼 다양한 해상도가 있지 않았고, 있더라도 적은 수였죠.

스마트폰으로 인터넷을 이렇게 편하게 사용할 줄은 몰랐으니까요.


2. 모바일 웹

스마트폰 인구가 증가하고, 스마트폰 이용자가 많아지면서 데스크탑과 맞먹을 정도로 스마트폰으로 인터넷을 이용하는 사람이 늘어나게 됩니다.

그에 따라서 웹 시장도 자연히 스마트폰에 맞춘 웹 사이트들이 생기게 되죠.


처음에는 주로 리디렉션(다른 사이트로 연결하는 것)을 사용해서 모바일 버전으로 따로 만든 사이트로 연결했습니다.

예) m.naver.com, m.daum.net



이런 모바일 웹도 반응형의 일부이긴 합니다.

하지만 PC에서 사용하기에는 너무 단조로운 감이 없지않아 있고, 적은 해상도에서 주로 사용하기 위해 만들어졌죠.



모든 해상도에서 사용하기 위해 나오게 된것이 바로 반응형 웹입니다.


3. 반응형 웹


반응형 웹은 하나의 사이트를 해상도의 크기에 맞게 자유자재로 변형되는 웹입니다.

예) Kurien's Blog, 다음 뷰



제 블로그를 들어오신 분이라면 어떤게 다른가 싶으신 분들도 있겠지만,

한번 웹 브라우저를 작게 만들어 보시기바랍니다.

뭔가 달라지진 않나요?


제 티스토리 블로그는 반응형 스킨을 사용한 반응형 웹이기 때문에, 사용자의 해상도에 맞춤 제공을 합니다.

휴대폰으로 들어가더라도 휴대폰의 해상도에 맞춰 페이지를 출력하는거죠.


물론 모바일 웹에 비해 반응형 웹이 만들기는 더 까다로운듯 합니다.


반응형 웹의 장점


그럼 이 반응형 웹의 장점은 무엇인가 싶은 분들이 계실텐데요.

먼저 티스토리에 한해서 말씀드리자면, 애드센스 광고의 경우 CPM이란게 있는데 페이지뷰 당 적지만 수익금이 있는 광고가 있습니다.

반응형 웹이 아닐때는 글 내용에 직접 이 스킨을 넣지 않으면 2개까지 밖에 표시를 못하지만,

반응형 웹일 경우엔 원하는 위치에 수정이 가능하기 때문에 3개까지도 가능합니다.

수익금이 조금이지만 더 늘어나게 되는거죠.


그리고 데스크탑으로 보던지 모바일로 보던지 비슷하게 나오니 접근성도 더 쉽구요.

모바일 웹을 수정 하지 못하는 티스토리의 경우 현재로써는 이 반응형 웹이 다른 블로그와 차별화를 줄 수 있는 방법일 것 같네요.

게다가 어떤 기기를 사용하든 비슷한 환경을 제공해 줌으로써 어느 기기에서든 더욱 쉽게 접근 할 수 있는 방법 인 것 같아요.

현재 티스토리 스킨 중 현재 배포하고 있는 반응형 스킨은 Skeleton 스킨 뿐인 것 같네요.


다른 웹 사이트의 경우는 일단 어느 해상도로 들어오든 폼이 비슷하기 때문에 사용자가 거부감 없이 접속할 수 있습니다.

그리고 한 사이트이기 때문에 사이트 트래픽이나, 이용자 통계를 쉽게 관리할 수 있죠.

또, 하나의 컨텐츠로 관리하기 때문에 관리가 편하고 하나의 주소이기 때문에 검색엔진 최적화도 쉽게 할 수 있죠.

이러한 장점들이 있습니다.


반응형 웹의 단점

단점으로는 먼저 IE8 이하에서는 정상 작동이 되지 않습니다.

물론 평범한 웹 사이트처럼 보이게 하는 방법은 있으니 크게 걱정은 안하셔도 됩니다..


또 하나는 다른 웹에 비해 설정하기가 복잡합니다. 해상도별로 크기등을 변경 시켜야 하므로 복잡해지죠.

물론 반응형 웹이 정답이라고 말하기는 힘듭니다.

여러가지 웹들의 장, 단점을 이용해서 자신의 웹에 맞는 디자인이 정답이겠죠?


모자란 지식으로 여기까지 썼는데요.

혹시 더 궁금하거나, 덧붙일 내용 등이 있다면 댓글 남겨주시면 감사하겠습니다^^

읽어주셔서 감사합니다!