뱅크샐러드, GatsbyJS로 채용 사이트 구축… SEO와 유지보수 효율 극대화

뱅크샐러드는 대규모 채용을 위해 GatsbyJS를 기반으로 신규 채용 사이트와 기술 블로그를 개발했다. 기존 CSR 방식의 한계를 극복하고 검색엔진 최적화(SEO)를 강화하기 위해 정적 사이트 생성기(Site Generator)를 도입했다.

GatsbyJS 선택 배경과 아키텍처

프로젝트 팀은 React 친화적인 개발 환경과 JAMstack 구조를 선호했다. GatsbyJS는 빌드 시점에 마크업을 생성하므로 구글 외 검색엔진에서도 SEO 효과가 뛰어나다. 또한 Markdown 기반의 콘텐츠 관리와 CMS 연동을 통해 인사팀이 직접 채용 정보를 수정할 수 있게 했다.

• 관심사 분리(SoC): 페이지(Page), 컨테이너(Container), 컴포넌트(Component)로 명확히 구분하여 코드 복잡도를 낮췄다.
• 플러그인 활용: gatsby-plugin-sitemap, gatsby-plugin-netlify 등을 통해 sitemap 생성과 호스팅을 자동화했다.
• 데이터 관리: GraphQL 쿼리를 React Hook으로 감싸 재사용성을 높이고, Markdown metadata를 활용해 필터링 기능을 구현했다.

빌드 환경 이슈와 해결

개발 중에는 CSR과 동일하게 동작하지만, 빌드 시에는 Node.js 환경이므로 window 객체에 접근할 수 없는 문제가 발생했다. 이를 해결하기 위해 typeof window !== 'undefined' 조건문을 사용하거나, 미디어 쿼리(CSS)로 PC/모바일 분기를 처리하는 방식을 적용했다.

성과 및 시사점

새로운 채용 사이트는 SEO 개선과 함께 개발 리소스 절감 효과를 거뒀다. 특히 전담 유지보수 인력이 없는 상황에서도 누구나 쉽게 참여할 수 있는 구조를 마련했다. 배포 결과, 지원자 유입 경로가 검색 중심으로 바뀌며 지원자 수가 2배로 증가하는 성과를 달성했다. GatsbyJS는 복잡한 로직이 없는 콘텐츠 중심 사이트에서 React보다 더 빠르고 효율적인 개발 경험을 제공한다.