jocoding.io는 원래 손으로 관리하는 HTML 파일 두 개(index.html, links.html)로 운영되던 사이트였습니다. 페이지를 늘리고 검색에 제대로 잡히게 만들기 위해 사이트 전체를 Astro 기반 정적 사이트로 개편했습니다. 이 글은 그 과정의 기록입니다.
왜 개편했나
기술적인 SEO 기본기(robots.txt, sitemap, canonical, Open Graph, JSON-LD)는 이미 갖춰져 있었지만, 구조적인 문제가 있었습니다.
- 메인 도메인에 색인될 페이지가 사실상 2개뿐이었습니다. 제품들은 전부 서브도메인이라 메인 도메인의 콘텐츠로 집계되지 않습니다.
- 텍스트 콘텐츠가 카드 제목과 한 줄 설명이 전부라, 검색에 잡힐 키워드 자체가 부족했습니다.
- Tailwind CSS를 브라우저 런타임 CDN으로 로드하고 있었습니다. 접속할 때마다 브라우저에서 CSS를 컴파일하는 개발용 방식이라 성능(LCP)에 불리했습니다.
무엇을 바꿨나
1. Astro 정적 사이트로 전환
기존 두 페이지의 디자인과 동작은 그대로 유지한 채 Astro 프로젝트로 옮겼습니다. 배포는 기존과 동일하게 Cloudflare Pages를 사용하되, 빌드 산출물(dist)을 올리는 방식으로 바꿨습니다.
2. Tailwind를 빌드 타임으로
@tailwindcss/vite 플러그인으로 전환해 빌드 시점에 사용된 클래스만 담긴 정적 CSS를 생성합니다. 런타임 컴파일이 사라지면서 페이지 로딩이 가벼워졌습니다.
3. 페이지 확장
- 제품 상세 페이지 — 11개 제품마다 메인 도메인 안에 소개 페이지를 만들었습니다. 데이터 파일 하나에서 생성되므로 제품이 늘어나면 항목만 추가하면 됩니다.
- 블로그 — 지금 읽고 있는 이 블로그입니다. 마크다운으로 쓰면 페이지·메타·sitemap이 자동 생성됩니다.
- 채용·소개 페이지 — 팀과 만드는 사람을 설명하는 페이지를 추가했습니다.
4. sitemap 자동화와 구조화 데이터
페이지가 추가될 때마다 sitemap을 손으로 고치던 방식을 버리고 @astrojs/sitemap으로 자동 생성합니다. 서브도메인 제품 URL도 함께 포함됩니다. 페이지 유형별로 JSON-LD(제품은 SoftwareApplication, 글은 BlogPosting, 목록은 CollectionPage)를 넣었습니다.
배운 것
- 정적 HTML 두 개짜리 사이트라도 페이지가 늘어날 계획이 있다면, 손 관리가 감당되지 않기 전에 정적 사이트 생성기로 옮기는 편이 낫습니다.
- SEO에서 “양질의 사이트”는 결국 색인할 가치가 있는 페이지의 수와 깊이입니다. 기술적 최적화는 그 콘텐츠가 제대로 전달되게 하는 토대입니다.
앞으로 이 블로그에 각 제품의 빌드로그와 데이터를 계속 기록할 예정입니다.