제가 Next.js로 블로그 만들었던 걸 정리하려고 해요. 주제 선정부터 페이지 구성, 디자인 방향, 개발 환경 세팅, 협업 방식까지 단계별로 ‘어떻게’ 함께 해나갈지 쉽게 이해할 수 있도록 설명할게요.

블로그 주제를 정하기#

블로그에서 가장 중요한 건 어떤 내용을 다룰지 주제를 선택하는 거예요.
개발자라면 코딩 테스트, 취업 준비, 프로젝트 경험, 오류 해결 같은 주제가 좋고, 일상 블로거라면 맛집, 여행, 독서 이야기 등으로 시작할 수 있어요.
누가 내 글을 읽을지 예상 독자를 생각하며 주제를 꾸리면 방문자와 소통도 더 잘 되고, 글에 집중할 힘이 생겨요.

페이지마다 구성을 계획하기#

메인 화면과 게시글 상세 페이지는 꼭 만들어야 해요.
저는 책 목록, 태그별 게시글, 나를 소개하는 ‘About me’ 페이지도 추가했었어요.

각 페이지가 어떤 역할을 할지, 사용자가 어떤 흐름으로 사이트를 돌아다닐지 미리 설계해요.
예를 들어 메인 화면에서는 최근 글 3개를 상단에 배치하고, 나머지 글들을 날짜순으로 보여줘요.
각 글은 이미지 포함, 클릭 시 상세 페이지로 넘어가게 만들 거예요.

블로그 디자인 정하기#

편안하고 집중하기 좋은 스타일을 고민해 보아요.
읽기 편한 글꼴과 여백, 직선을 활용한 깔끔한 디자인도 좋고요.
이때 TailwindCSS를 활용하면 빠르게 스타일 작업을 할 수 있고, 모바일부터 대형 모니터까지 반응형으로 맞출 수 있어서 좋아요.

제가 찾은 사이트들인데 참고해보세요:

• 직선을 활용한 웹 사이트 디자인들
• Frank Noirot
• Tailwind Nextjs Starter Blog
• https://gumroad.com/

마크다운 메타데이터 정하기#

글마다 제목, 날짜, 카테고리, 시리즈, 태그, 대표 이미지 같은 메타데이터를 넣어 관리하면 좋아요.
이렇게 하면 태그별, 시리즈별 정렬과 필터 기능 구현도 훨씬 쉬워져요. 예를 들어 한 게시글 파일 상단에 이런 정보를 명확히 적어 두는 거죠.

이렇게 많이 추가해도 좋지만, 저는 2~5개만 넣는 걸 추천할게요. 저는 3개만 쓰고 있어요. (title, date ,tags)

title: Welcome Docusaurus
date: 2021-09-13T18:00
description: This is my first post on Docusaurus.
slug: welcome-docusaurus-v2
authors:
	- name: Joel Marcey
	title: Co-creator of Docusaurus 1
	url: https://github.com/JoelMarcey
	image_url: https://github.com/JoelMarcey.png
	- name: Sébastien Lorber
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false

개발 환경을 구성하기#

Node.js 런타임과 npm 패키지 매니저를 쓰고, 개발 IDE는 VS Code를 선택했어요.
VS Code에서는 필수 확장 프로그램(Prettier, ESLint, Tailwind CSS IntelliSense 등)을 설치해요.

코드 스타일은 Prettier로 통일하고, ESLint로 문법 경고만 내도록 설정해요. 또한 원하는 만큼 커스텀해도 좋아요.
Git 브랜치는 main은 배포용, dev는 개발용으로 관리하고, GitHub Actions로 CI/CD 자동화를 해요.
상태 관리는 Zustand나 Recoil 등 원하는 것으로 하시면 돼요.

아마 아래의 스택으로 구성될 거예요:

• Next.js
• React
• TailwindCSS
• Typescript && Javascript

페이지별 작업 스펙을 정하기#

저는 아래처럼 구성을 생각해봤어요. 참조하시고 개선해보셔도 좋겠어요.

• 메인 화면: 최근 게시글 3개를 상단에, 나머지는 날짜순으로 목록화. 검색 필터 추가하기.
• 책 화면: 읽은 책, 읽고 있는 책, 읽고 싶은 책을 구분해 각각 필요한 정보를 보여주고, 상세 페이지에 이미지와 서평, 구매 링크 추가하기.
• 게시글 상세 페이지: 제목, 작성 날짜, 예상 읽기 시간, 공유 버튼을 상단에 두고 본문은 마크다운을 HTML로 변환해 보여주기.
• 시리즈 화면: 시리즈별 게시글 수와 리스트, 없는 시리즈는 메뉴에서 제외하기.
• 태그 화면: 태그별 게시글 수와 필터링 기능 제공하기.
• 소개 페이지: 사진 캐러셀과 인사말, SNS 링크 아이콘 배치하기.

실제 개발에 들어가기 전에 전반적인 구조를 머릿속에 그려 보면서 필요한 세부 항목을 스펙 문서로 정리해 두면 개발하는 동안 혼란이 줄고 좋은 결과물을 얻을 수 있어요. 멋진 블로그 만들어 봐요!

Time is the wisest counsellor of all.

— Pericles