블로그 제작 과정을 설명하기에 앞서, 왜 직접 블로그를 개발하게 되었는지, 어떤 기능을 구현했는지, 그리고 어떤 기술 스택을 선택했는지 정리해 보았습니다.
개발 과정에서 고민했던 점과 선택의 이유를 공유하며, 블로그 개발을 고려하는 분들께 도움이 될 만한 정보를 제공하고자 합니다.
왜 직접 블로그를 만들까?
개발자로서 블로그는 단순한 기록 공간이 아니라, 배운 내용을 정리하고 공유하며 성장하는 도구입니다.
Velog, Medium 같은 블로그 플랫폼을 사용할 수도 있지만, 저는 직접 블로그를 구축하기로 했습니다.
1. 커스터마이징의 자유
기존 블로그 플랫폼을 사용하면 별다른 설정 없이 쉽게 글을 작성할 수 있지만, 디자인이나 기능을 자유롭게 커스터마이징하는 데에는 한계가 있습니다.
저는 단순한 글 작성 도구가 아니라, 내가 원하는 방식대로 블로그를 운영하고 싶었습니다.
2. 성능 및 SEO 최적화
플랫폼을 이용하면 SEO 설정이나 퍼포먼스 최적화 같은 핵심적인 요소들을 직접 제어하기 어렵습니다.
하지만 블로그를 직접 개발하면 검색 노출 최적화, 빠른 로딩 속도, 그리고 사용자 경험(UX) 개선까지 모두 내가 원하는 방식대로 설계하고 개선할 수 있다는 점에서, 직접 블로그를 만들기로 결심했습니다.
기능 정리
구현할 기능을 정리하고, 필수 기능과 부가 기능을 구분하여 우선순위를 정했습니다.
1. 필수 기능
- 게시글 목록 페이지 (전체, 카테고리별)
- 게시글 상세 페이지
- 댓글 기능
2. 부가 기능
- 다크/라이트 모드
- 목차
- 스크롤 진행 상태 표시
- 예상 읽기 시간
- 검색 엔진 최적화 (SEO)
기술 스택 선정
블로그를 개발하는 과정에서 어떤 기술을 사용할지 고민이 많았습니다.
이 블로그에서 사용된 주요 기술 스택과 그 이유는 아래와 같습니다.
1. Next.js
Next.js는 현재 프론트엔드 개발에서 가장 인기 있는 프레임워크 중 하나입니다.
SEO 최적화와 빠른 성능을 고려해 Next.js를 선택했습니다.
2. Tailwind CSS, shadcn/ui
Tailwind CSS는 유틸리티 기반의 CSS 프레임워크로, 빠른 개발과 반응형 디자인을 신속하게 구현할 수 있어 선택했습니다.
shadcn/ui는 Tailwind CSS를 기반으로 깔끔한 디자인을 제공하며, 커스터마이징이 용이하여 선택했습니다.
3. MDX, next-mdx-remote
MDX는 Markdown과 JSX를 결합하여 동적인 콘텐츠를 쉽게 작성할 수 있어 선택했습니다.
next-mdx-remote는 Next.js와 함께 사용하여 원격 MDX 파일을 쉽게 가져와 렌더링할 수 있습니다.
이를 통해 외부 콘텐츠를 간편하게 불러오고 SEO 최적화에도 유리해 선택했습니다.
4. gray-matter
gray-matter는 Markdown 파일에서 메타데이터를 쉽게 추출할 수 있는 라이브러리입니다.
Markdown 파일의 헤더에 YAML 형식으로 메타데이터를 작성하여, 포스트의 제목, 날짜, 태그 등을 간편하게 관리할 수 있어 선택했습니다.
5. giscus
giscus는 GitHub Discussions 시스템을 기반으로 한 댓글 서비스입니다.
UI가 깔끔하고, GitHub과의 통합으로 관리가 편리해 선택했습니다.
6. Vercel
Vercel은 Next.js와 최적화된 호환성을 자랑하는 서버리스 클라우드 플랫폼입니다.
GitHub repository와 연동하여 CI/CD 파이프라인을 자동 설정할 수 있으며, 개인 도메인을 쉽게 연결할 수 있습니다.
편리한 배포 과정과 Next.js와의 높은 호환성 덕분에 선택했습니다.
마무리
다음 글에서는 프로젝트의 초기 설정과 셋업 과정을 다루며, 블로그의 뼈대를 본격적으로 만들어볼 예정입니다.
셋업 과정을 어떻게 진행했는지 궁금하시다면, 다음 포스팅도 기대해 주세요! 🚀