블로그 리뉴얼, 빠른 속도의 반응형 스킨 지오 205

 

몽리 꿈속으로 블로그의 리뉴얼 작업을 진행하겠습니다. 보통 웹사이트의 리뉴얼 작업은 사전에 미리 다 준비해 놓고 야밤에 뚝딱 진행합니다. 하지만 개인 블로그는 그렇게 까지 하긴 힘들죠. 개인 블로그는 시간 날 때마다 조금씩 수정하는 것이 국룰이지만 이번엔 1~2주 동안 뚝딱 작업을 끝내기로 하겠습니다.

 

블로그 리뉴얼

스킨 변경 작업을 진행할 것이고요. 완전 다른 모습으로 탈바꿈됩니다. 스킨을 변경하기에 기존에 제공되는 기능은 온전히 모두 사용할 수 없을 것 같습니다. 어떤 기능들을 적용하였는지 기억이 나질 않아서 말이죠.

 

블로그 스킨 왜 바꾸나

구글 서치 콘솔 실험의 코어 웹 바이탈 모바일
구글 서치 콘솔, 실험의 코어 웹 바이탈 모바일 보고서

3년 가까이 방치하다 보니 블로그가 난리가 났습니다. 구글 검색도 네이버도 많은 변화가 있었더라고요. 모바일 사용 편의성도 적응을 다 못했는데 또 새로운 것이 추가되었더군요. 구글 서치 콘솔의 실험, 개선 사항 그래프를 보고 정말 암울했습니다. 접한 지 얼마 되지 않아 코어 웹 바이탈이 무엇을 의미하고 어떻게 해결해야 하는지는 아직 잘 모릅니다. 여전히 모바일에 무게를 두고 있다는 것만 확인했을 뿐이네요. 그나저나 모바일의 빠른 URL이 급등하던 당시에는 행복한 크리스마스 보내라는 구글의 깊은 뜻이 담긴 선물인 줄 알았었는데요. 몇 주만에 다시 원상복구 하더라고요. 코인 등락처럼 살벌합니다.

 

코어 웹 바이탈 모바일 보고서 그래프
코어 웹 바이탈 모바일 보고서의 느림 및 개선이 필요함 그래프

구글은 수년 전부터 모바일에 큰 가중치는 두고 있었는데요. 최근 몇 년 더욱 견고하게 다져왔었던 것 같습니다. 여전히 그리고 당분간은 모바일 최적화가 관건이 될 수밖에 없어 보입니다. 느림, 개선이 필요함도 결국은 다 모바일 사용 편의성이죠. 코어 웹 바이탈이라는 것 자체가 결국 모바일 디바이스에서 빠르고 안전하게 접속하여 볼 수 있는 환경을 제공하라는 것으로 해석되니까요. 그 기준에 못 미치면 빨간 불기둥 솟아오르는. 주식에선 불기둥은 좋은 것인데 서치 콘솔에선 재앙이죠. 구글이 사이트 운영자, 블로거 등에게 이렇게 말하고 있는 것이죠. 너네 사이트 느리다. 웹페이지 속도 빠르게 최적화 안 하면 앞으로 방문자 없다.

 

 

티스토리 블로그의 스킨은 최적화가 가능합니다. 가볍게 하는 것은 그렇게 어렵지 않습니다. 빨리 뛰고 싶을 때 무거운 것 내려놓고 뛰듯 용량 큰 리소스, 플러그인, 외부 리소스, 자바스크립트, 라이브러리 등 필수 요소만 남기고 불필요한 것 싹 걷어 내면 됩니다. 하지만 몸통인 티스토리 블로그는 최적화가 거의 불가능에 가깝습니다. 제이쿼리 라이브러리 하나만 하더라도 너무 무겁습니다. 태생도 그렇고 세월이 흐르다 보니 너무 무거워졌습니다. 그래도 조금만 노력하면 빨간 기둥을 만드는 문제들은 해결할 수 있습니다. 멋진 효과, 있어 보이는 기능들 화려한 껍데기부터 벗어 가볍게 하고 글 쓰는 방식도 리소스를 최소로 하여 최적화하면 되니까요.

 

블로그 스킨은 예전부터 가벼운 것으로 변경하려고 했습니다. 예전부터 새로 하나 만들어서 사용하려고 했었는데요. 미루고 미루다 보니 몇 년 흐르더라고요. 결국은 빨간 불기둥에 녹다운당했습니다. 스킨도 최적화가 거의 불가능에 가까운 것이 있습니다. 낡은 뼈대의 화석이라고 볼 수 있는 구형 스킨들이 그렇습니다. 제작자의 지원이 끊긴 스킨들도 최적화는 불가능하다고 봐야 하죠. 일단 제이쿼리 기반이거나 의존도가 높은 것들은 피하는 것이 좋다고 봅니다. 웹 프로트앤드에서도 버려지고 있는 것이 현실이니까요. 아 그러니까 가만 둬도 느린 스킨들은 직접 최적화할 수 있는 능력이 없다면 업데이트 잘해주는 제작자의 스킨을 사용하는 것이 좋습니다. 최적화 여부를 떠나 스킨을 직접 수정 편집할 수 있는 능력이 없다면 다른 사람이 작업해 주는 것을 사용하는 편이 백배 낫습니다. 저의 경우는 스킨 작업이 너무 귀찮기도 하지만 이젠 글자를 오래 보고 있는 것이 힘들어지더라고요. 그래서 이젠 좀 편하게 관리하기 위해 다른 사람이 작업해 주는 스킨을 찾아 변경하려 마음먹었습니다. 당연히 기능보다는 속도가 우선이고 그다음이 가격! 공짜면 좋고 아니면 블로거 템플릿 정도의 가격대.

 

어쩌다 스킨이 느려졌나

몽리넷 꿈속으로 블로그 모바일 페이지
마크쿼리 - Spider's Web

현재 블로그에 사용하고 있는 스킨은 '마크쿼리 - Spider's Web' 스킨입니다. 부투스트랩 기반의 반응형 스킨입니다. 저는 마크쿼리 스킨이라 칭하는데요. 반응형 스킨이 하나 둘 선보 선보이던 2013년 정도부터 배포된 스킨으로 기억합니다. 제가 다운로드하여 적용할 당시에도 이미 제작자가 개발을 중단한 상태이었습니다. 개발자가 포기한 것은 사용자 또한 포기하는 것이 맞습니다. 외관은 30% 정도 남아 있다고 봐야 할 것 같네요. 뼈대는 좀 더 남았겠지만 너덜너덜할 정도로 이런저런 것들이 추가되고 수정된 상태입니다.

 

몽리넷 꿈속으로 블로그 모바일 페이지는 성형 중독 수준으로 수정을 많이 했던 것으로 기억합니다. 제목이 한 줄로 표시되게 하려고 해당 요소를 많이 변형했던 기억이 있네요. 물론 해더, 내비게이션, 날짜, 작성자 등의 영역도 모두 수정 작업을 했습니다. 본문 영역도 마찬가지입니다. 본문 폭부터 소제목, 이미지, 폰트 모조리 수정한 상태입니다. 

 

몽리넷 블로그 공감 버튼, 공유 버튼, 카테고리 더보기, 최신 글 영역
공유 버튼, 카테고리 글, 최근 댓글, 태그, 푸터 등 모두 수정한 상태

게시물 본문 하단 영역의 다양한 버튼들. SNS 공유 버튼 영역, 게시물 저작권 안내 영역, 카테고리 글 더보기 썸네일 리스트 등도 모두 수정한 상태입니다. 사이드바의 최근 글, 최근 댓글, 태그 등의 위젯 요소들도 모두 수정한 상태입니다. 하단 바닥의 푸터도요. 거의 소스를 다시 짠 수준으로 수정한 곳들이 많습니다. 오래되기도 했지만 여러 소스들이 추가된 스킨의 속도는

 

몽리넷 블로그의 반응형 스킨 모바일 속도
페이지스피드 인사이트 측정결과 모바일 성능 9점

9점입니다. 모바일에서의 성능 점수 9점으로 측정되었습니다. 시간대에 따라 측정 결과는 다릅니다. 다소 차이가 심하지만 8~24점 사이로 측정되고 최고 점수도 25점을 넘기진 못했었네요. 인터넷 사용량이 적은 늦은 시간에는 속도가 좀 더 빨리 측정됩니다. 그래서 크리스마스 기간에 빠른 URL로 측정되었던 것이 아닐까 생각하고 있습니다. 평소에는 불기둥 영역을 장악하고 있습니다. 최적화되어 속도가 빠른 스킨을 사용하면 속도 측정 점수가 높게 측정되겠죠. 속도가 빨라지면 코어 웹 바이탈에서도 녹색 빠른 URL로 바뀔 것이고 검색 결과 페이지에서도 점차 좋은 위치에 노출될 것으로 기대합니다.

 

얼마나 빠른 스킨으로 변경하나

티스토리 스킨 지오205 모바일 성능 86점
티스토리 스킨 지오205 v1.0 모바일 성능 점수 86점

속도 빠른 티스토리 스킨을 찾아 인터넷을 뒤졌습니다. 그리고 발견했습니다. 모바일 속도가 90점을 넘는 스킨을 찾았습니다. 진열대에 진열해 놓은 상품이니 잘 다듬어 놓았겠죠. 게시물에 첨부한 이미지도 압축의 압축을 했겠지요. 그게 바로 최적화이니까요. 스킨 같은 것들은 구입하기 전에 살펴보기 정말 좋죠. 온라인에서 실물을 살펴 볼 수 있으니까요. 직접 페이지 살펴보고 구글 페이지스피드 인사이트에서 측정해 보시기 바랍니다. 저의 경우는 91점까지 나왔었는데 캡처 이미지를 어디에 뒀는지 못 찾겠네요.

 

지오205 스킨 소개 페이지의 속도 측정 결과
티스토리 반응형 스킨 지오205 v1.0

티스토리 반응형 스킨 지오 205입니다. 따끈따끈한 신상입니다. 판매되기 1~2주 전에 발견한 것 같은데요. 판매되기 전부터 데모 블로그가 존재했습니다. 찜 해놓고 판매 시작되면 구입하려고 하였는데요. 궁금한 것이 있어 문의를 하였는데 아니 글쎄 이 스킨을 사용하라고 그냥 주셨습니다. 어이쿠 정말 캄솨 캄솨~ 보시다시피 이 스킨은 심플합니다. 그러니 속도가 빠른 것이겠죠. 스킨의 장점은 '지오 205 스킨 소개'에 잘 설명되어 있으니 살펴보시고요. 몽리는 칭찬보다는 비판에 특화된 블로거이기에 시작하도록 하겠습니다.

 

 

지오 205 스킨은 제게 빠른 속도가 최고의 장점이었는데. 누군가는 판매 가격을 장점으로 꼽을 수 있을 것 같았습니다. '지오 205 스킨 판매 페이지'의 라이선스 정책을 보면 '1인 1 계정 5개 블로그 사용'으로 되어 있습니다. 가격은 39,900원이지만 1 계정으로 5개 블로그를 운영하는 경우에는 매우 저렴하게 사용할 수 있습니다. 진짜 밥 한 끼 가격인 7,980원이요. 개인적인 생각으로는 1 카피 9,900원 ~ 14,000원 사이로 가격을 책정하여 박리다매를 노려보는 것도 좋지 싶은데 말입니다.

 

큰 숫자 5만 중요하게 생각하면 안 됩니다. 그럴수록 자꾸만 더 내게 유리한 '5개 블로그' 방향으로만 생각하게 되니까요. 사실 제가 이미 문의했었네요. '1인 3 계정 3개 블로그이거나 1인 5개 계정 5개 블로그는 사용 불가인가요?' 딱 잘라 불가라는 답은 하지 않으셨지만 불가능한 것으로 알아들었습니다. 네 그래요. 블로그를 통해 밝히진 않았지만 블로그 여러 개 있습니다. 참고로 티스토리는 1 계정에 5개 블로그를 운영할 수 있습니다. 얼마 전에 업데이트되어 하나의 계정에서 생성한 블로그들도 모두 별도의 닉네임을 사용할 수 있게 되었습니다.

 

예전부터 느꼈던 부분인데요. 티스토리 스킨도 '1인 5개 계정 5개 블로그 사용'이라는 정책으로 나오니 너무 좋네요. 외국의 경우 워드프레스 테마나 구글 블로거 템플릿 등 다양한 레이아웃을 유료로 판매합니다. 1 라이선스에 50달러짜리도 있고, 10달러짜리도 있습니다. 1 라이선스에 3개 도메인 사용도 있고, 1 라이선스에 500개 도메인 사용도 있습니다. 물론 구독제도 있고 1 라이선스 1도 메인 4만 원도 있고 가격도 천차만별 라이선스 정책도 천차만별입니다.

 

아쉬운 부분은 없나

지오 205 스킨 바디 배경색과 위젯 배경색
연하늘색 배경이지만 특정 요소들은 흰색 배경

일단 단점은 아닙니다. 취향 차이라고 봐야죠. 그리고 데모 블로그에서 '상세 스킨 가이드'를 카테고리로 제공하고 있는데요. 저는 필요한 것 2개 정도만 봤기 때문에 설정 기능 제공 혹은 변경 소스 제공 여부까지는 모르겠습니다.

 

헤더 우측의 아이콘이 다크 모드 스위치 위치가 조금 걸립니다. 햄버거라고 하는 메뉴 버튼 왼쪽에 있다 보니 실수로 인한 오작동이 생길 것으로 보입니다. 무엇보다 자주 사용하는 기능이 아니기에 바닥에 두어도 될 것으로 판단됩니다. 다크 모드 스위치 위치에는 대신 검색 버튼 혹은 검색바가 위치하는 것이 사용성이 더 좋아 보입니다.

 

지오 205 스킨의 배경 색상은 연한 하늘색입니다. 카테고리 글목록, 이전 글, 인기글 위젯 등은 흰 배경이고요. 흰색 배경의 요소들은 왜 흰색 배경인지 의문이네요. 제 눈에는 배경색을 통일하는 것이 더 좋을 것 같습니다.

 

중복 기능으로 인한 글 링크 중복이 좀 있습니다. 본문 하단의 카테고리 글목록, 썸네일 이전 글 다음 글, 내비게이션 이전 글 다음 글. 그리고 사이드바에 최근 글 목록까지 하면 심할 경우 4중으로 중복됩니다. 실제 블로그에 적용하더라도 중복이 꽤 많을 것으로 판단됩니다.

 

위로 가기 버튼 위치 및 다크 모드
좌 : 위로 가기 버튼 위치 및 공유 버튼 위치 / 우 : 다크 모드

바닥 푸터 영역의 SNS 공유 버튼 위치와 위로 가기 플로팅 버튼 위치를 맞추는 것은 어떨까요? 위로 가기 버튼을 바닥으로 내렸을 때 버튼들과 위치, 크기 등이 딱 맞아떨어진다면요. 그리고 그 버튼 위치로 헤더 우측에 위치한 다크 모드 스위치를 가져다 내렸으면 더 좋았지 싶네요.

 

한 땀 한 땀 수공 마무리

지오 205 스킨 수정 작업 중
지오 205 스킨 수정 작업 중

제 스킨 작업하는 더미 블로그에서 눈에 걸리던 것들 대충 수정해 보았습니다. '카테고리 썸네일 목록' 넣다 깨달았습니다. 빠른 스킨 찾는 것이 최우선이긴 하지만 스킨 수정 작업 더 이상하지 않고 편하게 블로그 관리하고 싶은 마음도 있었거든요. 그런데 내가 왜 이걸 수정하고 있나 싶더라고요. 뭐 그렇다고요. 그나저나 방치되고 있는 블로그 다 정리해야겠네요. 흩어져 있는 글 모아서 1~2개 만들어 볼까 싶어요. 데이터 백업만 되어도 쉽게 옮겨 갈 수 있을 것인데. 끝~

 

내용 추가

페이지 네이게이션 본문폭 보다 넓어지는 버그
페이지 네이게이션 본문폭 보다 넓어지는 버그

 

이 스킨 적용하고 살펴보니 자잘한 버그가 많습니다. 버그 및 개선 사항 등에 관하여 피드백 넣었네요. 최소한 위와 같은 몇가지 버그는 수정되어야 사용할 수 있을 것 같습니다.