2. 작업과정

블로그를 본격적으로 구축한 과정들을 정리해보았다.

2-1. 기술블로그 컨셉잡기

떠오르는 생각을 정리하기 위해 마인드맵으로 끄적여봤다.
깔끔심플한 디자인, 작성에 불편함이 없어야 하는 조건 등 어떤 기능으로 채워넣을지 고민했었다.

2-2. 내가 원하는 조건

나는 무엇보다 사용자 경험을 해치지 않도록 페이지를 구성하고 싶었다.
(링크를 클릭하면 상세 구현과정을 볼 수 있습니다.)

✓ Tailwind 적용	✓ Blog 페이지
✓ About 페이지	✓ 문서화를 위한 GitDocs 스타일 UI 추가
✓ 글 검색	✓ 글 분류 기능(태그, 시리즈, 카테고리)
✓ Utterane을 이용한 댓글기능 구현	✓ 목차
✓ scrollTop	✓ CMS 에디터
⬜️ 노션 및 옵시디언 연동	✓ 다크모드
✓ 특정 위치에서 acitve되는 ToC 기능	⬜️ 링크썸네일
✓ 코드 블럭 하이라이팅	✓ 클립보드 복사기능
✓ SEO 최적화

2-3. 실제 기능 구현 과정

그래서 하나하나씩 체크리스트를 지워가며, 기능을 완성해갔다.

2-3-1. 디자인 측면

• 가독성을 개선하고, 게시글을 보는데 불편함이 없어야한다.
• Tailwind CSS: 블로그를 제작하는데 많은 공수가 드는건 싫었는데, 친숙한 tailwind css로 보다 빠르게 깔끔한 UI를 만들 수 있었다.

2-3-2. 기능적 측면

• 다크모드 : 홈페이지마다 눈이 아픈 그런 불편한 곳도 있는데 최대한 보기편한 색상으로 선택했다.

• 댓글 : github 의 utterance 사용하였다.

• 개츠비에서 코드블럭 highlighting은 gatsby-remark-prismjs로 적용하였다.

  • 이전에 `gatsby-remark-highlight-code`플러그인을 사용했으나, 부가기능이 부족하여 변경하였다.

2-3-3. CMS

VS code 말고도, 언제 어디서든 수정이 가능하기 원했다.

• Decap CMS : gatsby에는 많은 headless CMS을 지원하는데, 나는 Decap CMS을 이용하여 구축하였다. (구 netlify CMS)

2-4. 배포

추후 기능들이 고도화되면 스타터로 소스코드를 공개할까한다.
아직 공개하기에는 정리되지 않은 사항들이 많아, 보완하여 내년에는 공개하는 목표이다.