전체글
일상
코딩
게임
블로그 운영
IT
여행

티스토리 반응형 스킨 제작 중 - 둘러보세요!

 지난 며칠간 티스토리 반응형 스킨을 제작 중입니다. 기존의 쓰던 #1 스킨에 필요한게 있으면 붙였었는데... 그 결과 제 블로그에 처음 접속하는 데스크탑이나 모바일에서는 로딩 속도가 매우 느리다는 것을 깨닫게 됐습니다. 패스트부트 스킨으로 갈아타려고 했는데, 제 마음에 썩 와닿지가 않아서 제작하게 되었습니다.
현재 제작 중인 스킨은 80% 이상 완성 되었으며, 세부적인 색상 디자인이나 미구현 기능이 몇 개가 남아있습니다. 가장 중요한 포스트 보기 및 카테고리, 검색을 통한 글 찾기는 가능합니다.


 현재 제작 중인 스킨 소개를 해드리겠습니다. 데스크탑보다 모바일 친화적으로 만든 스킨입니다. 현재 제 블로그 유입의 80%가 모바일이기 때문에, 모바일에서 블로그가 빠르게 돌아가도록 가볍게 만들었습니다. 티스토리 스킨에 필요한 필수 코드 외에는 거의 넣지 않았고, 디자인도 bootstrap, w3c만을 이용해서 만들었습니다. 블로그 로딩에 영향을 주는 가장 큰 요인 두 가지가 이미지, 애드센스인데, 애드센스를 버릴 수 없기 때문에 최소한으로 넣었습니다.


 완벽하게 완성 되면 무료 배포할 예정입니다. 완성 예정은 7월 초로 보고 있습니다.




 블로그의 메인(홈) 화면입니다. 썸네일 카드형식으로 최근 작성 글 순서로 노출됩니다. 우측에 사이드바에 필요한 기능들을 넣었고 심플하게 보이게 만들었습니다. 애드센스 역시 넣을 수 있게 div 창을 하나 만들어 두었습니다.




 모바일에 접속했을 때의 메인(홈) 화면입니다. 네이버 블로그 모바일 같은 느낌이 나게 제작하였습니다. 




 데스크탑에서 본문 글(상단)의 모습입니다. 사이드바가 심플하니 로딩 되는 속도가 확연히 달라졌습니다.




모바일 본문 글(상단)의 모습입니다.




 데스크탑 본문 글(하단)입니다. 플러그인 '카테고리의 다른 글'을 사용하였습니다. 좌측에는 카테고리의 다른 글이 나오게하고, 우측에는 애드센스 광고가 노출 되게 하였습니다.




 모바일 본문 글(하단)입니다. 위에 '카테고리의 다른 글'이 나오며, 바로 아래 애드센스 광고가 노출됩니다.




 바로 아래에 덧글을 보거나 입력할 수 있습니다.  그리고 그 아래에 사이드 바가 내려와있습니다. 사이드바 순서에 대해서는 아직 연구 중이라서 차후에 배포하는 스킨과 다를 수 있습니다.




데스크탑에서 검색, 카테고리 클릭 등을 했을 때 노출되는 화면입니다. 상단에 목록으로 검색결과가 나오게 하였고, 하단에는 메인(홈)에서 출력되는 형식으로 추가 검색결과가 나타납니다.




 모바일에서 검색, 카테고리 클릭 등을 하였을 때 노출 되는 화면입니다. 목록의 구별이 잘 되지 않아서 가독성이 떨어집니다. 이러한 디테일 부분을 아직 완벽히 만들어지지 않았습니다.


 본업을 겸해서 조금씩 작업하고 있기 때문에 늦어도 7월 초에 완성될 것 같습니다. 제 블로그에 자주 방문하셔서 스킨이 완성되어 가는 모습을 보시고, 마음에 드시면 배포할 때 받아가시기 바랍니다. 


도움이 되셨으면 공감을 눌러주세요!