티스토리에서 반응형이 안 되는 것

예전 습관이 나와 이 글 제목을 낚시 제목을 써서 반응형 웹에 대한 단점이라는 문구를 제외했다. 여기에서 반응형 웹에 단점을 말하고 있으니 거기를 참조하기 바란다. 

티스토리에서 반응형 블로그를 만드는 것은 2013/08/18 - [반응형 웹 1] 반응형 티스토리 만들기 : 스킨 내려받기 등을 보기 바란다. 그런데 블로그를 반응형으로 만드는 것만큼 티스토리 블로그에서 반응형으로 안되는 것에 대해 아는 것은 상당히 중요하다고 생각한다. 고생해서 반응형으로 만들었는데 특정 위젯이나 플러그인이 반응형이 안 된다면 상당히 골치 아프다. 그러니 반응형으로 안 되는 것을 확실히 알기 바란다. 

블로그를 방문한 사람은  반응형 블로그라면 모든 것이 기기나 해상도에서 최적화된다는 것으로 안 것이다. 그러니 스마트폰에서 블로그를 본다면 스마트폰에 최적화돼야 될 것인데 아래에서 설명할  애드센스,믹시업 위젯,티에디션이 최적화안되면 누가 반응형 블로그로 볼까.  아마 자신만이 반응형 스킨을 적용시켰으니 반응형 블로그가 착각하고 있는지 모를 것이다. 나는 그 블로그를 반응형 블로그라 보지 않는다. 자신이 반응형 블로그에 대한 이해가 부족하다면 아래 글을 읽기 바란다.

• 2013/10/18 - 반응형 블로그(티스토리)에 대한 이해

그럼 아래에서 반응형이 안되는 것에 대해 알아보겠다. 여기에서 말할 것은 티스토리 블로그에 대한 것으로 일반 홈페이지에 대한 것이 아니다.

다음뷰 추천 위젯을 제외한 추천위젯

위와 다음뷰 추천 위젯을 제외한 모든 위젯은 모두 반응형이 아니라고 보면 된다. 예로 이 글을 스마트폰에서 보고 있다면 가로로 돌리면 가로 크기가 늘어나 위에 보는 추천 위젯이 변할 것이다. 그러나 아래는 그림의 추천 위젯은 변하지 않는다. 아래는 변할 것인데 그림이므로 변하는 것이다. 그림이 아니면 변하지 않는다. 왜냐하면 반응형 추천 위젯이 아니니까. 위 추천 위젯은 그림이 아니고 위와 같은 것이 아니면 반응형이 아니다. 위와 같이 플래시를 버리고 모바일에 맞게 작년에 변경됐다. 

참고로 위 추천 위젯은 믹스업 추천 위젯이다. 티스토리 블로그에서 많이 봤을 것이다. 티스토리 블로그에 믹시에 글을 보내면 자동으로 달리는 위젯인데 나는 믹시에 글을 보내지 않는다. 왜냐하면 믹시에 보낼 이유가 없기 때문이다. 혹시 믹시로 부터 유입이 없어도 이야기를 하고 싶다면 그만두기 바란다. 나는 믹시 유입을 바라지도 않는다. 내 블로그에서 믹시 유입은 얼마되지도 않는다. 남들이 한다고 무작정 따라하지 말자. 내가 블로그 초반에 아무 이유없이 모든 것을 따라했다.

티에디션과 태터테스크

티스토리 블로그에서 첫화면을 만드는 티에디션을 비반응형이라는 것을 알았으면 한다. 티에디션은 비반응형이므로 반응형 스킨을 적용하더라도 비반응형이라는 것을 알기 바란다. 반응형 스킨중에서 마크쿼리님의 skeleton 스킨은 아래 그림처럼 티에디션의 헤더라인형과 조합형만 빼고 반응형이 된다는 것을 알기 바란다. 그 스킨은 CSS 설정에서 티에디션의 일부분을 반응형이 되게 했다.

• 내려받기, 설치 : http://jaebok.tistory.com/80

그리고 티에디션말고 첫 화면을 만드는 또 다른 플러그인인 태터테스트는 부트스트랩 등 다른 스크립트와 충돌해서 골치가 아프다. 태터테스크는 반응형이므로 티스토리 블로그에서 티에디션말고 태터테스크로 첫 화면을 생각한다면 생각해보기 바란다. 아마 스크립트 충돌로 골치아플 것 같다.

애드센스

대부분의 티스토리 블로그에는 애드센스를 달 것인데 애드센스도 반응형이 아니면 변하지 않는다. 이 블로그 상단 두 개 애드센스는 반응형이 아니어서 모바일에서는 변하지 않는다는 것을 알아야 한다. 

그래서 CSS로 반응형이 되게 할 수 있는데 그것은 어렵다. 가장 쉬운 방법은 아래 그림에 보듯이 애드센스에 반응형 애드센스 단위가 있으니 만들어 사용하기 바란다.

반응형 스킨을 사용한다면 애드센스는 반응형으로 하지 않거나 일반 블로그에서 한 것처럼 한다면 100% 구글 애드센스측으로 부터 경고를 받는다는 것을 알았으면 한다. 반응형 블로그를 사용한다면 아래 사이트에서 자신의 블로그가 스마트폰이나 태블릿에서 어떻게 보이는가 보기 바란다.

• http://troy.labs.daum.net/(한글사이트 - 국내 스마트폰에 강함 )
• http://responsivetest.net/(외국사이트 - 다양한 모바일기기)

반응형 스킨에서는 애드센스가 콘텐츠를 가리는 레이아웃이 되니 아무 생각없이 애드센스를 달면 안 된다. 그러니 반드시 위 사이트에서 반응형 블로그는 스마트폰에서 자신의 블로그가 어떻게 보이는지 보기 바란다. 티스토리는 광고가 콘텐츠를 가리는 것을 싫어한다.

맺으면서 

위에서 티스토리 블로그에서 반응형이 안 되는 것에 대해서 알아보았다. 마지막으로 사람들이 말하는 반응형 웹사이트의 단점을 알아보면서 맺고자 한다. 아래는 반응형 웹사이트의 두 가지 단점이라 하는데 1번은 충분히 이해가 되는데 2번은 그런가 보다 한다. 아래 단점 2가지에 대해서는 여기에서 보았다.

1.  미디어쿼리를 지원하지 않는 브라우저 : 반응형 웹이 가지는 가장 큰 단점은 미디어쿼리를 지원하지 않는 브라우저가 국내에 아직 많다는 것이다. 인터넷 익스플로러 8 이하 버전에선 미디어 쿼리를 적용할 수가 없어 국내 PC환경에서 사용하기에는 어려움이 있다. 단, 모바일 디바이스들은 미디어 쿼리를 전부 지원하고 있다. 국내에는 스마트기기 사용량이 많아서 PC보다는 모바일 디바이스용 컨텐츠를 만들면 더 좋은 결과를 얻을 수가 있다. 

최근 30일간 이 블로그의 브라우저 버전을 보면 아래와 같다. 익스플로러7,8이 1,2위고 점유율 51.36%이다. 참고로 아래는 이 블로그에 구글 애널리틱스라는 무료 통계 프로그램을 설치해서 본 것이다. 사이트를 방문하는 한국 사람의 브라우저 사용점유율은 익스플로러8이하가 많다는 것을 알아야 한다. 한국과 외국은 다르다는 것을 알았으면 한다.

2. 필요없는 코드 ,이미지의 비합리적인 사용 : 반응형 웹을 개발할 때에는, 각 해상도에 맞게 컨텐츠들의 모양이나 크기가 변환하게 된다. PC버전에서는 보일지 몰라도, 모바일버전으로 가면 안 보이게 하거나, Flexible Images 기법을 사용하기 때문에 필요보다 더 큰 이미지를 불러와 불필요한 데이터를 로드할 수도 있다. 또한, 이미지가 자동으로 리사이징 되는 것은 CPU의 사용량을 증가시켜 부담을 줄 수 있다. - 이것에 대해서는 할 말이 없다. 나도 그런가 한다.

여러가지가 걸린다면 이 블로그처럼 그냥 반응형이 아닌 일반 블로그처럼 하기 바란다. 이유를 따지지 않고 좋다면 남들을 따라하는 것은 아니라고 생각한다.