기술 블로그를 만들 때 고려해야 할 점

블로그 제작 과정
기술 스택 선정하기
- Gatsby vs Next.js

블로그를 만드는데 생각보다 고려해야할 사항이 많습니다.
어떤 레이아웃을 갖어야 할지, 기능을 어디까지 제공해줘야 할지, 리소스를 어떻게 관리할지...
그 중 SEO를 잘 처리하는 것이 가장 중요한 것 같습니다. 사람들이 검색을 통해서 블로그로 유입되기 때문입니다.

블로그 제작 과정

블로그 제작 과정을 요약해보면 고려해야할 점을 자연스럽게 알게 됩니다.

1. 기본 레이아웃 세팅 (+ 반응형)

다양한 블로그를 탐방하면서 참고하기 좋은 레퍼런스를 기록해두면 좋습니다.
결국 모방하면서 나만의 레이아웃을 구축할 수 있게 되기 때문이죠.
저는 아래 블로그들에서 영감을 얻었습니다.

2. 디랙토리 기반으로 페이지 생성

마크다운 파일 디랙토리 기반을 블로그 페이지를 생성하게 됩니다.
따라서 디랙토리 구조 또한 사전에 잘 설계를 해야 합니다.

보통 날짜 기반으로 유닉한 디랙토리를 생성합니다.

/2022/11/example

posts
ㄴ 2022
   ㄴ 11
      ㄴ example.mdx

3. 마크다운 파일을 HTML 파일로 파싱

remark과 rehype를 활용해서 마크다운 파일을 파싱할 수 있습니다.
추가로 mdx을 활용하여 마크다운 파일에서도 jsx 컴포넌트를 사용할 수 있습니다.

4. 사이트 자동 배포 구축

github pages에 무료로 호스팅을 할 수 있습니다.
Github Action을 통해서 commit을 push시 자동으로 배포되도록 합니다.

5. SEO 최적화 + 검색엔진 등록

크롤러에게 HTML 문서의 주요 정보를 제공해주면 검색엔진 등록, SNS 공유시 도움이 됩니다.
대표적으로 Open Graph을 활용하는 방법이 있습니다.

<meta property="og:url" content="" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />

자세한 내용은 인터넷에서 참고 바랍니다.
https://blog.ab180.co/posts/open-graph-as-a-website-preview

6. 추가 기능 붙이기

댓글
이미지 랜더링 최적화
이미지 삽입 최적화
이미지 확대
TOC 배너
다크모드
...

기술 스택 선정하기

개인 블로그는 생각보다 유지보수에 많은 시간을 쏟아야 합니다.
따라서 자신에게 친숙한 도구를 사용하는게 좋습니다.

저는 여러 기능을 첨가하고 조금은 복잡한 UI를 만들 것이기 때문에 typescript를 사용했고,
레이아웃을 쉽게 구축하기 위해 tailwindcss를 사용했고,
개인적으로 친숙한 React 기반의 프레임워크를 사용하기로 했습니다.

Gatsby vs Next.js

사실 둘러보면 대체로 Gastby로 블로그 만드는 것을 볼 수 있습니다.
gastby-plugin에서 마법같은 기능들을 제공해줘서 쉽게 블로그를 구축할 수 있기 때문입니다.
하지만 graphQL에 의존적이여 불필요하게 웹앱이 무겁게 돌아가고 라이브러리 버전업에 취약합니다.
gastby 버전을 올리는 순간 기존 플로그인들이 대거 충돌됩니다.

Next.js는 이에 비해 훨씬 유연하고 의존성에 덜 취약합니다.
요즘 커뮤니티도 훨씬 활성화 되어 있고 nextra 같은 site generation 프레임워크도 있습니다.

다만 만약 static-html(github pages, nestify)를 생각한다면 Nextjs Unsupported Features에 대해서 꼭 확인하시길 바랍니다.
vercel에 배포하는 것이 정신 건강에 의로울 수 있습니다.

그럼 자세히 어떻게 만드는지 살펴보도록 합시다.