프론트엔드
카카오페이 기술 블로그는 어떻게 만들었을까요?
두줄요약
Gatsby 기반 SSG 기술 블로그를 구축하고 SEO와 마크다운 확장 방식을 정리했습니다. 빌드 지연을 해결하기 위해 Astro로 마이그레이션한 성능·운영 경험을 공유합니다.
문제 상황
- GitHub Pages와 SSG 기반 기술 블로그의 짧은 개발 기간·낮은 운영 비용 요구
- 콘텐츠 증가와 잦은 수정 배포에 따른 Gatsby 빌드 시간 지연
- Git·마크다운 숙련도가 낮은 비개발자 관리자의 작성·배포 부담
선택 이유
- GraphQL 기반 마크다운·정적 자산 처리, 이미지 최적화, 익숙한 개발 경험을 고려한 Gatsby 채택
- 콘텐츠 중심 정적 사이트 적합성, Vite 기반 빌드·개발 서버 속도를 고려한 Astro 마이그레이션
- 메타 태그, canonical URL, sitemap.xml, Google Search Console 기반 SEO 구성
성능/운영 포인트
- Astro 전환 후 동일 환경에서 약 3배 빌드 속도 향상과 Lighthouse 점수 소폭 상승
- unified의 mdast·hast 변환 파이프라인과 remark·rehype 플러그인 기반 마크다운 확장
- Markdown 이미지·동영상 처리용 Gatsby·Astro 플러그인 직접 구현
주의할 점
- Gatsby v4 설정 환경의 ESM only 패키지 호환성 문제와 CJS 지원 버전 필요성
- Astro의 작은 커뮤니티, 부족한 추가 플러그인과 이미지 처리 기능 보완 필요
- Astro 특수 문법 및 서버·클라이언트 렌더링 컴포넌트 구분 학습 필요
