블로그스팟 스킨을 Litespot으로 바꾸었다.

오늘 부로, 이 블로그스팟의 스킨을 Feedify에서 Litespot으로 바꾸게 되었다.

바꾸게 된 이유와 과정을 아래에 자세히 서술하기로 한다.

1. 발단

지금까지 내가 PC에서 이 블로그스팟에 접속할 때는 느리다는 느낌이 별로 들지 않았다. 그러나 스마트폰에서 접속하면 티스토리 블로그에 비해 뭔가 좀 속도가 느린 느낌이 계속해서 들었다.

하지만 그저 예민해서 그렇게 느낀 거라는 생각이 들었을 뿐, 나는 이 문제에 대해 조치를 할 생각은 없었다. 그러나 구글 놈들이 크롤링을 멈추고, 빙 놈들에게는 검색 배제를 당하는 등 11월에 온갖 악재가 이 블로그에 쏟아지니까, 접속 속도 문제도 이제는 신경이 거슬려서 어떻게든 해결하고 싶어졌다.

하지만 별로 좋은 수가 떠오르지 않았다. 그래서 나는 반쯤 포기하고 매번 그랬듯 블로그스팟과 관련된 정보를 탐색하고 있었는데... 우연히도 Feedify 스킨을 만든 업자의 다른 상품, Lightify 스킨을 사용하는 블로그에 들어가게 되었다.

여기서 잠시, 구야비 사이트에서 다운로드 할 수 있는 무료 버전의 스킨에 관해서 언급하고 가도록 하겠다.

무료 버전 스킨은 스킨 파일(.xml)의 하단 부분에...

var _0x영문숫자=["\x16진수\x16진수\x16진수....

이런 식의 코드가 포함되어 있다. 그 코드는 스킨의 핵심 코드가 난독화된 것이다. 난독화된 코드 내부에는 업자가 지정해놓은 '바닥글'이 수정됐는지의 여부를 판독하는 함수가 포함되어 있을 것이다. (아마 setInterval 같은 반복 함수와 합쳐서 몇 초에 한 번씩 변경을 확인하는 것 같다.)
그리고 바닥글이 임의로 수정되었으면 업자의 홈페이지로 강제 리다이렉트 되는 구조다. 따라서 외국 사이트에는 바닥글을 수정하기 보다는, 불투명도와 글자 크기 조절로 사람 눈에 안 보이도록 처리한 뒤, 그 위에 자신의 바닥글을 넣는 식으로 우회하는 방법들이 소개되고 있다.
이야기가 딴 곳으로 샜는데, 아무튼 내가 본 블로그는 유료 결제를 한 모양인지 난독화된 코드가 아닌 정상적인 코드가 보였다. 그래서 나는 해당 스킨의 난독화된 코드와 정상적인 코드의 바이트 수를 비교해 보았다. 그랬더니... 놀랍게도 난독화된 코드는 정상 코드에 비해 약 8배 가까이 바이트 수가 많다는 걸 확인할 수 있었다.
코드의 분량도, 복호화 시간도 생각한다면... 구야비의 무료 스킨은 블로그의 로딩 속도에 충분히 부정적인 영향을 줄 수 있다는 결론에 다다르게 된다.

참고로 바닥글 우회 방법을 여기에 짤막하게 소개하도록 하겠다.
HTML 편집 메뉴에 가서 업자가 적어놓은 바닥글 텍스트를 검색한 다음...
위의 스샷처럼 a 태그의 href와 id만 건드리지 않고 나머지 부분은 삭제한다.
그리고 감싸고 있는 div 태그(위 스샷에선 footer-copyright)에...

style='font-size:1px; opacity:0; pointer-events: none;'

을 추가해준다.

그리고 div 태그 윗 부분에 자신의 바닥글을 추가하면 끝이다.
이렇게 하면 바닥글은 눈속임으로 가릴 수 있지만, 정작 난독화 코드가 남아있으니 블로그 로딩 속도가 느린 건 마찬가지다.

2. 온갖 삽질

나는 먼저 Feedify 스킨 내의 난독화 코드를 Lightify 스킨의 정상적인 코드로 바꿔치기를 시도해봤다. 같은 업자가 만든 것이니 호환이 되지 않을까라는 생각이 들었기 때문이다.
하지만 그건 착각이었다. 스킨에 사용되는 부가 스크립트(?)도 다르고, 변수명도 똑같지 않았다. 어떻게든 변수명을 맞추고, 각종 오류들을 해결하는 건 성공했지만... 고쳐야 할 곳이 한 두군데가 아니었다. 몇 번 더 삽질하다가 때려쳤다.

다음으로 시도한 것은 난독화된 코드를 복호화하는 것이었다.

온갖 시행착오를 거쳐서, 그나마 사람이 알아볼 법한 수준으로 코드화시키는 것까지는 성공했다. (de4js 라는 사이트에서 eval - packer 방식으로 복호화를 하였다.)
하지만 이게 코드라는 것만 알 수 있을 뿐, 여전히 이해가 안되는 건 마찬가지다. 대부분의 코드가 0x000처럼 헥스 코드로 되어 있었다. 또한 코드에 사용되는 문자열들이 들어간 거대한 배열 변수도 있었다.

바로 이런 식으로 말이다.
이렇게 파편화된 문자열을 대체 어떤 식으로 참조한다는 건지... 도저히 갈피를 잡을 수가 없었다.
세절기로 세절한 문서를 다시 조각 맞추는 거나 다름없는 짓이다. 얼마나 세월이 걸릴지도 알 수 없고, 겨우 다 맞췄다고 해도 정상 작동이 안되면 말짱 도루묵이다. 따라서 이 방법도 때려치기로 했다.

3. Litespot 스킨을 최대한 Feedify처럼 바꾸기

결국 나는 Feedify 스킨을 개조하는 것도, 복호화하는 것도 모두 포기했다. 돈 주고 유료 버전을 살 마음은 들지 않고, 차라리 난독화 코드 없이 Feedify와 유사한 다른 무료 스킨으로 교체하는 게 좋겠다는 생각이 들었다. 그렇게 정처없이 인터넷을 탐색하다가, 어느 Github에서 같은 업자가 만든 Litespot 이라는 스킨을 발견했다. 해당 스킨은 난독화 코드가 풀린 상태였다. 아마 구매 후에 뿌리는 모양인가 보다.

일단 Litespot은 로고와 메뉴가 1단으로 붙어있는 상태다. Feedify처럼 2단으로 나눠야 한다.
그 외에 요소의 위치나 문자 색상·크기 등 손봐야 될 부분이 한두가지가 아니다.
이 스킨을 테스트용 블로그에 설치하고, 최대한 Feedify와 비슷하게 보이도록 거의 하루 동안 온갖 삽질을 거듭하였다. 이하 내용은 삽질한 사항을 정리한 것이다.

* 삽질 내역
1. 블로그 로고의 높이 제한 삭제.

2. 블로그 로고에 높낮이 여백 설정.
3. 블로그 로고와 상단 메뉴 분리. (2단화)

4. 2단화로 인해 모바일 화면의 좌측 상단 메뉴(三)가 안 뜨는 문제 수정.

5. 나눔고딕 웹폰트 설정. (기존 방식이 아닌 더 빨리 로딩되는 방식으로 변경.)

6. 이미지 최대 폭 100% 제한, 테두리 추가.

7. 본문 제목 및 크기 조정.

8. 게시물 목록의 썸네일, 제목, 내용 크기 조정.

9. 홈페이지 화면에 대문 메시지 추가.

10. <p> 태그 줄 간격 수정.

11. Font Awesome 스크립트 비활성화. (로딩 딜레이를 줄이기 위해)

12. 밑줄(<u> 태그)과 글자가 겹치는 현상 수정.

13. 2단화로 인해 모바일 화면에 블로그 로고가 안 뜨는 문제 수정.

14. 2단화로 인해 블로그 로고가 화면 폭에 따라 움직이지 않는 문제 수정.

15. 바닥글 위쪽에 영역 3개 추가.

16. 하단 블로그 설명글 구조를 Feedify처럼 변경.

17. 굵게 처리되어 나오는 글자들 수정.

18. 바닥 영역에 여백 수치 변경.

19. 색상 값을 Feedify처럼 변경.
20. 게시물 이전, 다음 버튼 비활성화 처리.

21. 사이드바 제목 영역에 여백 추가 및 테두리 삭제.

22. 사이드바 검색 위젯에 제목 표시되도록 변경.

23. 바닥글 추가 영역 3개의 제목 크기 및 여백 변경.

24. 게시물 목록에서 작성자 밑에 내용이 나오도록 수정.

25. 작성자 닉네임이 굵게 표시되도록 수정.

26. 최근 게시물 위젯 코드 추가. (추가할 뿐 사용하지 않음)

27. 본문 하단의 카테고리(라벨) 표시를 Feedify처럼 변경.

28. 블로그 기본 폭을 1180px로 변경. 사이드바 폭을 320px로 변경. (Feedify와 동일하게)

이렇게 고치고 나니, 기왕 고치는 겸 PageSpeed Insights에서 좋은 점수를 얻을 수 있을 만큼 고치자는 생각이 들었다.

29. 스킨 xml 초반부에 있는 meta 태그 관련 부분들 삭제.

30. 상단 메뉴의 하부 메뉴 글자 크기 및 굵기 변경.

31. 검색 버튼에 value 및 aria-label 추가.

32. 모바일 로고의 img 태그에 alt 추가. a 태그에 aria-label 추가.

33. maximum-scale=1 속성 삭제.

34. 다크 모드 버튼에 aria-label 추가.

35. 상단 메뉴와 하부 메뉴의 role 항목을 삭제.

36. bootstrap 스크립트 인용 중단. 게시물 제목에 line-height 추가하여 겹침 방지.

37. 배포자가 숨겨놓은 이상한 스크립트 및 사이트 부분 삭제.

38. 카테고리 메뉴의 글자 크기 및 줄 간격 변경. 

39. 날짜별 게시물 메뉴의 줄 간격 변경.

40. 구글 애드센스 코드가 있을 시 화면 우측 하단에 맨 위로 가는 버튼이 안 뜨는 문제 수정.

41. 하단 블로그 설명글에 링크를 추가. (SEO 점수 하락 때문에)

42. 화면 폭이 좁을 때 일부 이미지의 오른쪽에 스크롤바가 생기는 문제 수정.

...정리해보니까 정말 많은 부분을 수정하였다.

테스트용 블로그에서 스킨 편집을 마치고, 이 블로그에 편집한 스킨을 설치하였다.
자, 그러면... PageSpeed Insights에서 점수는 얼마나 나올까?

참고로 Feedify 스킨을 썼을 때 모바일 성능(Performance) 점수는 50점도 아닌 33점이 나왔다.

그러면 모든 작업을 다 하고 난 뒤에 측정한 Litespot 스킨 점수는 얼마나 될까?

모바일 44, 95, 95, 100

데스크탑 89, 95, 100, 100...

아니.. 이렇게까지 삽질했는데... 성능 점수가 44점 밖에 안 나온다고?
참고로 모바일 성능 점수는 들쭉날쭉해서.. 삽질하던 도중에 측정할 때는 50점대도 나온적이 있었다. 티스토리 블로그는 모바일과 데스크탑 점수가 이 정도로 크게 차이나지 않았던 것 같은데... 왜 그런지는 알 수가 없다.

그래도 Feedify 스킨 쓰던 시절에 비하면, 로딩 속도는 30~40% 정도 개선된 것 같다.

앞으로는 이 Litespot 스킨을 고쳐가면서 여기 블로그스팟을 운영하도록 하겠다.

그럼 이만...