댓글 기능 추가
https://github.com/apps/utterances
생각보다 어렵지는 않았다.
조금 아쉬운 점은 개츠비 블로그에 사용할 수 있는 댓글 플러그인의 선택지가 너무 좁았다는 점이다.
보통 Utterances(이하 어터런스) 아니면 Disqus(이하 디스커스) 이렇게 둘 중 하나를 골라야하는데, 디스커스는 다양한 소셜네트워크를 이용해 댓글을 달 수 있다는 장점이 있지만 엄청난 양의 광고가 붙는다는 치명적인 문제가 있다. 어쩐지 많은 개발 블로그들이 광고로 고통받고 있더라니… 디스커스를 사용하는 것이 원인이었나보다. 이 문제는 유료 플랜을 선택하면 해결되지만 난 이미 너무 많은 구독을 하고 있기 때문에 패스했다. 묘하게 UI가 안 예쁘기도 했고…
반대로 어터런스는 github 계정을 통해서만 댓글을 달 수 있다는 게 단점(어떤 경우에는 장점이기도 한?)이지만 오픈소스이다보니 광고가 붙을 걱정을 하지 않아도 된다. 그리고 UI가 깔끔하다. 녹색 버튼의 색상을 조금 변경하고 싶지만 일단 참기로 하자…
폰트 경량화 작업
블로그의 형태가 얼추 잡혔던 새벽, 누워서 모바일로 블로그에 접속했다가 기절할 뻔했다.
최초 사이트 접속 시 엄청나게 속도가 느렸기 때문이다. 대충 2~3초 이상 걸린 것 같은데, 내가 접속하는 사람이었다면 기다리다가 지겨워서 그냥 뒤로가기를 눌렀을 것이다.
일어나서 확인해보니 폰트 파일이 문제인 것 같았다. 내가 선택한 테마는 (당연히) 한글 폰트를 지원하고 있지 않아 따로 설치 작업이 필요한 상태였다. 난 평소에 하던 방식으로 폰트 파일을 프로젝트 내부에 추가한 다음, font 스타일시트를 만들어서 폰트를 등록했다…
하지만 이것은 인터넷이 되지 않는 환경의 SI 프로젝트를 하다보니 들었던 관습 중 하나였는데… 이런 조그만 블로그에서 사용하는 폰트는 CDN를 이용하는 편이 훨씬 좋다는 것을 순간 잊어버렸던 것이다.
https://www.gatsbyjs.com/plugins/gatsby-plugin-google-fonts/
gatsby-plugin-google-fonts 플러그인을 설치하여 구글에서 제공하는 노토산스(본고딕)를 추가했다.
배포된 후에 확인하니 훨씬 속도가 빨라졌다. 폰트 로딩 방식이 기본적으로 swap이라 조금 거슬리는 부분이 있지만… 이것은 아래의 display 속성을 변경하면 컨트롤 할 수 있으니 나중에 테스트해봐야겠다.
plugins: [
...,
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [`Noto+Sans+KR\:400,500,700,900`],
display: "swap", // 여기를 변경하면 폰트 로딩 방식을 변경할 수 있다.
},
},
....