안녕하세요. 이번에는 create-next-app을 사용해서 Next.js 앱을 만들어보고, 어떤 니즈를 가지고 있는지, 어떻게 만들어 가려는지를 공유하려 합니다.
이번 포스트를 쓰기 전부터 많은 고민을 했었는데
- 너무 기술적으로 쓰면 제작기라는 이름에 맞지 않고,
- 어떻게 만들었는가를 쓰기 위해 경험만 나열만 하다 보면 일기가 됩니다.
이 사이에서 균형을 어떻게 맞출 수 있겠냐는 생각을 많이 했었습니다. 글을 쓰면서 최대한 중심을 유지할 수 있도록 균형을 잘 맞춰보겠습니다.
블로그에 필요한 내용
먼저 환경을 세팅하기 전에 블로그에 있었으면 하는 기능들을 나열한 후에, 그 정보들을 가지고서 어떤 라이브러리, 템플릿을 사용할 수 있을지를 맞춰보려 합니다.
필요한 기능들을 정리해보니,
- 포스트를 업로드하고 관리할 수 있는 관리자 페이지가 있어야 하며,
- 포스트는 Markdown 방식으로 작성 가능하며, 코드 블럭을 올릴 수 있어야 하고,
- 블로그에 접속한 사람들의 트래픽을 추적할 수 있어야 한다.
세 가지로 정리가 되었습니다. 이 기능들을 구현하기 위해서 간편하게 Headless CMS를 쓸까 고민을 해보았습니다.
Headless CMS
Headless CMS에 대해 간단히 설명하자면, 먼저 CMS는 Content Management System의 약자로 말 그대로 컨텐츠를 관리하기 위한 시스템(소프트웨어)을 말합니다. 컨텐츠로는 뉴스 기사가 될 수도, 온라인으로 판매하는 옷이 될 수도, 블로그 포스트가 될 수도 있습니다.
CMS를 사용하면 모든 기능을 직접 구현하지 않고도 제작한 컨텐츠를 관리하고, 보여줄 수 있습니다. 대표적인 소프트웨어들로 워드프레스가 있으며, Wix, Shopify 등이 있습니다.
여기서 Headless가 붙으면 앞에서 이야기했던 관리하고 보여주는 기능 중에서 관리하는 기능만을 담당하게 됩니다. 컨텐츠를 어떻게 보여주느냐는 사용자가 직접 결정해야 한다는 뜻이죠.
다시 본론으로 돌아와서 Next.js가 제공해주는 템플릿에는 Headless CMS가 기본적으로 연동되어있는 템플릿도 포함되어 있습니다.
앞서 소개했었던 Static Generation 예제들 중 많은 예제들이 Headless CMS를 사용한 예제입니다. 저와 같은 방법으로 블로그를 만들고 싶다면 이 중에서 어떤 걸 사용할지 제품별로 장단점을 분석하고 본인에게 맞는 제품을 사용해서 만들면 됩니다.
저는 아직 블로그를 시작하고 있는 단계이고, CMS를 사용해서 컨텐츠를 관리할 만큼 문서의 양이 많지 않아서 일단은 Markdown 파일들을 프로젝트 안에 넣어서 제공하는 예제를 사용하였습니다. Markdown만으로 커버가 불가능하거나 CMS를 사용해서 글을 올릴 만큼의 양이 되면 다시 블로그 확장기로 찾아오겠습니다 😆
Next.js 생성 및 디렉터리 구조
어떤 예제를 사용할지 결정했으니, 바로 Next.js 앱을 만들기로 했습니다.
npx create-next-app --example [example-name]위 명령어를 실행하면 간단하게 Next.js 앱을 생성할 수 있습니다.
example-name에는 본인이 만들고 싶은 예제 이름을 넣으면 되는데 Github의 Examples 페이지에서 확인한 후에 맘에 드는 예제를 사용하면 됩니다.
저는 blog-starter-typescript를 사용하여 만들었습니다. 위에서 얘기했던 프로젝트 안에서 컨텐츠를 공급하는 방식으로 블로그를 제공하는 예제입니다.
그리고 만든 다음에 프로젝트를 지속해서 관리하기 위해 Github에 저장소를 업로드했습니다.
- Github Actions를 사용해서 블로그를 지속적으로 배포, 관리
- Issues와 Projects에서 블로그에서 바꾸고 싶은 기능, 올릴 컨텐츠들을 트래킹
Github의 기능들을 사용해서 두 가지의 관리를 하려 합니다. 운영하면서 더 늘릴 계획도 가지고 있구요. 블로그를 운영할 때 중요한 점은 시작을 하는 것이 반이라면, 지속적으로 관리를 해주는 것이 나머지 반이라고 생각하고 있어서 습관을 들여놓기 위한 기반이라고 생각하면서 만들고 있습니다.
제작기는 여기서 끝..
개발자로서 처음 글을 쓸 주제를 고민하다가 블로그 제작기를 쓰게 되었습니다. 그렇게 시작한 블로그 제작기는 여기서 빠르게 마치려고 합니다. 블로그의 스타일 교체나 디렉터리 구조 변경과 같은 기술적인 부분을 따로 포스트로 만들 생각입니다.
유용한 정보를 제공하는 글은 아니었지만 한 분이라도 이 포스트를 보면서 블로그를 시작할 수 있는 계기가 되면 좋겠습니다. 이 포스트를 마치면서 첫 스텝을 밟는 게 힘들고 두렵지만 쓰고 나니 별거 아니었다는 생각도 드네요.
기술적으로 많은 것을 공유할 수 있도록 이번 포스트를 시작으로 블로그를 활성화하도록 꾸준하게 노력해보겠습니다. 감사합니다 🙏
