티스토리 블로그 스킨을 Poster 스킨으로 변경했습니다

어제 잠시 시간을 내어 블로그의 스킨을 티스토리에서 최근 공개한 Poster로 변경해보았습니다.

티스토리 블로그 스킨을 Poster 스킨으로 변경

사이드바가 있는 스킨이 공개되기를 기다렸지만 11월 29일 어제 공개된 Portfolio라는 스킨도 사이드바가 없는 전체 폭(Full-width)으로 표시되어서 Poster 스킨에 사이드바를 추가했습니다. 본래는 다음과 같이 사이드바가 없이 표시됩니다.

사이드바를 추가하고 썸네일을 오른쪽에서 왼쪽으로 이동시켰습니다.

제 컴에서는 자꾸 "어떻게 살 것인가" 광고가 표시되네요.ㅎㅎ

개별 포스트 화면은 다음과 같이 표시됩니다.

개인적으로는 수정한 스킨이 마음에 들지만 네이버 웹마스터도구에서 글 수집 요청을 하면 '서버 오류'가 발생하네요. 이 때문에 이 스킨을 사용해야 할지 고민이 되네요.

지난 10월 말에 티스토리에서 Poster, Whatever, Letter 등 새로운 스킨 3종을 공개했습니다. 다른 스킨으로 변경하여 테스트해보아도 마찬가지로 네이버 웹마스터도구에서 '서버 오류'가 발생하고 있습니다.

어떤 글에 포스트 주소를 '문자'로 변경하면 문제가 해결될 수 있다고 해서 '문자'로 변경해보아도 마찬가지로 '서버오류'가 발생하네요. 기존 테마로 변경하여 글 수집 요청을 하면 '수집성공'으로 표시됩니다.

일시적인 문제이길 바라지만 새로운 스킨을 이용할 경우 네이버에서 유독 이런 오류가 발생하는 것 같습니다. 구글에서는 별 문제가 없이 새로운 글이 정상적으로 수집됩니다.

2019년 4월 추가: 네이버 웹마스터도구에서 웹 페이지 수집 시 '서버오류'가 발생하는 경우 "티스토리 스킨 변경 후 네이버 웹마스터도구에서 '서버오류' 발생하는 경우"를 참고해보세요.

사이드바를 추가하는 방법은 다양하겠지만 저는 flexbox를 이용했습니다.

• 미래지향적 모델: flexbox

CSS flexbox는 IE11부터 지원되기 때문에 작년까지만 해도 우리나라 환경에 적용하기가 망설여져서 제대로 배우지 않았습니다.

하지만 구글을 조금 검색하여 찾은 문서를 참고로 의외로 쉽게 적용할 수 있었습니다. flexbox 정말 물건이네요. 이제 float는 잊어버리고 시간을 내어 flexbox를 능숙하게 사용하도록 연습하려고 합니다.ㅎㅎ

저는 다음 글에 나온 예제를 참고하여 사이드바를 추가하고 본문과 사이드바 비율을 약 7:3으로 맞추어보았습니다.

• Flexbox with percent width but fixed margins
• flexbox align column left and right
• Centering Things in CSS Using Flexbox

대강 레이아웃을 조정하고 글자 크기도 키웠습니다. 시간이 날 때마다 세부적인 사항을 하나씩 수정해나갈 생각입니다. IE 10 이하에서는 레이아웃이 엉망으로 나올 것 같습니다. IE10이 없으니 확인을 할 수가 없네요.ㅎㅎ

참고로 댓글 개수는 기존 댓글 개수 치환자는 작동하지 않고 새로운 치환자를 사용해야 합니다.

• 티스토리 댓글 개수 치환자가 작동하지 않는 경우

이번에 적용한 Poster 스킨의 소스 파일을 살펴보니 앞서 사용했던 유료 스킨보다 코드가 훨씬 간결하네요.

네이버 '블로그' 영역에 노출되던 이 블로그가 지금은 '웹사이트' 영역에 노출되면서 네이버 유입이 사실이 제로가 되었습니다(티스토리 블로그 글작성 1000개 달성 참고).

스킨을 바꾼 이유 중 하나는 스킨을 바꿈으로써 SEO에 변화를 주면 네이버 '블로그' 섹션에 다시 노출되지 않을까 하는 기대 때문입니다. 하지만 네이버 웹마스터도구에서 글 수집 요청 시 '서버오류'가 발생하는 것으로 봐서는 '블로그' 섹션에 노출될 가능성이 희박해 보이네요.ㅠㅠ

업데이트

※ 스킨을 다시 #1이라는 티스토리 공식 스킨 중 하나로 변경했습니다. 레이아웃은 거의 동일하게 만들었습니다("티스토리 스킨을 기본 스킨 중 하나인 #1으로 다시 변경했습니다" 참고).

※ 다시 스킨을 고래스킨 4.0으로 변경했습니다. 이제 이 스킨으로 정착할 생각입니다.

avada.tistory.com/1828

티스토리 스킨 고래 스킨 4.0으로 변경

참고

avada.tistory.com/1560

티스토리 스킨을 변경하기 전에 해야 할 작업: 스킨 보관 및 다운로드