필자는 기술 블로그를 종종 써왔는데 블로그 플랫폼인 벨로그와 Jekyll을 사용한 오픈소스 정적 웹사이트를 사용해봤고, 현재 블로그인 Next.js로 구현하는 단계까지 거치면서 경험한 후기를 정리해볼까 한다.
기술 블로그 운영하는 방법 참 많고많다
그 과정까지의 선택을 간략하게 말해보자면, 맨 처음 기술 블로그를 입문할 때 가장 만만한 플랫폼들을 살펴보았다. 그 중 가장 심플하면서 사용감이 좋았던 Velog를 선택했었다. 하지만 사용을 하다보니 뭔가 내가 직접 운영하고 커스텀하는 기술 블로그를 만들어보고 싶었다. (FE의 숙명인 느낌이랄까..?)
그래서 바로 또 손쉽게 만들어볼 수 있는 개발방법을 찾아보다가 Github pages에 배포하고 나만의 도메인에서 블로그 글을 작성해보면 어떨까 싶었다. 그렇게 Github 블로그 만드는 방법에 대해 서칭하다가 괜찮아보이는 테마를 발견하고 해당 오픈소스를 통해 블로그를 생성했다. 그런데 이것도 사용하다보니 불편 사항이 꽤 존재했다. 문법을 익히고 구조를 따라야했기 때문에 생각만큼 마음대로 커스텀 하기가 쉽지 않았다. 쉽게 mdx 파일로 글을 작성하고 제공하는 기능들도 많았지만 뭔가 내 것이 아니라는 느낌을 크게 받았다.
그와 동시에 Next.js를 학습하고 싶은 마음이 컸기 때문에 Next로 블로그 페이지를 만들어보자고 다짐했다.
그래서 직접 만들고 어떤게 좋은데?
나의 블로그를 운영하면서 가진 목표는 다음과 같다.
1. FE 개발자로서의 작업물
앞서 말한 것처럼 FE의 커리어를 생각해봤을 때 직접 만든 블로그 하나 정돈 가지고 지식들을 차곡히 쌓아나가는 것이 좋을 것이다.
지금까지 했던 프로젝트를 정리하고 좋은 지식들을 정리하는 습관을 가지면 좋겠다.
2. Next.js 학습하기
-
Next.js의 App Router의 다양한 활용
-
마크다운 문법을 Next.js에서 활용
유레카 교육을 들으면서 React에 대한 프로젝트 및 학습은 어느정도 했고, 현재 현업에서 많이 쓰이고 있는 Next를 학습할 예정이었다. 교육 과정에서 멘토님들도 많이 말씀해주신 부분이다.
Next.js로 블로그를 구현해보면서 여러가지 학습하는 과정을 거칠 것이다.
3. 커스텀 디자인 제한 없이
내가 원하는 대로 디자인하고 기능을 추가해나가는 식으로 블로그를 운영할 것이다.
기존 블로그 서비스에도 있는 기능이겠지만 포함하고 싶지 않은 코드나 규모를 생각해봤을 때 불필요한 부분이 많다고 생각했다.
최소한의 UI 코드만 포함시켜 유지보수 작업을 용이하게 할 것이다.
4. SEO, 메타데이터 관리
많은 블로그 플랫폼에서 통계, SEO 등 다양한 기능을 제공하기도 한다.
하지만 직접 SEO를 구축해보고 메타데이터의 양식이나 이미지까지 커스텀하여 효과적인 웹 페이지를 만들고 싶다.
사람들이 검색을 통해서 블로그로 유입되기 때문에 SEO를 잘 처리하는 것이 가장 중요할 것이다.
내가 선택한 Vercel Blog 방식
나는 Next.js로 블로그를 만들고 Vercel로 배포할 계획이었기 때문에 여러 레퍼런스를 찾아보았다.
그러다가 하조은님의 인프런 강의를 통해 Next.js + Vercel 방식을 참고할만한 레퍼런스를 찾게 되었다.
해당 강의에서 Vercel의 CEO인 Guillermo Rauch와 VP인 Lee Robinson의 블로그 템플릿을 살펴보면서 Next.js를 이용해서 어떤 방식으로 블로그를 만들 수 있는지 살펴보았다.
Guillermo 방식은 글을 코드 형태로 관리하고, Lee 방식은 글을 데이터 형태로 관리한다는 차이점이 있었다.
두 사람의 블로그는 GitHub에 공개되어 있다.
-
Guillermo Rauch - https://github.com/rauchg/blog
-
Lee Robinson - https://github.com/leerob/site
Vercel 리더십의 블로그 아키텍쳐를 표로 정리하면 다음과 같다.
| Guillermo | Lee | |
|---|---|---|
| 데이터 관리 | 글을 코드로 | 글을 데이터로 |
| 라우팅 | Route Groups | Dynamic Routes |
| 렌더링 | Incremental Static Regeneration | Partial Prerendering |
| 메타데이터 | Static Metadata | Dynamic Metadata |
추가 기능
추가로 덧붙일 기능들은 다음과 같다.
- 다크 모드
- 목차 (TOC 배너)
- 프로그레스 바
- 시리즈물 형식
- 댓글
- ...etc
Conclusion
일반적인 Next.js 블로그와 동일한 방식이고, 글을 데이터 형태로 관리하는 Lee의 방식이 조금 더 확장성 있을 것 같다.
필자는 특별한 단점이 없고 마이그레이션 등에 용이한 방식인 Lee의 방식을 참고하여 블로그를 구현하였다.
또한 추가적으로 기능을 붙여야 하는 부분이 많기 때문에 어떤식으로 구현했는지 시리즈로 다뤄보도록 하겠다!