티스토리 스킨 반응형으로 교체

이전부터 바꿀까말까 하다 이번에 티스토리 관리자 페이지 변경도 있고 그동안 사용한 스킨이 웹표준에 조금 맞지 않는 부분도 있었던지라 이번에 스킨을 변경 했습니다. 구글 애널리틱스에서 웹 로그를 보니 대부분 사용자가 IE9이상이라 반응형으로 바꿔야 겠다는 생각을 했습니다. IE7이나 IE8 버전의 브라우저를 사용하는 사용자가 통계상 3% 미만이라 이제 바꿔도 되겠다는 생각이 들어 반응형 웹으로 변경 했습니다.

이전에 사용한 스킨은 IE6버전 까지 볼 수 있도록 지원 했으나 현재 스킨은 IE9 이상의 버전이 되어야 화면이 제대로 보입니다.

이전에 사용한 스킨이 IE6버전까지 지원하느라 스크립트도 많았고 페이지 로딩 속도가 느려져 이전부터 바꿔야 겠다는 생각을 하다가 바꿨네요.

티스토리에서 제공하는 반응형 스킨을 조금 변경해서 마무리 했는데 따로 갤러리 스킨은 만들고 있습니다.

아마 메뉴에 통계나 카테고리가 안보여서 좀 깔끔하게 글 읽기가 편하도록 변경 했습니다.

아직 티스토리에 반응형 스킨이 많지 않아서 선택의 폭이 좁네요.

상단 메뉴는 브라우저 폭에 따라 가로로 가거나 변경이 있습니다. 반응형웹이라 태블릿, 모바일 따로 설정이 필요 없으며 티스토리 모바일 페이지는 사용중지 했습니다.

상단의 메뉴를 클릭하면 카테고리나 통계, 공지사항, 배너등이 펼쳐지는게 이 스킨의 특징 입니다. 모바일 역시 동일한 구조로 펼쳐지는데 변경이 쉬운편 입니다.

이번 스킨의 디자인은 네이버 포스트와 카카오 스토리와 통일감을 느끼게 하기 위한 디자인이기도 합니다. 폰트크기는 조금 더 키우고 글 줄바꿈 간격을 이전 스킨보다 조금 더 늘려서 글 보기는 좀 더 편하지 않을까 생각합니다.

네이버포스트 카카오스토리 캡처

이번 스킨은 전체적으로 제가 글 보내기를 하고 있는 카카오 스토리 네이버 포스트와 일체감을 느끼게 만드는 디자인으로 그냥 자기만족이라고 할까요?

예전에 티스토리 스킨에 이것저것 꾸미는 일도 재미 있었는데 요즘 그냥 심플함이 좋아 전체적인 쇼셜 네트워크 채널을 통일 했습니다. 구조는 다르지만 배경 그림 하나로 모두 똑같이 통일한 셈이라고 할까요.

티스토리 블로그 스킨을 테스트 하는 블로그가 하나 따로 있는데 그 블로그의 경우 갤러리 스킨을 올려두고 테스트중 입니다. 이 블로그에 바로 적용할려고 했더니 조금 문제가 있더군요.

다음에 스킨을 변경하면 핀터레스트 형태의 갤러기 스킨으로 바꾸기 위해 계획중 입니다.

아마 다음에 블로그 디자인이 바뀌면 위와 같은 갤러리 형태가 될 것 같습니다. 갤러리용 자바스크립트 소스는 Masonry 에서 구할 수 있습니다. 반응형 웹에 대한 괜찮은 소스가 요즘 꽤 많은데 시간이 없어서 다음 스킨 변경은 아마 코드 테스트가 끝나면 추석쯤이 될지도 모르겠습니다. 

궁금하신 분은 아래 링크 방문해 보세요.

masonry 레이아웃 소스 보기

masonry는 갤러리형 레이아웃 스크립트와 소스를 무료로 배포하고 있는데 꽤 괜찮은게 많습니다. 티스토리에 적용도 할 수 있는데 치환자등 일부를 티스토리에 맞게 변경해야 합니다.

갑자기 디자인이 확 바껴서 놀라신 분들이 있을라나 모르겠지만 화면이 제대로 보이지 않는다면 웹 브라우저를 업데이트 하셔야 합니다.

제가 테스트 해보니 크롬, 사파리, 오페라, IE9 까지는 잘 보이고 메뉴를 이용하는데 문제가 없습니다.

반응형으로 바꾸면 티스토리 모바일 페이지를 사용할 이유가 없어 모바일 페이지 랜딩은 사용안함으로 바꿨습니다.

스킨 바꾸고 css도 싹 정리해서 네이버 웹마스터로 테스트 해보니 사이트 구조도 최고로 바뀌었습니다. 이전에 IE6까지 하위 버전 브라우저를 지원하기 위한 스크립트를 사용하다 보니 사이트 구조에 대한 점수가 좋지 않았는데 스킨 바꾸고 나서 하루 지나니 바뀌었네요.

블로그에 저처럼 구글 애드센스를 사용하면 반응형 애드센스로 바꿔서 사용하면 됩니다. 

티스토리 관리자 페이지도 변경됐고 티스토리 공지에 올라온 빅픽쳐를 보니 이제 반응형으로 바꿔도 좋을것 같다는 생각이 들어서 바꾸긴 했는데 티에디션이 모바일에서 문제가 있군요. 추후에 갤러리형으로 바꾸면 티에디션 역시 사용중지를 바꾸게 될 것 같네요.