티스토리 반응형 스킨

티스토리 반응형 스킨 추천 

 

왜 반응형 스킨을 써야 하는가?

 

  티스토리 블로그를 찾아오는 방문객중 대다수 인터넷 웹브라우저 보다도 모바일을 통해서 오는 경우가 점점 늘어나고 있습니다. 포토가이드닷컴도 역시 모바일 점유율이 훨씬 높습니다. 블로그를 찾아 오는 방문객에 대해 네이버 애널리틱스 분석을 보아도 이제는 모바일이 대세입니다. 그래서 모바일 환경을 고려한 티스토리 블로그 스킨을 사용하는 것을 반드시 고려해 볼 때가 온것 입니다.

 

 

 

  티스토리 블로그 스킨을 사용하는데 있어 무엇보다 중요한 것은 편리한 유저 인터페이스와 기능, 그리고 깔끔한 디자인이다. 최근들어 티스토리 블로그가 이미 반응형 스킨으로 많이 바뀌어 가는 추세인데 막상 스킨을 바꾸려면 무엇을 선택할지도 고민이 될 것이다. 그런데 반응형 스킨이 좋다고는 하지만 정작 본인이 쓰는 블로그에 어울리는 스타일의 스킨은 어떤 것일지도 막상 정하기 어렵습니다.

 

  티스토리 블로그를 반응형 스킨으로 바꾸려면, 선택하기기 전에 많은 고민을 해야 합니다. 사진을 많이 올리고 이미지를 깔끔하게 보여지려면 마크쿼리님의 스켈레톤(Skeleton) 스킨 또는 Readiz님의 패스트 부트(Fast Boot)반응형 스킨이 좋을 것 같습니다. 최근 유행하는 티스토리 블로그 반응형 스킨은 크게 2가지로 추천할 수 있을 것 같습니다. 처음 반응형 스킨으로 선풍을 이끌었던 마크쿼리님의 스켈레톤 스킨, 그리고 새로운 스타일로 선보인 Readiz님의 Fast Boot 스킨입니다. 이외에도 유료로 쓸수있는 JB all in One 스킨과 Windup Simple 스킨도 있습니다.

 

  전반적으로 볼 때, 티스토리 블로그 반응형 스킨중 어느 것이 제일 좋다고 하기는 어렵지만 개인적 느낌으로는 계속 업그레이드 되는 마크쿼리님의 스켈레톤 스킨이 디자인으로나 기능상으로나 좋은 느낌이 듭니다. 그래서 현재 포토가이드닷컴의 블로그도 마크쿼리님의 스켈레톤 스킨을 사용중이기도 합니다. 이어서 Readiz님의 Fast Boot 스킨도 속도도 좋고 화면의 인터페이스도 깔끔하고, 유저의 다양한 요구를 잘 수렴해나가려는 모습도 좋아보입니다.

 

 

각 반응형 스킨의 장단점

 

마크쿼리님의 스켈레톤 스킨

 

 

 

  마크쿼리님의 스켈레톤(Skeleton) 스킨은 초기화면 화면 깔끔한 느낌이 들고 군더더기 없이 보여지는 스타일입니다. 그리고 본인이 꾸미기 나름이지만 화이트 바탕에 심플한 느낌으로 블로그를 운영할 수 있습니다. 상단네비가 고정되어 안정적으로 보이며 ie브라우저 지원에 있어 별 문제가 없어 보이며 지속적인 업데이트로 많은 블로거들도 선택하시는 스킨이라 하겠습니다. 또한 스켈레톤 스킨은 너비가 일정한 Spider’s Web과 넓은 Doo Be Doo 두 가지 유형중 선택할 수 있습니다. Spider’s Web은 검정색과 흰색을 바탕으로 두고 다른 컬러도 잘 어울릴 수 있는 디자인이 특징인 반면 Doo Be Doo는 풀 스크린식으로 화면 가득하게 블로그를 만들수 있습니다. 사진을 많이 올리는 포토블로그에도 유용한 스킨이라 할 수 있습니다.

http://markquery.com/download/

 

 

 

Rediz님의 Fast Boot 스킨

 

 

  Readiz님의 패스트부트 스킨은 반응형 스킨답게 모바일 지원에 강점이 있습니다. 모바일에서 시원하고 한 눈에 정리가 잘 된 화면으로 보입니다. 그런데 이 스킨을 설치를 하면 티에디션 없는 Flipboard 스타일의 메인화면이 처음에는 어색하기도 하지만 막상 테스트해보면 쓸만한 느낌이 들 정도로 간결한 화면을 보여줍니다. 그리고 또한 로딩 속도도 빠른 편으로 느껴지기에 반응형 웹 스킨으로 매우 좋은 느낌이 들기도 합니다.

http://blog.readiz.com/214#.U5QhSk2KCUk

 

 

CMSFactory.NET님의 JB All In One 스킨 

 

 

  단순한 스타일로 복잡하지 않게 티스토리 블로그를 꾸민다면  JB all in One 반응형 스킨도 있습니다. 웹브라우저 가로폭에 따라 레이아웃이 변하는 반응형 웹 디자인을 적용했으며 Bootstrap을 기반으로 만들었다고 합니다. 또한 티에디션을 사용하지 않아도 첫화면, 검색 결과 등에서 글 목록이 요약글로 나오도록 만들었는데 스킨 옵션에서 사용 여부를 정할 수 있다고 합니다. 그리고, 슬라이더 기능을 포함되었습니다. JB All In one Version 0.5 이상은 유료 스킨으로 사용을 원하시면 구입하여야 하는데 무료로 사용하고 싶으시다면 0.4 이하 버전을 다운로드 받으면 된다고 합니다.

http://www.cmsfactory.net/node/10661

 

 

Windup.BEintous.NET님의 Windup Simple 스킨

 

Windup Simple Skin 의 특징은 빠른 속도를 가지기 위해 가변형의 형태를 기본으로 하고, 모바일 기기에서 보여주기 위해 미디어 쿼리를 1회 적용해 만들어 졌습니다.
http://windup.beintous.net/31

 

 

 

 

이미지 맵

Story/Just So Stories 다른 글

댓글 14

    • 운영자님. 안녕하세요. 반응형 스킨에 관심을 갖고서 운영자님의 블로그가 너무 예쁘고 제 맘에 쏙 들어서 질문 드려 봅니다.
      저도 마크쿼리님 스킨을 쓰려고 하는데요. 한번 적용을 해봤더니 이 스킨의 애로사항이 '맑은 고딕'이 아닌 '나눔 고딕'이
      기본 폰트라는 점인데.. 저는 폰트를 웹 폰트로 끌어오는 게 아니라 사용자에게 기본적으로 깔려있는 폰트가 그대로 보이게 하고 싶거든요.

      그런데 맑은 고딕은 윈도우 기본 폰트라 대체로 다들 갖고 있는데 나눔 고딕은 일부러 설치해야 해서 안 나오는 사람이 많더라구요.
      혹시 기본 서체를 맑은 고딕으로 하는 방법이 따로 있는지. 폰트 부분을 수정하려고 해도 마크쿼리 스킨은 패밀리 폰트가 아예
      html소스란에 없어서요.^^;;

      그리고 본문 줄간격을 운영자님 블로그처럼 늘릴 수 있는 방법 또한 따로 있을까요?
      기본 스킨에서 쓰던 태그는 마크쿼리에서 먹히지 않아서요.
      초면에 실례였다면 정말 죄송합니다.

    • 안녕하세요.
      마크쿼리님의 스킨이 깔끔해서 많은 분들이 사용하시는 것으로 알고 있습니다.
      나눔고딕을 이 스킨에서 사용하시려면, skin.html에서 폰트 부분을 규정하는 곳이 있는데, 이곳에 아래와 같이 삽입하시면 됩니다.
      <li><a href="javascript:changeFontFamily('나눔고딕, NanumGothic, sans-serif');">나눔고딕</a></li>
      그리고, 본문 줄간격을 늘리는 것은 글 작성 메뉴를 보시면, 줄간격을 충분하게 늘릴수 있는 부분이 있습니다. 글쓰기에서 메뉴 부분을 잘 찾아보시면, <줄간격>을 주는 곳이 있습니다.
      방문하여주셔서 감사합니다.

    • 친절한 답변 정말 감사드립니다.^^ 줄간격을 일일히 수정해야하는 것 이었군요. 그전의 스킨은 아예 태그로 넣어서 자동으로 줄간격이 정리가 됐었거든요.^^;;

    • 안녕하세요^^
      블로그 잘보았습니다.

      저도 마크쿼리님 스킨을

      티스토리에 설치하고픈데.ㅠㅠ

      아..그냥 추가하기해서
      등록하려니..폴더가 많아서

      어떻게 설치해야할지 난감하네요.ㅠㅠ

      기존에 스킨들은...

      images 폴더가있고

      그아래..index.xml
      skin.html
      style.css


      이렇게 구성되어있는데ㅠㅠ

      이건 어떻게 설치해야할까요.ㅠㅠ

    • 댓글주셔서 감사합니다.
      기존에 쓰시던 티스토리 스킨을 삭제하시고 새로 설치하시면 좋을 것 같습니다.
      티스토리 어드민에서 마크쿼리님 스킨 파일을 모두 업로드하여 저장하시면 쉽게 사용할 수 있습니다.

    • 모바일에서 티스토리 접속시 tistory.com/m으로 자동 접속되버리는데 모바일 주소로 접속 안되는 방법 있을까요?

    • 혹, 모바일 스킨 설정을 어떻게 하셨는지 확인해보면 어떠실지요?
      반응형 스킨을 사용하시면 관리자 모드에서 모바일 스킨을 사용하지 않는다고 OFF로 설정해야 합니다.

    • 아.. 해결했습니다^^
      모바일웹 스킨이 켜져있었네요
      감사합니다^^

*

*

이전 글

다음 글