Astro를 이용한 블로그를 만들기 시작한지도 엄청나게 오래 걸린듯합니다.
WordPress를 CMS로 이용하여 사이트를 관리하고 있으며, Astro로 구현하려고 노력 중입니다. 하지만 예상보다 쉽게 진행되지 않고 있습니다. 스크립트 사용을 최소화하고 CSS로 구현하려는 목표도 있지만, 모든 브라우저를 지원하지 않는 CSS 기능들이 많아서 도입을 망설이는 경우도 많았습니다. 이번 글에서는 이러한 과정 속에서 이루고 싶었던 목표 중 하나인 Lighthouse 100% 달성에 관해 이야기해보겠습니다.
성능
집에서 사용 중인 NAS에서 서비스를 제공하고 Cloudflare 터널로 연결을 구성했으나, 성능이 기대만큼 좋지 못했습니다. 100점을 받기는 거의 불가능했고, 집의 인터넷 상태가 양호할 때만 높은 점수가 나올 정도였기에 아쉬움이 컸습니다.
접근성
접근성은 언제나 최우선 과제였으나 쉽지 않은 부분이 많은거 같습니다.
Syntax Highlighter
Shikijs를 이용한 Syntax Highlighter는 언제나 텍스트 컬러 같은 부분이 대비 부족등으로 점수를 잃어버렸기 때문에 테마를 직접 구현하거나 사이트와 어울리지 않는 테마를 사용해야 하는 문제가 있어 지금은 어울리지 않는 테마를 사용하고 있고 언젠가 꼭 직접 사이트와 어울리는 테마로 구현해야 하는 과제를 가지고 있습니다.
CSS scroll-driven animations
scroll-timeline이나 position-anchor와 같은 CSS 속성의 발전으로 JavaScript의 도움 없이 페이지 스크롤 애니메이션 구현이 가능해졌습니다. 또한 기존에는 문맥을 유지하면서 배치할 수 없던 위치에 요소를 배치할 수 있게 되었습니다. 다만 아직 모든 브라우저가 완벽하게 지원하지 않아 깜빡임 등의 접근성 문제가 많이 발생하고 있어 아쉬움이 남습니다.
권장사항
개인 블로그이다 보니 특별히 강조할 개선 사항이 없습니다. Lighthouse에서 제시한 권장사항들이 이미 반영되어 있으며, 현재 상태에서 추가적인 최적화가 필요할지 미지수입니다.
검색엔진 최적화
사이트맵, JSON-LD 등 검색엔진 최적화를 위한 기능들을 가능한 한 모두 적용했습니다. 다만 개인 블로그의 특성상 대규모 트래픽을 기대하기 어렵고 현재 콘텐츠 양도 많지 않아, 이러한 기능들을 완비했다는 것 자체에 의의를 두고 있습니다.
llms.txt
AI 기술이 빠르게 발전하면서 새로운 기술들이 계속 등장하고 있습니다. 이에 발맞춰 루트 디렉토리에 llms.txt 파일을 생성하고 각 포스트에 대한 링크를 추가했습니다. 추가로 각 포스트 주소 뒤에 .md 확장자를 붙이면 마크다운 문서로 볼 수 있도록 기능도 구현했습니다. AI가 이 사이트를 크롤링하여 활용할지는 미지수이지만, 대비할 수 있는 기능을 미리 준비해두었습니다.
이 부분은 차후 다시 한번 글을 작성하는게 좋을꺼 같아 말을 아끼도록 하겠습니다.