전환 배경

두달 전 우연히 Gatsby라는 Static Site Generator(이하 SSG)를 알게 되었고. 프로토타이핑 후 기존 블로그를 Gatsby로 전환하는 작업을 하기 시작했다. Gatsby의 전반적인 시스템을 이해하는데 총 2주 정도 걸렸고. 나머지는 두 개의 블로그 프로젝트 마이그레이션, 최적의 호스팅 서비스 찾기와 연동, 모노레포 구성, 빌드 및 배포설정에 6주 정도 걸렸다.

from jekyll

지금 보고 있는 기술 블로그 johnny-mh.github.io는 원래 jekyll로 운영하고 있었다. jekyll은 ruby기반의 SSG이며 이제는 역사가 깊은 도구인 듯 싶다. github.io 에 호스팅을 전제로 개발하는 듯 접근하기 쉽고 제공 기능들도 부족함 없고 디자인 템플릿도 많다.

하지만 많이 쓰다 보니 비슷한 디자인의 사이트가 많아 재미가 없다는 점과. 그래서 바꿔보려니 익숙하지 않아 커스터마이징이 어렵다는 것이 계속 걸렸다. 그러다 보니 글을 올리고 싶다는 생각도 잘 들지 않았다.

from squarespace

사진 블로그 mnkin.com은 squarespace.com를 이용하여 운영하고 있었다. 웹 기반으로 블로그 및 쇼핑몰 사이트를 만들고 관리할 수 있는 서비스이다. 처음 발견했을 때 서비스의 웹 기반 에디터에 반해버려서 1년에 이용료와 호스팅 비용 18만원을 지불하며 3년을 사용했다.

개발자라 근본이 사대주의라 그런지 모르겠으나 디자인도 대부분 너무 이쁘고. 반응형 기본제공, SEO자동 최적화, 아이폰 안드로이드용 관리 툴, 통합 google analytics등 서비스 운영에 필요한 모든 것이 기본으로 제공된다.

지금봐도 서비스 내 위지윅 에디터는 국내 IT대기업들보다 훨씬 직관적이고 사용하기 좋게 만들었다고 생각한다. 만약 외국에서 사이트를 서비스한다면 그냥 여기를 사용하면 될 정도다.

하지만 1년에 많아봐야 10개 이내의 글을 쓰게 되면서 비용이 부담스럽다는 생각이 들었고 서비스를 외국에서만 하다 보니 국내에서는 심각하게 느린 것도 불편했다. 이미지를 주로 서빙하는 블로그인 특성 상 이 부분이 치명적이었다.

Gatsbyjs의 특징 및 장점

React, GraphQL

현재는 업무 상 angular만을 사용하고 있지만 커리어 문제로 React와 GraphQL을 항상 공부하고 싶었던 차에 Gatsby는 신기하게도 시기적절하게 발견한 SSG 프레임웍이었다. 내부적으로 리소스 파일들을 GraphQL로 쿼리하고. NodeJS API를 통해 가공하여 React로 html페이지를 만들어내는 형태라 너무 가볍지도 무겁지도 않게 기술을 접해볼 수 있어서 즐거웠다.

React Hook은 말로만 좋다고 들어왔는데 실제로 써 보니 신세계라는 말이 아깝지 않았다. 이전 회사에서 React기반으로 개발할 때 가려웠던 부분을 기초에 충실하면서도 강력하게 개선했다고 생각한다. 그냥 함수였을 뿐인데. 그것만 가지고 이런 시스템을 만들어내었다는것이 놀랍다.

강력한 플러그인

Gatsby 플러그인 중 gatsby-plugin-sharp을 이용하면. 직접 구현하기는 조금 까다로운 이미지 서빙 최적화를 간편하게 적용 할 수 있다. medium.com의 글을 보다보면 로딩 중에는 이미지가 뿌옇다가 완료 후 부드럽게 선명해지는 그 효과 말이다.

사진 전문 블로그인 mnkim.com는 컨텐츠의 대부분이 이미지라 큰 도움이 되었다. 아래처럼 플러그인 몇 개만 설정하면 마크다운의 이미지들에 자동 점진적 로딩 최적화가 적용된다. prerender 시점에 저 품질의 base64이미지를 생성하여 html을 먼저 서빙하고. 로딩 후에 페이드 인으로 교체해 준다.

// gatsby-config.js
// 사이트의 html페이지들을 생성할 때 적용되는 설정 및 플러그인을 추가하는 인터페이스
module.exports = {
  plugins: [
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-transformer-remark', // .md파일을 html 컨텐츠로 변환하는 플러그인
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images', // .md파일을 변환할 때 이미지들에 최적화를 적용한다
            options: { maxWidth: 1300, showCaptions: ['alt'] },
          },
        ],
      },
    },
  ],
}

Gatsby를 한 마디로 표현하자면 FE개발자에게 치명적인 만능 장난감인 듯 하다. 마이그레이션을 하면서 React, GraphQL은 물론이고 성능 최적화, SEO, lerna, syntax-tree 등 많은 도구에 대한 공부를 하게 되어서 너무 즐거웠다. 블로그를 만들 계획이 있다면 적극 추천한다.