1년만에 드디어 블로그를 새로 만들게 되었다. 물론 아직 구현하지 않은 기능이 많지만, 일단 게시물 작성과 게시물 읽기 정도는 가능하게 되었다. 블로그 제작 과정에서 했던 내 생각들을 정리해보고자 한다.

나만의 블로그를 만들어보자!

작년 이맘때쯤 나는 "카카오테크 캠퍼스" 라는 부트캠프를 하고 있었다. 그 당시 우연히 Javascript 엔진 관련 글을 읽었다.

자바스크립트 엔진: "어, 아직 싱글이야" | JS 런타임에 대해 알아보자 이 글을 읽고 나서 블로그가 참 특이하다는 생각이 들었다. 내가 이때까지 사용하던 블로그였던 Velog와 친구들이 자주 사용하던 Tistory와는 다르게 디자인이 깔끔해보였다. 그러던 중 부트캠프에서 멘토님이 배정되었고, 어쩌다 보니 이 블로그를 만드신 정민님께서 내 멘토님이 되셨다.

그러다가 또 시간이 흘러서 팀프로젝트까지 가게 되었고, 그때 강의를 들으면서 강사님이 "이 기술블로그 요새 자주 보는것 같다." 라고 소개해주셨다. 그 글은 단국대학교 강의 시간표를 제공하는 서비스를 만들자 라는 글이었다. 그땐 아무것도 몰랐기 때문에 어떤 내용인지는 잘 몰랐다. 하지만 정말 자세하고, 깔끔하게 정리된 글이었고, 강사님이 추천해주셔서 자주 읽어보게 된 것 같다.

그렇게 우리팀 프론트 팀의 멘토님이 배정되었는데, 이번에는 이 블로그를 만드신 준일님께서 멘토님이 되셨다. 알고보니 친구가 옛날에 네이버 부스트캠프를 할때 백엔드를 했었는데, 그때 준일님이 멘토였다고 한다. 친구의 말이 아직도 기억에 남는다. "준일님 코드파워 정말 대단한것 같다. 코드에서 정말 힘이 느껴지는 것 같다." 이렇게 말을 했었다.

시간이 흘러 흘러 어느덧 부트캠프가 끝나게 되었고, 나도 멘토님들처럼 나만의 개인 기술 블로그를 만들어봐야겠다는 생각이 들었다.

그래서 이것저것 찾아보게 되었고, 처음에는 정민님으로 부터 Gatsby라는 프레임워크로 블로그를 만들었다는 정보를 듣게 되었다.

하지만 Gatsby는 React 기반이었지만, GraphQL을 사용하고 있었고, 이 때문에 개발 환경 세팅하는데에만 꼬박 이틀 밤을 샜던 기억이 있다. 그러다 헤더까지 어찌저찌 만들다가 현타가 와서 중단하게 되었다..

Next.js로 다시 시작하기

그렇게 방치되어있는 내 개인 기술 블로그 프로젝트를 잠깐 펼쳐보았다. 주변에서 다들 Next.js를 사용해서 만들고 있다는 말을 듣게되었고, MDX라는 라이브러리를 사용하면 마크다운 언어로 글을 쉽게 작성할 수 있다는 새로운 정보를 알게되었다. 하지만 이때까지만 해도 아직 Next.js보다 React 그 자체에 대한 공부가 더 필요하다 생각했고, Next.js 가 아직 완벽하지 않다는 생각이 강해서 Next.js를 사용해 볼 생각이 전혀 없었다.

하지만 취업준비를 하면서 결국은 Next.js를 공부할 수 밖에 없었고, 나는 그 시작점을 Gatsby로 만든 내 개인 기술 블로그를 Next.js로 바꿔서 다시 만드는 것으로 잡게 되었다.

또한 블로그 디자인도 새롭게 만들었다. 내가 사용하는 VSCode 테마인 Bluloco Light 테마를 모티브로 해서 전체적인 색감과 디자인을 만들게 되었다. 그 이유는 단순했다. 대부분 개발 하는 친구들은 대부분 Dark 테마를 사용하지만 나는 Light 테마를 선호해서 Bluloco 테마를 사용하는 사람이 나밖에 없었기 때문이다.

본격적인 블로그 제작 시작!

이제 본격적으로 블로그를 제작하기에 앞서, 어떤 기능들을 넣을지 고민하게 되었다. 기준은 "내가 글을 쓰기 편해야한다." 였다. 그래서 다음과 같은 기능들을 넣기로 결정했다.

1. MDX 기반 글 작성

기존 블로그는 Velog를 주로 사용했었고, Notion도 자주 사용하고 있었기 때문에 마크다운 문법을 사용하여 글을 작성하는게 더 익숙했다. 그래서 마크다운 문법을 지원하는 라이브러리를 찾아보게 되었고, 주변에서는 블로그와 같은 정적페이지에서는 MDX를 많이 사용한다고 한다. 그래서 글을 작성할 때는 MDX 라이브러리를 사용하기로 했다.

2. 카테고리 분류

현재 나는 기술 블로그는 Velog에 작성하고 있고, 일상 관련된 글들은 네이버 블로그에 글을 작성하고 있다. 나는 이 두가지 블로그를 한번에 합쳐서 관리하고 싶었다. 그리고 이때까지 내가 프로젝트를 진행해보면서 "남는게 없다" 라고 생각한 이유가 바로 "기록" 이었던 것 같다. 그래서 카테고리를 크게 일상, 개발, 프로젝트 정도로 분류해서 글을 작성해보기로 계획했다.

3. 반응형 디자인

기존 Velog나 네이버 블로그에서 벗어나 새롭게 직접 만드는 개인 블로그이기 때문에 반응형 디자인은 선택이 아니라 필수라고 생각했다. 번거롭긴 하지만, 반응형 디자인을 적용하지 않는다면 기존 블로그에서 벗어나 새로운 블로그를 운영하는 이유가 없을 것 같았다. 그래서 모바일, 태블릿, 데스크톱 모두에서 최적화된 화면을 보여주도록 계획했다.

4. FSD 아키텍처 적용

작년 부터 꾸준히 FSD 아키텍처를 공부하고, 사용해오고 있다. 아직까지도 완벽하다고 생각하진 않지만, 나름 나만의 기준을 만들어서 코드를 "관심사 분리 원칙" 에 맞게 분리할려고 많은 노력을 하고있다. 물론 이 블로그 프로젝트는 Next.js 기반의 프로젝트였고, App router 를 사용한다는 그 특이성 때문에 기존 FSD 구조를 똑같이 적용할 수 없었다.

이와 관련해서는 옛날에 해달 홈페이지를 Next.js로 만들던 시절에 강아진 선생님과 많은 얘기를 나눴었다. 그때 나는 App router를 잘 몰랐기 때문에 그냥 FSD 구조를 똑같이 적용해보자고 얘기했었다. 이 과정에서 약간의 의견이 나뉘었지만, 결국 결론은 아진 선생님의 의견이 맞았다. 이거 때문에 서울에서 멘토님을 만나기 전 카페에서 공부할때 진짜 오랫동안 얘기를 나눴던 기억이 있다.

아무튼, 이번 프로젝트에서는 App router 의 구조에 맞게 FSD 구조를 변형하여 적용해보기로 했다.

5. 깃허브 댓글 기능 활용

"정적 페이지인데 댓글은 어떻게 관리하지" 라는 고민이 컸다. 사실 아직도 이 부분은 많은 고민을 하고 있다. 일단 댓글 관련해서는 원래 깃허브 댓글 기능을 활용하고 싶어서 디자인은 깃허브 댓글을 사용하는 것을 바탕으로 만들긴 했다.

하지만 그렇게 되면 "일상" 카테고리에 해당하는 글을 읽게되는 다른 사람들은 깃허브 계정이 없을 가능성이 크기 때문에 댓글을 작성하지 못할 수도 있겠다는 생각이 문득 들었다.

그래서 일단은 깃허브 댓글 기능을 활용하되, 추후에 다른 방법으로 댓글 기능을 대체할 수 있도록 고민해보기로 했다.

이때까지 만든 후기 및 앞으로의 계획

너무 오래 방치했다. 그렇게 방치하고 있는 동안 Next.js는 16버전이 새로 나왔고, React도 19.2 버전이 새롭게 나왔다. 그리고 처음에는 이 프로젝트에 AI를 많이 사용하지 않겠다고 마음먹었지만, 결국은 Claude Sonnet 4.5 를 많이 사용하게 되었다. GitHub Copilot이 학생 인증을 하면 무료로 제공된다는 사실을 알게 된 그 시점부터 이를 활용해서 Claude를 무지막지하게 많이 사용한 것 같다 ㅎㅎ.. 그래서 지금 10월이 끝날때 까지 일주일 정도 남았음에도 불구하고 토큰을 다 써버렸다.

앞으로의 계획은 이렇다. 일단 다음 계획한 프로젝트부터는 이 블로그에 꼼꼼히 글을 작성해서 흔적을 남겨볼려고 한다. 그리고 Header 부분에 해당하는 디자인도 좀 수정하고 싶다. 지금은 너무 촌스러운 느낌이 강하다. 인정한다 ㅠㅠ ..

그리고 SEO 최적화 관련된 부분도 좀 더 공부해보고, Open Graph나 메타 태그와 관련된 부분을 공부해서 Next.js를 사용하는 이유에 맞게 기능을 좀 더 이용해볼 수 있으면 좋을 것 같다.