스피드스타 스킨의 3.0.0 패치가 완료되었습니다.

 스피드스타 스킨의 3.0.0 패치가 완료되었습니다.

 구매자분들에게 업데이트된 버전의 파일을 발송했습니다.

 스킨 업데이트는 다운 받은 파일을 처음 설치할 때처럼 저장하신 후 적용하시면 됩니다.

 

[노트*만약을 대비해서 기존에 사용하시던 스킨은 꼭 저장해주세요.
메타 태그 / 커스텀한 부분 / 스킨 옵션 설정은 미리 기록해서 편하게 옮길 준비를 하시는 게 좋습니다.*]

 

 이번 패치로 [**바뀐점**]들은 다음과 같습니다.

 

전반적인 성능 향상과 최적화, SEO와 접근성 향상

 

 Lazy Loading이 되는 방식을 변경해서 CLS와 로딩속도를 더 끌어올렸습니다.

 또한 자바스크립트 메인 쓰레드에서 시간을 잡아먹던 부분을 최대한 수정했습니다.

 resize 이벤트에 debounce를 추가했습니다.

 SEO와 접근성 점수도 더 좋아지도록 바꿨습니다.[각주*다만 주의하셔야할 점은 옵션으로 색상을 바꾸시는 과정에서 접근성 점수가 떨어질 수 있습니다.*]

 

티스토리의 자체 광고에 대한 테스트

 2023년 6월 27일부터 티스토리측에서 강제로 개인 사용자의 블로그에 자체 광고를 송출하기 시작했습니다.

 이로 인해 무효 클릭 / 애드센스 정지까지 당하시는 분들이 계셨습니다.

 

 수익 블로거에겐 굉장히 민감한 사안이기 때문에 스킨의 광고 기능을 약간 고치고 테스트 기간을 오래 가졌습니다.[각주*조만간 업데이트를 하겠다고 글을 쓰고도 오래 걸렸던 이유 중 하나입니다.*]

 결과만 말하자면 현재 스피드스타 자체 광고 기능+티스토리 자체 광고 상황에서 문제가 일어나진 않았고 육안으로도 특이점을 찾진 못했습니다.

 

 다만 확신을 할 순 없습니다.

 지금 글을 쓰는 이 순간에도 티스토리측에서 꾸준히 자체 광고의 코드를 건드리고 있습니다.

 대표적으로 자체 광고로 애드센스를 넣다가 현재는 애드핏도 넣고 있는 등의 변화가 있습니다.

 그리고 티스토리에서 자체 광고를 넣는 경우는 사용자가 광고를 넣을 때인데, 이 광고를 넣고 있는지를 감지하는 방식도 달라졌습니다. 

 

 결과만 적는다면 현재 자체 광고로 생기는 문제점은 이렇습니다.

 

• 티스토리가 삽입하는 자체 애드센스 광고 때문에 펍코드가 2개가 감지되는 오류가 콘솔에 찍힙니다.
• 티스토리가 삽입하는 애드핏은 가끔 광고 삽입이 실패하며 오류가 콘솔에 찍힙니다.
• 자체 광고가 본문 상단/하단에 랜덤하게 삽입되는 방식 때문에 광고를 넣을 공간에서 손해를 보게 되며 상단에 삽입시 CLS에서 손해를 보게 됩니다. 
• 당연한 이야기지만 위의 이유들 때문에 블로거들의 수익이 줄어들었습니다.

 

 이 부분은 강제로 광고를 넣는 티스토리측의 문제라 스킨 제작자로썬 한계가 있을 수밖에 없습니다.

 일단 CLS에 대응할 수 있는 패치를 하는 선에서 그쳤습니다.

 

 참고로 현재 스피드스타 스킨을 쓰면서 자체 광고가 뜨게 하지 않으려면 옵션을 끄는 것으로는 불충분합니다.

 HTML 편집에 들어가신 후에 컨트롤+F로 검색창을 활성화하시고, <s_if_var_adonoff>를 검색해서 나온 아래의 코드 부분을 지워주셔야 완전히 비활성화할 수 있습니다.

 

<s_if_var_adonoff>
	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client="
     crossorigin="anonymous"></script>
</s_if_var_adonoff>

 

 

 또한 플러그인에 들어가서 애드핏 같은 다른 광고들도 모두 꺼주셔야 합니다.

 

새로운 댓글 시스템 도입

 2023년 5월 23일에 티스토리에서 새로운 댓글 시스템을 업데이트 했습니다.

 자세한 부분은 이 링크를 타고 티스토리 공식 블로그에 가시면 나옵니다.

 이 시스템을 스피드스타 스킨에 업데이트 했습니다.

 

신 댓글 시스템의 추가된 기능

 원하시는 댓글을 고정을 할 수 있는 기능이 추가되었습니다.

 적용해본 결과 답댓글과 비밀 댓글을 제외한 댓글을 고정할 수 있습니다.

 또한 앞으로는 답댓글 뿐만 아니라 댓글의 댓글에도 답댓글을 할 수 있고, 알림도 가게 할 수 있습니다. 특히 답댓글은 기존과 달리 새창도 뜨지 않고 곧바로 달 수 있습니다.

 다만 textarea를 사용하던 기존 댓글 시스템과 다르게 div를 사용하기 때문에 곧바로 이미지를 삽입하는 방식은 사용할 수 없습니다.

 이미지를 업로드하면 주소가 복사되고, 이를 붙여넣는 방식으로 해야 합니다.

 

댓글 버그들 수정

 구버전에서 댓글이 많이 달리면 이전 댓글 불러오기가 되지 않던 문제, 댓글을 치환하다가 생기는 문제를 수정했습니다. 

 또한 css 선택자 오류로 새창 링크를 댓글에 올릴 때 화살표가 나오지 않던 문제도 해결했습니다.

 

댓글의 디자인 변경

 댓글을 다는 창의 디자인을 변경했습니다.

 자세한 모습은 신 댓글 시스템의 추가된 기능쪽에 올린 부분을 보시면 됩니다.

 

디자인 변경

 기존 디자인을 사용하시던 분들의 수요가 있기 때문에 급진적으로 고치진 못했지만 전체적인 디자인을 변경했습니다.

 바뀐 부분은 다음과 같습니다.

 

[참고*아래에 나오는 부분 외에도 본문 그림자 제거라던가 버튼을 눌렀을 때 나오는 toast알림의 디자인 같은 여러 변경점들이 많으나 분량의 문제로 다 적지 못했으니 양해 부탁드립니다.*]

 

상단의 색깔 변경 + 파도 디자인 변경

 오랫동안 배경 색깔 변경 + 파도 디자인의 상단 디자인을 제공했었습니다.

 다만 노트북을 사용하는 저사양 유저의 경우 렉을 느낄 수 있는 요소가 있어서 고민 끝에 애니메이션이 없는 방식으로 바꿨습니다.

 물론 매우 저사양 유저 기준이라서 이 부분을 감수하고 계속 사용하실 분은 옵션을 통해서 다시 불러오는 게 가능합니다.

 

메인 커버와 리스트의 디자인 변경

 섬네일리스트1, 섬네일리스트2, 카드 섬네일, 슬라이더의 디자인을 변경했습니다.

 그리고 글씨가 나오지 않고 순수하게 이미지만 나오는 슬라이더를 추가했습니다. 

 기존 슬라이더는 글씨도 보여야하기 때문에 이미지에 모드에 따라 하얀색/검정색 배경이 깔렸었는데, 이미지만 나오는 슬라이더는 그런 게 없습니다.

 또한 썸네일의 경우도 최대한 정사각형 썸네일이 잘 반영되도록 수치를 조정했습니다.

 섬네일리스트1, 섬네일리스트2, 가로형섬네일의 숫자를 제한하고 더보기 버튼이 나오도록 되어 있는데, 이 더보기 버튼의 디자인을 고쳤습니다.

 

 그 외에도 리스트의 디자인을 변경했습니다.

 

본문 위로 올라온 목차 디자인 변경

 옵션을 통해서, 혹은 화면이 작아져서 본문 위로 목차가 올라오게 되었을 때의 디자인을 변경했습니다.

 

링크 박스의 디자인 변경

 링크를 한 후 엔터를 쳤을 때 나오는 링크 박스의 디자인을 변경했습니다.

 새로운 디자인을 보여드리기 위해 스피드스타 스킨 블로그의 링크를 걸어보겠습니다.

 

https://speedstarskin.tistory.com/

스피드스타 (Speed Star) 스킨

 

사이드바 카테고리 메뉴의 디자인을 변경

 하위 카테고리는 다른 배경색을 가지도록 바꿨고 호버 방식을 간결화하게 바꿨습니다.

 또한 뒤에 나오는 숫자의 디자인도 고쳤습니다. 기존에는 검정 배경 - 흰색 글씨였는데 선으로 감싸는 것으로 바꿨습니다.

 

본문 아래의 태그 디자인 변경

 본문 아래에 등장하는 태그의 디자인을 변경했습니다.

 

코드블럭의 디자인 변경

 스킨에 내장된 코드블럭 왼쪽에 줄마다 숫자가 나오도록 했고, 디자인도 변경했습니다.

 또한 따로 코드하이라이터 플러그인을 쓰시는 분들을 위해 옵션을 껐을 때 확실하게 스킨에 내장된 코드 블럭의 디자인이 영향을 끼치지 않도록 변경했습니다.

 

 코드블럭의 복사하기 버튼을 눌렀을 때 텍스트의 원형이 유지되도록 했고, 아이폰이나 다른 케이스에도 복사가 가능하도록 호환성이 더 좋게 코드를 변경했습니다.

 

목차의 기능 업데이트와 이동좌표 코드 개선

 목차가 고정되어 있는 환경일 때 글을 내리면 목차가 올라오도록 수정했습니다. 

 그리고 목차를 자유롭게 접고 펼 수 있게 했습니다. 

 글로 설명하기엔 복잡해서 움짤을 첨부합니다.

 

 

 목표의 이동좌표 코드도 개선했습니다.

 기기와 화면 크기에 따라 이동하는 기준이 미묘하게 다르고, 사람 마다 여길 누르면 어디로 가야한다는 기준이 달라서 완벽하게 모든 경우를 충족하진 못했습니다.

 목차를 완전히 제거하는 옵션도 추가했습니다.

 그리고 가장 중요한 것인데, 목차가 본문 위에 올려서 나오게 하면 CLS에서 점수 손해를 봤습니다.

 하지만 코드를 바꿨고, 위의 검사 결과처럼 목차가 화면을 덮는 상황임에도 CLS에서 초록불이 들어올 정도로 성능을 개선했습니다.

 

신규 치환자 추가

 점선, 요약, 올려라는 치환자가 추가되었습니다.

 각 치환자를 소개하자면 다음과 같습니다.

 

점선

[점선**]

 

 위와 같이 구분선을 그어주는 치환자입니다.

 사용법은 위와 같습니다.

 

요약

[요약*이렇게 사용하는 치환자입니다.*]

 

 위와 같이 요약할 때나 메세지를 전달할 때 사용하는 치환자입니다.

 사용법은 위와 같습니다.

 

올려

[올려*여긴 밑에 있는 글*여긴위에있는글*]

 

 위와 같이 특정 단어를 부연설명하려는 용도로 위에 글씨를 추가할 때 사용하는 치환자입니다.

 사용법은 위와 같습니다.

 

P.S 현재 블로그에 신규 치환자를 정리해서 글을 수정하겠습니다.

 

스킨 옵션의 변경점들

 기존에는 컴퓨터에서만 적용되던 것이지만 이제 스크롤을 올릴 때에만 네비게이션이 등장하는 옵션을 조정했습니다.

 기존에는 목차를 어느 넓이에서 펼지를 옵션으로 정했습니다. 하지만 목차를 모바일에서 접는 옵션으로 변경했습니다.

 이 옵션은 화면이 좁은 모바일인데 목차가 시작부터 화면을 뒤덮는 느낌이 싫은 분을 위해 만든 옵션입니다.

 

 

 사이드바를 고정할 수 있는 옵션을 만들었습니다. 기존에는 최신글이 내려올 때 자바스크립트로 고정되도록 했지만 방식을 sticky로 변경했습니다.

 

 그 외에도 이미지의 그림자를 없애는 옵션을 추가했습니다.

 

공감 버튼 옵션 정리와 약간의 변경점 

 잘 사용하지 않던 선택지를 정리해서 이제 공감 스타일은 2가지 옵션만 제공됩니다.

 제가 제작한 기본 공감 스타일과 티스토리에서 제공하는 기본 스타일입니다.

 티스토리에서 기본 제공하는 스타일의 공감 버튼을 눌렀을 때 구분될 수 있도록 바꿨습니다.

 기본 공감 스타일 한정, 공감 버튼에 마우스를 대면 추천을 부탁하는 문구를 만들었습니다.

 기본 공감 스타일의 모바일에서 공감 버튼 비율을 더 보기 좋게 조정했습니다.

 

글감 기능도 사용할 수 있게 업데이트

 티스토리에서 추가한 글감 기능을 사용할 수 있도록 CSS를 수정했고, 해당 부분의 lazyload 코드도 삽입했습니다.

 

버그 수정 + 인터넷 익스플로러 지원 종료

 카카오톡 공유 버튼이 작동하지 않던 버그를 수정했습니다.

 기본 공감 스타일에서 이전글 다음글 링크가 작동하지 않던 버그를 수정했습니다.

 네비게이션 메가메뉴에서 로딩을 기다리는 동안 로더가 뜨지 않던 버그를 수정했습니다.

 쿠키 문제로 발동하지 않던 함수를 삭제했습니다.

 첨부파일의 이름이 2줄로 나오는 버그를 수정했습니다.

 태그로그의 링크 주소가 변경 되어서 연결이 되지 않았었는데 바꿨습니다.

 h2와 h3 태그 이용시 글이 너무 길면 줄이 이상해지는 문제를 해결했습니다.

 

 그리고 인터넷 익스플로러의 지원을 종료합니다.

 현재 인터넷 익스플로러의 점유율은 0.17%입니다.

 제가 스킨을 처음 만들었을때 IE의 점유율은 컴퓨터 기준 12.37%였지만 이젠 의미가 없는 미미한 수준으로 변했습니다.

 그나마 이 미미한 수준의 점유율도 특수한 사례(ex:랩실)가 차지하는 점유율이라 이제 지원을 하지 않기로 결정했습니다.

 

 인터넷 익스플로러의 경우 완전히 지원 종료를 했고, 강제로 키려면 레지스토리를 건드려야 하는 등 사실상 접근이 봉쇄된 상태입니다.

 

그 외의 수정사항들

 글을 다 읽으면 나타나던 상자가 모바일에서 등장하지 않게 했습니다.  모바일의 작은 화면에서 상자가 나타나면 사용자에게 불편함을 줄 수 있기 때문입니다.

 

 성능을 위해 !important와 onclick 이벤트를 최대한 줄였습니다.

 

 검색창 활성화시 밀림 방지 코드가 모바일에선 빈공간을 노출하는 경우가 있었는데 수정했습니다.

 

 align-left, align-right,float-left,float-right 상태의 이미지가 모바일에서 100%의 크기가 되던 것을 원래 크기가 되도록 수정했습니다.