Next.js 로 블로그 만들기

블로그 왜 만들어 쓰나?

개발자로서의 나의 버킷리스트 중 하나는 블로그를 직접 만드는 것이었다.

• 내가 원하는 디자인과 기능을 자유롭게 구현해보고 싶었고
• 개발 경험과 SEO, 배포까지 익히고 싶었다

티스토리와 같은 플랫폼에서도 스킨을 편집하거나 직접 만들어볼 수 있지만, 스킨 편집 시 웹상에서 코드를 수정하는 UI 가 다소 불편했고 복잡한 코드가 있어서 해당 방법은 패스했다. 그래서 직접 Next.js 기반으로 블로그를 만들어 보기로 했다. 🧐

기술 스택 및 도구

이 블로그은 Next.js 15 App Router 기반의 SSG 구조로 개발하였다. Next.js 의 정적 생성 기능은 SEO 에 최적화되어 있으며, 빌드 시점에 페이지를 HTML 로 생성하여 빠른 응답 속도를 제공한다.

모든 게시글은 .md 파일로 작성하고, Github 애 push 하면 자동으로 빌드되며 게시된다. 변경 가능성이 낮은 콘텐츠에 적합한 구조이라고 생각했다.

프로젝트 구조

글 작성을 위한 폴더 구조

프로젝트의 루트 폴더 내 posts 디렉터리에 블로그 글을 아래와 같은 구조로 저장한다.

posts
 ┣ etc
 ┃ ┗ 블로그-만들기.md
 ┣ javascript
 ┗ react

어떤 구조를 선택해야 사용하기 편할까 고민한 끝에, 카테고리별로 게시글을 직관적으로 관리할 수 있는 구조를 채택했다.

검색엔진 최적화

구글 검색에 블로그를 노출시키기 위해 Google Search Concole 을 통해 도메인을 등록하고, sitemap.xml 과 robots.txt 를 함께 설정했다.

• 도메인 : jungminji.com (가비아에서 구매)
• 색인 요청 : sitemap 제출 후 며칠 뒤 직접 검색으로 노출 확인

구글에 내 블로그 이름을 검색해보니까 내 블로그가 보였다! (신기방기) 잘 된거겠지? ㅎㅎ

개선 방향

아직 부족한 점이 많고, 추가하고싶은 기능도 많아서 갈 길이 멀다. 🛣️ 앞으로 추가하고 싶은 기능은 다음과 같다.

목차
검색
다크모드

후기

처음에는 배포만 하면 다 되는 줄 알았다. (ㅋㅋ) 아무런 설정 없이도 구글이 내가 작성한 글을 자동으로 노출해주는 줄 알았는데.. 실제로는 SEO 설정과 최적화 등 생각보다 많은 작업이 필요하다는 것을 알게되었다. 직접 블로그를 만들어 보면서 어떤 설정들이 검색 노출에 영향을 미치는지, 어떻게 하면 글이 더 잘 보이게 할 수 있는지 등 많은 것을 배울 수 있을 것이라고 생각했고 실제로 학습에 많은 도움이 되었다. 🥹

마지막으로... 솔직히 만들어보고나니 이렇게 하는 것이 맞나? 의문이 많이 든다. 내가 개발한 방식이 누가 보기엔 왜 저렇게 하지? 라는 생각이 들 정도일수도 있을 것이다. 하지만, 개발에는 가장 적합한 방식은 있을지라도 정답은 없다 생각하기에 다양한 방법을 찾아가면서 이리저리 시도해볼 생각이다.