얼마 전 오랜만에 티스토리의 몇 가지 기능 추가 및 신규 스킨 제공이 있었습니다.
크게 제 관심사로만 추측해 보자면 아무래도 티스토리 개발진 내부에서도 HTTPS를 제대로 지원하는 초보자를 위한 기본 스킨이 있어야 한다는데 필요성이 있었던 것 같고 기본적으로 반응형을 지원하지 않던 첫 페이지 꾸미기인 티에디션을 대체할 새로운 기능이 필요하다는 요구들에 대한 답변으로 보입니다.
최종적으로는 신규 스킨 3가지와 커버라는 새 기능을 추가함으로 풀어낸 것 같습니다.
이전에는 Readiz 님이 개인적으로 만들어 배포한 반응형 스킨 fastboot 을 사용 중이었는데 이 스킨은 더 이상 패치나 개발이 진행되지 않고 있어서 기본 상태로는 HTTPS 보안 접속을 지원하지 않는 페이지들이 많았습니다.
그래도 일일이 그 부분들을 찾아서 fastboot 스킨을 수정을 할 수는 있지만 최근의 잦은 티스토리 개편이나 변경 때마다 썸네일이 보이지 않는다던가 잘 동작하던 기능이 갑자기 동작하지 않아 급히 수정한다던가 하는 여러 문제들을 개인이 적시에 수정 대응 하기에는 힘에 부치고 수정하고 나서도 뭔가 부족한 느낌도 있었습니다.
이런 문제점을 덜 겪으려면 티스토리에서 제공하는 기본 스킨을 쓰던가 빠른 대응 및 처리를 약속하는 유료 스킨을 쓰는 방법이 있습니다.
아무래도 티스토리에서 기본적으로 제공하는 스킨이라면 이런 최근의 업데이트마다 발생하는 자잘한 이슈에 아예 시달리지 않겠지 하는 마음과 스킨 수정의 귀찮음을 회피하고 싶은 마음에 티스토리가 기본적으로 제공하던 반응현 스킨 #1으로 잠시 변경하여 HTTPS 보안 접속에 대응하였습니다.
티스토리 https 보안 접속 적용 완료. 티스토리 샵1 스킨으로 블로그 스킨 변경
그런데 #1스킨은 심플하긴 하지만 늘 5% 부족함을 느끼던 차였습니다. 그래서 이번에 커버 기능을 제공하는 신규 스킨이 나오자마자 Poster라는 기본 스킨으로 변경을 했습니다.
스킨 자체는 깔끔하고 제가 마음에 들어 하는 스타일입니다. 다만 배포 첫날에 검색 수집 로봇 관련 메타태그에 noindex 등이 들어가 있는 바람에 가뜩이나 네이버 VIEW 개편 등으로 방문자가 감소해 힘이 빠져 있었는데 다음 검색마저 통 누락이 되면서 큰 아픔을 주기도 했습니다.
다행히 다음날 티스토리에서 해당 문제를 공지 하고 해결책을 빠르게 안내해서 지금은 해결이 되었지만 블로거들이 민감해 하는 방문자 수가 감소할 수 있는 해당 태그등에는 앞으로도 주의를 기울여 주었으면 하는 마음입니다.
이번에 추가된 신규 스킨들은 각각 나름 형태의 차별을 가지고 있고 심플한 부분도 마음에 들지만 무엇보다 반응형 스킨에 적용이 되는 첫 화면 꾸미기인 커버 기능은 저 뿐만 아니라 많은 사람들이 기다려온 기능 중 하나가 아닐까 생각해 봅니다.
개인적으로 제 블로그의 경우도 이미 모바일과 태블릿을 통한 방문자 유입이 70% 이상으로 사실 제 블로그를 방문한 10명 중 6~7명 이상이 모바일로 제 블로그를 보고 있다고 판단할 수 있습니다.
사실 저 뿐만 아니라 대부분의 티스토리 블로거분들도 비슷한 비율이지 않을까 추측해 봅니다.
이런 상황에서 그렇다고 PC 화면이 중요하지 않은 건 아니지만 모바일에 제대로 대응하는 반응형 화면의 구성이 앞으로도 더 중요해진다고 볼 수 있겠습니다.
그래서 모바일에 제대로 대응한 첫 화면 꾸미기 커버와 새로운 리스트를 제공하는 신규 스킨 추가 및 개편이 제 게는 더 반가운 상황입니다.
그런데 100% 모든 사람을 만족하는 스킨은 없는 법, 제가 선택한 Poster 스킨도 살짝 마음에 안 드는 부분들이 있긴 합니다.
티스토리의 최대 장점이 HTML과 CSS, 자바스크립트를 조금 알면 원하는 대로 수정이 가능하다는 점을 십분 활용해서 제 입맛에 맞게 아주 약간 수정을 하였습니다.
그전에 블로그 스킨을 변경하려 한다면 챙겨야 할 부분을 제가 스킨을 변경하면서 했던 부분을 우선으로 말씀드리겠습니다.
<1> 네이버 웹마스터나 구글 서치 콘솔 같은 검색 수집 관련 메타태그가 이전 스킨에 있었다면 우선적으로 신규 스킨에 옮기시기 바랍니다. 사이트 명이나 Keywords, description 도 수정을 했다면 관련 메타태그를 옮기는 걸 잊지 않으시기 바랍니다.
<2> 제 경우에는 APP LINK도 정의해 둔 부분이 있어 같이 이전했습니다. 대부분은 필요하지 않고 신경쓰지 않아도 좋은 부분이라 그냥 넘어가셔도 좋습니다.
참조 : 네이버 웹마스터 도구 마크업 도구
<3> 구글 자동 광고나 이전의 페이지 수준 광고를 쓰고 계셨다면 해당 내용을 자신의 이전 스킨에서 옮겨와야 합니다.
참조 : 구글 애드센스 자동 광고 사용
<4> Microdata 형식으로 구조화 데이터를 구현한 예제로 웹마스터 도구에 있는 채널 등록을 위한 코드입니다.
참조 : 네이버 웹마스터 도구 가이드
여기까지는 기존의 스킨에서 옮겨온 내용들이었다면 아래 이미지는 Poster 스킨에는 없는 부분을 추가한 부분입니다.
제 경우에는 인스타그램 사진을 보여주는 부분을 스킨에 추가했고 방문자 카운터를 기본적으로 지원하고 있지 않아서 footer 부분에 카운터 관련 치환자를 추가 하였습니다.
바로 아래와 같이 인스타그램과 카운터가 표시됩니다.
인스타그램 추가는 아래의 링크를 추가하시기 바랍니다.
카운터의 경우는 티스토리의 치환자 관련 링크 참조하시기 바랍니다.
링크 : 티스토리 치환자 카운터 가이드
그 외 CSS는 그다지 수정할게 없었는데 스킨을 보다가 제게는 명조체인 카테고리명 표시가 살짝 거슬렸습니다.
예시로 하나만 표시를 했는데 카테고리 폰트에 대한 부분은 이곳 말고는 4~5곳 더 있습니다. 모두 찾아서 수정하시면 됩니다. 제 경우에는 "Nanum Myeongjo" 로 찾아서 모두 주석 처리를 해 버렸습니다. 기본 바디의 디폴트 폰트 "Noto Sana KR" 이 적용됩니다.
두 번째로 Poster 스킨은 크롬이나 파이어폭스, 사파리 등에서 보기에 "Noto Sans KR" 폰트는 가독성도 좋고 괜찮아 보이는데 유독 익스플로러에서는 전혀 다르게 정말 보기 싫은 폰트로 표시가 됩니다.
구글 웹폰트에서 제공하는 WOFF 형식을 익스플로러는 지원하지 않기 때문인데 이러면 sans-serif로 한글이 표시됩니다.
사람마다 다르겠지만 제 보기엔 무척 보기 싫은 폰트라서 MS에 기본 내장인 맑은 고딕이나 돋음을 font-family에 추가해서 NOTO Sans KR로 보이지 않는 경우는 추가한 다음의 한글 폰트로 보이게 만들었습니다.
그리고 Poster의 기본 폰트 사이즈가 작게 잡혀 있습니다. 그리고 연한 회색의 색으로 눈이 편하게 읽을 수 있는 구조로 고려되어 있습니다. PC로 볼 때는 이런 점이 괜찮은데 아무래도 모바일에서는 화면에 따라 글자가 너무 작게 표시되고 은색에 가까운 연한 회색의 폰트 색은 너무 연한 편이라 글씨를 인식하는데 어려움을 줍니다.
가끔 일부 블로그나 사이트 중에서는 모바일상에서 폰트가 가끔 너무 작게 되어 있는 경우를 종종 봅니다.
이런 경우 가뜩이나 text를 읽기 싫어하고 사진이나 그림만 보는 사람이 점점 많아지는 시대에 읽기가 불편하면 사이트에 접근 후 바로 빠져나가는 경우가 늘어 날 수 있습니다.
제 경우도 폰트가 너무 작은 사이트는 읽으면서 눈의 피로감을 느끼기 때문에 최대한 빨리 요점만 보고 해당 사이트에서 벗어나는 경우가 많습니다.
이는 이탈율이라는 수치를 상승시켜서 SEO에도 좋지 않은 영향을 줄 수도 있습니다.
그래서 위의 사진과 같이 폰트 크기를 1.15em으로 키우고 color를 기본보다는 짙은 회색 계열인 141414로 변경했습니다.
(검은색으로 변경하지 않은 이유는 완전 검은색 000000의 경우는 오히려 눈의 피로를 더 크게 만든다고 합니다.)
마지막으로 링크에서 언더라인을 빼고 싶은 부분은 주석의 부분을 주석을 풀고 추가하시면 됩니다. 재 경우에는 처음에는 언더라인을 빼도록 "text-decoration : none" 을 추가했었는데 눈으로 보기에는 더 나은 UI로 보였습니다. 하지만 본문 내 링크를 인지하기가 어려워지는 듯 해서 다시 주석을 추가 해 링크에는 언더라인이 쳐지도록 수정하였습니다.
폰트에 대해서는 추가적인 글을 작성했습니다. 아래 링크 참조 하시기 바랍니다.
티스토리 블로그 Poster 스킨, PC와 모바일 폰트 사이즈 다르게 변경, 모바일 화면에서 가독성 있는 폰트 사이즈로 변경하기
이상과 같이 제 기준으로 스킨을 변경할 때 기존 스킨에서 가져올 값들과 약간의 변경 사항을 언급해 보았습니다. 스킨 변경 계획이 있으시다면 도움이 되었으면 합니다.
