블로그 개설기 (Gatsby 템플릿 개조기)

🎉드디어 블로그를 개설했습니다!

많은 사람이 그러하듯 ‘블로그 만들어야지… 글써야지…’ 생각하며 미루고 미루다 드디어 블로그를 개설하였습니다. Jbee님의 gatsby-starter-bee를 제 취향에 맞게 개조했는데, 템플릿을 개조할 때 고민한 것을 간단히나마 적어보려합니다.

글을 읽기전에!
이번 글에서는 블로그를 개설하며 어떤 것들을 고려하였는가 에 대해 이야기하며 사이트 배포, React 문법 등을 다루진 않습니다. 자세한 이야기들은 다른 글에서 만나요!😉

환경 선정

Github pages가 알려질 즈음 Jekyll로 개인 블로그, 동아리 블로그를 만들었지만 얼마안가 버렸던 기억이 있습니다. 간단해서 좋았지만, 커스터마이징하기 어려웠었습니다.😥 또, 개인적으로 notion을 좋아하긴 하지만 블로그에는 맞지 않는 느낌이 들었고, velog, 티스토리 같은 블로그 플랫폼을 이용하기엔 개인 사이트를 만들고싶다는 욕심을 버릴 수 없었습니다.
그러던중 알게된 Gatsby.js! 공식 사이트도 친절하고, 커뮤니티도 활성화되있으면서, 플러그인까지 많았습니다. react와 GraphQL도 연습해볼겸 starter 하나를 잡고 개조해보기로 결심했습니다. 그렇게 몇년을 미뤘지만 아직도 식지않은 Gatsby를 이용해 블로그를 개설하였습니다.

이런 것들을 바꿨습니다 (주요 변경내역)

카테고리 → 태그 방식 도입

기존 템플릿은 1개의 포스트가 1개의 Category에 속하는 구조입니다. 하지만 쓰고 싶은 글들을 생각해보니 하나의 카테고리에 담기 어려웠습니다. 카테고리와 폴더를 1:1 대응시켜 정리하면 편하겠지만, 결국 다양한 주제를 적용할 수 있는 태그 방식으로 결정하였습니다.

시리즈 시스템 추가

카테고리를 없애놓고 웃길순 있지만 연재물 형식의 시리즈라는 묶음을 유지하고 싶었습니다. 이때 UX를 중점으로 몇가지 기능을 구현하였습니다.

1. 시리즈 정보 분리 및 깔끔한 slug(url)

한글 문자열을 그대로 URL에 넣으면 복사/붙여넣기 혹은 공유를 했을때, encode되어 보기 좋지 않았습니다. 물론 요즘 검색엔진은 url도 검색 대상으로 포함하기 때문에 모국어를 url에 그대로 넣는 것을 권장하지만, 시리즈의 특성상 검색으로 접근할 것 같지 않았습니다. 블로그 글들도 영어로 생성했기 때문에 영어 slug를 택했습니다.
이와 별개로 시리즈의 제목과 설명을 별도 파일로 분리하여, 시리즈 정보를 유지하였습니다.

2. 글이 속한 시리즈의 정보 제공

같은 주제가 연속성을 지닌하는 시리즈의 특성상 함께 읽도록 유도하고 싶었습니다. 이 글이 어떤 시리즈에 속해있고, 이런 글이 있다 라는 정보를 제공하였습니다.

3. 다음 글 이어보기

글을 다 읽은 후, 자연스럽게 다음 글로 유도하고 싶었습니다. 글의 최하단에 이어보기 버튼을 만들어 스크롤 없이 넘어갈 수 있게 하였습니다.

컨텐츠 분리 (서브모듈)

컨텐츠 또한 한 repository에서 관리해도 되겠지만 블로그 코드와 컨텐츠의 히스토리를 분리하고 싶었습니다. 원본 파일을 공유하기엔 왠지 모를 부끄러움도 있었고, (그럴리는 없겠지만) 누군가 repo를 clone했을 때, 글이 함께 복사되지 않길 바랬습니다. git의 서브모듈 기능을 활용해 컨텐츠는 private repository로 분리했습니다.

오픈 그래프 이미지 생성기 도입

오픈 그래프(Open Graph)는 웹페이지를 SNS 등에 공유했을때 나타나는 title, desc, image 등을 지정한 프로토콜입니다. 웹 사이트를 들어가기 전에 어떤 사이트고 무슨 내용인지 알 수 있는만큼 사용자 경험 측면에서 중요하다 생각했습니다. 모든 글에 별도로 이미지를 삽입하는 것이 최선이겠지만 그건 현실적으로 어려울 것 같았고, 글이나 시리즈별 이미지를 포기하고 싶진 않아 플러그인을 이용해 각 페이지별 이미지를 생성하였습니다.

일부 기능 개선

• 다크모드 전환

  기존 템플릿에서 댓글 컴포넌트는 iframe으로 불러오다보니 페이지 로드 시점의 테마로 고정되었습니다. 보기에 좋지 않아 관련 이슈를 찾아보니 컴포넌트에 정보를 넘기는 방식으로 구현이 가능했습니다.
  다크모드 스위치를 눌렀을 때, 댓글 컴포넌트에도 테마 변경 정보를 넘겨주어 만족스런 다크모드를 완성하였습니다.

• 각종 스크롤

  태그라던가 소제목(Anchor)를 눌렀을 때, 해당 컴포넌트를 기준으로 부드럽게 스크롤되는 기능이 존재합니다. 목표 지점이 잘못되어 여백이 생기는 경우 등이 있어 수정하였습니다.

• 그외 여러가지

  헤더를 고정하는 등 각종 스타일을 수정하고, giscus 댓글 시스템 도입, google analytics → GTM(+GA4), meta 태그 정비 등 세세하게 고쳤습니다 🙆‍♂️

이런 것들은 아직 고민중이에요

• 헤더에 페이지 제목 표기

  여러 탭을 오가며 긴 글을 읽다보면 그래서 무슨 글이었나 까먹을 때도 있어 헤더에 제목을 띄워주면 좋을 것 같았습니다. 하지만 한편으로는 헤더가 너무 자주 변화하는 것은 좋지 않을 것 같아 도입을 미뤘습니다.

• 공유버튼과 후원기능

  글을 쓸 동기가 될 수 있는 기능이지만 찾는 사람이 적은 개인 블로그인만큼 일단 글에 집중하기로 했습니다. 다른 컴포넌트와 조화를 이루도록 개선하고 있습니다.

• 기타 서포트 기능

  목차(Table of Content)라던지 맨 위로 올라가기(scroll to top) 기능은 개인적으로 유용하게 사용하는 기능들인데, 모바일에선 적용하기 어려운 부분이 있어 추후에 추가하기로 하였습니다.

마치며

1. 개설이 끝이어선 안된다.

아직 고칠곳은 많지만 글을 쓴다는 본질이 흐려져가 일단 배포해봤습니다. 어쩌다보니 템플릿 수정에 많은 시간을 쏟았지만 블로그 개설은 시작에 불과합니다.
시작이 반이라지만 멈춰있으면 안되겠죠? 기껏 만들어놓고 방치하거나, 단순히 정보를 긁어 붙여넣는 것은 크게 의미가 없습니다. 단순한 이론 글은 최대한 위키로 분리하고, 블로그에는 경험담이나 체험, 분석, 듀토리얼 위주로 글을 작성할 예정입니다.
한달에 1개 이상의 글을 올리는 것을 목표로! 열심히 운영해보겠습니다.

2. 이용을 했으니, 기여를 해보자

누구나 접근할 수 있는 오픈소스이지만 그냥 끌어다 쓰기만 하면 결국 프로젝트의 발전에 한계가 있을 수 밖에 없습니다. 어떤 형식으로든 기여를 해보고싶었는데, 템플릿을 개조하며 기존 기능을 개선한 부분을 공유하면 좋을 것 같았습니다. 물론 프로젝트의 방향성과 맞아야겠지만 정리해 꾸준히 PR을 올려보는 것을 작은 목표로 삼아야겠습니다.

어쩌다보니 야크털깎기 수준으로 옆길로 샛는데, 나름 만족스럽게 오픈한 것 같습니다. 꾸준히 좋은 글을 써보도록 노력하겠습니다!