프론트엔드
올리브영 테크블로그 Gatsby 전환&개발기
두줄요약
Jekyll 기술 블로그를 Gatsby 기반으로 전환한 배경과 설계·배포 과정을 정리했습니다. React 구조와 Plugin, Netlify로 개발·운영 편의성과 SEO를 강화했습니다.
문제 상황
- Jekyll·Ruby 중심 환경 구성의 높은 진입 장벽과 운영 인력 부담
- 중복·분산된 콘텐츠 구조와 변화한 Tech 조직 정체성을 반영하기 어려운 디자인
해결 방법
- Gatsby·TypeScript·Markdown·SCSS 기반 정적 기술 블로그로 마이그레이션
- components·modules·pages·templates 분리와 GraphQL custom hooks 기반 관심사 분리
- Gatsby Plugin을 통한 SEO·Markdown 변환·이미지 처리 기능 구성
선택 이유
- React 기반 컴포넌트 구조와 팀 내 친숙한 개발 환경
- 공식 문서·Starter·Plugin 생태계를 활용한 개발 및 유지보수 편의성
- Netlify의 Gatsby 지원과 Git 연동 빌드 hook 제공
성능/운영 포인트
- Netlify Deploy Preview·로그·재시도·캐시 초기화 기능 기반 배포 상태 확인
- 정적 페이지 생성과 SEO Plugin 조합을 통한 검색 최적화
- Gatsby 설정 파일과 GraphQL 쿼리 학습이 필요한 신규 프레임워크 진입 비용
