블로그 스킨 변경 2020

본의 아니게 블로그를 꽤 비워 버렸네요.

요즘 날씨도 변덕스럽고 개인적으로 신경쓰는 일들도 좀 있다 보니 몸살 비슷하게 앓기도 했는데,

다행히 주말에 그런거 신경쓸 틈도 없이 이것저것 해치웠더니 좀 나아지는것(?) 같습니다.

 

그 '주말에 해치운 이것저것' 중에 오늘 글 적을 티스토리 스킨 변경도 있었습니다.

변경에 대한 고민은 두어달 전부터 했는데, 손댈게 많은 일이다 보니 딱 날잡고 '하자' 못박지 않아서 다른일에 계속 밀렸네요.

 

 

직전까지 쓰던 스킨은 2016년 중순쯤 작업해서 4년 조금 안되게 써먹었습니다.

개인적으론 보기좋게 위쪽에 주욱 펼쳐지는 카테고리들이 마음에 들었었네요.

많은 카테고리가 한눈에 보이니 검색 방문자분들이 다른 글에 관심을 조금 더 가지게 되지 않을까 하는 기대랄지.

 

그 사이 시간은 4년 가까이 지났고, 티스토리도 웹 환경도 많이 변했습니다.

물론 직전 스킨도 반응형 스킨이었습니다만, 화면을 로딩한 뒤 자바스크립트 후처리로 상단 메뉴나 글 섬네일 이미지를 불러오다 보니

자연스레 페이지 로딩속도에 영향을 미치더군요. 개인적으론 이게 좀 부담이었습니다.

티스토리에 변경사항이 생기면 제가 대응해서 바꿔줘야 했구요.

 

무슨말인지 잘 모르겠다 싶은 분들은, '좀 더 깔끔하고, 로딩이 빨리 되는 스킨을 찾게 되었다' 라는 말입니다.

사실 페이지 로딩속도는 구글의 검색순위에도 영향을 미칩니다.

뭐 이런건 둘째치더라도 한국 사이트인데 로딩에 1초 이상 걸리면 탭 닫아버리니 그게 무섭기도 했고(...)

 

변경된 스킨. 티스토리 공식 Letter 테마

변경한 스킨은 티스토리가 제작 및 배포하여, 자바스크립트 후처리 등의 비권장 행위를 하지 않습니다.

물론 제가 선호하는 1단 스킨인데다 좌측 상단 메뉴바를 클릭해 블로그 전체 카테고리를 볼 수 있는 점도 좋았구요.

 

티스토리측에서 잘 만들어주신 덕분에 폰트나 디자인 관련해서는 제가 거의 손을 대지 않아도 되어 좋았습니다.

배경색이 새하얀게 조금 부담스러워서 약간 회색을 입힌 정도?

 

다크모드 미디어태그 대응. 오른쪽이 다크모드.

배경 하니 말인데, 스킨 바꾼김에 이런것도 적용해 보았습니다.

prefers-color-scheme 라는 미디어 태그를 쓰면 기기가 야간모드(안드로이드-야간모드/iOS-다크모드) 일 경우를 감지할 수 있습니다.

대개는 이런 경우 배경을 검게 하고 글자를 하얗게 하는 고대비 모드급의 변경이 일어나는데,

개인 블로그에서 그걸 하기엔 좀 부담되서(스타일시트를 전부 다시 만들어야 함) 배경을 조금 더 진한 회색으로 바꿔주는 정도만 적용했습니다.

혹시 야간에 제 블로그를 보신다면 눈부심이 조금이라도 덜할 수 있도록. 당장 저만 해도 그렇지만요.

 

 

그 외에는.. 지난 스킨에서 jQuery 에러가 발생해 한바탕 난리를 치렀던 SyntaxHighlighter 버전을 v3 에서 v4로 올렸습니다.

 

v4부터는 쓸 수 있는 CSS, JS 파일을 바로 배포하는게 아니라 Git 레포지토리를 클론해 빌드를 해야 하는 대작업이 되어버린게 좀 부담스럽긴 했지만 말이죠.

혼자 빌드환경 만들어서 빌드해보려다 한껏 시간낭비하고 포기하려던 찰나, 빌드용 도커 이미지 만든 분이 계셔서 구사일생 했네요.

 

syntaxhighlighter+DefaultTheme.zip

0.19MB

혹시 SyntaxHighlighter v4 빌드하다 실패하신 분은, --branches=all --theme=default 설정으로 뽑았지만 구성파일 올려두니 쓰시기 바랍니다.

 

 

잘 적용되면 위와 같이 깔끔하게 코드를 올릴 수 있습니다. code 태그 블럭은 티스토리가 멋대로 만들고 있으니 제가 어떻게 못하겠네요.

파일 등록은 블로그 스킨수정 메뉴에서 link, script로 추가하시면 되고, 사용은 이쪽 가이드 참고하시면 됩니다.

 

 

그 외에는 검색버튼을 티스토리 검색 대신 구글 맞춤검색으로 바꾼다던가, 구버전 에디터에서 작성한 접기 태그 대응 스타일을 추가하기도 했습니다.

 

 

이게 스킨 고정은 아니었던것 같은데, 옮겨가니 과거 글의 접기 펴기 부분이 하나도 안보이더군요.

필요한 이미지도 끌어오고 난리도 아니었습니다. 그나마 이거 추가해서 보이게 했으니 다행이죠.

 

 

이렇게 티스토리 스킨수정은 참 다이나믹하지만, 바로바로 눈에 보이니 재미는 있네요. 시간만 있으면 말이죠.

아무튼, 별일 없으면 이 스킨도 몇년 쓸테니 이후로도 조금씩 수정하긴 하겠지만 한동안 블로그는 이 모습이 될것 같습니다.

새삼 잘 부탁드립니다.

 

그럼 이후 글들도 몇개 정리해서 들고 오지요.

주중에 몇번 더 뵙겠습니다.