고스트 테마 최적화 후 Lighthouse 웹사이트 품질 검사 결과

버튼 위치 하나 바꾸려 했을 뿐인데...

요즘 블로그에 제가 만든 플러그인과 확장 프로그램 정보를 올리면서 작은 버튼 하나가 거슬렸습니다. 모바일 화면에서 다크 모드/라이트 모드 전환 버튼이 챗봇 버튼에 가려져서 잘 눌러지지 않더군요. 이 버튼의 위치를 수정하고자 오랜만에 고스트(Ghost) 테마를 열어봤습니다.

테마 작업 방식

본격적으로 테마를 수정했던 건 몇 년 전이라 예전 방식이 익숙합니다. 예전 방식은 수정 내용을 적용하기까지 꽤 귀찮은 과정이 필요했습니다. 간단한 수정 하나를 하려 해도 과정이 번거로운 편입니다.

이전 작업 방식

고스트는 handlebars를 사용하고 테마를 zip으로 압축해야 하기에 원래의 테마수정 방식은 꽤 귀찮습니다.

요즘 작업 방식 (관리자 페이지에서 수정)

그런데 몇 개월 전 고스트에도 유용한 기능이 생겼습니다. v6.39 이상 버전에서는 관리자 웹페이지에서 테마를 바로 수정하고 적용할 수 있습니다.

더 나은 방식 (Antigravity IDE)

몇 년 전에 AI를 사용할 때는 지금처럼 편리한 AI 도구가 없어서 파이썬(Python)이나 cURL로 AI를 호출해 사용했습니다. 요즘은 다양한 도구가 나와 있어 훨씬 편리해졌습니다. 어차피 테마는 GitHub 비공개 저장소(Secret Repository)에 보관되어 있으니 Antigravity IDE에서 테마 적용까지 한 번에 처리할 수 있습니다. 작업 방식을 개선하는 김에 테마 적용까지 Antigravity IDE에서 전부 처리하도록 설정해 두었습니다. GitHub에 시크릿을 등록하고 GitHub Actions를 사용해 배포하는 방식은 이전에도 가능했지만, 직접 구현하기가 귀찮았습니다. 이제는 AI를 활용하니 금방 완성되어 편리하네요.

Lighthouse로 품질 검사

Chrome Lighthouse란?

Chrome Lighthouse는 구글에서 개발한 오픈소스 자동화 도구로, 웹 페이지의 품질을 개선하기 위한 종합 진단 도구입니다. 웹 개발자와 운영자가 자신의 사이트가 사용자에게 최적의 경험을 제공하고 있는지, 구글의 검색 엔진 최적화(SEO) 기준에 부합하는지를 수치로 확인할 수 있게 도와줍니다.

PC 버전 점수

처음에는 성능 점수가 60점 정도로 나왔습니다. 고스트는 외부 CDN JS도 몇 개 사용하는데 캐시 기간을 조절할 수 없고, 무엇보다 애드센스 광고 때문에 모든 요소를 다 개선할 수는 없었습니다. 그래도 이것저것 수정했더니 PC 버전 페이지는 다행히 점수가 많이 올라갔습니다. 더 지나치게 최적화하면 점수를 높일 수도 있겠지만 이쯤에서 마무리하기로 했습니다. 진행한 주요 수정 사항은 다음과 같습니다.

모바일 버전 점수

반응형 페이지라서 PC 버전과 비슷하게 나올 줄 알았는데, 모바일은 점수를 올리기가 상대적으로 어렵습니다. 처음에는 40점대였으나 84점까지 올리긴 했습니다. 다만 측정할 때마다 점수가 다르게 나와 완전히 신뢰하기는 어렵네요. 점수 변동 폭이 50점에서 84점까지 커서, 그냥 사탄들렸다 생각하고 넘어가는게 나을 거 같습니다.

마치며

그래도 고스트를 사용하면서 좋은 점은 검색 엔진 최적화(SEO) 점수가 항상 높게 나온다는 것입니다. 요즘은 조플린(Joplin) 노트에서 글을 작성하고 고스트로 바로 올리기 때문에 콘텐츠 발행이 한층 쉬워졌습니다.(그전에도 옵시디언에서 작성하긴 했습니다.) 쉬워진 만큼 앞으로는 콘텐츠 자체의 품질에 좀 더 공을 들여야겠습니다.