그동안 회고와 스터디 내용을 기록하는 곳이 분산되어 있었다. GitHub 레포 -> 노션 -> Velog를 옮겨다니면서 썼고, 작년 여름 입사하기 전 까지는 여러 스택을 경험해볼 겸 서버를 호스팅하여 개인 블로그를 제작하고 있었다.

그러나 입사 후 시간이 없다는 핑계(…)로 기록하는 과정 자체가 뜸해졌다. 또 업무를 병행하면서 배포 가능한 수준으로 프론트/서버를 개발할 일정 조정이 어려웠고, 기록과 블로그 제작은 점점 더 멀어지게 되었다.

물론 포기한 것이 아니라 언젠가 써야지, 만들어야지 부담만 느끼다가 미루지 않기 위해 올해 목표 중 하나로 개인 블로그 배포를 다짐했다. 개발 부담이 적은 Gatsby로 시간날 때마다 틈틈이 만들었고 이 글을 쓰는 기준으로 곧 배포 막바지가 되었다.

첫 글로 지금까지의 과정과 느낀 점, 앞으로의 계획을 정리해나가려 한다.

1. 개인 블로그를 만든 이유

개발 내용을 기록하기 위해 쓰는 블로그 서비스는 주로 티스토리, Velog, Medium을 종종 봤다. 그만큼 블로그를 직접 제작하여 사용하는 사람들도 많고 점점 늘고 있다.

언젠가부터 문제 해결을 위해 열심히 구글링을 하다가 방문한 사이트가 개인 블로그일 때면 글을 읽기 전에 제작한 사람의 감각과 아이덴티티가 먼저 느껴졌다. 같은 글이어도 글쓴이와 글에 대한 신뢰가 가기도 했다. 직접 만들면 비교적 시간이 걸리겠지만 원하는 대로 디자인과 기능을 커스텀 하기에도 좋고 애정이 생겨 글도 더 열심히 쓸 것 같았다.

위와 같은 이유로 나의 느낌이 묻어나는 블로그를 제작하기로 결심한 후 틈틈이 개발했다. 사실 처음에는 로그인과 에디터 기능을 도입했지만 1인 개발 기간이 길어지면서 유지가 어려워 닫은 1차 블로그가 있었다. (최종 운영까진 못했지만 많은 걸 시도하고 배워서 아쉬움은 적다. 그 내용도 여기에 회고할 예정)

시간이 지난 후 글을 쓰고 있는 이 공간이 나의 첫 개인 블로그가 되겠다.

2. 개발하며 느낀 점

2-1. Thanks, Gatsby!

자투리 시간에 개발하며 배포할 수 있었던 건 Gatsby를 사용한 덕분이다. 이미 많은 사람들이 사용하고 있듯 강력하고 편리하다.

• 익숙한 React 기반
• 편한 콘텐츠 관리와 SEO
• 빠른 성능
• 다양한 플러그인

JAM Stack을 활용하여 별도의 DB 없이 콘텐츠를 마크다운으로 관리하고, 이를 포함하여 사이트 정보나 파일을 GraphQL로 쉽게 접근할 수 있어서 편했다.

정적 사이트 생성기인 Gatsby는 빌드 과정에서 static 페이지를 만들어주어 큰 공수 없이 SEO를 적용하였다. 뿐만 아니라 CSR과 SSR 모두 유연하게 처리 가능하고, gatsby-image를 사용해 이미지 최적화와 lazy loading을 제공하는 등 브라우저 성능 면에서도 기본적으로 좋은 기능이 탑재되어 있다.

또한 Gatsby에서 제공하는 다양한 플러그인으로 사이트에 높은 퀄리티의 기능을 추가할 수 있는데, 설치 후 gatsby-config.js에 원하는 옵션으로 설정해주면 비교적 쉽게 추가할 수 있어서 확장성이 좋다. (플러그인에 따라 gatsby-node.js에서 추가적인 설정이 필요하다) 앞으로 운영하면서 Gatsby에 대해 더 알게될 것이고 그 내용을 글로 추가할 예정이다.

나는 따로 스타터를 설치하지 않았는데, 인프런 Gatsby 강의가 개념 파악에 큰 도움이 되었다. 영상이나 사진은 없는 무료 강의다. 가이드 글과 스타터도 많지만 로직을 알아가면서 커스텀 하고 싶다면 공식 문서와 함께 훑어보고 시작하면 충분할 거라고 생각한다.

2-2. 완벽히 시작하지 말자

배포가 미뤄지면서 가장 와닿았던 내용은 완벽하지 않아도 일단 배포하고 개선해나가야 한다는 것이었다. 지금까지 경험한 팀 프로젝트는 MVP를 정하여 배포하고, 추가할 기능이나 개선점을 보완하며 효율적으로 제품을 만들어가는데 개인 프로젝트에서는 욕심 때문에 그게 잘 안 됐다.

기본적인 CRUD를 구현하면 UX를 고려한 기능을 추가하기 위해 DB와 기존 페이지 동선을 수정하고, 로그인이 도입된 만큼 관리자 페이지도 같이 내보내고 싶고, 써보고 싶은 스택이 있으면 도입하다가 눈에 띄는 부분이 있으면 계속 리팩토링을 진행하면, 디자인이 튀는 부분이 생겨서 다시 고민하고..

배운 것은 많았지만 기능 추가로 인한 기획 수정과 리팩토링이 반복되다보니 배포가 늦어지고 글을 쓰기 위해 만드는 블로그인데 정작 쓸 힘이 사라지는 기분이었다. 첫 기획을 끝까지 유지할 순 없고 보완을 위해 수정을 반복하는 것은 불가피하지만 운영 전에 이 모든 걸 완벽히 고려해서 나가는 건 내 상황에서 욕심이라고 느꼈다. (정신 건강에도..)

이번에는 핵심 기능만 포함하여 배포하게 되었다. 물론 고치고 싶은 부분들이 눈에 보이지만 수정하기 위해 작업 기간을 얼마나 갖춰야할 지 모를 일이기 때문에.

3. 뭘 쓰지?

사소한 것이라도 작성할 것이고 크게 나눠보자면 아래와 같다.

• 스터디 내용
• 회고
• 프로젝트 기록

배운 내용을 잊지 않기 위해 기록하는 글이 대부분 이겠지만 진행했던 활동이나 프로젝트를 설명하는 포트폴리오성의 글도 쓰려고 한다. 커리어를 나타내는 지표가 중복되고 있어서 블로그에서 한번에 보도록 정리하고 싶다. (하나하나 찾아서 업데이트 하기도 힘듦)

그러한 내용들이 노션 포트폴리오에 있는데 점진적으로 옮길 예정이다.

4. 마치며

사실 기획도 디자인도 없는 상태에서 시작하자니 정해야 할 게 많아서 또 생각보다 오래 걸렸다. 기본적인 레이아웃, 메인 화면, 메뉴 구조, 마크다운 스타일, 반응형 기준, 테마 컬러(and MVP에 꼭 포함하고 싶었던 다크모드) 등등.. 일관적인 느낌을 위해 고민했다.

메인 화면과 테마 컬러는 1차 블로그에서 구현했던 것을 참고했고, 파비콘과 로고는 디자이너 친구가 분위기에 맞게 만들어주었다. 1차 블로그 제작 시에도 다른 친구가 로고와 커버 이미지를 제공해주었는데 아직 여기에는 사용하지 못했다. 어디에 쓸 지 생각해봐야지 🤔

또 먼저 Gatsby를 사용한 개발자 친구가 먼저 개발하면서 알게된 팁을 전해주어 더 수월하게 만들 수 있었다. 사소한 거라도 선뜻 재능 기부해준 친구들에게 무한한 감사를..

그리고 글 작성 외에도 블로그도 디벨롭 하려 한다. 지금 먼저 생각나는 것은 아래 기능들이다.

• 페이지네이션 or 무한 스크롤
• About 페이지
• 글 검색
• 목차 (+ 문단 링크 복사)
• 텍스트 에디터

열심히 만든 만큼 자주 글을 쓰고 기능도 추가하며 잔디를 가꿔 나가야겠다. 🌱

🔗 참고

• 블로그 저장소
• React 기반 Gatsby로 기술 블로그 개발하기
• Gatsby 훑어보기
• React밖에 모르는 당신에게. GatsbyJS한 잔, ‘채용~’
• (앞으로도) 포스트 썸네일 출처: 썸네일 생성기 - Thumbnail Maker, 배경 이미지 - Unsplash, wallpaperaccess