2019년 회고에서 이미 언급했지만 다시 한번 별도로 블로그 개편에 대한 회고를 작성한다.
나는 지금까지 네이버 블로그, 이글루스, 티스토리 등의 서비스와 Wordpress, Jekyll 등의 도구를 사용하는 등 블로그에 대해 이런저런 시도를 해왔다. 블로그 이외에도 개인적으로 정리할 문서 관리에 대해서도 이런저런 시도를 해보고 있는데, Notion, DEVONthink, Pocket 같은 서비스 부터 TIL과 같이 Git에 단순히 저장하는 방식을 사용해오곤 했다.
최근에는 글을 작성하는 블로그(Jekyll)와 단순 정보를 작성하는 저장소(Notion)로 구분하고는 더 이상 건드리지 않고 사용하고 있었기 때문에 블로그는 한동한 Jekyll에 만족하고 머물고 있었다.
이번에 다른 분의 블로그들을 보며 다시 한번 자극을 받아 블로그 개편을 마음먹고는 아래와 같은 조건을 만족하는 범위 내에서 개편을 진행하고자 했다.
우선 Markdown을 지원해야 한다고 생각한 이유는 네이버 블로그, 이글루스와 티스토리 등으로 이전하면서 가장 문제가 되었던 부분은 해당 플랫폼에서 벗어날 때마다 이전하기가 손쉽지 않았기 때문이다. 이후 대부분의 문서는 Markdown 기준으로 작성하였고 이 덕분에 상호 이전이 쉬운 장점이 있다고 생각하여 이를 유지하고 싶었다.
그 다음으로 Generator가 JavaScript 기반이어야 한다고 생각한 이유는 Jekyll을 쓰면서 가장 불편한 부분이 Ruby로 작성되어 블로그를 수정하는데 계속 불편함을 느꼈기 때문이다. 게다가 Generating하는 Ruby 부분과 Design을 구성하는 JavaScript 부분이 뭔가 깔끔하게 떨어지지 않는 듯한 느낌을 지울 수 없었기 때문에 이번에는 이쪽으로 방향을 잡아보았다.
위 조건을 만족하는 내에서 Next, Hexo, Gatsby를 고려봤다. Next는 지금 회사에서 사용하고 있기도 했고 사이드 프로젝트로 진행하는 것도 있고 해서 고민해봤지만, SSR이 아닌 정적 페이지를 생성하는 용도로는 다른 두 개의 도구가 더 맞아보였고, 근래 이래저래 많이 언급되는 Gatsby를 경험해보는 것이 좋을 것 같다고 판단해서 선택하였다.
진행 초기에는 gatsby-starter-blog라는 스타터로 시작했지만, 이미 작성되어 있는 코드에 TypeScript를 녹여내는 방식으로 작업이 진행하니, 손이 더 가는 부분도 있고 Jekyll 때 다른 Theme를 가지고 왔을 때 처럼 프로젝트 구조가 눈에 잘 들어오지 않았다.
이에 @iamchanii님의 Gatsby 로 블로그 만들기라는 글과 gatsby-starter-typescript, gatsby-material-starter 라는 2개의 스타터를 참조하여 하나 하나 살을 붙여 나갔다. @iamchanii님의 글이 워낙 잘 설명되어 있다보니 큰 문제 없이 블로그에 대한 뼈대를 잡아 나갈 수 있었고, 거기에 내 취향을 좀 가미해서 작성하였다. 이후 전반적인 디자인은 회사와 개인 프로젝트에서 사용하였던 Ant Design을 바탕으로 styled-component을 함께 사용하였다.
초기 생각했던 Post, Tag, Series라는 기능들이 붙고 나서 1차적으로 배포를 진행하였는데, 몇가지 문제가 발생했다. 우선 페이지가 보일 때 바로 스타일이 먹지 않는 문제가 발생하였고, 번들링되는 common.js 파일의 사이즈가 5mb가 넘을 정도로 컸다.
첫 번째 문제는 styled-component를 적용하면서 gatsby-plugin-styled-components라는 플러그인도 같이 적용했다고 생각했는데 이를 잊어버리고 적용을 하지 않으면서 한참을 삽질한 경우였다.
두 번째 문제는 공통적으로 사용하고 있는 Ant Design의 번들링 되는 용량이 많아서 발생한 문제인데, 이를 개별 컴포넌트로 포함해도(심지어 직접 입력해서 스타일이 포함되지 않은 상태임에도 불구하고) 용량이 3mb가 넘는 상태였다. 이에 빠르게 Ant Design을 거둬내기로 마음을 먹고 @rinae님의 Gatsby를 활용한 블로그 재구성에서 보았던 Bulma라는 CSS 프레임워크와 필요한 부분들을 받거나 직접 구현하니 500kb 정도로 줄어 들었다.
추가적으로 기존에 Github를 통해 호스팅 하고 있었는데, 이번에 Gatsby를 적용하면서 Netify를 사용하는 글들을 많이 보았다. 이에 적용하고 보니 손쉽게 빌드와 배포가 되어 만족하고 사용하고 있는데, 이에 대한 부분은 여유가 생기면 한번 다시 쭉 살펴봐야할 것 같다.
Jekyll로 작성한 블로그는 입맛대로 수정하기가 까다로워 방치하고 있었는데, 이번 개편 겸 전체적으로 싹 정리하고 나니 다시금 블로그에 애정이 솓아난다. 아직 생각해둔 기능들이 좀 더 있어 추가 해야겠지만, 내년 초까지를 목표로 잡아놨던 일을 무리하게라도 당겨서 했는데, 개인적으로 고생한 보람이 느껴지는 결과물이 나온 것 같아서 기쁘다.