2014.9.30에는 믹시 서비스하니 2014.9.15에 티스토리 블로그에 있던 믹시 위젯이 사라질 것이라 알고 있다. 이것에 대한 자세한 내용은 여기를 보기 바란다. 그리고 메타 블로그인 다음뷰도 이미 종료했다는 것을 알고 아래 글을 읽기 바란다.

이 글은


티스토리 블로그를 반응형으로 할 수 있어 그것에 대해 적어보려 합니다. 워드프레스 테마(스킨)에는 반응형 테마가 많아서 해보고 싶었거든요. 제가 반응형 웹사이트에 대해서 자세히 설명할 수 없지만 아는 한 적어보려 합니다. 이 페이지 글을 읽기 전에 아래 글을 읽으면 좋습니다.


반응형 블로거와 사이트 


반응형 웹사이트를 만들면 기기나 해상도에 상관없이 최적화된 화면을 보여주게 됩니다. 그러면 스마트폰으로 사이트에 접속하면 스마트폰에 맞게 화면의 레이아웃을 변화시켜 보여주게 됩니다. 예로 화면이 넓은 화면에서는 3단인데 스마트폰에서는 1단으로 사이드바가 있다면 감추어 보여주는 등 최적화하여 보여주게 됩니다.


저의 말하는 것 백번 들어도 이해하는 것 힘들다면 아래 사이트를 방문하여 반응형 웹사이트를 구경해 보세요. 아래는 국내의 반응형 웹사이트인데 http://troy.labs.daum.net/(트로이)에서 스마트폰,태블릿PC,PC에서 반응형 웹사이트가 어떻게 보여주는가 직접 눈으로 볼 수 있으니 보기  바랍니다. 반응형 웹사이트는 여러 기기 및 해상도에 따라 변하는 것이니 다양하게 봐야지 하나의 것으로만 본다면 무의미 합니다. 처음보는 사람은  반응형 웹사이트는 신기할 것이나 많이 보면 그저 그렇습니다. 


아래는 반응형 티스토리 블로그입니다. 티스토리 블로그는 자유로워 반응형 블로그를 만들 수 있습니다. 네이버나 다음 블로그는 반응형 블로그는 만들 수 없으니 만들려고 고생하지 마세요.  여담으로 마크쿼리님의 skeleton 스킨을 적용시킨 티스토리 반응형 블로그가 많아 소개하지 2014.1.20 이후에는 소개하지 않겠습니다. 참고로 첫 번째 4개의 블로그는 티스토리 블로그에 있는 기업 공식 블로그입니다.

위는 티스토리 블로그였고 아래는 더보기 안에는 국내 반응형 홈페이지입니다. 위는 대부분 개인 블로그이라 그렇게 멋있지 않은데 아래는 기업 홈페이지라 공을 들여서인지 아주 멋있습니다. 그렇다고 개인 블로그는 아래 홈페이지처럼 멋있게 못 만드는 것은 아닙니다.

참고로 위에 적은 사이트인 http://troy.labs.daum.net/(트로이)에서 지원하는 기기는 갤럭시(S,S2,S3,S4,노트1,2,3,탭)옵티머스(G,G 프로,뷰2,원),베가(넘버6,R3),아이폰(3GS,4,5),아이패드,PC에서 사이트를 볼 수 있습니다. 시간이 지나면 더 많은 기기를 지원할 것입니다. 이전 사이트는 국내사이트였지만 외국사이트는 http://responsivetest.net/가 있습니다. 국내사이트는 국내 스마트폰에 강하며 외국사이트는 정말 다양한 기기를 지원합니다.


반응형 스킨 내려받기


아래에서는 티스토리 블로그에서 반응형 웹에 대해서 설명합니다.


반응형 블로그나 사이트를 미리보기할 때 브라우저는 낮은 버전의 익스플로러8이하에서는 반응형 사이트나 블로그는 보이지 않습니다. 왜냐하면 익스플로러 8이하는 미디어쿼리를 지원하지 않기 때문입니다. 그러니 익스플로러 9이상이나 크롬,파이어폭스 등에서 보기 바랍니다. 여담으로 많은 티스토리에서 많은 반응형 블로그를 봤는데 아래 소개하는 스킨에서 마크쿼리님의 skeleton 스킨을 적용한 블로그가 가장 많았습니다.

우리나라 사람이 많이 사용하는 익스플로러 8이하에서는 반응형이 나타나지 않는다는 것을 알기 바랍니다. 스마트폰이나 태블릿PC에서 모든 브라우저는 반응형을 모두 지원합니다. 참고로 아래 사이트는 트로이라고 반응형 사이트를 제대로 나오는지 볼 수 있는 점검할 수 있는 사이트로 자신의 블로그도 반응형으로 제대로 나오는지 점검하기 바랍니다.


모바일웹 스킨 사용 설정 ON/OFF


아래 그림을 보듯이 2013.8.13일 이후로 티스토리 블로그의 모바일 페이지의 스킨을 ON/OFF 할 수 있습니다. 그러면 반응형 스킨을 사용한다면 모바일웹 스킨을 OFF하면 되겠네요. 전에는 무조건 티스토리에서 제공한 모바일웹 스킨을 사용해야 했거든요. 몇달전에 제가 티스토리 모바일 페이지를 보면 네이버 블로그가 생각난다고 한 적은 기억이 있습니다. 그만큼 모바일 페이지에서는 PC 페이지와는 다르게 많은 제약이 있었습니다.



기본 설정은 모바일웹 스킨은 ON으로 만약 자신의 블로그 스킨이 반응형 스킨이면 모바일웹 스킨을 OFF하는 것이 좋겠습니다. 현재 저의 블로그 스킨을 반응형 스킨이 아니므로 티스토리에서 제공한 모바일웹 스킨을 사용하기 위해서 ON으로 하고 있습니다. 반응형웹 이런 말을 모르겠다면 그냥 모바일웹 스킨 ON/OFF 설정을 만지지 말고 그냥 기본으로 두세요. 나중에 반응형 스킨을 사용하더라도 반드시 모바일 스킨을 OFF 할 필요없습니다.


티스토리 블로그의 모바일 페이지에도 PC 페이지처럼 위에서 설명한 것처럼 계속 많은 자유성이 추가되어야 하는데 말입니다.


 알아두어야 할 것


반응형 블로그는 좋지만 티에디션,테터데스크,믹스업 위젯 등이 반응형과 무관한 것이 많으므로 이런 것은 사용할 수 없다는 것을 알아야 합니다. 예로 아래는 믹스업 위젯인데 티스토리 블로그에 많이 달린 것을 보았을 것입니다. 아래 위젯은 반응형이 아니므로 자신의 블로그를 반응형으로 하려고 한다면 블로그에서 아래와 같은 위젯을 다는 것을 포기해야 합니다. 

위에서 언급했듯이 아래 믹시 위젯은 2014.9.15에 티스토리 블로그에서 사라질 것이다. 또한 9.30에 믹시 서비스도 종료할 것이다.



그런데 다행인 것은 티스토리 블로그에서 많이 사용하는 아래와 같은 다음뷰 추천 위젯은 반응형입니다. 스마트폰에서 본다면 가로로 돌려 폭을 넓게 보세요. 그러면 다음뷰 추천 위젯의 제목이 나올 것입니다. 아래 그림을 보듯이 화면폭이 좁으면 닉네임만 나옵니다. 개편전 것은 반응형이 아니니 개편후의 것은 사용하기를 권합니다.


마치면서 


1. XE(구 제로보드XE)가 처음 나왔을 때는 제로보드4에 비해스킨이 아주 적어 별로 였는데 이것은 시간이 해결해 주었습니다. 티스토리를 하는 사람은 실력자가 많으니 현재 반응형 스킨이 별로 없지만 이것은 시간이 해결해 줄 것이라 생각합니다. 참고로 네이버나 다음 블로그는 반응형 블로그로 할 수 없다는 것은 2014/05/20 - 블로그의 반응형 가능 여부를 보면 알 수 있습니다.


2. 오직 티스토리 블로그에 대한 반응형에 대해 언급한 글을 보고 싶다면 http://min-blog.tistory.com/category/티스토리 블로그/티스토리, 반응형을 보기 바랍니다.

'블로그/티스토리를 말하다' 관련된 글

  1. BlogIcon --/-- 2013.08.19 11:23 신고  댓글주소  수정/삭제  댓글쓰기

    사실 티스토리 모바일 스킨을 OFF 하고 스킨을 반응형으로 바꾸면 자기가 모바일 스킨을 완전히 컨트롤할수도 있는 건데 그렇게 하려면 CSS, HTML을 엄청 뜯어 고쳐야 해서 저같은 초보자한테는 힘든 것 같아요.ㅠㅠ

    PS. 리눅스 서버 설정 성공했습니다.

    • BlogIcon . 백전백승 2013.08.19 23:12 신고  댓글주소  수정/삭제

      새롭게 스킨을 만드는 것이라 말씀대로 초보자에게는 생각할 수 없는 대단히 어려운 작업일 것입니다. 배포하는 스킨을 설치하여 사용하는 것이 가장 쉬운데 배포하는 것이 많지 않아서 문제지만요.

  2. BlogIcon 둥이 아빠 2013.08.19 14:01 신고  댓글주소  수정/삭제  댓글쓰기

    저 같은 초보자도 한번 시도를 해봐야 알꺼 같아요.
    잘못 건들면 정말 큰일이 날꺼 같아요.

    • BlogIcon . 백전백승 2013.08.19 23:16 신고  댓글주소  수정/삭제

      그냥 기본설정 그대로 두면 안전할 것 같아요. 그래도 이것은 on/off 설정이라 다행이지만요. HTML/CSS를 손대는 것이라면 정말 난감한 것이거든요.
      PS.저도 다음에 스킨만들 때 반응형을 생각해 보려고요. 모바일에서 HTML/CSS를 다룰 수 있는 방법을 반응형 스킨을 사용하는 것밖에는 없을 것 같아서요.

  3. BlogIcon 경제맨 2013.08.21 15:39 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다~!

  4. BlogIcon 도플파란 2013.08.26 09:02 신고  댓글주소  수정/삭제  댓글쓰기

    저도 반응형 스킨으로 바꾸고 싶은데.. 쉽지 않더라구요...ㅎㅎㅎ

    • BlogIcon . 백전백승 2013.08.26 17:13 신고  댓글주소  수정/삭제

      내일 저의 다른 블로그인 http://learn7.tistory.com/를 반응형으로 만든 글을 발행할 것이니 관심있다면 보기 바랍니다. 지금 그 블로그를 봐도 됩니다. 반응형이니 멋집니다.

  5. BlogIcon 열매맺는나무 2013.12.30 20:46 신고  댓글주소  수정/삭제  댓글쓰기

    저도 마크쿼리님의 반응형 웹스킨을 사용중입니다. 티 에디션도 되고 추천단추(애드디스, 페이스북)사용하고 있습니다. 구글애드센는 모바일에서는 모바일용 애드센스만 보이게 해서 사용하고 있습니다.

    • BlogIcon . 백전백승 2013.12.30 21:08 신고  댓글주소  수정/삭제

      아래 1.2 번은 열매맺는 나무님의 궁금증을 해소해줄 것 같습니다.

      1. 마크쿼리님 반응형 웹스킨에 애드센스를 적용하는 방법이 나와있는 링크가 아래 있으니 아래 링크를 참고하세요.
      http://markquery.com/community/faq_skeleton/605

      2. 지금은 변한 것 같은데 한번 애드센스 광고 단위에서 '반응형 광고 단위(베타)'를 보세요. 예전에는 이 단위가 모바일에서는 무조건 모바일용 애드센스만 보였는데 요전에 변한 것 같더라고요. 아래 블로그에 본문 상단에 달린 것이 '반응형 애드센스'입니다.
      http://learn7.tistory.com/

      ps. 저보다는 아래 분은 마크쿼리님의 반응형 스킨을 사용하는 분이니 열매맺는 나무님의 궁금증을 해소해줄 것 같습니다.
      http://underclub.tistory.com/

  6. BlogIcon 스테레오로거 2014.01.08 07:26 신고  댓글주소  수정/삭제  댓글쓰기

    반응형 사이트를 많이들 쓰는군요. 반응형으로 되어 있는 사이트는 그냥 PC용 웹 브라우저에서도 창의 가로 길이를 슬쩍 줄여서 보면 태블릿용, 스마트폰용 규격으로 자동으로 변하는 게 정말 신기합니다. (사소한 단점이 있다면, 예전에 랩탑으로 다른 작업을 하면서 옆사람들 몰래 다음뷰에 발행한 최근글 제목들을 편집하려고 창을 작게 만들려고 시도한 적이 있는데, 사파리 브라우저 창 크기를 줄이니까 영락없이 모바일 화면으로 바뀌어 버려서 작업할 수 없었던 적이 있습니다 ㅋㅋㅋ)
    티스토리 반응형 스킨도 많이들 쓰고 있네요. 예시로 보여 주신 링크들을 아이폰으로 들어가 보니 일부는 초기 화면 가로 길이가 길게 되어 있어서 사진들이 잘려 보이는 블로그들도 있었습니다. 그 외에도 아직은 모바일에 아주 최적화된 반응형 사이트가 되지 못하고 단순히 PC화면을 찌그러뜨린 듯한 디자인으로 헤더와 푸터가 너무 두꺼워서 무거워 보이는 경우도 일부 있는 것 같습니다만, 아마도 앞으로 스킨 개발자분들이 디버깅과 업데이트를 많이 해 주시고 또 많은 분들이 반응형 스킨을 만들면 얼마든지 해결될 수 있는 것 같습니다. 아무튼 생각보다 티스토리 반응형 스킨을 많이 쓰고 계시다는 걸 확인했네요. 저는 신기할 따름입니다^^

    • BlogIcon . 백전백승 2014.01.08 08:36 신고  댓글주소  수정/삭제

      반응형의 장점을 생각해서 작은 화면에서 다음뷰에 송고한 글의 제목을 편집하고자 한다면 편집에 어려움이 있겠다는 생각을 못했네요. 저는 창을 줄이고 편집하지 않으니 어떤 것인지는 확실히 모르겠네요. 이런 것때문에 어떤 사람은 반응형 웹이 싫다는 사람들도 있는 것 같습니다.

      티스토리에도 반응형 블로그를 사용하는 사람이 많아요. 문제가 많은 사이트가 많아 소개하지 않았지만요. 티스토리 블로그에는 반응형을 지원하지 않는 위젯과 플러그인이 많아 제대로 된 반응형 블로그를 구현한 블로그를 찾기 힘들더라고요.

  7. BlogIcon Hansik's Drink 2014.01.08 13:45 신고  댓글주소  수정/삭제  댓글쓰기

    스킨 한 번 둘러봐야겠네요 ㅎㅎ
    덕분에 잘 알아 갑니다 ^^

  8. BlogIcon dachoigo 2014.01.08 14:41 신고  댓글주소  수정/삭제  댓글쓰기

    제 블로그가 반응형인거 아시는 분 별로 없을 텐데...
    소개를 해 주셨군요...감사합니다~~!!
    백전백승님도 여러가지로 테스트를 많이 하고 계시더군요.
    곧 멋진 작품을 볼 수 있을 거라 기대됩니다.
    오늘 하루 기분 좋은 시간되시길...

    • BlogIcon . 백전백승 2014.01.08 19:13 신고  댓글주소  수정/삭제

      팁공유닷컴 블로그처럼 다이나믹한 형태는 제가 좋아하는 것이것든요. 많이 다듬은다면 아주 멋진 반응형 블로그가 될 것 같습니다.

      예전에 부트스트랩에 미쳐서 Dachigo님의 블로그처럼 해보려 했는데 이제는 그만두었습니다. 힘들어 이제 블로그보다 글에 신경쓰려고 합니다.

  9. BlogIcon VJ HerO 2014.01.08 19:32 신고  댓글주소  수정/삭제  댓글쓰기

    글 잘 보았습니다. 궁금한 점이 있어서 질문좀 드려보려구요.
    저같은 경우는 티스토리 기본 모바일 스킨을 이용해도 반응형이 작동하지 않는 것이 있는데요.
    글 하나에 두개의 유투브 동영상을 링크 걸어도 하나는 먹히고 하나는 안먹히는 경우도 생긴답니다.
    http://music666.tistory.com/7677
    http://music666.tistory.com/m/7677
    티스토리 에디터 상의 문제 같기도 하고 같은 방식으로 같이 올리는데도 각각 다른 현상이 나타나니 원인을 찾을수 없어서 질문 드려 봅니다.

    • BlogIcon . 백전백승 2014.01.08 23:46 신고  댓글주소  수정/삭제

      에디터의 문제는 아닙니다.

      1. http://music666.tistory.com/7677에 있는 동영상은 style.css에 iframe { max-width:100%; } 을 추가하면 반응형이 됩니다.

      2. http://music666.tistory.com/m/7677에 있는 동영상은 PC에서는 반응형으로 안 보여도 모바일 기기에서는 반응형으로 보일 것 같습니다. 제가 전에 말했는지 모르지만 모바일 페이지를 PC에서도 볼 수 있지만 모바일에서 보는 것과 다르다는 것을요. 그러니 모바일 페이지의 동영상을 PC가 아닌 스마트폰이나 태블릿PC에서 보기 바랍니다. 그래도 PC에서도 반응형으로 보이고 싶다면 아래와 소스를 글에 넣으면 됩니다.
      <style>
      iframe { max-width:100%; }
      </style>

    • BlogIcon VJ HerO 2014.01.09 00:18 신고  댓글주소  수정/삭제

      다음에도 블로그가 있는데 그곳은 정확하게 다 되드라구요. 다음팟 영상이나 유투브 비메오 영상 등등.. 티스토리만 모바일쪽에서 못잡아 내는것 같습니다. 다음포스팅 부터는 width값을 100% 로 다 수정해 주어야 겠네요.
      빨리 모바일 css도 직접 수정할 수 있도록 해주었으면 좋겠네요. 답변 감사합니다.^^:

    • BlogIcon . 백전백승 2014.01.09 09:26 신고  댓글주소  수정/삭제

      다음 블로그쪽에서는 정확히 되는군요.
      모바일 페이지에서 PC 페이지처럼 HTML/CSS 편집을 허용했으면 하는데 아마 다음이 티스토리를 운영하는한 허용하지 않을 것 같다는 생각이 듭니다.

    • BlogIcon VJ HerO 2014.01.09 12:17 신고  댓글주소  수정/삭제

      네. 어제 포스팅에서부터 말씀하신데로 와이드값을 100%로 주고 포스팅 하고 있습니다. ifrime는 반응형으로 100% 되는데, 문제가 높이값 설정을 픽스로 해주어야 하는 문제가 있더라구요. auto나 100% 해주면 제값을 다 못읽어 옵니다. 좀 수고스럽긴 하지만 모바일로 보실분들을 위해 포스팅하는 사람들이 수고를 감수해야 할것 같습니다.

    • BlogIcon . 백전백승 2014.01.09 13:18 신고  댓글주소  수정/삭제

      다른 얘기인데 그 블로그는 페이스북 댓글창을 쓰던데 그것을 반응형으로 하는 것을 하는 소스는 아래와 같습니다. 아래의 소스를 style.css에 삽입하면 됩니다. 예전에 어떤 분이 반응형 블로그의 페이스북 댓글창도 반응형이 아니어서 아래처럼 했더니 됐습니다.

      /* 페이스북 댓글창 : 반응형 */
      .fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe { width: 100% !important; }

    • BlogIcon VJ HerO 2014.01.11 19:08 신고  댓글주소  수정/삭제

      앗! 늦게 글을 봤네요. 알려주셔서 감사합니다. 그리고 유투브 반응형 문제는 여기저기 찾아보다 답을 얻은게 있습니다. 구글블로거들이 사용하는건데 http://embedresponsively.com/ 이곳을 이용하여 소스를 한번 필터링하니 완전하게 반응형으로 작동하더군요. 다른분들에게도 도움이 되었으면 좋겠네요.

    • BlogIcon . 백전백승 2014.01.11 23:05 신고  댓글주소  수정/삭제

      제가 위에서 설명한대로 해도 되는데 어려웠군요.

      http://learn7.tistory.com/293
      http://learn7.tistory.com/m/293

  10. BlogIcon ☞ 이카루스 2015.02.05 16:48 신고  댓글주소  수정/삭제  댓글쓰기

    전 작년부터 반응형을 쓰고 있는데 개인적으로 만족하고 있습니다..
    어제 마크쿼리 업데이트 했는데 아직 정식버전은 아니라서.. 곧 정식버전이 나온다고 하네요..!!

    • BlogIcon . 백전백승 2015.02.05 20:08 신고  댓글주소  수정/삭제

      마크쿼리님의 스킨이 점점 좋아지는군요. 정식 버전은 멋지겠어요. 저도 익스플로러 8 이하 점유율이 낮아지고 모바일 접속이 높아지면 반응형으로 바꿀 생각이거든요.