Tech

Diary

Project

준비중...

About

준비중...

테크 블로그 개발 회고록

gparkkii

2022년 05월 04일 18:04

준비중...
클립보드로 복사

나의 아이덴티티를 드러낼 수 있는 개인 홈페이지를 만들어 보고싶다는 생각에서 출발한 테크블로그 개발. 내가 공부한 것들을 글로 정리하고 기록해나가고 싶었고, 그 기록들이 쌓이다보면 개발자로서의 아이덴티티를 다지고 성장해나가는데 도움이 되지 않을까 싶었다. 다만 글을 쓰는데 익숙하지 않다보니 부지런하게 테크 블로그를 작성할 수 있을까 걱정이 된다.

첫 시작은?

테크블로그를 만들기 위해 가장 먼저 시작한것은 로고 만들기. 나만의 아이덴티티가 들어간 무언가가 탄생했으면 좋겠다는 욕심에 로고도 만들고 삐까뻔쩍 멋있는 UI의 테크블로그로 만들고 싶었지만? 디자이너가 아니다보니 능력이 욕심을 따라주지 못했다. 그래도 나의 노력이 들어있는 산물이니 자기만족도 최고😎


gparkkii-tech-log-ui
테크블로그 로고 & UI 디자인

덕분에 피그마도 사용해보았는데 개발자가 사용하기에도 좋은 개발친화적인 툴이라는 생각이 들었다. 피그마로 디자인 시스템 및 필요한 컴포넌트들을 구성하는 작업은 개발 가능성이 있는 기능과 요소들을 파악하고 개발을 어떻게 해나갈지 브레인스토밍하는데 도움이 많이 됐다.

개발 시작

테크블로그를 개발하기 위해 채택한 툴은 gatsby.
자주보는 뱅크샐러드, 올리브영 등의 테크블로그를 보다가 자연스럽게 gatsby로 제작한 테크블로그 개발기를 보게됐고, 또 자연스럽게 gatsby의 이점을 알게됐다.

React로 개발할 수 있다는 점과 SEO를 잘 챙겨갈 수 있다는 점, 그리고 기본적으로 JAMstack 기반으로 markdown 콘텐츠 작업이 수월하다는 점 등등

이 많은 이점들을 직접 경험해보기 위해 gatsby로 블로그 개발을 시작했고 gatsby로 작업하며 공부하고 얻은 지식들은 추후 테크블로그에 작성하겠다.

목표 / 방향성

확장성을 고려한 MVP 개발

프로덕트가 아니고 최소한의 기능으로도 만들 수 있는 블로그이니 만큼 mvp개발을 하기로했고, 조촐한 태그찾기로 대신한 검색기능과 SNS 공유 기능을 제외한 목표들을 완성하여 드디어 배포했다.

  1. 글 작성 및 게시 기능
  2. 카테고리 및 태그 기능
  3. 검색 기능
  4. 반응형 디자인 (모바일 최적화)
  5. SNS 공유 기능
  6. 댓글 기능
  7. 검색엔진 최소화

기능이나 UI를 구현하는데는 큰 어려움이 없었다. 간단한 CRUD 기능이었고, graphQL을 통해서 데이터를 주고 받는 과정 또한 생소했지만 재밌었다.

예상외로 발목을 잡았던 기능은 SEO 작업이었다.. 이전에 gatsby-starter-bee를 통해 배포하고 SEO 적용한 경험이 있어서 수월할 줄 알았는데 이전에 블로그에 있던 링크들이 없어지며 무언가 꼬였는지 구글 서치 콘솔에 색인생성이 되지않아 골머리를 알았다. 하루 꼬박 매달려있었는데 알고보니 구글 서치 콘솔에 등록된 사이트맵이 달라서 생긴 문제였다.

이전에 사용했던 테크블로그의 사이트맵 sitemap.xml이 등록되어있었고 현 테크블로그의 사이트맵은 sitemap-index.xml 인데 바보같이 오타를 알아채지 못했다.

우여곡절 끝에 SEO 작업도 완료하고 메타메이터에 내 아바타를 이용한 썸네일도 예쁘게 만들어서 추가했다. 해당 썸네일은 블로그 링크를 공유하면 볼 수 있다 😃


gparkkii-tech-log-meta-thumbnail
테크블로그 메타데이터 썸네일

앞으로..

아직 완성 못한 기능들과 더불어 점차적으로 추가하고 싶은 신규 기능들을 지속적으로 업데이트할 예정이다.

  1. [미완성] 검색 기능
  2. [미완성] SNS 공유 기능
  3. [미완성] project, about 페이지 추가
  4. [신규] 다크모드 기능
  5. [신규] 다국어 지원 기능
  6. [신규] 게시글 index 생성
    • 목차 클릭하면 해당 목차로 이동할 수 있도록
  7. [신규] 게시글 조회수 기능
    • 게시글 조회수 기능 추가하기
  8. [신규] 구독 기능
    • 사용자가 구독하면 새로운 글이 올라왔을 때 알림 받을 수 있도록
  9. [신규] 헤더 애니메이션
    • 스크롤 다운 시 헤더 투명도 주기 또는 숨기기

다른 사람들이 템플릿으로 쓸 수 있을 정도의 완성도를 목표로 추가 기능을 개발해보고자 한다.


P.S

포부를 가지고 시작한 테크 블로그지만 역시 글 쓰는데 너무나도 익숙치않고,,, 공부한 것을 정리하는 과정이 귀찮다. 테크 블로그인데 글이 없으면 무슨 소용이며 개발의 부족함보다도 게으름이 문제로다. 부담없이 차근차근 글 쓰는 습관을 잘 들여봐야겠다.