슬기로운 테크 블로그 생활

새로운 지식을 터득하거나 아이디어를 떠올릴 때면 나중에 다시 되돌아볼 수 있도록 나만의 방식으로 갈무리할 필요를 느끼곤 한다. 연구 노트 같은 전통적인 방식부터 구글 문서처럼 비교적 최근에 나온 도구들도 활용해 보았지만, 체계적인 관리가 힘들 뿐더러 주제를 분류하거나 오래된 내용을 탐색하는 것은 아무래도 불편했다. 그러던 중 우연히 GitHub Pages를 활용해 자신만의 테크 블로그를 운영할 수 있다는 글을 접하게 되었다. '이런 것도 가능하구나, 해보고 싶다...'라는 생각은 들었지만, 막상 시도해 보려니 알아야 할 것들이 너무 많아 선뜻 시작할 용기가 나지 않았다.

그렇게 마음속 버킷 리스트에만 담아두었던 꿈을 AI IDE를 접하고 나서 다시 꺼내보게 되었다. 테크 블로그 운영도 AI IDE의 도움을 받으면 가능하지 않을까? 그래, 기회는 지금 뿐이야.

네 시작은 미약하였으나

참고로, 블로그 운영 프로젝트를 시작하기 전 필자의 관련 지식 수준은 아래와 같았다. 이 정도 배경 지식만 가지고도 AI IDE의 도움을 받으면 이런 블로그를 만들 수 있다고 보면 되겠다.

GitHub Pages 라는 서비스가 있어서 나만의 도메인을 가지고 무료 호스팅을 할 수 있다는 것을 알고 있었다.
자바 스크립트 기반의 React, Electron 같은 최신 프레임워크들의 이름은 들어 보았지만 써 본 적은 없었다.
Git 을 이용한 개발은 어느 정도 익숙해진 상태였다.

어디서부터 시작하면 좋을까? 서비스 선택

이미 GitHub Pages에 대해 알고는 있었지만 다른 선택지가 있는지도 궁금했기에 Cascade에게 몇 가지 선택지를 물어보았고, 다음과 같은 추천을 받았다.

GitHub Pages
- 장점: 무료 호스팅, Git 기반 배포, 커스텀 도메인 지원
- 특징: 정적 웹사이트에 최적화, Jekyll 내장 지원
- 제한: 동적 서버 기능 부재, 저장소 크기 제한(1GB)
Netlify
- 장점: 무료 호스팅, 자동 배포, 폼 처리 기능
- 특징: 서버리스 함수 지원, 풍부한 통합 기능
- 제한: 무료 플랜에서 대역폭 제한(100GB/월)
Vercel
- 장점: Next.js 최적화, 자동 배포, 글로벌 CDN
- 특징: 서버리스 함수, 이미지 최적화, 미리보기 배포
- 제한: 무료 플랜에서 사용량 제한

주문을 할 때는 자세하게! 추가 요구사항 전달

우리의 친절한 이웃 Cascade가 몇 가지 제안들에 대해 자세한 설명을 해 주었지만, 이쪽 분야에서는 까막눈에 가까운 나에게는 솔직히 잘 와닿지는 않았다. 때문에 Cascade에게 나만의 요구사항을 몇 개 더 전달해 보았다.

첫째, 나는 나만의 도메인 주소를 가지고 싶다.
둘째, 가급적이면 많은 사람들에게 노출되었으면 좋겠다.
셋째, 스크래치부터 차근차근 쌓아올리는 과정을 보여줌으로써 내가 잘 모르는 분야라 하더라도 얼마든지 성과를 낼 수 있다는 것이 보여지면 좋겠다.

이러한 요구사항을 바탕으로 다시 검토한 결과, GitHub Pages가 가장 적합한 선택이라는 결론에 도달했다. 우선 GitHub Pages는 커스텀 도메인을 무료로 설정할 수 있어 첫 번째 요구사항을 충족시켰다. 'username.github.io'라는 기본 주소를 사용할 수도 있지만, 내가 원하는 도메인을 구매해서 연결하는 것도 가능했다. 이 블로그의 도메인 주소인 admelioradev.github.io 가 바로 그렇게 탄생한 결과물이다.

두 번째 요구사항인 '많은 노출'을 위해서는 SEO(검색 엔진 최적화)가 중요한데, GitHub Pages와 Next.js의 조합은 정적 사이트 생성(SSG)을 통해 검색 엔진에 최적화된 페이지를 만들 수 있었다. 또한 GitHub이라는 플랫폼 자체가 개발자 커뮤니티에서 높은 인도를 가지고 있어, 기술 블로그의 노출에 유리하다는 점도 고려했다.

마지막으로, '스크래치부터 차근차근 쌓아올리는 과정'을 보여주기 위해서는 코드의 모든 부분을 직접 제어할 수 있어야 했다. GitHub Pages는 완전한 커스터마이징이 가능하고, Git을 통한 버전 관리로 변경 과정을 모두 기록할 수 있어 학습 과정을 투명하게 보여줄 수 있었다. 특히 AI IDE의 도움을 받아 처음부터 구축하는 과정을 기록하기에 적합했다.

그 다음은? 기술 스택 구성하기

호스팅 서비스를 GitHub Pages로 결정했으니, 이제 블로그를 만들기 위한 기술 스택을 선택해야 했다. 테크 블로그를 구축하기 위해서는 크게 세 가지 요소가 필요했다.

프레임워크: 웹사이트의 기본 구조와 기능을 담당
스타일링: 웹사이트의 디자인과 시각적 요소를 구현
콘텐츠 작성 문법: 블로그 글을 효율적으로 작성하고 관리

이 세 가지 요소에 대해 내 요구사항과 학습 곡선을 고려해 다음과 같은 기술들을 선택했다.

Next.js

Next.js는 React 기반의 프레임워크로, 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 모두 지원한다. 블로그와 같은 콘텐츠 중심 웹사이트에는 SSG가 특히 유용한데, 이는 빌드 시점에 모든 페이지를 미리 생성해 놓기 때문에 로딩 속도가 빠르고 SEO에도 유리하다.

GitHub Pages와의 호환성이 좋다
파일 기반 라우팅으로 페이지 구조를 직관적으로 관리할 수 있다
이미지 최적화, 코드 분할 등 성능 관련 기능이 내장되어 있다
React 생태계의 방대한 라이브러리를 활용할 수 있다

Tailwind CSS

스타일링을 위해서는 Tailwind CSS를 선택했다. 유틸리티 우선 접근 방식의 CSS 프레임워크로, 클래스 이름을 통해 직접 스타일을 적용할 수 있어 빠르게 디자인을 구현할 수 있다.

별도의 CSS 파일을 작성하지 않고도 HTML 내에서 스타일링이 가능하다
반응형 디자인을 쉽게 구현할 수 있다
다크 모드 지원이 간편하다
커스터마이징이 용이하다

MDX

콘텐츠 작성을 위해서는 MDX를 사용하기로 했다. MDX는 마크다운에 JSX를 결합한 형식으로, 일반 텍스트로 콘텐츠를 작성하면서도 필요할 때 React 컴포넌트를 삽입할 수 있는 유연성을 제공한다.

마크다운의 간결함과 React의 강력함을 동시에 활용할 수 있다
코드 블록에 구문 강조 기능을 쉽게 추가할 수 있다
커스텀 컴포넌트(예: 시리즈 네비게이션)를 콘텐츠 내에 삽입할 수 있다
메타데이터 관리가 용이하다

이렇게 GitHub Pages, Next.js, Tailwind CSS, MDX라는 기술 스택을 선택하고 나니, 이제 실제로 블로그를 구현할 차례였다. 다음 포스트에서는 이 기술 스택을 바탕으로 실제 프로젝트를 생성하고, 이를 GitHub Pages에 올려 메인 페이지 화면을 호스팅하기까지의 과정을 정리해 볼 예정이다.

슬기로운 테크 블로그 생활 - 첫 걸음마