[반응형 웹 2] 반응형 블로그를 위해 한 것

티스토리는 블로그에 모바일웹 스킨 설정이 추가되어 티스토리 블로그도 반응형 블로그를 만들 수 있게 되었습니다. 그래서 http://learn7.tistory.com를 공개된 반응형 스킨을 사용하여 반응형 블로그로 만들었습니다. 그 블로그에서 반응형 블로그를 만들면서 한 것과 나중에 해 볼 것에 대해 적고자 합니다.

반응형 블로그를 만드는데 한 것 - 티스토리에서

스킨 다운로드와 설치 : 반응형 블로그를 위해 한 것은 현재까지 많지 않습니다. http://learn7.tistory.com를 예전에는 반응형 스킨이 아닌 One Room 스킨을 사용했으나 얼마전에는 여기에서 받은 반응형 스킨으로 반응형으로 만들었습니다. 아래 스킨설치하는 방법을 설명했으니 모르면 보기 바랍니다. 그 블로그를 스마트폰,태블릿PC,PC 등 어떤 기기로 접속하든 최적화된 화면을 보여줄 것입니다.

• 2013/01/18 - 스킨설치하기,jQuery 플러그인 bxslider와 동영상으로 설명 - 티스토리
• 스킨 다운로드 : http://www.tistory.com/forum/viewtopic.php?id=6975

모바일웹 스킨 설정 OFF : 블로그에 반응형 스킨을 적용했으니 모바일웹 스킨을 ON 하면 스마트폰으로 블로그에 접속하면 강제로 모바일 페이지로 접속하면서 모바일웹 스킨을 적용합니다. 그러므로 이것을 방지하기 위해서 아래 그림처럼 모바일웹 스킨 설정을 OFF로 했습니다.

반응형 애드센스 적용 : 여기 상단처럼 보이는 애드센스를 반응형이 아니므로 안 되므로 저는 애드센스에서 반응형을 애드센스를 만들었습니다. 블로그에 애드센스를 설치하는 것만 알면 반응형 애드센스를 설치하는 것은 간단합니다. 애드센스에 반응형이 들어가는 것뿐이니 겁낼 것 없습니다. 반응형 애드센스는 말그대로 애드센스가 기기에 따라 크기가 변합니다. PC(컴퓨터)에서는 폭이 728인 애드센스이고 스마트폰에서는 320인 것으로 유동적으로 나옵니다.

이 페이지 위에 있는 것은 일반적인 애드센스이고 아래는 반응형 애드센스이므로 브라우저폭을 500보다 작게 해서 새로고침하면 다른 크기의 애드센스가 나타납니다. 또는 이 페이지를 스마트폰이나 태블릿PC로 본다면 아래의 애드센스가 다른 크기로 나타납니다. PC에서는 728*90 크기거든요.

반응형 스킨을 만들다 알았는데 부트스트랩과 태터데스크 플러그인은 충돌했습니다. 그것을 감안해 아래 글을 읽기 바랍니다. PURE 등은 어떤지 모르겠습니다.

태터데스크 적용과 해지 : 티스토리 블로그에는 첫페이지를 만드는 도구에는 티에디션과 태터데스크가 있습니다. 이중 티에디션인 경우는 좋은데 반응형인 경우는 적절하지 않습니다. 이 블로그의 첫페이지는 티에디션으로 만들었습니다. 그런데 얼마전에 알았는데 아래 그림에 나온 플러그인인 태터데스크인 경우는 반응형일 때 아주 적당하더라고요. 티에디션이 기능이 좋아 태터데스크 플러그인은 필요가 없을 줄 알았습니다. 그러나 반응형 블로그의 첫페이지를 만들 경우 티에디션보다 테터데스크가 좋더라고요. 

마치면서

현재 티스토리 블로그를 반응형으로 만드는 것은 생소하니 블로그를 업데이트하면서 여러가지를 반응형으로 만들 생각입니다. 이 블로그를 반응형 스킨을 적용하기에는 어려운데 그 이유는 아래에서 알 수 있을 것입니다. 반응형 블로그는 http://learn7.tistory.com/에서 만들고자 합니다. 

• 2013/05/16 - 티스토리를 할 사람에게 하고 싶은 말 2, 스킨변경도 어렵다

한가지 알았으면 하는 것은 반응형이 항상 좋은 것만이 아니라는 것을 알았으면 합니다. 상당한 제약이 있습니다. 간단한 예로 아래 그림의 광고크기에서 반응형 블로그에서는 반응형 광고 단위(베타) 등 일부만 사용할 수 있다는 것입니다.

또 다른 예로 위에서 말했듯이 기능이 아주 좋은 티에디션을 반응형 블로그에서는 사용하지 못했잖아요. 저에게 티에디션과 태터데스크중 하나를 고르라고 한다면 반응형만 아니면 티에디션을 고르겠습니다. 왜냐하면, 티에디션이 태터테스크보다 훨씬 나으니까요.반응형티스 토 리

무료재무 상담

BY 스마트리치