올리브영 테크블로그 Gatsby 전환&개발기

Context

기존 Jekyll 기반 기술 블로그는 Ruby 환경 설정의 복잡성으로 신규 개발자의 진입 장벽이 높았으며, macOS M1 미지원 등의 호환성 문제로 포스팅 환경 구성에 심각한 어려움을 겪었다. 추가로 콘텐츠 구조가 분산되어 있고 조직 성장에 따른 정보 업데이트 비용이 증가했으며, 기존 디자인이 확장된 조직 정체성을 충분히 반영하지 못했다.

Technical Solution

• Jekyll에서 Gatsby로 프레임워크 전환: React 기반 정적 사이트 생성(SSG) 프레임워크 도입으로 개발자 친화적 .jsx 문법과 컴포넌트 계층 구조 적용
• SEO 최적화 플러그인 적용: gatsby-plugin-react-helmet, gatsby-plugin-robots-txt, gatsby-plugin-canonical-urls를 활용한 빌드 타임 메타데이터 삽입
• GraphQL 기반 데이터 쿼리 시스템 도입: Page Query, Dynamic Query, useStaticQuery를 통한 마크다운 및 메타데이터 관리
• 배포 인프라 변경: Jekyll + GitHub Pages에서 Netlify로 전환하여 Deploy Previews, Deploy Logs, Deploy Activity 등 시각적 배포 모니터링 기능 제공
• 콘텐츠 구조 재설계: 분산된 페이지 통합 및 PO, 디자이너, 데이터 직군 포함으로 조직 전체 정보 일원화

Impact

SEO 점수 향상 기록(구체적 수치는 아티클에 미제시), 개발자 환경 설정 시간 단축 및 원-클릭 배포 재시도 기능 제공.

Key Takeaway

React 기반 정적 사이트 생성 프레임워크(Gatsby) 도입 시 팀의 기술 스택 일관성 유지, 플러그인 생태계 활용, 빌드 타임 최적화를 통해 유지보수 진입 장벽을 획기적으로 낮출 수 있으며, 배포 파이프라인의 가시성 개선이 운영 효율성을 크게 높인다.