마크쿼리 스파이더스웹 4.0 티스토리 스킨 설치했어요

약 2주전 쯤에 티스토리 반응형 스킨 적용 후기 글을 올린 적이 있는데 2주 만에 또 다시 티스토리 스킨 설치 글을 올리게 됐네요 ^^


스파이더스웹 1.2.2 버전을 수정 적용하면서 올해에는 더 이상 블로그 스킨 변경 작업을 하지 않겠다고 마음을 먹었지만 스파이더스웹 스킨 4.0 업데이트 버전이 적용된 블로그를 보고 새로운 기능을 사용해보고 싶어 블로그 스킨을 변경하게 되었습니다.


마크쿼리 스파이더스웹 4.0 스킨은 티스토리 블로그에 적용 가능한 반응형 스킨 입니다. 공식홈페이지는 markquery.com 이며 Ungki, H 님이 운영을 하고 있습니다. (현재 홈페이지 접속 불가 상태)


티스토리 블로그에 반응형 스킨 적용의 필요성.


불과 2-3년 전만 하더라도 제 블로그 방문자 유입은 m.search.naver.com 또는 m.search.daum.net 같은 모바일 유입 보다는 PC 검색 유입이 훨씬 더 높았습니다만, 최근 2개월 간의 제 블로그 방문자 유입에서 PC (윈도우 OS) 기반은 불과 33.8% 수준으로 급감한 상태 입니다. 


나머지는 구글 안드로이드 OS가 53.3%, 애플 iOS는 12.3% 순 입니다. 이 결과는 인터넷 검색을 PC가 아닌 스마트폰으로 이용하는 비중이 커졌다는 것을 의미 합니다. 아래의 표는 제 블로그 방문자 분들의 운영체제를 측정한 구글 아날리틱스 통계 보고서의 결과 입니다. 



블로그 마다 제공되는 콘텐츠에 따라 PC 검색 유입과 휴대폰 유입량의 차이가 있겠지만 시간이 흐를수록 휴대전화 같은 모바일 기기를 통한 유입이 더욱 늘어나지 않을까 예상 됩니다.


모바일 기기는 다양한 화면 크기를 가지고 있습니다. 아이폰의 경우 구형의 4s는 4인치 디스플레이이지만 최근의 아이폰6 플러스는 5.5인치 액정화면 입니다. 모바일 기기는 휴대폰 외에도 아이패드 미니나 갤럭시탭 같은 태블릿 기기도 있어 이렇게 다양한 화면에 즉각 반응하는 블로그 스킨을 사용한다면 자신의 블로그 콘텐츠를 방문자 분들에게 보기에 좀 더 편안한 화면과 사용자 경험을 제공할 수 있게 됩니다.


마크쿼리 스파이더스웹 4.0의 새로운 기능들.


메인 페이지 상단에 복수의 이미지 커버를 사용할 수 있고 모바일에서 좌우로 터치하여 넘길 수 있습니다. 이로 인해 티스토리 블로그에서도 감각적인 메인 화면 적용이 가능해졌습니다. 또한, 로딩프로세스가 적용되어 페이지가 로딩되는 동안 빈 화면이 아닌 로딩 프로세스가 시각적으로 표시됩니다. 아무튼 여러가지 깨알 같은 기능들이 추가 되었는데 일단 제 블로그에는 이미지 커버와 로딩프로세스는 적용하지 않았습니다. 


티에디션.


티에디션을 이용하면 티스토리 블로그 첫 화면에 자신이 포스팅한 글이나 사진을 적절히 배치하여 블로그 기사를 발행할 수 있습니다.


스파이더스웹 4.0에서는 티에디션 화면도 반응형으로 출력이 되도록 지원을 하며 깔끔하게 디자인된 티에디션 패턴도 제공하고 있습니다.


저도 Ungki님이 제공해주신 티에디션 패턴을 적용해봤는데 제 블로그는 사진이나 이미지 보다는 텍스트 콘텐츠가 더 많은 편이라 헤드라인이 강조된 패턴이 필요했는데 제 블로그와 어울릴만한 맘에 드는 패턴은 없었습니다 ^^ 그래서 티에디션 패턴은 어떻게 구현되는 것인지 맛보기용으로만 사용해보고 제가 직접 티에디션 패턴을 간단하게나마 만들어서 적용했습니다.


원래 있었던 디자인 요소에서 썸네일 이미지에 둥근 모서리 효과를 주고 여백을 적절히 조절하는 정도로 살짝 손을 봤습니다. 제 휴대폰은 구글 넥서스5인데 티에디션 적용 후 테스트 해보니 별 이상 없었습니다.



썸네일 이미지 우측으로 글 제목과 요약글이 가로로 표시되고, 모바일 화면에서는 텍스트 콘텐츠가 썸네일 이미지 하단으로 자연스럽게 내려갑니다.




코드 문법 하이라이터.


티스토리 반응형 스킨 관련 글을 작성하다 보면 간혹 html이나 css 코드를 인용하게 되는데 애플 맥용 코다 (CODA) 또는 윈도우 OS의 웹 에디터인 노트패드 ++ 에서 처럼 코드 문법에 따라 강조 색이 표시되어 보기에 편한 하이라이터 기능이 지원 됩니다.


/* Googole AD

-------------------------------------------------- */

.widget-google-ad {

  padding: 10px;

}

.entry-footer-ad {

  padding: 20px 0;

  margin: 20px 0 0;

  background-color: #fbfbfb;

  border-top: 1px solid #eee;

  border-bottom: 1px solid #eee;

}


예를 들어 위와 같은 css 코드는 폰트 색이 동일하여 한눈에 쏙 들어오지 않지만, 아래 처럼 코드 문법 하이라이터가 적용되면 문법 속성에 따라 강조색이 적용되어 편집 작업시 생산성이 높아 집니다.



/* Googole AD

-------------------------------------------------- */

.widget-google-ad {

  padding: 10px;

}

.entry-footer-ad {

  padding: 20px 0;

  margin: 20px 0 0;

  background-color: #fbfbfb;

  border-top: 1px solid #eee;

  border-bottom: 1px solid #eee;

}

위의 문법 하이라이트는 prism 자바스크립트를 설치하여 적용 했습니다.



구글 맞춤검색 엔진 지원.


본인의 티스토리 블로그에서 글 검색을 하면 자체 검색 결과와 구글 맞춤검색 결과를 같이 보여 줍니다. 구글 맞춤검색 엔진을 사용하려면 구글 서비스에 가입을 하셔야 하기 때문에 선택적으로 원하시는 분들만 적용할 수 있습니다. 저도 사용해 본적이 없어 테스트 겸 적용해봤습니다. 



제 블로그에서 '샬롯맥키니' 키워드로 검색을 하면 위의 화면 같이 블로그 내부 검색결과와 구글 맞춤검색 결과가 위아래로 표시 됩니다. 구글 맞춤검색 결과는 연관성 (정확도)과 최신순 둘 중 하나를 옵션으로 선택할 수 있습니다. 최근 날짜 순으로 지정하면 블로그 내부 검색결과와 중복된 결과가 나오므로 맞춤검색 결과는 연관성 결과로 지정하면 그 동안 제가 블로그에 쓴 글들 중에 가장 연관성 높은 관련 글을 검색결과로 보여 줍니다. 블로그 방문자 분들에게 좀 더 풍부한 검색 결과를 제공해드릴 수 있는 장점이 있습니다.


스킨 변경 이후 크롬 브라우저의 요소검사 방법을 통해 제 나름대로 소소한 부분들을 살짝 수정해봤습니다. 스파이더스웹 4.0의 새로운 기능들과 빨라진 로딩 속도 그리고 부트스트랩 CSS와 스타일시트 CSS가 통합되어 디자인 수정이 편리해지고 가벼워져 티스토리 반응형 스킨으로 적극 추천 해봅니다. -끝-