개발을 하다 보면 배운 것들을 기록하고 공유하고 싶은 순간이 있습니다.
그동안 나름 정성껏 꾸몄던 티스토리에서 글을 작성해 왔지만, 여러 한계를 느끼면서 직접 블로그를 만들기로 결심했습니다.
이 글에서는 블로그를 만들게 된 이유와 기획 및 설계 과정을 정리해보겠습니다.
블로그를 직접 만들기로 한 이유
자유로운 커스터마이징의 어려움
해당 플랫폼에서는 기본적인 커스터마이징이 가능하지만, 원하는 디자인을 구현하는 데에는 한계가 있었습니다.
가끔씩 집안 가구 배치를 바꾸듯 블로그의 UI도 자유롭게 바꿔보고 싶었습니다.
직접 블로그를 만들면 디자인과 기능을 원하는 대로 커스터마이징 할 수 있을 뿐만 아니라,
블로그 자체가 하나의 프로젝트가 되어 지속적으로 개선해 나갈 수 있다는 점이 흥미로워보였습니다.
비효율적인 글 작성 방식
저는 글을 노션에서 작성한 후, 블로그에 업로드 하는 방식으로 글을 관리했습니다.
하지만 이 과정에서 복사 & 붙여넣기를 하면 포맷이 깨지는 문제가 자주 발생했습니다.
마크다운 형식으로 붙여넣기를 해도 제대로 변환되지 않는 경우가 많아 추가적인 수정 작업이 필요했고,
이 과정이 반복되다 보니 불필요한 시간이 소모되었습니다.
보다 효율적인 워크플로우가 필요하다고 판단하여 직접 블로그를 구축하기로 했습니다.
FE 개발자로서의 작업물
기술 블로그를 운영하는 여러 개발자분들을 보면서 각자의 개성이 담긴 블로그가 인상적이었습니다.
프론트엔드 개발자로서 나만의 색이 담긴 블로그를 직접 만들어보고 싶었습니다.
또, 단순한 글 작성 도구를 넘어 블로그를 통해 개발자로서의 정체성을 표현하는 것이 목표 입니다.
예를 들어…
- UI/UX 개선 (다크 모드, 스크롤 진행 바, 애니메이션 등)
- SEO 최적화 및 방문자 데이터 분석
- GitHub 기반의 댓글 시스템 도입 (개발자들과 소통을 위함)
이처럼 기능을 자유롭게 추가하며, 개발자로서의 역량을 쌓아갈 수 있다는 점도 직접 블로그를 만들기로 한 중요한 이유였습니다.
블로그 기획 과정
블로그를 만들기로 결심한 후, 먼저 어떤 기능을 넣을지 고민했습니다.
기능 정리
필요한 기능
- 글 목록 페이지 (전체, 카테고리별, 태그별)
- 글 상세 페이지 (마크다운 기반으로 된)
- 댓글 기능 (GitHub 기반)
부가적인 기능
- 다크 모드 지원
- 목차 사이드바
- SEO 및 데이터 분석 (검색 노출 향상, 방문자 데이터 추적)
- 탑 & 다운 버튼
- 스크롤 진행 바
- etc…
기술 스택 선택
다양한 옵션을 고려한 끝에 다음과 같은 기술 스택을 선정했습니다.
1. 프레임워크 : Next.js 15
Next.js 는 프론트엔드 생태계에서 핫한 프레임워크이기도 하고, 검색 엔진 친화적인 SSR/SSG 기능을 제공합니다.
- 서버에서 미리 HTML을 생성하여 초기 로딩 속도가 빠름
- 디렉토리 구조 기반의 깔끔한 라우팅 지원
- 공식 배포 플랫폼인 Vercel과의 뛰어난 연동성
이러한 이유로 Next.js를 선택했습니다.
2. 디자인 : Tailwind + shadcn/ui
Tailwind의 경우, 미리 정의된 클래스를 활용해서 빠르고 일관적인 디자인을 적용할 수 있습니다.
개인적으로 클래스를 직접 작성하는 것보다 tailwind의 문법에 익숙하여 선택했습니다.
shadcn/ui는 Tailwind 기반으로 제작되었으며,
다크 모드와 모달 등 다양한 UI 요소를 제공하여 커스터마이징이 용이하여 선택했습니다.
3. 글 작성 : MDX
MDX는 기본적으로 마크다운 문법을 기반으로 하면서도 JSX를 사용할 수 있어,
인터랙티브한 요소 추가가 가능합니다.
Next.js에서도 공식적으로 MDX를 지원하고 있어 선택했습니다.
4. 댓글 : Giscus (GitHub 기반 댓글 시스템)
🔗 Giscus
Giscus는 GitHub Discussions을 활용한 댓글 시스템으로, 별도의 데이터베이스 없이 댓글을 관리할 수 있습니다.
- GitHub 계정으로 로그인 가능 (스팸 방지 효과)
- 마크다운 지원으로 개발자들과의 소통이 용이
- 간편한 설정 및 유지보수 가능
이와 같은 장점 덕분에 Giscus를 댓글 시스템으로 선택했습니다.
5. 배포 : Vercel
Vercel은 Next.js와의 호환성이 뛰어나며, 서버리스 환경을 제공하는 배포 플랫폼입니다.
- 자체 서버를 구성할 필요 없이 간편한 배포 가능
- GitHub 연동을 통한 CI/CD 자동화 지원
이와 같은 이유로 Vercel을 선택했습니다.
마무리하며
이번 글에서는 블로그를 직접 만들게 된 이유와 기획 및 기술 스택 선택 과정에 대해 정리해봤습니다.
작년부터 계획만 해오던 나만의 블로그 제작을 드디어 시작하게 되었습니다.
처음부터 끝까지 직접 개발하며 더 나은 블로그 환경을 구축하는 과정 자체가 큰 배움이 될 것이라 기대됩니다.
블로그 제작 과정을 시리즈로 정리해 기술 블로그 구축 과정을 기록할 예정입니다.
현재 저는 ‘글또’를 통해 2주 단위로 글을 작성하고 있습니다.
이 기간에 맞춰 블로그를 개발하면서 경험을 공유할 예정입니다! (자체 스프린트…)
다음 글에서는 Next.js 기반의 블로그 개발 시작하기에 대해 다뤄보겠습니다! 🚀